/* Polices chargées via dans le des pages (chargement parallèle, plus rapide que @import qui bloquait le rendu). DESIGN MOBILE PREMIUM BEIGE NUDE — inspiré par interface premium minimaliste Spacing optimal, shadows chaleureuses, radius généreux, interactions fluides */ /* ===== RESET ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================= PALETTE ITIQAAN #faf7f2 nude clair (référence — sections paires / cards) #ede5da nude moyen (référence — sections alternées) #f0ebe3 nude base (body background) #e5dbd1 nude profond (accents nude) #b9bfb0 sauge clair #76775b olive — accent principal #5e5c42 olive foncé — hover #a19f66 olive doré #262f24 vert très foncé — footer/CTA #333227 brun-olive foncé #4b3522 brun foncé — TEXTE #774529 brun moyen #a86742 terracotta #bb886b terracotta clair #bf9a84 sable rosé ============================================= */ :root { --bg: #F7F4EF; --bg-alt: #F7F4EF; --bg-card: #F7F4EF; --bg-dark: #262f24; --bg-dark2: #333227; --primary: #9E8C7C; --primary-dark: #8a7969; --primary-light: #9E8C7C; --accent: #9E8C7C; --accent-dark: #8a7969; --accent-light: #9E8C7C; --sand: #9E8C7C; --gold: #9E8C7C; --text: #3D2B1F; --text-mid: #3D2B1F; --text-muted: #3D2B1F; --text-light: #3D2B1F; --white: #FFFFFF; --border: #D9D0C7; --border-warm: #D9D0C7; --font-title: 'Amoresa', 'Cormorant', 'Playfair Display', serif; --font-body: 'Old Standard TT', Georgia, 'Times New Roman', serif; --font-ui: 'Old Standard TT', Georgia, serif; --shadow: 0 8px 28px rgba(75,53,34,.12); --shadow-lg: 0 12px 48px rgba(75,53,34,.18); --shadow-warm: 0 10px 36px rgba(168,103,66,.16); --radius: 18px; --radius-lg: 28px; --ease: all .3s ease; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.75; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; height: auto; } a { text-decoration: none; color: inherit; } ul { list-style: none; } /* ===== TYPOGRAPHY ===== */ h1, h2, h3, h4 { font-family: var(--font-title); line-height: 1.25; color: var(--text); } h1 { font-size: clamp(2rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); } h3 { font-size: clamp(1.15rem, 2.5vw, 1.55rem); } h4 { font-size: 1.1rem; } p { font-family: var(--font-body); } /* ===== LAYOUT ===== */ .container { max-width: 1160px; margin: 0 auto; padding: 0 28px; } .header .container { max-width: 100%; margin: 0; padding: 0 24px; } .section { padding: 96px 0; } .section-alt { background: var(--bg-alt); } /* ===== BOUTONS ===== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 32px; border-radius: 50px; font-family: var(--font-body); font-size: .95rem; cursor: pointer; transition: var(--ease); border: 1.5px solid transparent; letter-spacing: .3px; } .btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-warm); } .btn-outline { background: transparent; border-color: var(--primary); color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--white); transform: translateY(-2px); } .btn-dark { background: var(--bg-dark); color: var(--white); border-color: var(--bg-dark); } .btn-dark:hover { background: var(--bg-dark2); transform: translateY(-2px); } .btn-white { background: var(--white); color: var(--text); } .btn-white:hover { background: var(--bg-alt); transform: translateY(-2px); box-shadow: var(--shadow); } /* ===== HEADER / NAV ===== */ /* ── Header : capsule flottante en verre dépoli (2026-08) ── */ .header { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 26px)); z-index: 1000; transition: background .35s ease, box-shadow .35s ease, padding .35s ease, top .35s ease; padding: 9px 16px 9px 22px; border-radius: 999px; background: rgba(247,243,237,.55); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: 1px solid rgba(255,255,255,.42); box-shadow: 0 14px 38px rgba(58,40,24,.17), inset 0 1px 0 rgba(255,255,255,.5); } .header.scrolled { top: 10px; background: rgba(247,243,237,.82); box-shadow: 0 8px 30px rgba(58,40,24,.2), inset 0 1px 0 rgba(255,255,255,.55); padding: 6px 14px 6px 20px; } /* La capsule gère sa propre largeur : on neutralise le conteneur interne */ .header > .container { max-width: none; padding: 0; width: 100%; } /* ── Transparent hero variant (homepage only) ── */ .header.header-hero { background: transparent; border-bottom: 1px solid rgba(255,255,255,.10); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .header.header-hero.scrolled { background: rgba(225,218,212,.97); border-bottom: 1px solid #D9D0C7; box-shadow: 0 2px 24px rgba(75,53,34,.11); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .nav { display: flex; align-items: center; gap: 0; position: relative; } /* Logo */ .nav-logo { display: flex; align-items: center; text-decoration: none; background: none; padding: 0; transition: var(--ease); } /* Logo — PNG transparent rogné, sans clip ni animation complexe */ .logo-clip { display: flex; align-items: center; overflow: visible; background: transparent; } .logo-img { height: 58px; width: auto; object-fit: contain; display: block; transition: height .3s ease; } .header.scrolled .logo-img { height: 48px; } /* Logo footer */ .footer-logo-clip { display: flex; align-items: center; overflow: visible; background: transparent; } .logo-img-footer { height: 72px; width: auto; object-fit: contain; display: block; filter: invert(1); opacity: .85; } /* Nav links */ .nav-links { display: flex; align-items: center; gap: 28px; margin-left: 0; position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; } .nav-links > li > a { font-family: var(--font-body); font-size: 1rem; letter-spacing: .4px; color: var(--text); transition: var(--ease); position: relative; padding-bottom: 3px; } .header.scrolled .nav-links > li > a { color: var(--text); } .nav-links > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--primary); transition: var(--ease); } .nav-links > li > a:hover::after { width: 100%; } .nav-links > li > a:hover { color: var(--primary); opacity: 1; } .header.scrolled .nav-links > li > a:hover { color: var(--primary); } /* Liens blancs sur fond transparent */ .header.header-hero .nav-links > li > a { color: rgba(255,255,255,.92); } .header.header-hero .nav-links > li > a::after { background: rgba(255,255,255,.65); } .header.header-hero .nav-links > li > a:hover { color: #FFFFFF; } .header.header-hero.scrolled .nav-links > li > a { color: var(--text); } .header.header-hero.scrolled .nav-links > li > a::after { background: var(--primary); } .header.header-hero.scrolled .nav-links > li > a:hover { color: var(--primary); } /* CTA nav button */ .nav-cta { padding: 9px 22px !important; font-size: .85rem !important; font-style: italic; background: var(--primary) !important; border: 1.5px solid var(--primary) !important; border-radius: 50px; color: var(--white) !important; letter-spacing: .3px; } .nav-cta::after { display: none !important; } .nav-cta:hover { background: var(--white) !important; color: var(--text) !important; opacity: 1 !important; } .header.scrolled .nav-cta { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--white) !important; } .header.scrolled .nav-cta:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; } /* CTA transparent hero */ .header.header-hero .nav-cta { background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.65) !important; color: #FFFFFF !important; } .header.header-hero .nav-cta:hover { background: rgba(255,255,255,.28) !important; border-color: #FFFFFF !important; } .header.header-hero.scrolled .nav-cta { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--white) !important; } /* Dropdown */ .nav-dropdown { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px 0; min-width: 150px; opacity: 0; pointer-events: none; transition: var(--ease); border: 1px solid var(--border); } .nav-dropdown:hover .dropdown-menu, .nav-dropdown.open .dropdown-menu { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .dropdown-menu a { display: block; padding: 10px 20px; font-size: .875rem; color: var(--text) !important; transition: var(--ease); } .dropdown-menu a::after { display: none !important; } .dropdown-menu a:hover { color: var(--primary) !important; background: var(--bg-alt); padding-left: 26px; } .dropdown-menu a { display: flex; align-items: center; gap: 8px; } .dd-icon { flex: 0 0 auto; opacity: .75; } .dd-arrow { display: inline-block; } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; z-index: 1001; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); transition: var(--ease); border-radius: 2px; } .header.header-hero .nav-toggle span { background: rgba(255,255,255,.92); } .header.header-hero.scrolled .nav-toggle span { background: var(--text); } .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ===== HERO ===== */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; background: linear-gradient( to bottom, rgba(34,49,32,.20) 0%, rgba(28,43,28,.34) 52%, rgba(20,33,20,.46) 100% ), url('../images/ .jpg') center center/cover no-repeat fixed; } .hero-content { color: #FFFFFF; max-width: 860px; padding: 0 32px; animation: fadeUp 1s ease both; margin-top: 20px; } .hero-bismillah { font-family: 'Amiri', serif; font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 32px; color: #FFFFFF; opacity: .95; line-height: 1.7; direction: rtl; text-shadow: 0 2px 20px rgba(0,0,0,.4); } .hero-title em { font-style: italic; font-weight: 700; } .hero-title { font-family: 'Cormorant', 'Playfair Display', serif; font-style: normal; font-weight: 300; font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1.08; margin-bottom: 28px; letter-spacing: 1px; color: #FFFFFF; text-shadow: 0 2px 12px rgba(0,0,0,.35), 0 4px 40px rgba(0,0,0,.20); } .hero-subtitle { font-family: Georgia, 'Times New Roman', serif; font-style: normal; font-weight: 400; font-size: clamp(1rem, 2.2vw, 1.18rem); color: rgba(255,255,255,.90); margin-bottom: 54px; max-width: 540px; margin-left: auto; margin-right: auto; letter-spacing: .4px; line-height: 1.9; text-shadow: 0 1px 12px rgba(0,0,0,.3); } .hero-btn { background: rgba(255,255,255,.88); color: var(--text); border: 1.5px solid rgba(255,255,255,.95); padding: 15px 50px; border-radius: 50px; font-family: 'Old Standard TT', serif; font-style: normal; font-size: 1rem; letter-spacing: 1px; display: inline-block; transition: var(--ease); text-shadow: none; } .hero-btn:hover { background: #FFFFFF; border-color: #FFFFFF; transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.18); } .hero-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.55); font-size: .72rem; letter-spacing: 2.5px; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: bounce 2.2s infinite; } .hero-scroll::after { content: ''; width: 1px; height: 36px; background: rgba(255,255,255,.35); } /* ===== EN-TÊTES DE SECTION ===== */ .section-tag { display: inline-block; font-family: var(--font-body); font-size: .72rem; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); background: rgba(118,119,91,.1); padding: 5px 16px; border-radius: 50px; margin-bottom: 14px; } .section-title { color: var(--text); margin-bottom: 14px; font-style: italic; } .section-desc { color: var(--text-mid); max-width: 580px; font-size: .95rem; line-height: 1.8; } .section-header { margin-bottom: 58px; } .section-header.center { text-align: center; } .section-header.center .section-desc { margin: 0 auto; } .divider { width: 52px; height: 2px; background: var(--primary); border-radius: 2px; margin: 14px 0 20px; } .center .divider { margin: 14px auto 20px; } /* ===== À PROPOS (accueil) ===== */ .about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; } .about-img-wrap { position: relative; } .about-img-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 52px rgba(75,53,34,.20); background: linear-gradient(135deg, #c9b99a 0%, #a07850 40%, #6b4c2a 100%); min-height: 440px; } .about-photo { width: 100%; height: 440px; object-fit: cover; display: block; transition: transform .6s ease; } .about-photo[src=""], .about-photo:not([src]) { display: none; } .about-img-frame:hover .about-photo { transform: scale(1.03); } .about-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(75,53,34,.28) 0%, transparent 55%); pointer-events: none; } .about-badge { position: absolute; bottom: -22px; right: -22px; background: var(--bg-dark); color: var(--white); padding: 20px 26px; border-radius: var(--radius); text-align: center; box-shadow: var(--shadow-lg); min-width: 115px; } .about-badge .number { font-family: var(--font-title); font-style: italic; font-size: 3rem; font-weight: 600; line-height: 1; color: var(--sand); } .about-badge .label { font-family: var(--font-body); font-size: .7rem; opacity: .75; margin-top: 5px; letter-spacing: 1.2px; text-transform: uppercase; } .about-ornament { position: absolute; top: -16px; left: -16px; width: 80px; height: 80px; color: var(--primary); opacity: .35; pointer-events: none; } .about-text p { color: var(--text-mid); margin-bottom: 12px; font-size: .92rem; line-height: 1.75; } /* Accent strip côté photo */ .about-accent-strip { position: absolute; top: 24px; left: -10px; width: 4px; height: calc(100% - 48px); background: linear-gradient(to bottom, var(--primary), transparent); border-radius: 4px; z-index: 1; } /* Caption bas de photo */ .about-img-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 24px 18px; background: linear-gradient(to top, rgba(38,47,36,.92) 0%, transparent 100%); text-align: center; } .aic-arabic { font-family: 'Amiri', serif; font-size: 1.05rem; color: var(--sand); direction: rtl; line-height: 1.9; margin-bottom: 2px; } .aic-fr { font-family: 'Old Standard TT', serif; font-style: italic; font-size: .72rem; color: rgba(255,255,255,.55); letter-spacing: .5px; } /* Pull quote */ .about-pullquote { border-left: 3px solid var(--primary); padding: 10px 18px; margin: 14px 0; background: var(--bg-alt); border-radius: 0 var(--radius) var(--radius) 0; font-family: 'Cormorant', serif; font-style: italic; font-size: 1rem; color: var(--text); line-height: 1.6; } /* Formations / Credentials */ .about-credentials { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 28px; } .cred-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: linear-gradient(110deg, rgba(205,185,154,.13) 0%, rgba(231,232,229,.08) 100%); border-radius: 11px; border: 1px solid #D9D0C7; border-left: 3px solid var(--primary); transition: all .22s ease; } .cred-item:hover { background: linear-gradient(110deg, rgba(205,185,154,.22) 0%, rgba(231,232,229,.16) 100%); transform: translateX(3px); } .cred-icon { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: rgba(118,119,91,.10); display: flex; align-items: center; justify-content: center; } .cred-icon svg { width: 14px; height: 14px; stroke: var(--primary); } .cred-body { display: flex; flex-direction: column; gap: 2px; } .cred-degree { font-family: 'Cormorant', serif; font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.2; } .cred-field { font-family: var(--font-body); font-size: .60rem; text-transform: uppercase; letter-spacing: 1.3px; color: var(--primary); opacity: .8; } /* ===== SERVICES ===== */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .service-card { border-radius: 32px; overflow: hidden; background: transparent; padding: 0; border: none; display: flex; flex-direction: column; align-items: stretch; text-align: left; box-shadow: 0 12px 40px rgba(75,53,34,.14); transition: transform .35s ease, box-shadow .35s ease; cursor: pointer; } .service-card:hover { transform: translateY(-12px); box-shadow: 0 28px 72px rgba(75,53,34,.20); } /* Visual photo area — sans marge, photo plein cadre */ .svc-visual { position: relative; overflow: hidden; border-radius: 18px 18px 0 0; height: 320px; } .svc-v-photo { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; border-radius: 0; transition: transform .6s cubic-bezier(.25,.46,.45,.94); } .service-card:hover .svc-v-photo { transform: scale(1.04); } /* Badge catégorie */ .svc-badge { position: absolute; bottom: 16px; left: 16px; z-index: 2; background: rgba(255,255,255,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.6); color: var(--text); font-family: var(--font-body); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; padding: 5px 14px; border-radius: 50px; box-shadow: 0 2px 10px rgba(75,53,34,.1); } /* Text body */ .svc-body { background: rgba(255,255,255,.86); backdrop-filter: blur(8px); padding: 28px 30px 32px; flex: 1; display: flex; flex-direction: column; } .svc-icon { width: 42px; height: 42px; background: rgba(80,120,80,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; color: #4a7c4a; border: 1px solid rgba(80,120,80,.22); transition: var(--ease); } .svc-icon svg { width: 18px; height: 18px; transition: var(--ease); stroke: #4a7c4a; } .service-card:hover .svc-icon { background: rgba(80,120,80,.2); border-color: rgba(80,120,80,.4); } .service-card:hover .svc-icon svg { stroke: #3a6c3a; } .svc-body h3 { margin-bottom: 10px; font-style: italic; font-size: 1.25rem; } .svc-body p { color: var(--text-mid); font-size: .88rem; line-height: 1.8; margin-bottom: 24px; flex: 1; } .service-link { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; padding: 13px 24px; border-radius: 50px; font-family: var(--font-body); font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; font-style: normal; transition: all .28s ease; box-shadow: 0 4px 16px rgba(118,119,91,.28); position: relative; overflow: hidden; } .service-link::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0); transition: background .25s ease; } .service-link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(118,119,91,.42); gap: 12px; } .service-link:hover::after { background: rgba(255,255,255,.08); } /* ===== POURQUOI ===== */ .why-layout { display: grid; grid-template-columns: 1fr 300px 1fr; gap: 36px; align-items: center; margin-top: 52px; } .why-col { display: flex; flex-direction: column; gap: 20px; } /* Cartes latérales */ .why-card { background: rgba(255,255,255,.72); backdrop-filter: blur(8px); border-radius: 20px; padding: 26px 24px; display: flex; gap: 18px; align-items: flex-start; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 4px 20px rgba(75,53,34,.07); transition: transform .3s ease, box-shadow .3s ease; } .why-col:first-child .why-card:hover { transform: translateX(5px); box-shadow: 0 10px 32px rgba(75,53,34,.13); } .why-col:last-child .why-card:hover { transform: translateX(-5px); box-shadow: 0 10px 32px rgba(75,53,34,.13); } .why-icon { width: 46px; height: 46px; min-width: 46px; background: linear-gradient(135deg, rgba(118,119,91,.15) 0%, rgba(118,119,91,.06) 100%); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--primary); border: 1px solid #D9D0C7; transition: var(--ease); } .why-icon svg { width: 20px; height: 20px; transition: var(--ease); } .why-card:hover .why-icon { background: var(--primary); color: var(--white); border-color: var(--primary); } .why-card:hover .why-icon svg { stroke: var(--white); } .why-card h4 { margin-bottom: 6px; font-style: italic; color: var(--text); font-size: 1rem; } .why-card p { color: var(--text-mid); font-size: .83rem; line-height: 1.75; margin: 0; } /* ─── Médaillon central ─── */ .why-medallion { display: flex; align-items: center; justify-content: center; position: relative; } .wm-ring { width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(ellipse at 35% 30%, #f5ede2 0%, #e4d8c8 100%); box-shadow: 0 24px 64px rgba(75,53,34,.16), inset 0 2px 16px rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; position: relative; } /* Anneaux décoratifs */ .wm-ring::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid #D9D0C7; } .wm-ring::after { content: ''; position: absolute; inset: 26px; border-radius: 50%; border: 1px dashed rgba(118,119,91,.18); } .wm-inner { position: relative; z-index: 1; text-align: center; padding: 20px; } .wm-arabic { font-family: 'Amiri', serif; font-size: 2.4rem; color: var(--primary); direction: rtl; line-height: 1.4; margin-bottom: 10px; } .wm-label { font-family: var(--font-body); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 14px; display: block; } .wm-tagline { font-family: 'Cormorant', serif; font-style: italic; font-size: 1rem; color: var(--text); line-height: 1.55; margin-bottom: 22px; } .wm-cta { font-size: .8rem !important; padding: 10px 22px !important; } /* Points déco autour de l'anneau */ .wm-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); opacity: .35; } .wm-dot:nth-child(1) { top: 18px; left: 50%; transform: translateX(-50%); } .wm-dot:nth-child(2) { bottom: 18px; left: 50%; transform: translateX(-50%); } .wm-dot:nth-child(3) { left: 18px; top: 50%; transform: translateY(-50%); } .wm-dot:nth-child(4) { right: 18px; top: 50%; transform: translateY(-50%); } /* ===== TÉMOIGNAGES ===== */ .testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .testimonial-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 36px; border: 1px solid #D9D0C7; transition: var(--ease); display: flex; flex-direction: column; box-shadow: 0 8px 28px rgba(75,53,34,.12); } .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .stars { color: var(--accent); font-size: .85rem; margin-bottom: 14px; letter-spacing: 2px; } .testimonial-text { color: var(--text-mid); font-size: .9rem; line-height: 1.78; font-style: italic; margin-bottom: 24px; flex: 1; } .testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); } .author-avatar { width: 42px; height: 42px; background: rgba(118,119,91,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 600; color: var(--primary); font-size: .9rem; } .author-name { font-size: .88rem; color: var(--text); font-family: var(--font-body); font-style: italic; } .author-source { font-size: .75rem; color: var(--text-mid); } /* ===== FAQ ===== */ .faq-list { max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; transition: var(--ease); } .faq-item.active { box-shadow: var(--shadow); border-color: var(--primary-light); } .faq-question { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; cursor: pointer; gap: 16px; user-select: none; } .faq-question h4 { font-style: italic; font-size: 1rem; color: var(--text); } .faq-icon { width: 28px; height: 28px; min-width: 28px; background: rgba(118,119,91,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--primary); transition: var(--ease); } .faq-item.active .faq-icon { background: var(--primary); color: var(--white); transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease; } .faq-answer p { padding: 0 26px 20px; color: var(--text-mid); font-size: .9rem; line-height: 1.82; } .faq-item.active .faq-answer { max-height: 300px; } /* ===== NEWSLETTER ===== */ .s-newsletter { background: #4d3728; padding: 16px 0; text-align: center; position: relative; overflow: hidden; } .nl-bg-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Amiri', serif; font-size: 20rem; color: rgba(255,255,255,.04); pointer-events: none; user-select: none; line-height: 1; } .nl-layout { display: flex; align-items: center; gap: 20px; position: relative; } .nl-logo-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; } .nl-logo-tagline { font-family: var(--font-body); font-size: .7rem; letter-spacing: .06em; color: rgba(205,185,154,.65); text-align: center; margin-top: 6px; line-height: 1.5; } .nl-spacer { display: none; } .nl-wrap { flex: 1; text-align: center; } .nl-eyebrow { display: block; font-family: var(--font-body); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(205,185,154,.75); margin-bottom: 6px; } .nl-title { font-family: 'Cormorant', serif; font-size: 1.5rem; font-style: italic; color: #fff; line-height: 1.22; font-weight: 400; margin-bottom: 14px; } .nl-sub { display: none; } .newsletter-form { display: flex; align-items: center; max-width: 420px; margin: 0 auto; background: rgba(255,255,255,.08); border: 1px solid #D9D0C7; border-radius: 60px; padding: 5px 5px 5px 24px; transition: border-color .25s ease, background .25s ease; } .newsletter-form:focus-within { border-color: #9E8C7C; background: rgba(255,255,255,.12); } .newsletter-form input { flex: 1; background: none; border: none; outline: none; color: rgba(255,255,255,.9); font-family: 'Cormorant', serif; font-style: italic; font-size: 1rem; letter-spacing: .01em; padding: 10px 0; min-width: 0; } .newsletter-form input::placeholder { color: rgba(255,255,255,.4); } .newsletter-form button { background: #9E8C7C; color: #2e2419; border: none; border-radius: 50px; padding: 11px 26px; font-family: var(--font-body); font-size: .76rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background .22s ease; white-space: nowrap; flex-shrink: 0; } .newsletter-form button:hover { background: #8a7969; } .nl-note { margin-top: 13px; font-size: .67rem; color: rgba(255,255,255,.32); letter-spacing: .03em; } /* ── Newsletter ressources (version enrichie) ── */ .res-newsletter { background: #F7F4EF; padding: 88px 0; position: relative; overflow: hidden; border-top: 1px solid #D9D0C7; } .res-nl-deco { position: absolute; font-family: 'Amiri', serif; font-size: 28vw; color: rgba(118,119,91,.04); top: 50%; right: -2%; transform: translateY(-50%); pointer-events: none; user-select: none; line-height: 1; } .res-nl-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; position: relative; z-index: 1; } /* Colonne gauche */ .res-nl-left { padding-right: 72px; } .res-nl-tag { display: inline-block; font-family: var(--font-body); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--primary); border: 1px solid #D9D0C7; border-radius: 2px; padding: 4px 10px; margin-bottom: 18px; } .res-nl-title { font-family: 'Cormorant', serif; font-size: 2.6rem; font-weight: 700; color: var(--text); line-height: 1.15; margin-bottom: 14px; } .res-nl-title em { font-style: italic; color: var(--primary); } .res-nl-desc { font-family: var(--font-body); font-size: .88rem; color: var(--text-mid); line-height: 1.8; margin-bottom: 28px; max-width: 400px; } .res-nl-perks { list-style: none; display: flex; flex-direction: column; gap: 10px; } .res-nl-perks li { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: .84rem; color: var(--text-mid); } .res-nl-perks li svg { stroke: var(--primary); flex-shrink: 0; } /* Séparateur */ .res-nl-sep { width: 1px; height: 240px; background: linear-gradient(to bottom, transparent, rgba(118,119,91,.18) 30%, rgba(118,119,91,.18) 70%, transparent); flex-shrink: 0; align-self: center; } /* Colonne droite */ .res-nl-right { padding-left: 72px; } .res-nl-eyebrow { font-family: var(--font-body); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--primary); display: block; margin-bottom: 18px; } .res-nl-headline { font-family: 'Cormorant', serif; font-size: 1.6rem; font-style: italic; font-weight: 400; color: var(--text); line-height: 1.3; margin-bottom: 22px; } .res-nl-form { display: flex; flex-direction: column; gap: 10px; max-width: 380px; } .res-nl-form input { background: #fff; border: 1px solid #D9D0C7; border-radius: 4px; outline: none; color: var(--text); font-family: var(--font-body); font-size: .88rem; padding: 14px 18px; transition: border-color .2s, box-shadow .2s; } .res-nl-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(139,96,64,.08); } .res-nl-form input::placeholder { color: rgba(75,53,34,.3); } .res-nl-form button { background: var(--primary); color: #fff; border: none; border-radius: 4px; padding: 14px 28px; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .22s ease; } .res-nl-form button:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(118,119,91,.2); } .res-nl-note { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--font-body); font-size: .7rem; color: rgba(75,53,34,.35); } .res-nl-note svg { opacity: .5; flex-shrink: 0; } @media (max-width: 900px) { .res-nl-inner { grid-template-columns: 1fr; gap: 48px; } .res-nl-sep { width: 80px; height: 1px; background: linear-gradient(to right, transparent, rgba(118,119,91,.18), transparent); justify-self: center; } .res-nl-left { padding-right: 0; } .res-nl-right { padding-left: 0; } .res-nl-title { font-size: 2rem; } .res-nl-form { max-width: 100%; } } /* ===== FOOTER ===== */ .footer { background: #4d3728; color: rgba(255,255,255,.75); padding: 14px 0 10px; position: relative; overflow: hidden; } /* Grille principale */ .footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; align-items: start; } /* Colonne marque */ .footer-brand-col { display: flex; flex-direction: column; align-items: flex-start; } .footer-brand-col p { font-size: .82rem; line-height: 1.7; color: rgba(75,53,34,.85); letter-spacing: .02em; } .footer-social { display: flex; gap: 8px; margin-top: 16px; } /* Boutons sociaux footer */ .social-btn { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: transform .2s ease, opacity .2s ease; color: #fff; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .social-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.22); } /* Instagram — vrai dégradé de marque */ .social-instagram { background: linear-gradient(135deg, #f9a825 0%, #e53935 45%, #8e24aa 100%); border: none; } /* TikTok — fond noir de marque */ .social-tiktok { background: #010101; border: none; } /* Colonnes nav/ressources/contact */ .footer-col h5 { font-family: 'Cormorant', serif; font-size: 1rem; font-style: italic; font-weight: 700; color: #9E8C7C; margin-bottom: 14px; letter-spacing: .02em; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .footer-col ul li a { font-size: .82rem; color: rgba(255,255,255,.55); transition: color .2s ease; } .footer-col ul li a:hover { color: #9E8C7C; } .footer-col address { font-style: normal; display: flex; flex-direction: column; gap: 9px; } .footer-col address span, .footer-col address a { font-size: .82rem; color: rgba(255,255,255,.55); transition: color .2s ease; } .footer-col address a:hover { color: #9E8C7C; } /* Barre basse */ .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: rgba(255,255,255,.3); flex-wrap: wrap; gap: 8px; } .footer-bottom a { color: rgba(255,255,255,.3); transition: color .2s ease; } .footer-bottom a:hover { color: rgba(255,255,255,.7); } /* ===== FOOTER FUSIONNÉ (mega-footer) ===== */ .mega-footer { position: relative; overflow: hidden; background: linear-gradient(145deg, #2e2419 0%, #4a3426 50%, #3a2c1e 100%); padding: 80px 0 0; } .mf-top { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 60px; align-items: start; padding-bottom: 60px; position: relative; } .mf-brand { display: flex; flex-direction: column; gap: 14px; } .mf-tagline { font-family: var(--font-body); font-size: .72rem; letter-spacing: .06em; color: rgba(205,185,154,.5); line-height: 1.6; } .mf-social { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; align-items: flex-start; } .mf-newsletter { text-align: center; position: relative; } .mf-newsletter .nl-eyebrow { color: #9E8C7C; border-color: #D9D0C7; } .mf-newsletter .nl-title { color: #faf7f2; margin: 10px 0 20px; } .mf-newsletter .nl-title em { color: #9E8C7C; font-style: italic; } .mf-newsletter .nl-note { color: rgba(250,247,242,.35); font-size: .76rem; margin-top: 10px; } /* Fond totalement transparent : aucun rectangle visible autour du texte, une seule pilule (celle du conteneur .newsletter-form). */ .mf-newsletter .newsletter-form input { background: transparent !important; border: none !important; color: #faf7f2; -webkit-appearance: none; appearance: none; } .mf-newsletter .newsletter-form input::placeholder { color: rgba(250,247,242,.45); } .mf-newsletter .newsletter-form input:focus { background: transparent !important; } .mf-newsletter .newsletter-form button { background: #9E8C7C; color: #2e2419; border-color: #9E8C7C; font-weight: 700; } .mf-newsletter .newsletter-form button:hover { background: #8a7969; border-color: #8a7969; } .mf-links { display: flex; flex-direction: column; gap: 28px; align-items: flex-end; } .mf-nav { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .mf-nav a { font-family: var(--font-body); font-size: .86rem; color: rgba(250,247,242,.6); text-decoration: none; transition: color .2s ease; letter-spacing: .02em; } .mf-nav a:hover { color: #9E8C7C; } .mf-contact { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-style: normal; } .mf-contact a, .mf-contact span { font-family: var(--font-body); font-size: .78rem; color: rgba(250,247,242,.35); text-decoration: none; transition: color .2s ease; } .mf-contact a:hover { color: rgba(205,185,154,.8); } .mf-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #D9D0C7; padding: 20px 0; font-family: var(--font-body); font-size: .72rem; color: rgba(250,247,242,.22); letter-spacing: .03em; position: relative; } .mf-bottom a { color: rgba(250,247,242,.22); text-decoration: none; transition: color .2s ease; } .mf-bottom a:hover { color: rgba(205,185,154,.7); } /* Mobile : les liens légaux passent à la ligne (sinon le dernier est coupé) */ @media (max-width: 600px) { .mf-bottom { flex-wrap: wrap; justify-content: center; gap: 10px 16px; text-align: center; padding: 22px 6px; } .mf-bottom > span:first-child { flex-basis: 100%; } /* © sur sa propre ligne */ .mf-bottom span[style] { display: none; } /* masque les séparateurs · */ .mf-bottom a { padding: 4px 0; } /* zone tactile un peu plus grande */ } /* Boutons pilule sociaux */ .nl-social-pill { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 24px; text-decoration: none; font-family: var(--font-body); font-size: .82rem; font-weight: 700; color: #fff; letter-spacing: .01em; transition: transform .2s ease, opacity .2s ease; } .nl-social-pill:hover { transform: translateY(-2px); opacity: .88; } .nl-social-pill svg { flex-shrink: 0; } .nl-pill-insta { background: linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); box-shadow: 0 4px 16px rgba(220,39,67,.3); } .nl-pill-tiktok { background: #111; box-shadow: 0 4px 16px rgba(0,0,0,.4); } @media (max-width: 900px) { .mf-top { grid-template-columns: 1fr; gap: 40px; } .mf-links { align-items: flex-start; } .mf-nav { align-items: flex-start; } .mf-contact { align-items: flex-start; } /* Les enfants d'une grille ont min-width:auto par défaut : sans ça, le bouton "S'inscrire" (qui ne passe jamais à la ligne) empêche toute la colonne de rétrécir et pousse le formulaire hors écran. min-width:0 autorise enfin la colonne à s'adapter à la largeur réelle du mobile. */ .mf-brand, .mf-social, .mf-newsletter, .mf-links { min-width: 0; } .newsletter-form { width: 100%; max-width: 340px; box-sizing: border-box; padding: 5px 5px 5px 20px; } .newsletter-form input { font-size: .82rem; } .newsletter-form button { padding: 11px 18px; font-size: .7rem; } } /* ===== PAGE HERO (pages internes) ===== */ .page-hero { padding: 160px 0 80px; background: linear-gradient(rgba(38,47,36,.55), rgba(51,50,39,.55)), url('../images/hero-bg.jpg?v=2') center/cover no-repeat fixed, linear-gradient(135deg, #333227 0%, #262f24 100%); text-align: center; color: var(--white); } .page-hero-eyebrow { font-family: 'Amiri', serif; font-size: .95rem; letter-spacing: .12em; color: rgba(255,255,255,.45); margin-bottom: 14px !important; font-style: normal !important; opacity: 1 !important; } .page-hero h1 { font-style: italic; margin-bottom: 12px; } .page-hero p { opacity: .8; font-size: .95rem; max-width: 520px; margin: 0 auto 18px; font-style: italic; } .breadcrumb { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; font-size: .78rem; opacity: .62; } .breadcrumb a:hover { opacity: 1; text-decoration: underline; } /* ===== PANIER ===== */ /* Icône dans la nav */ .cart-icon-btn { position: relative; background: none; border: none; cursor: pointer; padding: 6px 8px; color: var(--text); display: flex; align-items: center; transition: color .2s; } .cart-icon-btn:hover { color: var(--primary); } .cart-badge { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; background: var(--accent); color: #fff; border-radius: 50%; font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 3px; font-family: var(--font-body); pointer-events: none; } /* Overlay sombre */ .cart-overlay { position: fixed; inset: 0; background: rgba(38,30,22,.45); z-index: 3000; opacity: 0; pointer-events: none; transition: opacity .3s ease; backdrop-filter: blur(2px); } .cart-overlay.is-open { opacity: 1; pointer-events: all; } /* Sidebar */ .cart-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); background: #F7F4EF; z-index: 3001; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); box-shadow: -8px 0 40px rgba(38,30,22,.18); } .cart-sidebar.is-open { transform: translateX(0); } body.cart-is-open { overflow: hidden; } /* En-tête du sidebar */ .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 18px; background: #9E8C7C; color: #fff; flex-shrink: 0; } .cart-head-left { display: flex; align-items: center; gap: 10px; } .cart-head-left svg { opacity: .8; } .cart-head h2 { font-family: 'Cormorant', serif; font-size: 1.25rem; font-weight: 600; color: #fff; margin: 0; } .cart-head-count { font-size: .85rem; font-weight: 400; opacity: .65; margin-left: 4px; } .cart-close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.7); font-size: 1.5rem; line-height: 1; padding: 4px 6px; border-radius: 4px; transition: color .2s, background .2s; display: flex; align-items: center; } .cart-close:hover { color: #fff; background: rgba(255,255,255,.1); } /* Body scrollable */ .cart-body { flex: 1; overflow-y: auto; padding: 8px 0; scrollbar-width: thin; scrollbar-color: rgba(118,119,91,.3) transparent; } /* État vide */ .cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 60px 24px; text-align: center; color: var(--text-mid); } .cart-empty svg { opacity: .3; } .cart-empty p { font-family: 'Cormorant', serif; font-size: 1.15rem; color: var(--text); margin: 0; } .cart-empty-link { font-size: .8rem; color: var(--primary); text-decoration: none; letter-spacing: .04em; transition: opacity .2s; } .cart-empty-link:hover { opacity: .7; } /* Item */ .cart-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 22px; border-bottom: 1px solid #D9D0C7; position: relative; transition: background .15s; } .cart-item:hover { background: rgba(118,119,91,.04); } .cart-item:last-child { border-bottom: none; } .cart-item-cover { width: 46px; height: 62px; border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Amiri', serif; font-size: .95rem; color: rgba(255,255,255,.75); box-shadow: 2px 3px 10px rgba(0,0,0,.25); } .cart-item-info { flex: 1; min-width: 0; } .cart-item-name { font-family: 'Cormorant', serif; font-size: .95rem; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 3px; } .cart-item-meta { font-size: .72rem; color: var(--text-mid); opacity: .7; margin-bottom: 8px; letter-spacing: .02em; } .cart-item-row { display: flex; align-items: center; justify-content: space-between; } .cart-qty { display: flex; align-items: center; gap: 0; border: 1px solid #D9D0C7; border-radius: 4px; overflow: hidden; } .cart-qty-btn { background: none; border: none; cursor: pointer; width: 28px; height: 26px; color: var(--text-mid); font-size: 1rem; line-height: 1; transition: background .15s, color .15s; display: flex; align-items: center; justify-content: center; } .cart-qty-btn:hover { background: var(--primary); color: #fff; } .cart-qty-num { width: 28px; text-align: center; font-size: .82rem; font-weight: 600; color: var(--text); border-left: 1px solid #D9D0C7; border-right: 1px solid #D9D0C7; line-height: 26px; } .cart-item-price { font-family: 'Cormorant', serif; font-size: 1.05rem; font-weight: 700; color: var(--text); } .cart-remove { position: absolute; top: 14px; right: 14px; background: none; border: none; cursor: pointer; color: rgba(118,119,91,.45); padding: 4px; border-radius: 3px; transition: color .2s, background .2s; display: flex; align-items: center; } .cart-remove:hover { color: #c0392b; background: rgba(192,57,43,.08); } /* Footer */ .cart-footer { padding: 20px 24px 28px; border-top: 1px solid #D9D0C7; background: #F7F4EF; flex-shrink: 0; } .cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .cart-subtotal span:first-child { font-size: .82rem; color: var(--text-mid); letter-spacing: .04em; text-transform: uppercase; } .cart-subtotal span:last-child { font-family: 'Cormorant', serif; font-size: 1.5rem; font-weight: 700; color: var(--text); } .cart-info-text { font-size: .72rem; color: var(--text-mid); opacity: .65; margin-bottom: 16px; line-height: 1.5; font-style: italic; } .cart-checkout-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #9E8C7C; color: #fff; border: none; border-radius: 4px; padding: 15px 20px; font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, transform .15s; margin-bottom: 12px; } .cart-checkout-btn:hover { background: #8a7969; transform: translateY(-1px); } .cart-secure { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: .7rem; color: var(--text-mid); opacity: .6; text-align: center; } /* Feedback bouton "Ajouté" */ .cart-btn-ok { background: #5a7a4a !important; pointer-events: none; } /* ===== PAGE HERO — RESSOURCES (fond nude) ===== */ .res-page-hero { background: #F7F4EF; color: var(--text); padding: 150px 0 90px; position: relative; overflow: hidden; } /* Watermark Arabic lettering */ .res-ph-arabicbg { position: absolute; right: -1%; top: 50%; transform: translateY(-50%); font-family: 'Amiri', serif; font-size: 22rem; line-height: 1; color: rgba(118,119,91,.06); pointer-events: none; user-select: none; letter-spacing: -.02em; } .res-ph-inner { position: relative; z-index: 1; display: flex; justify-content: center; } .res-ph-content { text-align: center; max-width: 680px; } .res-ph-eyebrow { font-family: 'Amiri', serif; font-size: 1rem; letter-spacing: .14em; color: var(--primary); opacity: .9; margin-bottom: 18px; } .res-ph-divider { width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--primary), transparent); margin: 0 auto 22px; opacity: .55; } .res-page-hero .res-ph-title { font-family: 'Cormorant', serif; font-size: clamp(2.8rem, 5vw, 4.4rem); font-weight: 600; line-height: 1.12; color: var(--text); margin-bottom: 20px; letter-spacing: -.01em; font-style: normal; } .res-page-hero .res-ph-title em { font-style: italic; color: var(--accent); } .res-page-hero .res-ph-sub { font-family: var(--font-body); font-size: .95rem; line-height: 1.75; color: var(--text); opacity: .65; max-width: 520px; margin: 0 auto 24px; font-style: italic; } .res-ph-breadcrumb { color: var(--text-mid) !important; opacity: .7 !important; } .res-ph-breadcrumb a { color: var(--text-mid) !important; } .res-ph-breadcrumb a:hover { opacity: 1; text-decoration: underline; } /* ===== PAGE À PROPOS ===== */ .bio-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; } .bio-photo { border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 110px; } .bio-photo img { width: 100%; height: 540px; object-fit: cover; border-radius: var(--radius-lg); } .bio-photo-placeholder { width: 100%; height: 540px; background: var(--bg-alt); border-radius: var(--radius-lg); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-mid); font-style: italic; } .bio-photo-placeholder .emoji { font-size: 5rem; } .bio-text h2 { font-style: italic; margin-bottom: 24px; } .bio-text p { color: var(--text-mid); margin-bottom: 16px; font-size: .95rem; line-height: 1.88; } /* Timeline */ .timeline { position: relative; padding-left: 28px; margin-top: 16px; } .timeline::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 0; width: 1.5px; background: var(--border); } .timeline-item { position: relative; padding-bottom: 34px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; left: -25px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--primary); border: 2px solid var(--bg); box-shadow: 0 0 0 2px var(--primary); } .timeline-date { font-size: .73rem; color: var(--primary); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 5px; } .timeline-item h4 { font-style: italic; font-size: 1.05rem; margin-bottom: 5px; color: var(--text); } .timeline-item p { font-size: .875rem; color: var(--text-mid); } /* Skills */ .skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 44px; margin-top: 8px; } .skill-header { display: flex; justify-content: space-between; font-size: .82rem; color: var(--text-mid); margin-bottom: 7px; font-style: italic; } .skill-bar { height: 4px; background: var(--bg-alt); border-radius: 2px; overflow: hidden; } .skill-fill { height: 100%; background: linear-gradient(90deg, var(--primary-dark), var(--primary-light)); border-radius: 2px; width: 0; transition: width 1.6s ease; } /* Expertise */ .expertise-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .expertise-card { text-align: center; padding: 30px 18px; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); transition: var(--ease); } .expertise-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .expertise-card .icon { font-size: 2rem; margin-bottom: 12px; } .expertise-card .exp-icon { margin-bottom: 16px; } .expertise-card h4 { font-style: italic; font-size: .95rem; line-height: 1.4; color: var(--text); } /* ===== CONSULTATIONS ===== */ .consult-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .consult-card { background: var(--bg-card); border: 1px solid #D9D0C7; border-radius: var(--radius-lg); padding: 42px 32px; text-align: center; transition: var(--ease); box-shadow: 0 6px 20px rgba(75,53,34,.08); } .consult-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); } .consult-card.featured { border-color: var(--primary); background: var(--primary); } .consult-card .icon { font-size: 2.4rem; margin-bottom: 20px; } .consult-card h3 { font-style: italic; margin-bottom: 12px; color: var(--text); } .consult-card.featured h3 { color: var(--white); } .consult-card p { font-size: .875rem; color: var(--text-mid); line-height: 1.75; } .consult-card.featured p { color: rgba(255,255,255,.85); } /* Steps */ .steps { display: flex; gap: 0; position: relative; } .steps::before { content: ''; position: absolute; top: 27px; left: calc(16.66% + 28px); right: calc(16.66% + 28px); height: 1.5px; background: var(--border); } .step-item { flex: 1; text-align: center; padding: 0 18px; } .step-num { width: 54px; height: 54px; background: var(--primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 1.4rem; font-style: italic; margin: 0 auto 18px; position: relative; z-index: 1; } .step-item h3 { font-style: italic; margin-bottom: 8px; } .step-item p { color: var(--text-mid); font-size: .875rem; line-height: 1.75; } /* ===== CONTACT ===== */ /* ===== PAGE CONTACT (redesign) ===== */ /* Layout pleine page 2 colonnes */ .ct-main { display: grid; grid-template-columns: 1fr 1.15fr; min-height: calc(100vh - 80px); } /* Colonne gauche — fond nude profond */ .ct-info { background: #F7F4EF; padding: clamp(80px, 10vw, 130px) clamp(36px, 5vw, 80px) 80px; display: flex; flex-direction: column; justify-content: center; gap: 52px; position: relative; overflow: hidden; } /* Titre gauche */ .ct-eyebrow { font-family: 'Amiri', serif; font-size: .9rem; letter-spacing: .14em; color: var(--primary); opacity: .8; margin-bottom: 14px; } .ct-title { font-family: 'Cormorant', serif; font-size: clamp(2.6rem, 4vw, 3.8rem); font-weight: 600; line-height: 1.1; color: var(--text); margin-bottom: 16px; } .ct-title em { font-style: italic; color: var(--accent); } .ct-intro { font-size: .92rem; line-height: 1.8; color: var(--text); opacity: .65; max-width: 380px; font-style: italic; } /* Liste coordonnées */ .ct-details { list-style: none; display: flex; flex-direction: column; gap: 22px; } .ct-detail { display: flex; align-items: flex-start; gap: 16px; } .ct-detail-icon { width: 38px; height: 38px; min-width: 38px; background: rgba(255,255,255,.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); border: 1px solid #D9D0C7; } .ct-detail-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); opacity: .75; margin-bottom: 3px; } .ct-detail-val { display: block; font-size: .9rem; color: var(--text); font-weight: 500; line-height: 1.5; text-decoration: none; } .ct-detail-val small { font-size: .75rem; opacity: .6; font-weight: 400; } .ct-detail-link:hover { color: var(--accent); } /* Réseaux sociaux */ .ct-socials-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--primary); opacity: .7; margin-bottom: 14px; } .ct-socials-row { display: flex; gap: 12px; } .ct-social-btn { display: flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 50px; font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-decoration: none; transition: transform .2s, box-shadow .2s; border: 1.5px solid transparent; } .ct-social-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); } /* Instagram — dégradé de marque */ .ct-social-instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; } /* TikTok — noir de marque */ .ct-social-tiktok { background: #010101; color: #fff; border-color: rgba(255,255,255,.08); } /* Colonne droite — fond blanc cassé */ .ct-form-col { background: var(--bg-card); display: flex; align-items: center; justify-content: center; padding: clamp(60px, 8vw, 100px) clamp(32px, 5vw, 72px); } /* Card formulaire */ .ct-form-card { width: 100%; max-width: 500px; } .ct-form-title { font-family: 'Cormorant', serif; font-size: 1.9rem; font-weight: 600; color: var(--text); margin-bottom: 6px; } .ct-form-sub { font-size: .85rem; color: var(--text-mid); opacity: .7; margin-bottom: 36px; font-style: italic; } /* Formulaire */ .ct-form { display: flex; flex-direction: column; gap: 18px; } .ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ct-field { display: flex; flex-direction: column; gap: 6px; } .ct-field label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-mid); font-weight: 600; } .ct-field input, .ct-field select, .ct-field textarea { background: #fff; border: 1.5px solid #D9D0C7; border-radius: 6px; padding: 13px 16px; font-family: var(--font-body); font-size: .9rem; color: var(--text); transition: border-color .2s, box-shadow .2s; outline: none; appearance: none; } .ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(118,119,91,.1); } .ct-field input::placeholder, .ct-field textarea::placeholder { color: rgba(75,53,34,.32); } .ct-field textarea { resize: vertical; min-height: 130px; line-height: 1.6; } .ct-field select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2376775b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } /* Bouton submit */ .ct-submit { display: flex; align-items: center; justify-content: center; gap: 9px; background: #9E8C7C; color: #fff; border: none; border-radius: 6px; padding: 15px 28px; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .15s; margin-top: 4px; } .ct-submit:hover { background: #8a7969; transform: translateY(-1px); } /* ── Responsive contact ── */ @media (max-width: 860px) { .ct-main { grid-template-columns: 1fr; min-height: auto; } .ct-info { padding: 80px 28px 56px; gap: 36px; } .ct-form-col { padding: 48px 24px; } } /* Legacy classes still referenced by other pages */ .contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; } .contact-info-cards { display: flex; flex-direction: column; gap: 18px; } .contact-info-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px; display: flex; gap: 16px; align-items: flex-start; transition: var(--ease); } .ci-icon { width: 46px; height: 46px; min-width: 46px; background: rgba(118,119,91,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .contact-form-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 42px 38px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-mid); margin-bottom: 7px; font-style: italic; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border-warm); border-radius: var(--radius); font-family: var(--font-body); font-size: .9rem; color: var(--text); background: var(--bg); transition: var(--ease); outline: none; appearance: none; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 3px rgba(118,119,91,.1); } .form-group textarea { resize: vertical; min-height: 128px; } .form-submit { width: 100%; padding: 14px; font-size: .95rem; } /* ===== RESSOURCES ===== */ .ebook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .ebook-cover-placeholder { width: 100%; height: 400px; background: linear-gradient(135deg, #4a3a2a 0%, #3a2a1a 100%); border-radius: var(--radius-lg); box-shadow: 0 14px 44px rgba(75,53,34,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--white); gap: 14px; } .ebook-cover-placeholder .book-icon { font-size: 4.5rem; } .ebook-cover-placeholder h3 { font-style: italic; font-size: 1.3rem; text-align: center; padding: 0 24px; opacity: .9; } .ebook-features { margin: 22px 0; display: flex; flex-direction: column; gap: 11px; } .ebook-feature { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--text-mid); font-style: italic; } .ebook-feature::before { content: '✦'; color: var(--primary); font-size: .7rem; flex-shrink: 0; } /* Blog */ .blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .blog-card { background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid #D9D0C7; transition: var(--ease); box-shadow: 0 8px 28px rgba(75,53,34,.12); } .blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .blog-thumb { height: 190px; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-size: 2.8rem; overflow: hidden; } .blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .blog-card:hover .blog-thumb img { transform: scale(1.05); } .blog-body { padding: 22px; } .blog-cat { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); margin-bottom: 7px; } .blog-body h3 { font-style: italic; font-size: 1.05rem; margin-bottom: 9px; line-height: 1.4; } .blog-body p { font-size: .85rem; color: var(--text-mid); line-height: 1.72; margin-bottom: 16px; } .blog-meta { font-size: .75rem; color: var(--text-mid); font-style: italic; } /* ===== CTA BANNER ===== */ .cta-banner { background: var(--bg-dark); padding: 88px 0; text-align: center; } .cta-banner h2 { font-style: italic; color: var(--white); margin-bottom: 14px; } .cta-banner p { color: rgba(255,255,255,.72); margin-bottom: 36px; font-size: .95rem; max-width: 520px; margin-left: auto; margin-right: auto; font-style: italic; } /* ===== ANIMATIONS ===== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } .fade-up { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up.delay-1 { transition-delay: .1s; } .fade-up.delay-2 { transition-delay: .2s; } .fade-up.delay-3 { transition-delay: .3s; } .fade-up.delay-4 { transition-delay: .4s; } /* ===== RESPONSIVE ===== */ @media (max-width: 1024px) { .about-grid, .bio-grid, .ebook-grid, .contact-layout { grid-template-columns: 1fr; gap: 48px; } .bio-photo { position: static; } .expertise-grid { grid-template-columns: repeat(2,1fr); } .footer-main { grid-template-columns: 1fr 1fr; } .services-grid { grid-template-columns: 1fr 1fr; } /* Carrousel services : 2 cartes visibles tablette */ .services-carousel-track .service-card { flex: 0 0 calc(50% - 14px); min-width: 280px; } .services-carousel-wrapper { padding: 0 44px; } .s-services .container { padding: 60px 36px; } .why-layout { grid-template-columns: 1fr 260px 1fr; gap: 24px; } .wm-ring { width: 260px; height: 260px; } } @media (max-width: 768px) { .section { padding: 72px 0; } /* Tiroir latéral, fond opaque, sans flou ni transition : la visibilité repose uniquement sur display:none/flex, sans aucun état intermédiaire qui pourrait laisser un résidu à l'écran. (#navLinks est rattaché à par main.js pour échapper au bloc de référence créé par le transform/backdrop-filter du header.) */ .nav-links { display: none; flex-direction: column; align-items: center; justify-content: center; position: fixed; top: 12px; right: 12px; bottom: 12px; left: auto; transform: none; width: 80%; max-width: 300px; height: auto; background: rgba(247,244,239,.88); padding: 0 20px; border-radius: 28px; box-shadow: 0 20px 60px rgba(38,28,16,.2); gap: 6px; z-index: 999; overflow-y: auto; border-left: none; } .nav-links.open { display: flex; } .nav-links > li > a { color: var(--text) !important; font-size: .95rem; padding: 10px 0; border-bottom: 1px solid var(--border); display: block; } .nav-links > li > a::after { display: none; } .nav-actions { gap: 0; } .nav-toggle { display: flex; } .dropdown-menu { position: static; transform: none; box-shadow: none; background: var(--bg-alt); border: none; padding: 0 0 0 16px; opacity: 1; pointer-events: all; display: none; border-radius: 0; } .nav-dropdown.open .dropdown-menu { display: block; } .services-grid, .consult-grid, .testimonials-grid, .blog-grid { grid-template-columns: 1fr; } /* Carrousel services : 1 carte visible mobile */ .services-carousel-track .service-card { flex: 0 0 92%; min-width: 280px; } .services-carousel-wrapper { padding: 0 16px; } .svc-carousel-arrow { display: none; } /* Pas de flèches sur mobile, le swipe suffit */ .svc-visual { height: 300px; } .svc-body { padding: 26px 26px 30px; } .s-services .container { padding: 48px 24px; margin-left: 0; margin-right: 0; } .why-layout { grid-template-columns: 1fr; } .why-medallion { order: -1; } .wm-ring { width: 260px; height: 260px; } .process-grid { grid-template-columns: 1fr; } .process-arrow { transform: rotate(90deg); margin: 4px auto; } .steps { flex-direction: column; gap: 30px; } .steps::before { display: none; } .footer-main { grid-template-columns: 1fr 1fr; gap: 28px; } .footer-bottom { flex-direction: column; text-align: center; } .form-row { grid-template-columns: 1fr; } .skills-grid { grid-template-columns: 1fr; } .contact-form-box { padding: 26px 18px; } .about-badge { position: static; margin-top: 20px; display: inline-block; } .about-ornament { display: none; } .about-photo { height: 360px; } } @media (max-width: 480px) { .expertise-grid { grid-template-columns: 1fr 1fr; } .hero-title { font-size: 2rem; } } /* ===== CITATION BANNER ===== */ .quote-banner { background: var(--bg-dark2); padding: 80px 0; position: relative; overflow: hidden; } .quote-banner::before { content: ''; position: absolute; inset: 0; background: url('../images/about-books.jpg') center/cover no-repeat; opacity: .07; pointer-events: none; } .quote-banner-inner { max-width: 860px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 32px; position: relative; z-index: 1; } .qb-ornament-left, .qb-ornament-right { width: 40px; flex-shrink: 0; color: var(--sand); } .qb-content { text-align: center; flex: 1; } .qb-arabic { font-family: 'Amiri', serif; font-size: clamp(1.5rem, 3.5vw, 2.4rem); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.4); direction: rtl; line-height: 2; margin-bottom: 20px; } .qb-translation { font-family: 'Cormorant', serif; font-style: italic; font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,.82); line-height: 1.8; margin-bottom: 14px; } .qb-source { font-family: var(--font-body); font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); opacity: .85; } /* ── Séparateur "Comment commencer" dans s-why ── */ .why-process-sep { display: flex; align-items: center; gap: 24px; margin: 60px 0 52px; color: var(--text-mid); } .why-process-sep::before, .why-process-sep::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent); } .why-process-sep span { font-family: 'Cormorant', serif; font-style: italic; font-size: 1.35rem; color: var(--text); white-space: nowrap; } /* ===== PROCESSUS (intégré dans s-why) ===== */ .process-grid { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; align-items: center; gap: 0; margin-bottom: 52px; } /* Connecteurs entre les étapes */ .process-arrow { display: flex; align-items: center; justify-content: center; color: var(--primary); opacity: .4; font-family: 'Cormorant', serif; font-size: 1.4rem; } /* Carte étape */ .process-step { background: rgba(255,255,255,.65); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.9); border-radius: 24px; padding: 36px 28px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; box-shadow: 0 4px 20px rgba(75,53,34,.06); } .process-step:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(75,53,34,.12); } /* Grand chiffre en filigrane */ .process-num { position: absolute; top: -10px; right: 14px; font-family: 'Cormorant', serif; font-size: 5.5rem; font-weight: 700; line-height: 1; color: var(--primary); opacity: .08; pointer-events: none; user-select: none; } /* Pastille numérotée visible */ .process-badge { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; font-family: 'Cormorant', serif; font-style: italic; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 4px 14px rgba(118,119,91,.35); flex-shrink: 0; } .process-line { display: none; } .process-body { position: relative; z-index: 1; } .process-body h4 { font-family: 'Cormorant', serif; font-style: italic; font-size: 1.2rem; color: var(--text); margin-bottom: 10px; } .process-body p { font-size: .84rem; color: var(--text-mid); line-height: 1.8; margin: 0; } .process-cta { text-align: center; } /* ===== TÉMOIGNAGES améliorés ===== */ .testi-quote { font-family: 'Cormorant', serif; font-size: 5rem; line-height: .8; color: var(--primary); opacity: .35; margin-bottom: 4px; font-style: italic; } .testi-divider { width: 36px; height: 1px; background: var(--primary-light); opacity: .6; margin: 16px 0; } .stars { color: var(--accent); letter-spacing: 2px; font-size: .85rem; margin-bottom: 16px; } /* Social buttons génériques (hors footer) */ .social-btn svg { display: block; } /* ===== CANVAS & ORGANIC SHAPES ===== */ /* Canvas = body (#e7e8e5) visible entre les sections flottantes. Principe : - About → panneau blanc, bas arrondi, blobs déco - Services → île flottante (border-radius + shadow + marge latérale) - Why → top arrondi, chevauche la citation, blob gauche - Process → bas arrondi, fond beige rosé, lumière centrale - Testi → île flottante (même style que Services) - FAQ → top arrondi, fond sauge clair, blob coin droit */ /* ─── 1. À PROPOS ─── panneau blanc, bas arrondi + 2 blobs */ .s-about { background: #F7F4EF; border-radius: 0 0 72px 72px; overflow: hidden; position: relative; z-index: 2; box-shadow: 0 24px 64px rgba(75,53,34,.07); } .s-about::before { content: ''; position: absolute; top: -100px; right: -120px; width: 500px; height: 500px; border-radius: 40% 60% 52% 48% / 44% 38% 62% 56%; background: #e8dfd3; opacity: .48; pointer-events: none; } .s-about::after { content: ''; position: absolute; bottom: -70px; left: -90px; width: 380px; height: 380px; border-radius: 60% 40% 44% 56% / 56% 62% 38% 44%; background: #d9cfc4; opacity: .32; pointer-events: none; } .s-about .container { position: relative; z-index: 1; } .s-about .section-header { margin-bottom: 36px; } /* ─── 2. SERVICES ─── île flottante */ .s-services { background: none; overflow: visible; } .s-services .container { position: relative; background: radial-gradient(ellipse 85% 85% at 22% 14%, #f8f0e6 0%, #e9ddd2 100%); border-radius: 56px; padding: 80px 64px; margin-left: clamp(12px, 3vw, 52px); margin-right: clamp(12px, 3vw, 52px); max-width: none; box-shadow: 0 28px 80px rgba(75,53,34,.11), 0 4px 18px rgba(75,53,34,.05); overflow: hidden; } .s-services .container::before { content: ''; position: absolute; bottom: -90px; right: -90px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.28); pointer-events: none; } .s-services .container::after { content: ''; position: absolute; top: -50px; left: 38%; width: 180px; height: 180px; border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%; background: rgba(255,255,255,.18); pointer-events: none; } /* cards use .svc-body now — no override needed */ /* ─── 3. CITATION ─── gérée par .quote-banner */ /* ─── 4. POURQUOI ─── top arrondi, chevauche la citation */ .s-why { background: #F7F4EF; border-radius: 72px 72px 0 0; margin-top: -52px; padding-top: 148px; overflow: hidden; position: relative; z-index: 3; } .s-why::before { content: ''; position: absolute; top: 80px; left: -90px; width: 400px; height: 400px; border-radius: 55% 45% 58% 42% / 50% 54% 46% 50%; background: #dad5cb; opacity: .32; pointer-events: none; } .s-why::after { content: ''; position: absolute; bottom: -60px; right: -70px; width: 300px; height: 300px; border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; background: #c7c4ba; opacity: .22; pointer-events: none; } .s-why .container { position: relative; z-index: 1; } /* ─── 5. PROCESSUS ─── bas arrondi, beige chaud */ .s-process { background: linear-gradient(150deg, #f6ede3 0%, #ece4d8 55%, #f1e9df 100%); border-radius: 0 0 72px 72px; overflow: hidden; position: relative; z-index: 2; box-shadow: 0 24px 60px rgba(75,53,34,.07); } .s-process::before { content: ''; position: absolute; top: -50px; right: 12%; width: 340px; height: 340px; border-radius: 50% 50% 48% 52% / 46% 54% 50% 50%; background: rgba(255,255,255,.38); pointer-events: none; } .s-process::after { content: ''; position: absolute; bottom: -40px; left: -50px; width: 270px; height: 270px; border-radius: 48% 52% 58% 42% / 54% 48% 52% 46%; background: #e0d5c8; opacity: .42; pointer-events: none; } .s-process .container { position: relative; z-index: 1; } .s-process .process-num { background: #4b3522; } /* ─── 6. TÉMOIGNAGES ─── fond nude chaud + slider split-panel ─── */ .s-testimonials { background: #9E8C7C; overflow: hidden; position: relative; } .s-testimonials::before { content: ''; position: absolute; top: -140px; right: -120px; width: 560px; height: 560px; border-radius: 42% 58% 50% 50% / 44% 40% 60% 56%; background: #f0e4d2; opacity: .7; pointer-events: none; } .s-testimonials::after { content: ''; position: absolute; bottom: -100px; left: -80px; width: 440px; height: 440px; border-radius: 58% 42% 44% 56% / 56% 60% 40% 44%; background: #c4a882; opacity: .35; pointer-events: none; } .s-testimonials .testi-blob { position: absolute; top: 30px; left: 38%; width: 220px; height: 220px; border-radius: 50% 44% 56% 48% / 48% 54% 46% 52%; background: rgba(255,255,255,.12); pointer-events: none; } /* ── Slider ── */ .testi-slider { max-width: 760px; margin: 32px auto 0; position: relative; z-index: 1; } /* Conteneur des slides */ .testi-slides { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 28px 72px rgba(120,80,30,.18); } /* Carte split-panel */ .testi-single { display: none; flex-direction: row; } .testi-single.active { display: flex; animation: tsSlideIn .6s cubic-bezier(.4,0,.2,1) both; } .testi-single.ts-exit { display: flex; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; animation: tsSlideOut .6s cubic-bezier(.4,0,.2,1) both; } @keyframes tsSlideIn { from { opacity: 0; transform: translateX(52px); } to { opacity: 1; transform: translateX(0); } } @keyframes tsSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-52px); } } @keyframes tsSlideInRev { from { opacity: 0; transform: translateX(-52px); } to { opacity: 1; transform: translateX(0); } } @keyframes tsSlideOutRev { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(52px); } } .testi-single.ts-rev-in { animation-name: tsSlideInRev; } .testi-single.ts-rev-out { animation-name: tsSlideOutRev; } /* Panneau gauche (olive gradient) */ .ts-panel-l { width: 34%; flex-shrink: 0; background: linear-gradient(158deg, var(--primary) 0%, #4a4b38 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 34px 24px; } .ts-avatar-lg { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.36); color: #fff; font-family: 'Cormorant', serif; font-size: 1.1rem; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; } .ts-stars { display: flex; gap: 3px; } .ts-stars svg { width: 13px; height: 13px; fill: #f5c842; } .ts-arabic-deco { font-family: 'Amiri', serif; font-size: 1.3rem; color: rgba(255,255,255,.3); margin-top: 4px; } /* Panneau droit (crème clair) */ .ts-panel-r { flex: 1; background: #F7F4EF; padding: 32px 36px 30px; display: flex; flex-direction: column; justify-content: center; } .ts-qmark { font-family: 'Cormorant', serif; font-size: 3.6rem; line-height: .62; color: var(--primary); opacity: .2; font-style: italic; user-select: none; display: block; margin-bottom: 10px; } .ts-text { font-family: 'Cormorant', serif; font-style: italic; font-size: 1.08rem; line-height: 1.62; color: var(--text); margin-bottom: 18px; } .ts-author { display: flex; flex-direction: column; gap: 4px; } .ts-name { font-family: 'Cormorant', serif; font-size: 1.05rem; font-weight: 600; color: var(--text); } .ts-src { font-size: .72rem; color: rgba(75,53,34,.45); letter-spacing: .03em; } /* Barre de navigation */ .ts-nav { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 0 2px; } .ts-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(118,119,91,.18); border: 1px solid #D9D0C7; color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .22s ease; flex-shrink: 0; } .ts-btn:hover { background: rgba(118,119,91,.32); } .ts-progress { flex: 1; height: 2px; background: rgba(118,119,91,.22); border-radius: 2px; overflow: hidden; } .ts-progress-fill { height: 100%; width: 0%; background: var(--primary); border-radius: 2px; transition: width 6s linear; } .testi-cta-wrap { text-align: center; padding-top: 30px; position: relative; z-index: 1; } .testi-cta-wrap p { color: rgba(75,53,34,.7); font-family: 'Cormorant', serif; font-style: italic; font-size: 1.05rem; margin-bottom: 14px; } .testi-cta-wrap .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .testi-cta-wrap .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); } @media (max-width: 640px) { .testi-single { flex-direction: column; } .ts-panel-l { width: 100%; flex-direction: row; padding: 28px 24px; gap: 14px; justify-content: flex-start; } .ts-arabic-deco { display: none; } .ts-panel-r { padding: 28px 28px 32px; } } /* ─── 7. FAQ ─── top arrondi, fond sauge clair */ .s-faq { background: linear-gradient(165deg, #eeecea 0%, #e9eae6 55%, #ecebe8 100%); border-radius: 72px 72px 0 0; margin-top: -52px; padding-top: 148px; overflow: hidden; position: relative; z-index: 3; } .s-faq::before { content: ''; position: absolute; top: 60px; right: -60px; width: 320px; height: 320px; border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%; background: rgba(255,255,255,.24); pointer-events: none; } .s-faq::after { content: ''; position: absolute; bottom: 0; left: -50px; width: 240px; height: 240px; border-radius: 55% 45% 50% 50% / 50% 54% 46% 50%; background: #d5d2cc; opacity: .28; pointer-events: none; } .s-faq .container { position: relative; z-index: 1; } /* ===== PAGE À PROPOS ===== */ /* Hero */ .ap-hero { min-height: 60vh; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .ap-hero-bg { position: absolute; inset: 0; background: url('../images/about-books.jpg') center 30%/cover no-repeat; } .ap-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(38,47,36,.82) 0%, rgba(51,50,39,.75) 60%, rgba(38,47,36,.65) 100%); } .ap-hero-content { position: relative; z-index: 2; padding-top: 80px; animation: fadeUp .9s ease both; } .ap-hero-bismillah { font-family: 'Amiri', serif; font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--sand); direction: rtl; margin-bottom: 20px; line-height: 1.8; text-shadow: 0 2px 20px rgba(0,0,0,.35); } .ap-hero-title { font-family: 'Cormorant', serif; font-style: italic; font-weight: 300; font-size: clamp(2.8rem, 7vw, 5rem); color: #FFFFFF; line-height: 1.05; margin-bottom: 16px; text-shadow: 0 2px 24px rgba(0,0,0,.3); } .ap-hero-sub { font-family: 'Old Standard TT', serif; font-style: italic; color: rgba(255,255,255,.80); font-size: clamp(.95rem, 2vw, 1.1rem); margin-bottom: 28px; line-height: 1.8; } .ap-hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.45); font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: bounce 2.2s infinite; z-index: 2; } .ap-hero-scroll::after { content: ''; width: 1px; height: 32px; background: rgba(255,255,255,.3); } /* Intro biographie */ .ap-intro-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 88px; align-items: start; } .ap-photo-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(75,53,34,.22); } .ap-photo { width: 100%; height: 580px; object-fit: cover; display: block; transition: transform .6s ease; } .ap-photo-frame:hover .ap-photo { transform: scale(1.03); } .ap-photo-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(51,50,39,.45) 0%, transparent 55%); pointer-events: none; } .ap-photo-badge { margin-top: 20px; padding: 18px 24px; background: var(--bg-dark); border-radius: var(--radius); text-align: center; box-shadow: var(--shadow); } .apb-arabic { font-family: 'Amiri', serif; font-size: 1.15rem; color: var(--sand); direction: rtl; margin-bottom: 6px; line-height: 1.8; } .apb-fr { font-family: 'Old Standard TT', serif; font-style: italic; font-size: .78rem; color: rgba(255,255,255,.55); letter-spacing: .5px; } /* Bio texte */ .ap-bio-col p { color: var(--text-mid); font-size: .96rem; line-height: 1.9; margin-bottom: 18px; } .ap-pullquote { border-left: 3px solid var(--primary); padding: 16px 24px; margin: 28px 0; background: var(--bg-alt); border-radius: 0 var(--radius) var(--radius) 0; font-family: 'Cormorant', serif; font-style: italic; font-size: 1.18rem; color: var(--text); line-height: 1.65; } .ap-stats { display: flex; align-items: center; gap: 0; margin-top: 36px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ap-stat { flex: 1; text-align: center; } .ap-stat-num { display: block; font-family: 'Cormorant', serif; font-style: italic; font-size: 2.4rem; font-weight: 600; color: var(--primary); line-height: 1; margin-bottom: 6px; } .ap-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-mid); } .ap-stat-sep { width: 1px; height: 48px; background: var(--border); } /* Timeline */ .ap-timeline { max-width: 780px; margin: 0 auto; } .ap-tl-item { display: grid; grid-template-columns: 130px 48px 1fr; gap: 0 24px; align-items: start; margin-bottom: 0; } .ap-tl-left { text-align: right; padding-top: 14px; } .ap-tl-date { font-family: 'Old Standard TT', serif; font-style: italic; font-size: .82rem; color: var(--primary); letter-spacing: .3px; } .ap-tl-dot-col { display: flex; flex-direction: column; align-items: center; } .ap-tl-dot { width: 48px; height: 48px; flex-shrink: 0; background: var(--bg-card); border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--primary); transition: var(--ease); box-shadow: var(--shadow); } .ap-tl-dot svg { width: 20px; height: 20px; } .ap-tl-dot.active { background: var(--primary); color: var(--white); border-color: var(--primary); } .ap-tl-line { width: 2px; flex: 1; min-height: 52px; background: linear-gradient(to bottom, var(--border), transparent); margin: 6px 0; } .ap-tl-right { padding-top: 10px; padding-bottom: 48px; } .ap-tl-right h4 { font-family: var(--font-title); font-style: italic; font-size: 1.08rem; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tl-badge { font-family: var(--font-body); font-style: normal; font-size: .68rem; font-weight: 400; background: rgba(118,119,91,.15); color: var(--primary); padding: 3px 10px; border-radius: 50px; letter-spacing: 1px; text-transform: uppercase; } .ap-tl-right p { font-size: .88rem; color: var(--text-mid); line-height: 1.8; } /* Valeurs */ .ap-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ap-value-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 36px 24px 32px; text-align: center; border: 1px solid var(--border); transition: var(--ease); } .ap-value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); } .av-icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(118,119,91,.1); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--primary); margin: 0 auto 20px; transition: var(--ease); } .av-icon svg { width: 24px; height: 24px; } .ap-value-card:hover .av-icon { background: var(--primary); color: var(--white); border-color: var(--primary); } .ap-value-card h4 { font-style: italic; margin-bottom: 10px; color: var(--text); } .ap-value-card p { font-size: .85rem; color: var(--text-mid); line-height: 1.78; } /* Expertise cards (réutilisées) */ .exp-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(118,119,91,.1); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--primary); margin: 0 auto 16px; transition: var(--ease); } .exp-icon svg { width: 22px; height: 22px; } .expertise-card:hover .exp-icon { background: var(--primary); color: var(--white); border-color: var(--primary); } /* CTA box */ .ap-cta-box { background: var(--bg-dark); border-radius: var(--radius-lg); padding: 64px 72px; display: flex; align-items: center; justify-content: space-between; gap: 48px; background-image: url('../images/about-books.jpg'); background-size: cover; background-position: center; position: relative; overflow: hidden; } .ap-cta-box::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(38,47,36,.92) 0%, rgba(51,50,39,.88) 100%); } .ap-cta-text, .ap-cta-actions { position: relative; z-index: 1; } .ap-cta-text .section-tag { background: rgba(185,191,176,.15); color: var(--primary-light); } .ap-cta-text h2 { font-family: 'Cormorant', serif; font-style: italic; color: #FFFFFF; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 16px; } .ap-cta-text p { color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.85; max-width: 460px; } .ap-cta-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; } .ap-cta-actions .btn-outline { border-color: rgba(255,255,255,.45); color: rgba(255,255,255,.8); } .ap-cta-actions .btn-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); color: #fff; } /* Responsive À propos */ @media (max-width: 1024px) { .ap-intro-grid { grid-template-columns: 1fr; gap: 48px; } .ap-photo { height: 380px; } .ap-values-grid { grid-template-columns: repeat(2,1fr); } .ap-tl-item { grid-template-columns: 90px 40px 1fr; gap: 0 16px; } .ap-cta-box { flex-direction: column; padding: 48px 36px; text-align: center; } .ap-cta-text p { max-width: 100%; } .ap-cta-actions { flex-direction: row; justify-content: center; } } @media (max-width: 768px) { .ap-values-grid { grid-template-columns: 1fr 1fr; } .ap-tl-item { grid-template-columns: 1fr; } .ap-tl-left { text-align: left; padding-top: 0; margin-bottom: 8px; } .ap-tl-dot-col { display: none; } .ap-tl-right { padding-bottom: 32px; border-left: 2px solid var(--border); padding-left: 18px; } } @media (max-width: 480px) { .ap-values-grid { grid-template-columns: 1fr; } .ap-cta-actions { flex-direction: column; } } /* ============================================================ PAGE CONSULTATIONS ============================================================ */ /* ── Hero ── */ .c-hero { min-height: 92vh; background: linear-gradient(145deg, #2e2419 0%, #4a3426 45%, #5e4535 100%); display: flex; align-items: center; position: relative; overflow: hidden; padding: 140px 0 100px; } .c-hero-arabic { position: absolute; font-family: 'Amiri', serif; font-size: 28vw; color: rgba(255,255,255,.04); top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; direction: rtl; line-height: 1; } .c-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 48px; position: relative; z-index: 1; } .c-hero-content { text-align: center; max-width: 700px; } .c-hero-bismillah { font-family: 'Amiri', serif; font-size: 1.6rem; color: rgba(205,185,154,.75); margin-bottom: 20px; direction: rtl; display: block; } .c-hero-title { font-family: 'Cormorant', serif; font-size: clamp(2.6rem, 5.5vw, 4.2rem); font-weight: 400; font-style: italic; color: #fff; line-height: 1.15; margin-bottom: 22px; } .c-hero-title em { color: #9E8C7C; font-style: italic; } .c-hero-sub { font-family: var(--font-body); font-size: 1rem; color: rgba(255,255,255,.72); line-height: 1.75; max-width: 540px; margin: 0 auto 36px; } .c-hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .c-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: #9E8C7C; color: #2e2419; padding: 14px 36px; border-radius: 4px; font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: all .26s ease; box-shadow: 0 4px 20px rgba(205,185,154,.25); } .c-btn-primary:hover { background: #8a7969; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(205,185,154,.4); gap: 12px; } .c-btn-primary.c-btn-sm { padding: 11px 24px; font-size: .76rem; } .c-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: rgba(255,255,255,.85); padding: 14px 28px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); font-family: var(--font-body); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: all .26s ease; } .c-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); transform: translateY(-2px); } .c-hero-trust { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .c-trust-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 8px 16px; font-family: var(--font-body); font-size: .73rem; color: rgba(255,255,255,.8); letter-spacing: .04em; } .c-trust-pill svg { opacity: .7; flex-shrink: 0; } /* ── Pour qui ── */ .c-for-who { background: #F7F4EF; padding: 88px 0; } .c-for-who-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; } .c-for-who-title { font-family: 'Cormorant', serif; font-size: 2.4rem; font-weight: 400; font-style: italic; color: var(--text); line-height: 1.2; margin-bottom: 10px; } .c-for-who-intro { color: var(--text-mid); font-size: .94rem; line-height: 1.75; margin: 16px 0 28px; } .c-check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .c-check-item { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body); font-size: .92rem; color: var(--text-mid); line-height: 1.55; } .c-check-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(118,119,91,.12); border: 1px solid #D9D0C7; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .c-check-icon svg { width: 11px; height: 11px; stroke: var(--primary); } /* ── Offres ── */ .c-offers { padding: 96px 0; background: var(--bg); } .offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; } .offer-card { background: #fff; border-radius: 4px; padding: 40px 32px 32px; border: 1px solid #D9D0C7; border-top: 3px solid var(--primary); display: flex; flex-direction: column; gap: 20px; transition: transform .28s ease, box-shadow .28s ease; position: relative; overflow: hidden; } .offer-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(75,53,34,.1); } .offer-featured { background: linear-gradient(160deg, #3d3020 0%, #5a4535 100%); border: none; border-top: 3px solid #9E8C7C; transform: scale(1.03); box-shadow: 0 12px 40px rgba(61,48,32,.25); } .offer-featured:hover { transform: scale(1.03) translateY(-5px); box-shadow: 0 20px 56px rgba(61,48,32,.32); } .offer-featured-badge { position: absolute; top: 18px; right: 18px; background: #9E8C7C; color: #2e2419; font-family: var(--font-body); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; } .offer-card-top { display: flex; align-items: center; gap: 16px; } .offer-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 4px; background: rgba(139,96,64,.08); display: flex; align-items: center; justify-content: center; } .offer-icon svg { width: 22px; height: 22px; stroke: var(--primary); } .offer-featured .offer-icon { background: rgba(205,185,154,.15); } .offer-featured .offer-icon svg { stroke: #9E8C7C; } .offer-title { font-family: 'Cormorant', serif; font-size: 1.3rem; font-weight: 600; color: var(--text); line-height: 1.2; margin-bottom: 2px; } .offer-featured .offer-title { color: #fff; } .offer-format { font-family: var(--font-body); font-size: .68rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--primary); opacity: .8; } .offer-featured .offer-format { color: rgba(205,185,154,.75); } .offer-desc { font-family: var(--font-body); font-size: .88rem; color: var(--text-mid); line-height: 1.7; flex: 1; } .offer-featured .offer-desc { color: rgba(255,255,255,.7); } .offer-features { list-style: none; display: flex; flex-direction: column; gap: 7px; } .offer-features li { font-family: var(--font-body); font-size: .82rem; color: var(--text-mid); padding-left: 18px; position: relative; } .offer-features li::before { content: '—'; position: absolute; left: 0; color: var(--primary); font-size: .75rem; } .offer-featured .offer-features li { color: rgba(255,255,255,.65); } .offer-featured .offer-features li::before { color: #9E8C7C; } .offer-cta { display: block; text-align: center; padding: 13px 20px; border-radius: 4px; border: 1.5px solid #D9D0C7; color: var(--primary); font-family: var(--font-body); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: all .24s ease; } .offer-cta:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .offer-cta-featured { background: #9E8C7C; border-color: #9E8C7C; color: #2e2419; font-weight: 600; } .offer-cta-featured:hover { background: #8a7969; border-color: #8a7969; color: #2e2419; } /* ── Processus ── */ .c-process { padding: 96px 0; background: #F7F4EF; position: relative; overflow: hidden; } .c-process-arabic { position: absolute; font-family: 'Amiri', serif; font-size: 22vw; color: rgba(118,119,91,.05); bottom: -40px; right: -40px; direction: rtl; pointer-events: none; line-height: 1; } .c-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; position: relative; } .c-steps::before { content: ''; position: absolute; top: 28px; left: calc(12.5% + 14px); right: calc(12.5% + 14px); height: 1px; background: linear-gradient(90deg, var(--primary) 0%, rgba(118,119,91,.2) 100%); z-index: 0; } .c-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px; position: relative; z-index: 1; } .c-step-num { width: 52px; height: 52px; border-radius: 4px; background: var(--primary); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant', serif; font-size: 1.25rem; font-style: italic; font-weight: 600; color: #fff; margin-bottom: 24px; transition: all .3s ease; } .c-step:hover .c-step-num { background: var(--text); transform: translateY(-2px); } .c-step-body h3 { font-family: 'Cormorant', serif; font-size: 1.15rem; font-weight: 600; color: var(--text); margin-bottom: 10px; } .c-step-body p { font-family: var(--font-body); font-size: .84rem; color: var(--text-mid); line-height: 1.7; } /* ── Témoignage ── */ .c-testimonial { background: linear-gradient(135deg, #3d3020 0%, #5a4535 100%); padding: 80px 0; } .c-testi-inner { text-align: center; max-width: 700px; margin: 0 auto; position: relative; } .c-testi-quote-mark { font-family: 'Cormorant', serif; font-size: 9rem; color: rgba(205,185,154,.2); line-height: .5; display: block; margin-bottom: 20px; } .c-testi-text { font-family: 'Cormorant', serif; font-size: 1.55rem; font-style: italic; color: rgba(255,255,255,.92); line-height: 1.6; margin-bottom: 24px; } .c-testi-author { font-family: var(--font-body); font-size: .78rem; color: rgba(205,185,154,.75); letter-spacing: 1px; text-transform: uppercase; font-style: normal; display: block; margin-bottom: 20px; } .c-testi-stars { display: flex; justify-content: center; gap: 4px; } .c-testi-stars svg { width: 16px; height: 16px; fill: #9E8C7C; } /* ── Engagements ── */ .c-engagements { padding: 96px 0; background: var(--bg); } .c-engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } .c-engage-card { background: #fff; border-radius: 4px; padding: 32px 28px; border: 1px solid #D9D0C7; border-left: 3px solid var(--primary); transition: transform .24s ease, box-shadow .24s ease; position: relative; } .c-engage-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(75,53,34,.08); } .c-engage-icon { width: 40px; height: 40px; border-radius: 4px; background: rgba(139,96,64,.08); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .c-engage-icon svg { width: 20px; height: 20px; stroke: var(--primary); } .c-engage-card h4 { font-family: 'Cormorant', serif; font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 8px; } .c-engage-card p { font-family: var(--font-body); font-size: .85rem; color: var(--text-mid); line-height: 1.7; } /* ── FAQ consultations ── */ .c-faq { padding: 96px 0; background: #F7F4EF; } /* ── CTA Final ── */ .c-final-cta { background: linear-gradient(145deg, #2e2419 0%, #4a3426 50%, #5e4535 100%); padding: 100px 0; text-align: center; position: relative; overflow: hidden; } .c-final-arabic { position: absolute; font-family: 'Amiri', serif; font-size: 22vw; color: rgba(255,255,255,.03); top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; direction: rtl; } .c-final-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; } .c-final-eyebrow { font-family: var(--font-body); font-size: .72rem; color: rgba(205,185,154,.65); letter-spacing: 2px; text-transform: uppercase; display: block; margin-bottom: 22px; } .c-final-title { font-family: 'Cormorant', serif; font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 400; color: #fff; line-height: 1.2; margin-bottom: 20px; } .c-final-title em { color: #9E8C7C; font-style: italic; } .c-final-sub { font-family: var(--font-body); font-size: .96rem; color: rgba(255,255,255,.65); line-height: 1.75; margin-bottom: 40px; max-width: 520px; margin-left: auto; margin-right: auto; } .c-final-btn { display: inline-flex; align-items: center; gap: 10px; background: #9E8C7C; color: #2e2419; padding: 17px 40px; border-radius: 50px; font-family: var(--font-body); font-size: .9rem; font-weight: 600; letter-spacing: .05em; text-decoration: none; transition: all .28s ease; box-shadow: 0 6px 28px rgba(205,185,154,.3); margin-bottom: 20px; } .c-final-btn:hover { background: #8a7969; transform: translateY(-3px); box-shadow: 0 12px 36px rgba(205,185,154,.4); gap: 14px; } .c-final-note { font-family: var(--font-body); font-size: .72rem; color: rgba(255,255,255,.38); letter-spacing: .5px; } /* ── Responsive consultations ── */ @media (max-width: 900px) { .c-for-who-inner { grid-template-columns: 1fr; gap: 44px; } .offer-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } .offer-featured { transform: none; } .c-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; } .c-steps::before { display: none; } .c-engage-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .c-hero-title { font-size: 2.2rem; } .c-steps { grid-template-columns: 1fr; } .c-engage-grid { grid-template-columns: 1fr; } .c-hero-ctas { flex-direction: column; align-items: center; } } /* ============================================= EBOOK STORE — RESSOURCES ============================================= */ /* ── Showcase (hero produit) ── */ .eb-showcase { background: linear-gradient(145deg, #2e2419 0%, #4a3426 45%, #5e4535 100%); padding: 100px 0 110px; position: relative; overflow: hidden; } .eb-showcase-arabic { position: absolute; font-family: 'Amiri', serif; font-size: 28vw; color: rgba(255,255,255,.03); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; user-select: none; white-space: nowrap; line-height: 1; } .eb-showcase-inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: center; } /* ── Livre 3D CSS ── */ .eb-book-scene { display: flex; flex-direction: column; align-items: center; gap: 32px; position: relative; } .eb-book { position: relative; width: 200px; transform: perspective(900px) rotateY(-18deg); transition: transform .4s ease; cursor: default; } .eb-book:hover { transform: perspective(900px) rotateY(-10deg) translateY(-6px); } .eb-book-front { width: 200px; height: 280px; background: linear-gradient(160deg, #5a4232 0%, #2e2116 100%); border-radius: 2px 5px 5px 2px; box-shadow: 8px 6px 32px rgba(0,0,0,.45), -2px 0 8px rgba(0,0,0,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 22px; text-align: center; position: relative; overflow: hidden; border-left: 4px solid #1e160e; } .eb-book-front::before { content: ''; position: absolute; inset: 12px; border: 1px solid #D9D0C7; pointer-events: none; } .eb-book-front::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, rgba(255,255,255,.04) 0%, transparent 60%); pointer-events: none; } .eb-book-ornament { margin-bottom: 10px; opacity: .7; } .eb-book-ornament svg { width: 60px; height: 30px; } .eb-book-arabic { font-family: 'Amiri', serif; font-size: 1.4rem; color: rgba(205,185,154,.6); letter-spacing: .05em; margin-bottom: 8px; line-height: 1; } .eb-book-title { font-family: 'Cormorant', serif; font-size: 1.5rem; font-weight: 700; color: #f0e6d6; line-height: 1.2; margin-bottom: 10px; } .eb-book-rule { width: 36px; height: 1px; background: rgba(205,185,154,.4); margin: 0 auto 10px; } .eb-book-sub { font-family: var(--font-body); font-size: .68rem; color: rgba(205,185,154,.6); letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; margin-bottom: 16px; } .eb-book-author { font-family: var(--font-body); font-size: .72rem; color: rgba(205,185,154,.5); letter-spacing: .12em; text-transform: uppercase; } .eb-book-spine { position: absolute; left: -14px; top: 4px; width: 14px; height: 272px; background: linear-gradient(90deg, #1a0f08, #2e1f13, #1a0f08); border-radius: 3px 0 0 3px; box-shadow: -3px 0 8px rgba(0,0,0,.3); } .eb-book-pages { position: absolute; right: -6px; top: 4px; width: 6px; height: 272px; background: repeating-linear-gradient( to bottom, #f0ece6 0px, #f0ece6 2px, #d8d0c8 2px, #d8d0c8 3px ); border-radius: 0 2px 2px 0; } .eb-book-shadow { width: 160px; height: 24px; background: radial-gradient(ellipse, rgba(0,0,0,.35) 0%, transparent 70%); margin: 6px auto 0; filter: blur(8px); } /* Badges flottants */ .eb-float-badge { position: absolute; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid #D9D0C7; border-radius: 4px; padding: 6px 12px; font-family: var(--font-body); font-size: .72rem; color: rgba(255,255,255,.75); backdrop-filter: blur(4px); white-space: nowrap; } .eb-float-badge svg { opacity: .7; flex-shrink: 0; } .eb-float-1 { top: 20px; right: -20px; } .eb-float-2 { bottom: 90px; right: -30px; } .eb-float-3 { bottom: 50px; left: -20px; } /* ── Infos produit ── */ .eb-product-info { position: relative; z-index: 1; } .eb-product-title { font-family: 'Cormorant', serif; font-size: 3rem; font-weight: 700; color: #fff; line-height: 1.1; margin: 12px 0 10px; } .eb-product-tagline { font-family: var(--font-body); font-size: .92rem; color: rgba(255,255,255,.65); line-height: 1.75; margin-bottom: 18px; max-width: 460px; } .eb-stars-row { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .eb-stars { color: #9E8C7C; font-size: 1.05rem; letter-spacing: 2px; } .eb-stars-label { font-family: var(--font-body); font-size: .8rem; color: rgba(255,255,255,.5); } .eb-checklist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; } .eb-check { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-body); font-size: .88rem; color: rgba(255,255,255,.8); line-height: 1.5; } .eb-check-icon { flex-shrink: 0; width: 20px; height: 20px; background: rgba(205,185,154,.15); border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .eb-check-icon svg { width: 11px; height: 11px; stroke: #9E8C7C; } /* Boîte prix + achat */ .eb-buy-box { background: rgba(255,255,255,.05); border: 1px solid #D9D0C7; border-radius: 4px; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; max-width: 440px; } .eb-price-block { display: flex; align-items: baseline; gap: 14px; } .eb-price { font-family: 'Cormorant', serif; font-size: 2.8rem; font-weight: 700; color: #fff; line-height: 1; } .eb-price sup { font-size: 1.4rem; vertical-align: super; font-weight: 400; } .eb-price em { font-size: 1.6rem; font-style: normal; font-weight: 400; margin-left: 2px; color: rgba(255,255,255,.7); } .eb-price-detail { font-family: var(--font-body); font-size: .78rem; color: rgba(255,255,255,.45); line-height: 1.5; } .eb-btn-buy { display: flex; align-items: center; justify-content: center; gap: 10px; background: #9E8C7C; color: #2e2419; padding: 15px 28px; border-radius: 4px; font-family: var(--font-body); font-size: .84rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: all .26s ease; box-shadow: 0 6px 24px rgba(205,185,154,.25); } .eb-btn-buy:hover { background: #8a7969; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(205,185,154,.35); } .eb-btn-preview { text-align: center; font-family: var(--font-body); font-size: .78rem; color: rgba(205,185,154,.7); text-decoration: none; letter-spacing: .05em; transition: color .2s; } .eb-btn-preview:hover { color: #9E8C7C; } .eb-secure { display: flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--font-body); font-size: .72rem; color: rgba(255,255,255,.3); letter-spacing: .03em; margin: 0; } .eb-secure svg { opacity: .5; } /* ── Ce que contient le guide ── */ .eb-contents { background: #F7F4EF; } .eb-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 52px; border: 1px solid #D9D0C7; border-radius: 4px; overflow: hidden; } .eb-chapter { display: flex; align-items: flex-start; gap: 20px; padding: 28px 30px; background: #fff; border-bottom: 1px solid #D9D0C7; border-right: 1px solid #D9D0C7; transition: background .2s; } .eb-chapter:hover { background: #F7F4EF; } .eb-ch-num { flex-shrink: 0; width: 40px; height: 40px; background: var(--primary); color: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant', serif; font-size: 1rem; font-style: italic; font-weight: 700; } .eb-ch-body h4 { font-family: 'Cormorant', serif; font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 6px; line-height: 1.3; } .eb-ch-body p { font-family: var(--font-body); font-size: .82rem; color: var(--text-mid); line-height: 1.65; } /* ── CTA achat final ── */ .eb-final-cta { background: linear-gradient(145deg, #2e2419 0%, #4a3426 50%, #5e4535 100%); padding: 96px 0; position: relative; overflow: hidden; } .eb-final-arabic { position: absolute; font-family: 'Amiri', serif; font-size: 20vw; color: rgba(255,255,255,.03); bottom: -2vw; left: 5%; pointer-events: none; user-select: none; line-height: 1; } .eb-final-inner { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; position: relative; z-index: 1; } .eb-final-tag { font-family: var(--font-body); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(205,185,154,.65); display: block; margin-bottom: 14px; } .eb-final-title { font-family: 'Cormorant', serif; font-size: 2.6rem; font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 14px; } .eb-final-sub { font-family: var(--font-body); font-size: .9rem; color: rgba(255,255,255,.6); line-height: 1.75; margin-bottom: 24px; max-width: 460px; } .eb-final-list { list-style: none; display: flex; flex-direction: column; gap: 9px; } .eb-final-list li { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: .86rem; color: rgba(255,255,255,.7); } .eb-final-list li svg { stroke: #9E8C7C; flex-shrink: 0; } /* Carte prix finale */ .eb-final-card { background: rgba(255,255,255,.06); border: 1px solid #D9D0C7; border-radius: 4px; padding: 36px 32px; text-align: center; min-width: 260px; backdrop-filter: blur(6px); } .eb-final-price-label { font-family: var(--font-body); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(205,185,154,.6); margin-bottom: 8px; } .eb-final-price { font-family: 'Cormorant', serif; font-size: 3.4rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 6px; } .eb-final-price sup { font-size: 1.6rem; font-weight: 400; } .eb-final-price em { font-size: 1.8rem; font-style: normal; font-weight: 400; color: rgba(255,255,255,.65); } .eb-final-price-note { font-family: var(--font-body); font-size: .73rem; color: rgba(255,255,255,.35); margin-bottom: 22px; } .eb-btn-buy-lg { width: 100%; padding: 16px 20px; font-size: .86rem; margin-bottom: 14px; } .eb-final-secure { display: flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--font-body); font-size: .7rem; color: rgba(255,255,255,.3); } .eb-final-secure svg { opacity: .5; } /* ── Responsive ── */ @media (max-width: 960px) { .eb-showcase-inner { grid-template-columns: 1fr; gap: 56px; } .eb-book-scene { order: -1; } .eb-book { transform: perspective(900px) rotateY(-12deg); } .eb-float-1, .eb-float-2, .eb-float-3 { display: none; } .eb-product-title { font-size: 2.3rem; } .eb-final-inner { grid-template-columns: 1fr; gap: 44px; } .eb-final-card { min-width: unset; } } @media (max-width: 640px) { .eb-chapters { grid-template-columns: 1fr; } .eb-product-title { font-size: 2rem; } .eb-buy-box { padding: 18px 18px; } } /* ── Boutique 2 produits ── */ .eb-store { background: linear-gradient(145deg, #2e2419 0%, #4a3426 45%, #5e4535 100%); padding: 88px 0 100px; position: relative; overflow: hidden; } .eb-store-arabic { position: absolute; font-family: 'Amiri', serif; font-size: 28vw; color: rgba(255,255,255,.03); top: 50%; right: -3%; transform: translateY(-50%); pointer-events: none; user-select: none; line-height: 1; } .eb-store-title { font-family: 'Cormorant', serif; font-size: 2.4rem; font-weight: 700; color: #fff; margin: 10px 0 8px; } .eb-store-desc { font-family: var(--font-body); font-size: .9rem; color: rgba(255,255,255,.55); line-height: 1.75; max-width: 560px; margin: 0 auto; } /* Carte produit */ .eb-pcard { display: grid; grid-template-columns: 220px 1fr; gap: 52px; align-items: center; background: rgba(255,255,255,.05); border: 1px solid #D9D0C7; border-radius: 4px; padding: 44px 48px; margin-top: 40px; position: relative; z-index: 1; transition: border-color .25s; } .eb-pcard:hover { border-color: #D9D0C7; } /* Livre miniature */ .eb-pcard-book { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; } .eb-pcard-book-inner { position: relative; width: 150px; transform: perspective(700px) rotateY(-16deg); transition: transform .4s ease; } .eb-pcard:hover .eb-pcard-book-inner { transform: perspective(700px) rotateY(-8deg) translateY(-4px); } .eb-book-blessures .eb-book-front-sm { background: linear-gradient(160deg, #4a2830 0%, #251318 100%); } .eb-book-blessures .eb-book-spine-sm { background: linear-gradient(90deg, #180c10, #2e1820); } .eb-book-ramadan .eb-book-front-sm { background: linear-gradient(160deg, #3d3416 0%, #1e1a0a 100%); } .eb-book-ramadan .eb-book-spine-sm, .eb-spine-ramadan { background: linear-gradient(90deg, #110e05, #261f08) !important; } .eb-book-front-sm { width: 150px; height: 210px; border-radius: 2px 5px 5px 2px; box-shadow: 8px 6px 28px rgba(0,0,0,.5), -2px 0 6px rgba(0,0,0,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; text-align: center; position: relative; overflow: hidden; border-left: 3px solid rgba(0,0,0,.4); } .eb-book-front-sm::before { content: ''; position: absolute; inset: 8px; border: 1px solid #D9D0C7; pointer-events: none; } .eb-book-front-sm::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, rgba(255,255,255,.04) 0%, transparent 55%); pointer-events: none; } .eb-book-spine-sm { position: absolute; left: -10px; top: 3px; width: 10px; height: 204px; border-radius: 3px 0 0 3px; box-shadow: -2px 0 6px rgba(0,0,0,.3); } .eb-pcard-shadow { width: 120px; height: 18px; background: radial-gradient(ellipse, rgba(0,0,0,.35) 0%, transparent 70%); filter: blur(6px); margin: 4px auto 0; } .eb-pcard-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(205,185,154,.12); border: 1px solid #D9D0C7; border-radius: 3px; padding: 5px 10px; font-family: var(--font-body); font-size: .68rem; color: #9E8C7C; letter-spacing: .05em; margin-top: 4px; } .eb-badge-ramadan { background: rgba(161,159,102,.12); border-color: #9E8C7C; color: #9E8C7C; } /* Infos produit */ .eb-pcard-info { position: relative; z-index: 1; } .eb-pcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .eb-pcard-cat { font-family: var(--font-body); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(205,185,154,.6); } .eb-pcard-stars { font-size: .85rem; color: #9E8C7C; letter-spacing: 1px; } .eb-pcard-stars span { font-family: var(--font-body); font-size: .75rem; color: rgba(255,255,255,.4); margin-left: 4px; } .eb-pcard-title { font-family: 'Cormorant', serif; font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 12px; } .eb-pcard-desc { font-family: var(--font-body); font-size: .87rem; color: rgba(255,255,255,.62); line-height: 1.8; margin-bottom: 18px; } .eb-pcard-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-bottom: 24px; } .eb-pcard-feat { display: flex; align-items: flex-start; gap: 7px; font-family: var(--font-body); font-size: .8rem; color: rgba(255,255,255,.65); line-height: 1.4; } .eb-pcard-feat svg { stroke: #9E8C7C; flex-shrink: 0; margin-top: 2px; } .eb-pcard-buy { display: flex; align-items: center; gap: 24px; padding-top: 20px; border-top: 1px solid #D9D0C7; } .eb-pcard-price { display: flex; flex-direction: column; gap: 2px; } .eb-pcard-amount { font-family: 'Cormorant', serif; font-size: 2.2rem; font-weight: 700; color: #fff; line-height: 1; } .eb-pcard-amount sup { font-size: 1.1rem; font-weight: 400; } .eb-pcard-amount em { font-size: 1.3rem; font-style: normal; font-weight: 400; color: rgba(255,255,255,.6); } .eb-price-ramadan { color: #d4d08a; } .eb-pcard-format { font-family: var(--font-body); font-size: .7rem; color: rgba(255,255,255,.35); } .eb-pcard-btn { display: inline-flex; align-items: center; gap: 8px; background: #9E8C7C; border: none; cursor: pointer; color: #2e2419; padding: 13px 28px; border-radius: 4px; font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; transition: all .25s ease; white-space: nowrap; box-shadow: 0 4px 18px rgba(205,185,154,.2); } .eb-pcard-btn:hover { background: #8a7969; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(205,185,154,.3); } .eb-pcard-btn--ramadan { background: #9E8C7C; box-shadow: 0 4px 18px rgba(161,159,102,.2); } .eb-pcard-btn--ramadan:hover { background: #8a7969; box-shadow: 0 8px 28px rgba(161,159,102,.3); } .eb-pcard-secure { display: flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: .68rem; color: rgba(255,255,255,.25); margin: 10px 0 0; } .eb-pcard-secure svg { opacity: .4; } @media (max-width: 860px) { .eb-pcard { grid-template-columns: 1fr; gap: 36px; padding: 32px 28px; } .eb-pcard-book { flex-direction: row; justify-content: flex-start; } .eb-pcard-features { grid-template-columns: 1fr; } } @media (max-width: 500px) { .eb-pcard-buy { flex-direction: column; align-items: flex-start; } .eb-pcard-btn { width: 100%; justify-content: center; } } /* ============================================= ICÔNE COMPTE — NAVBAR ============================================= */ .auth-nav-btn { position: relative; background: none; border: none; cursor: pointer; padding: 6px 7px; color: var(--text); display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: color .2s, background .2s; } .auth-nav-btn:hover { color: var(--primary); background: rgba(139,96,64,.08); } .auth-nav-btn.auth-logged-in { color: var(--primary); } .auth-avatar { width: 28px; height: 28px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; letter-spacing: .02em; font-family: var(--font-body); } /* ============================================= PAGE COMPTE — AUTH (login / register) ============================================= */ .ac-main { display: grid; grid-template-columns: 1fr 1.1fr; min-height: calc(100vh - 80px); } /* Côté gauche — visuel */ .ac-visual { background: linear-gradient(160deg, #3a2a1e 0%, #4d3728 55%, #5e4535 100%); display: flex; align-items: center; justify-content: center; padding: clamp(60px, 8vw, 100px) clamp(40px, 6vw, 80px); position: relative; overflow: hidden; } .ac-visual::before { content: ''; position: absolute; inset: 0; background: url('../images/hero-bg.jpg?v=2') center/cover no-repeat; opacity: .08; pointer-events: none; } .ac-visual-inner { position: relative; z-index: 1; max-width: 400px; } .ac-visual-arabic { font-family: 'Amiri', serif; font-size: 3.5rem; color: rgba(205,185,154,.35); line-height: 1; margin-bottom: 28px; } .ac-visual-title { font-family: 'Cormorant', serif; font-size: clamp(2.2rem, 3.5vw, 3.2rem); font-weight: 600; color: #faf7f2; line-height: 1.15; margin-bottom: 16px; } .ac-visual-title em { font-style: italic; color: #9E8C7C; } .ac-visual-sub { font-size: .9rem; color: rgba(250,247,242,.55); line-height: 1.75; margin-bottom: 32px; font-style: italic; } .ac-visual-perks { list-style: none; display: flex; flex-direction: column; gap: 12px; } .ac-visual-perks li { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: rgba(250,247,242,.7); } .ac-visual-perks li svg { color: #9E8C7C; flex-shrink: 0; } /* Côté droit — formulaires */ .ac-forms { background: var(--bg-card); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(60px, 8vw, 100px) clamp(32px, 5vw, 72px); } /* Onglets */ .ac-tabs { display: flex; background: var(--bg-alt); border-radius: 50px; padding: 4px; margin-bottom: 36px; width: 100%; max-width: 420px; } .ac-tab { flex: 1; background: none; border: none; cursor: pointer; padding: 9px 20px; border-radius: 50px; font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--text-mid); transition: background .2s, color .2s; } .ac-tab.active { background: #fff; color: var(--text); box-shadow: 0 2px 10px rgba(75,53,34,.1); } /* Formulaires */ .ac-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; } /* Bouton "Créer mon compte" — couleur distincte (olive) */ .ac-submit--register { background: var(--primary); } .ac-submit--register:hover { background: var(--primary-dark); } .ac-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* ── Indicateur force du mot de passe ── */ .pw-strength { display: flex; align-items: center; gap: 10px; margin-top: 7px; } .pw-strength-bar { display: flex; gap: 4px; flex: 1; } .pw-bar-seg { flex: 1; height: 4px; border-radius: 2px; background: rgba(118,119,91,.15); transition: background .25s; } .pw-strength-label { font-size: .72rem; font-weight: 700; min-width: 56px; text-align: right; transition: color .25s; font-family: var(--font-body); } /* ── Critères mot de passe ── */ .pw-rules { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 8px; } .pw-rules li { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--text-mid); opacity: .65; transition: color .2s, opacity .2s; } .pw-rules li svg { flex-shrink: 0; color: rgba(118,119,91,.4); transition: color .2s; } .pw-rules li.pw-rule-ok { color: #27ae60; opacity: 1; } .pw-rules li.pw-rule-ok svg { color: #27ae60; } .ac-field { display: flex; flex-direction: column; gap: 6px; } .ac-field label { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-mid); font-weight: 600; } .ac-forgot { font-size: .72rem; color: var(--primary); text-decoration: none; text-transform: none; letter-spacing: 0; font-weight: 400; } .ac-forgot:hover { text-decoration: underline; } .ac-field input { background: #fff; border: 1.5px solid #D9D0C7; border-radius: 6px; padding: 12px 15px; font-family: var(--font-body); font-size: .9rem; color: var(--text); transition: border-color .2s, box-shadow .2s; outline: none; } .ac-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(118,119,91,.1); } .ac-field input::placeholder { color: rgba(75,53,34,.3); } /* Champ mot de passe avec bouton voir */ .ac-pw-wrap { position: relative; } .ac-pw-wrap input { width: 100%; padding-right: 44px; } .ac-pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-mid); opacity: .5; display: flex; align-items: center; padding: 4px; transition: opacity .2s; } .ac-pw-toggle:hover { opacity: 1; } /* Checkbox newsletter */ .ac-checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .82rem; color: var(--text-mid); line-height: 1.5; } .ac-checkbox input[type="checkbox"] { display: none; } .ac-check-box { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid #D9D0C7; border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: background .2s, border-color .2s; } .ac-checkbox input:checked + .ac-check-box { background: var(--primary); border-color: var(--primary); } .ac-checkbox input:checked + .ac-check-box::after { content: ''; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg) translate(-1px, -1px); display: block; } /* Messages d'erreur */ .ac-error { font-size: .8rem; color: #c0392b; background: rgba(192,57,43,.07); border: 1px solid rgba(192,57,43,.2); border-radius: 6px; padding: 10px 14px; margin: 0; } /* Bouton submit */ .ac-submit { display: flex; align-items: center; justify-content: center; gap: 9px; background: #9E8C7C; color: #fff; border: none; border-radius: 6px; padding: 14px 24px; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .15s; margin-top: 4px; } .ac-submit:hover { background: #8a7969; transform: translateY(-1px); } /* Lien switch */ .ac-switch { text-align: center; font-size: .8rem; color: var(--text-mid); } .ac-switch-btn { background: none; border: none; cursor: pointer; color: var(--primary); font-weight: 600; font-family: var(--font-body); font-size: .8rem; padding: 0; text-decoration: underline; } .ac-legal { font-size: .72rem; color: var(--text-mid); opacity: .65; text-align: center; line-height: 1.5; } .ac-legal a { color: var(--primary); } /* ============================================= DASHBOARD V2 — Sidebar Layout ============================================= */ .dash-layout { display: flex; position: fixed; inset: 0; /* recouvre tout l'écran, header compris */ z-index: 1100; /* > header (z-index:1000) */ background: var(--bg); } /* ── Sidebar ── */ .dash-sidebar { width: 260px; flex-shrink: 0; background: #2d1f15; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; } .dash-sidebar-logo { padding: 1.5rem 1rem 1rem; border-bottom: 1px solid rgba(250,247,242,.08); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .dash-sidebar-logo img { width: 140px; height: auto; display: block; filter: invert(1); mix-blend-mode: screen; opacity: .92; } .dash-nav { flex: 1; padding: .9rem .65rem; display: flex; flex-direction: column; gap: 2px; } .dash-nav-item { display: flex; align-items: center; gap: .7rem; padding: .68rem .85rem; border: none; background: transparent; color: rgba(250,247,242,.5); font-family: var(--font-body); font-size: .855rem; border-radius: .5rem; cursor: pointer; transition: all .15s; text-align: left; width: 100%; } .dash-nav-item:hover { background: rgba(250,247,242,.07); color: rgba(250,247,242,.85); } .dash-nav-item.active { background: rgba(118,119,91,.28); color: #faf7f2; font-weight: 600; } .dash-nav-item svg { flex-shrink: 0; opacity: .65; } .dash-nav-item.active svg { opacity: 1; } .dash-nav-sep { height: 1px; background: rgba(250,247,242,.07); margin: .4rem .2rem; } .dash-admin-badge { font-size: .62rem; background: rgba(118,119,91,.45); color: #faf7f2; padding: .1rem .45rem; border-radius: 2rem; margin-left: auto; font-weight: 700; letter-spacing: .06em; } /* ── Sidebar footer ── */ .dash-side-footer { padding: 1rem 1.2rem; border-top: 1px solid rgba(250,247,242,.07); } .dash-side-user { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; } .dash-side-avatar { width: 36px; height: 36px; background: rgba(118,119,91,.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #faf7f2; flex-shrink: 0; } .dash-side-name { font-size: .83rem; font-weight: 600; color: #faf7f2; margin: 0; } .dash-side-email { font-size: .7rem; color: rgba(250,247,242,.42); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 148px; } .dash-side-logout { display: flex; align-items: center; gap: .5rem; background: rgba(192,57,43,.14); color: rgba(220,80,60,.9); border: 1px solid rgba(192,57,43,.22); border-radius: .45rem; padding: .5rem .8rem; font-family: var(--font-body); font-size: .77rem; font-weight: 600; cursor: pointer; width: 100%; transition: background .15s; } .dash-side-logout:hover { background: rgba(192,57,43,.26); } /* ── Main content ── */ .dash-content { flex: 1; background: var(--bg); overflow-y: auto; height: 100vh; } .dash-topbar { position: sticky; top: 0; background: var(--bg-card); border-bottom: 1px solid #D9D0C7; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; z-index: 10; } .dash-topbar-title { font-family: 'Cormorant Garamond','Cormorant',serif; font-size: 1.35rem; font-weight: 600; color: var(--text); margin: 0; } .dash-topbar-actions { display: flex; gap: .5rem; align-items: center; } .dash-topbar-book { display: flex; align-items: center; gap: 5px; background: #9E8C7C; color: #fff; border: none; border-radius: .55rem; padding: .55rem 1rem; font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background .15s; } .dash-topbar-book:hover { background: #8a7969; } /* ── Sections ── */ .dash-section { padding: 1.8rem 2rem; } .dash-section[hidden] { display: none !important; } /* ── Stats overview ── */ .dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.8rem; } .dash-stat { background: var(--bg-card); border: 1px solid #D9D0C7; border-radius: .85rem; padding: 1.2rem 1.3rem; } .dash-stat-icon { width: 34px; height: 34px; background: var(--bg-alt); border-radius: .45rem; display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; color: var(--primary); } .dash-stat-num { font-family: 'Cormorant Garamond','Cormorant',serif; font-size: 2.1rem; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: .15rem; } .dash-stat-lbl { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } /* ── Overview grid ── */ .dash-ov-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; } /* ── Panels ── */ .dash-panel { background: var(--bg-card); border: 1px solid #D9D0C7; border-radius: .85rem; overflow: hidden; } .dash-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.3rem; border-bottom: 1px solid #D9D0C7; } .dash-panel-head h3 { font-size: .83rem; font-weight: 700; color: var(--text); margin: 0; display: flex; align-items: center; gap: .45rem; text-transform: uppercase; letter-spacing: .07em; } .dash-panel-link { font-size: .75rem; color: var(--primary); font-weight: 600; background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-body); } .dash-panel-body { padding: .3rem 0; } /* ── Booking rows ── */ .bk-item { display: flex; align-items: center; gap: .9rem; padding: .8rem 1.3rem; border-bottom: 1px solid #D9D0C7; transition: background .1s; } .bk-item:last-child { border-bottom: none; } .bk-item:hover { background: rgba(118,119,91,.04); } .bk-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .bk-info { flex: 1; min-width: 0; } .bk-title { font-size: .855rem; font-weight: 600; color: var(--text); } .bk-date { font-size: .74rem; color: var(--text-muted); margin-top: 1px; } .bk-right { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; } /* ── Section consultations ── */ .consult-filters { display: flex; gap: .4rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .cf-btn { background: var(--bg-alt); border: 1.5px solid transparent; border-radius: 2rem; padding: .35rem .9rem; font-size: .77rem; font-weight: 600; cursor: pointer; font-family: var(--font-body); color: var(--text-muted); transition: all .15s; } .cf-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── Ebooks / commandes ── */ .orders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1rem; } .order-card { background: var(--bg-card); border: 1px solid #D9D0C7; border-radius: .85rem; overflow: hidden; display: flex; flex-direction: column; } .order-cover { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-family: 'Cormorant',serif; } .order-body { padding: .9rem 1.1rem 1.1rem; flex: 1; display: flex; flex-direction: column; } .order-title { font-weight: 700; font-size: .87rem; color: var(--text); margin-bottom: .2rem; } .order-price { font-size: .78rem; color: var(--text-muted); margin-bottom: auto; } .order-badge { display: inline-block; margin-top: .7rem; padding: .2rem .6rem; border-radius: 2rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; } .order-badge--ok { background: rgba(39,174,96,.1); color: #27ae60; } .order-badge--pending { background: rgba(230,126,34,.1); color: #e67e22; } .order-dl { margin-top: .6rem; display: flex; align-items: center; justify-content: center; gap: 5px; background: var(--bg-alt); border: 1px solid #D9D0C7; border-radius: .5rem; padding: .5rem; font-size: .77rem; font-weight: 600; color: var(--text); cursor: pointer; font-family: var(--font-body); transition: all .15s; } .order-dl:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── Factures ── */ .invoice-hdr { display: grid; grid-template-columns: 110px 1fr 90px 80px; gap: 1rem; padding: .65rem 1.3rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); background: rgba(118,119,91,.06); border-bottom: 1px solid #D9D0C7; } .invoice-row { display: grid; grid-template-columns: 110px 1fr 90px 80px; gap: 1rem; align-items: center; padding: .8rem 1.3rem; border-bottom: 1px solid #D9D0C7; font-size: .84rem; transition: background .1s; } .invoice-row:last-child { border-bottom: none; } .invoice-row:hover { background: rgba(118,119,91,.04); } .inv-num { font-weight: 700; color: var(--text); font-size: .78rem; } .inv-desc { color: var(--text-mid); } .inv-amt { font-weight: 700; color: var(--text); } .inv-dl { background: none; border: 1px solid #D9D0C7; border-radius: .4rem; padding: .28rem .55rem; font-size: .72rem; font-weight: 600; color: var(--primary); cursor: pointer; font-family: var(--font-body); transition: all .15s; } .inv-dl:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── Profil ── */ .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .profile-card { background: var(--bg-card); border: 1px solid #D9D0C7; border-radius: .85rem; padding: 1.4rem 1.5rem; } .profile-card h3 { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); margin: 0 0 1.1rem; display: flex; align-items: center; gap: .4rem; } .pf-row { display: flex; justify-content: space-between; align-items: flex-start; padding: .65rem 0; border-bottom: 1px solid #D9D0C7; } .pf-row:last-child { border-bottom: none; padding-bottom: 0; } .pf-lbl { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } .pf-val { font-size: .875rem; font-weight: 600; color: var(--text); text-align: right; } /* ── Admin ── */ .admin-top { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1.8rem; } .admin-stat { background: var(--bg-card); border: 1px solid #D9D0C7; border-radius: .85rem; padding: 1.2rem 1.4rem; display: flex; align-items: center; gap: 1rem; } .admin-stat-icon { width: 42px; height: 42px; border-radius: .6rem; background: rgba(118,119,91,.12); display: flex; align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0; } .admin-stat-num { font-family: 'Cormorant',serif; font-size: 1.9rem; font-weight: 700; color: var(--text); line-height: 1; } .admin-stat-lbl { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; } .admin-banner-v2 { display: flex; align-items: center; gap: .6rem; background: rgba(118,119,91,.1); border: 1px solid #D9D0C7; border-radius: .6rem; padding: .6rem 1rem; font-size: .78rem; font-weight: 600; color: var(--primary); margin-bottom: 1.4rem; } /* ── Empty state ── */ .dash-empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); } .dash-empty svg { opacity: .35; margin-bottom: .65rem; } .dash-empty p { font-size: .88rem; margin: 0 0 1.1rem; } .dash-empty-cta { display: inline-flex; align-items: center; gap: .4rem; background: #9E8C7C; color: #fff; border: none; border-radius: .5rem; padding: .6rem 1.2rem; font-family: var(--font-body); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; transition: background .15s; } .dash-empty-cta:hover { background: #8a7969; } /* ── Booking success banner ── */ .booking-success { display: flex; align-items: center; gap: 10px; background: rgba(39,174,96,.08); border: 1px solid rgba(39,174,96,.25); border-radius: 8px; padding: 12px 18px; font-size: .85rem; color: #27ae60; font-weight: 600; margin-bottom: 20px; animation: fadeIn .3s ease; } /* ── Legacy kept for auth page ── */ .dash-cta-link { font-size: .78rem; font-weight: 600; color: var(--primary); text-decoration: none; letter-spacing: .04em; transition: opacity .2s; } .dash-cta-link:hover { opacity: .7; } /* ── Responsive ── */ @media (max-width: 900px) { .ac-main { grid-template-columns: 1fr; } .ac-visual { padding: 60px 28px 48px; min-height: auto; } .dash-stats { grid-template-columns: repeat(2,1fr); } .dash-ov-grid { grid-template-columns: 1fr; } .profile-grid { grid-template-columns: 1fr; } .admin-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .dash-layout { flex-direction: column; } .dash-sidebar { width: 100%; height: auto; flex-shrink: 0; } .dash-content { height: calc(100vh - 180px); overflow-y: auto; } .dash-sidebar-logo { padding: .8rem 1rem; } .dash-nav { flex-direction: row; flex-wrap: wrap; padding: .4rem .5rem; gap: 2px; } .dash-nav-item { font-size: .72rem; padding: .45rem .65rem; } .dash-nav-sep { display: none; } .dash-side-footer { padding: .6rem 1rem; flex-direction: row; align-items: center; gap: .5rem; } .dash-side-user { margin-bottom: 0; } .dash-side-logout { width: auto; } .dash-side-email { max-width: 100px; } .dash-section { padding: 1.1rem; } .dash-stats { grid-template-columns: 1fr 1fr; } .invoice-hdr, .invoice-row { grid-template-columns: 80px 1fr 70px; } .invoice-hdr > :last-child, .invoice-row > :last-child { display: none; } } /* ============================================= TELECONSULTATION — barre supérieure ============================================= */ .tc-bar { position: fixed; top: 0; left: 0; right: 0; height: 58px; background: #1e1510; border-bottom: 1px solid #D9D0C7; display: flex; align-items: center; padding: 0 20px; gap: 16px; z-index: 100; } .tc-logo-clip { height: 42px; width: 90px; overflow: hidden; } .tc-logo-img { height: 90px; width: 90px; object-fit: contain; margin-top: -24px; filter: invert(1) contrast(50); mix-blend-mode: screen; } .tc-room-info { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: rgba(250,247,242,.55); } .tc-dot { width: 8px; height: 8px; border-radius: 50%; background: #555; flex-shrink: 0; } .tc-bar-center { flex: 1; display: flex; justify-content: center; } .tc-timer { font-family: 'Courier New', monospace; font-size: .9rem; color: rgba(250,247,242,.7); background: rgba(255,255,255,.05); padding: 4px 14px; border-radius: 20px; letter-spacing: .08em; } .tc-bar-right { display: flex; align-items: center; gap: 10px; } .tc-btn-leave { display: flex; align-items: center; gap: 7px; background: #c0392b; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s; } .tc-btn-leave:hover { background: #a93226; } #jitsiContainer { position: fixed; top: 58px; left: 0; right: 0; bottom: 0; } #jitsiContainer iframe { width: 100%; height: 100%; border: none; } /* Écran accès refusé */ .tc-blocked { position: fixed; inset: 0; background: #1a1410; display: flex; align-items: center; justify-content: center; } .tc-blocked-card { background: #2a1e15; border: 1px solid #D9D0C7; border-radius: 12px; padding: 48px 40px; text-align: center; max-width: 380px; } .tc-blocked-icon { width: 64px; height: 64px; background: rgba(205,185,154,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #9E8C7C; } .tc-blocked-card h2 { font-family: 'Cormorant', serif; font-size: 1.6rem; color: #faf7f2; margin-bottom: 10px; } .tc-blocked-card p { font-size: .88rem; color: rgba(250,247,242,.55); margin-bottom: 28px; line-height: 1.6; } .tc-blocked-btn { display: inline-block; background: #9E8C7C; color: #fff; padding: 12px 28px; border-radius: 6px; text-decoration: none; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background .2s; } .tc-blocked-btn:hover { background: #8a7969; } /* ============================================= DASHBOARD — Consultations & Réservations ============================================= */ .dash-header-btns { margin-left: auto; display: flex; gap: 10px; align-items: center; } .dash-book-btn { display: flex; align-items: center; gap: 7px; background: var(--primary); color: #fff; border: none; border-radius: 6px; padding: 9px 16px; font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s; } .dash-book-btn:hover { background: var(--primary-dark); } .dash-book-inline { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--primary); font-size: .75rem; font-weight: 600; font-family: var(--font-body); letter-spacing: .04em; text-decoration: underline; } /* Lignes consultation */ .consult-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #D9D0C7; } .consult-row:last-child { border: none; } .consult-row-info { display: flex; flex-direction: column; gap: 3px; } .consult-row-info strong { font-size: .9rem; color: var(--text); font-weight: 600; } .consult-row-info span { font-size: .78rem; color: var(--text-mid); opacity: .75; } .consult-notes { font-size: .76rem; color: var(--text-mid); opacity: .6; font-style: italic; } .consult-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .consult-status { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 50px; border: 1px solid; white-space: nowrap; } .consult-join-btn { display: flex; align-items: center; gap: 6px; background: #27ae60; color: #fff; text-decoration: none; padding: 7px 14px; border-radius: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: background .2s; } .consult-join-btn:hover { background: #219a52; } /* Admin */ .admin-banner { display: flex; align-items: center; gap: 8px; background: rgba(75,53,34,.08); border: 1px solid #D9D0C7; border-radius: 8px; padding: 12px 18px; font-size: .8rem; color: var(--text-mid); font-weight: 600; margin-bottom: 20px; } .consult-row--admin { flex-wrap: wrap; } .admin-actions { display: flex; gap: 8px; align-items: center; } .admin-btn { border: none; border-radius: 6px; padding: 7px 14px; cursor: pointer; font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; transition: background .2s; } .admin-btn--confirm { background: #27ae60; color: #fff; } .admin-btn--confirm:hover { background: #219a52; } .admin-btn--cancel { background: rgba(192,57,43,.1); color: #c0392b; border: 1px solid rgba(192,57,43,.2); } .admin-btn--cancel:hover { background: rgba(192,57,43,.2); } /* ============================================= MODAL RÉSERVATION ============================================= */ .booking-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(38,30,22,.55); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); } .booking-overlay[hidden] { display: none; } .booking-modal { background: var(--bg-card); border-radius: 14px; padding: 40px 38px; width: 100%; max-width: 480px; position: relative; box-shadow: 0 24px 80px rgba(38,30,22,.3); } .booking-close { position: absolute; top: 16px; right: 16px; background: none; border: none; cursor: pointer; color: var(--text-mid); font-size: 1.2rem; padding: 6px 8px; border-radius: 4px; transition: background .2s; } .booking-close:hover { background: rgba(118,119,91,.1); } .booking-title { font-family: 'Cormorant', serif; font-size: 1.6rem; font-weight: 600; color: var(--text); margin-bottom: 6px; } .booking-sub { font-size: .83rem; color: var(--text-mid); opacity: .7; margin-bottom: 28px; line-height: 1.6; font-style: italic; } .booking-form { display: flex; flex-direction: column; gap: 16px; } .booking-field { display: flex; flex-direction: column; gap: 6px; } .booking-field label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-mid); font-weight: 600; } .booking-field input, .booking-field select, .booking-field textarea { background: #fff; border: 1.5px solid #D9D0C7; border-radius: 6px; padding: 12px 15px; font-family: var(--font-body); font-size: .9rem; color: var(--text); transition: border-color .2s; outline: none; appearance: none; } .booking-field input:focus, .booking-field select:focus, .booking-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(118,119,91,.1); } .booking-field textarea { resize: vertical; } .booking-error { font-size: .8rem; color: #c0392b; background: rgba(192,57,43,.07); border: 1px solid rgba(192,57,43,.2); border-radius: 6px; padding: 10px 14px; } .booking-submit { display: flex; align-items: center; justify-content: center; gap: 8px; background: #9E8C7C; color: #fff; border: none; border-radius: 6px; padding: 14px; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s; } .booking-submit:hover { background: #8a7969; } /* Bannière succès */ .booking-success { display: flex; align-items: center; gap: 10px; background: rgba(39,174,96,.08); border: 1px solid rgba(39,174,96,.25); border-radius: 8px; padding: 12px 18px; font-size: .85rem; color: #27ae60; font-weight: 600; margin-bottom: 20px; animation: fadeIn .3s ease; } @keyframes fadeIn { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform:none; } } /* ============================================= CALENDRIER DE RÉSERVATION ============================================= */ .cal-overlay { position: fixed; inset: 0; background: rgba(30,20,10,.52); z-index: 9100; display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(3px); } .cal-overlay[hidden] { display: none; } .cal-modal { background: var(--bg-card); border-radius: 1.4rem; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; padding: 2rem 2rem 1.6rem; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,.22); } .cal-close { position: absolute; top: 1.1rem; right: 1.2rem; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-muted); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .15s; } .cal-close:hover { background: var(--bg-alt); } .cal-modal-header { margin-bottom: 1.4rem; } .cal-modal-header h2 { font-family: 'Cormorant Garamond', 'Cormorant', serif; font-size: 1.75rem; font-weight: 600; color: var(--text); margin: 0 0 .2rem; } .cal-sub { color: var(--text-muted); font-size: .85rem; margin: 0; } .cal-section { margin-bottom: 1.4rem; } .cal-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .65rem; } .cal-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; } .cal-type-btn { background: var(--bg-alt); border: 1.5px solid transparent; border-radius: .65rem; padding: .65rem .85rem; font-family: var(--font-body); font-size: .83rem; cursor: pointer; text-align: left; transition: all .15s; color: var(--text); line-height: 1.3; } .cal-type-btn:hover { background: var(--bg); border-color: var(--primary); } .cal-type-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; } .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; } .cal-nav-arrow { background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: .25rem .55rem; border-radius: .4rem; color: var(--text); transition: background .15s; } .cal-nav-arrow:hover { background: var(--bg-alt); } #calMonthLabel { font-weight: 700; font-size: .95rem; color: var(--text); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-day-hdr { text-align: center; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: .3rem 0; } .cal-day { text-align: center; padding: .48rem .2rem; border-radius: .45rem; font-size: .84rem; line-height: 1; } .cal-day.unavail { color: #ccc; cursor: default; } .cal-day.avail { color: var(--text); cursor: pointer; transition: background .13s, color .13s; } .cal-day.avail:hover { background: var(--primary); color: #fff; } .cal-day.is-today { outline: 1.5px solid var(--primary); } .cal-day.selected { background: var(--primary) !important; color: #fff !important; font-weight: 700; } .cal-slots { display: flex; flex-wrap: wrap; gap: .45rem; } .cal-slot { background: var(--bg-alt); border: 1.5px solid transparent; border-radius: .5rem; padding: .48rem .9rem; font-size: .84rem; font-family: var(--font-body); cursor: pointer; transition: all .14s; color: var(--text); } .cal-slot:hover { border-color: var(--primary); background: var(--bg); } .cal-slot.selected { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; } .cal-slot.taken { opacity: .32; cursor: not-allowed; text-decoration: line-through; pointer-events: none; } .cal-confirm-box { background: var(--bg-alt); border-radius: .75rem; padding: 1rem 1.2rem; margin-bottom: .9rem; font-size: .88rem; line-height: 1.9; } .cal-confirm-box strong { color: var(--primary); } .cal-notes-field { width: 100%; box-sizing: border-box; border: 1.5px solid var(--bg-alt); border-radius: .6rem; padding: .7rem 1rem; font-family: var(--font-body); font-size: .88rem; resize: none; background: var(--bg); color: var(--text); transition: border-color .15s; } .cal-notes-field:focus { outline: none; border-color: var(--primary); } .cal-book-btn { display: block; width: 100%; margin-top: .8rem; background: #9E8C7C; color: #fff; border: none; border-radius: .65rem; padding: .92rem; font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: background .15s; } .cal-book-btn:hover { background: #8a7969; } .cal-book-btn:disabled { opacity: .6; cursor: not-allowed; } .cal-auth-note { text-align: center; font-size: .88rem; margin-top: .9rem; color: var(--text-muted); } .cal-auth-note a { color: var(--primary); font-weight: 600; } .cal-success-box { background: rgba(39,174,96,.08); border: 1.5px solid rgba(39,174,96,.28); border-radius: .75rem; padding: 1.3rem; text-align: center; color: #27ae60; font-size: .92rem; } .cal-success-box strong { display: block; font-size: 1.05rem; margin-bottom: .3rem; } .cal-success-box a { color: var(--primary); font-weight: 600; font-size: .85rem; } .cal-divider { border: none; border-top: 1px solid var(--bg-alt); margin: 1.2rem 0; } /* ===================================================================== NAV ACTIONS GROUP (search + lang + compte + panier) ===================================================================== */ .nav-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; /* pousse tout ce bloc vers la droite */ } /* Bouton loupe */ .nav-search-btn { background: none; border: none; cursor: pointer; padding: 7px 8px; color: var(--text); opacity: .75; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: color .2s, opacity .2s, background .2s; } .nav-search-btn:hover { opacity: 1; color: var(--primary); background: rgba(139,96,64,.08); } .header.header-hero .nav-search-btn { color: rgba(255,255,255,.9); } .header.header-hero.scrolled .nav-search-btn { color: var(--text); } /* ===================================================================== OVERLAY DE RECHERCHE ===================================================================== */ .search-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(38,28,18,.72); backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility .22s; } .search-overlay.open { opacity: 1; visibility: visible; pointer-events: all; } .search-modal { background: #F7F4EF; border-radius: 18px; box-shadow: 0 24px 70px rgba(38,28,18,.28); width: min(620px, 92vw); overflow: hidden; transform: translateY(-14px); transition: transform .22s ease; } .search-overlay.open .search-modal { transform: translateY(0); } .search-modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #D9D0C7; } .search-modal-head svg { flex-shrink: 0; color: var(--primary); opacity: .7; } .search-input { flex: 1; border: none; background: transparent; font-family: var(--font-body); font-size: 1.05rem; color: var(--text); outline: none; padding: 2px 0; } .search-input::placeholder { color: rgba(75,53,34,.38); } .search-close-btn { background: rgba(139,96,64,.1); border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); opacity: .7; flex-shrink: 0; transition: background .15s, opacity .15s; } .search-close-btn:hover { background: rgba(139,96,64,.2); opacity: 1; } .search-results { max-height: 52vh; overflow-y: auto; padding: 8px 10px; } .search-result-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--text); transition: background .14s; cursor: pointer; } .search-result-item:hover { background: rgba(139,96,64,.08); } .search-result-icon { width: 38px; height: 38px; flex-shrink: 0; background: rgba(139,96,64,.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); } .search-result-title { font-size: .95rem; font-weight: 600; color: var(--text); } .search-result-desc { font-size: .8rem; color: var(--text-muted); margin-top: 1px; } .search-empty { padding: 32px 22px; text-align: center; color: var(--text-muted); font-size: .9rem; } .search-hint { padding: 10px 22px; border-top: 1px solid #D9D0C7; font-size: .73rem; color: var(--text-muted); text-align: center; opacity: .7; } .search-hint kbd { background: rgba(139,96,64,.1); border-radius: 4px; padding: 1px 6px; font-size: .72rem; font-family: inherit; } .search-section-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); padding: 8px 14px 4px; opacity: .75; } /* ===================================================================== SÉLECTEUR DE LANGUE (FR / EN / AR) + RTL ===================================================================== */ .lang-switcher { position: relative; display: flex; align-items: center; } .lang-toggle { display: flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; color: var(--text); font-family: var(--font-body); font-size: .78rem; font-weight: 600; padding: 6px 9px; border-radius: 50px; transition: background .2s, color .2s; letter-spacing: .04em; opacity: .8; } .lang-toggle:hover { opacity: 1; background: rgba(139,96,64,.1); color: var(--primary); } .lang-toggle svg { flex-shrink: 0; transition: color .2s; } .lang-current-code { letter-spacing: .06em; } .lang-chevron { transition: transform .2s; } .lang-switcher.open .lang-chevron { transform: rotate(180deg); } .header.header-hero .lang-toggle { color: rgba(255,255,255,.88); } .header.header-hero.scrolled .lang-toggle { color: var(--text); } .lang-menu { position: absolute; top: calc(100% + 10px); right: 0; background: #F7F4EF; border: 1px solid #D9D0C7; border-radius: 14px; box-shadow: 0 14px 44px rgba(38,22,10,.18); padding: 6px; min-width: 162px; z-index: 1200; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transition: opacity .18s, transform .2s, visibility .18s; transform-origin: top right; } .lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .lang-option { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; cursor: pointer; padding: 9px 13px; border-radius: 9px; text-align: left; font-family: var(--font-body); font-size: .83rem; color: #3D2B1F; transition: background .14s; letter-spacing: .01em; } .lang-option:hover { background: rgba(139,96,64,.1); } .lang-option.active { background: rgba(139,96,64,.15); font-weight: 700; color: var(--primary); } .lang-opt-short { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 22px; flex-shrink: 0; background: var(--primary); color: #faf7f2; border-radius: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; } /* ── Écriture droite-à-gauche (arabe) ── */ html.rtl { direction: rtl; } html.rtl .nav-links { flex-direction: row-reverse; } html.rtl .nav-actions { flex-direction: row-reverse; } html.rtl .lang-menu { right: auto; left: 0; transform-origin: top left; } html.rtl .lang-option { text-align: right; flex-direction: row-reverse; } html.rtl .hero-content, html.rtl .section-header, html.rtl .about-text, html.rtl .why-card, html.rtl .process-body, html.rtl .svc-body { text-align: right; } html.rtl .about-pullquote { border-left: none; border-right: 3px solid var(--gold, #9E8C7C); padding-left: 0; padding-right: 1.2rem; } html.rtl .mf-nav { align-items: flex-start; } html.rtl .process-arrow, html.rtl .hero-btn svg, html.rtl .btn svg, html.rtl .service-link svg, html.rtl .cart-checkout-btn svg { transform: scaleX(-1); } html.rtl .lang-toggle { flex-direction: row-reverse; } /* l'arabe reste lisible dans une police serif élégante */ html.rtl body { font-family: 'Old Standard TT', 'Cormorant', 'Segoe UI', Tahoma, sans-serif; } /* ── RTL — pages checkout / paiement / compte (traduites) ── direction:rtl est déjà global ; ici on miroite les lignes flex, les alignements de texte et l'orientation des champs. */ html.rtl .ck-topbar, html.rtl .ck-header, html.rtl .ck-steps, html.rtl .ck-step, html.rtl .ck-card-title, html.rtl .ck-recap-type, html.rtl .ck-recap-row, html.rtl .ck-guarantees, html.rtl .ck-cancel-notice, html.rtl .trust-row, html.rtl .card-logos, html.rtl .topbar { flex-direction: row-reverse; } html.rtl .ck-card, html.rtl .ck-form, html.rtl .ck-field-group, html.rtl .ck-success, html.rtl .col-form, html.rtl .col-order, html.rtl .card, html.rtl .pay-form, html.rtl .field, html.rtl .ac-forms, html.rtl .ac-form, html.rtl .ac-field, html.rtl .ac-visual { text-align: right; } html.rtl .ck-field-group input, html.rtl .ck-field-group label, html.rtl .field input, html.rtl .field label, html.rtl .ac-field input, html.rtl .ac-field label, html.rtl .pay-form input, html.rtl textarea { text-align: right; direction: rtl; } /* Champs à contenu latin (carte, email) : garder l'alignement à gauche/LTR */ html.rtl #cardNumber, html.rtl #cardExpiry, html.rtl #cardCvc, html.rtl #cardNum, html.rtl #cardExp, html.rtl #cardCvv, html.rtl input[type="email"] { direction: ltr; text-align: left; } /* Calendrier en arabe : noms de jours complets → réduire pour qu'ils tiennent */ html.rtl .cal-grid-head span { font-size: .56rem; letter-spacing: 0; line-height: 1.2; } @media (max-width: 600px) { html.rtl .cal-grid-head span { font-size: .5rem; } } /* Étapes/onglets & retour : flèches et ordre inversés proprement */ html.rtl .ac-tabs { flex-direction: row-reverse; } html.rtl .ck-header-back svg, html.rtl .topbar-back svg, html.rtl .ck-pay-btn svg, html.rtl .btn-pay svg, html.rtl .ac-submit svg, html.rtl .cal-submit svg { transform: scaleX(-1); } /* ===================================================================== OPTIMISATION MOBILE / TACTILE (téléphones & tablettes) ===================================================================== */ /* ── 1. Anti-zoom iOS : tout champ < 16px déclenche un zoom auto au focus. On force 16px sur tous les champs en mobile → saisie confortable. ── */ @media (max-width: 768px) { input, textarea, select, .ct-field input, .ct-field select, .ct-field textarea, .form-group input, .form-group textarea, .form-group select, .cal-form-group input, .cal-form-group textarea, .ac-field input, .newsletter-form input, .res-nl-form input { font-size: 16px !important; } } /* ── 2. Cibles tactiles ≥ 44px (recommandation Apple/Google) ── Les icônes de la barre de nav doivent être facilement touchables. */ @media (max-width: 768px) { .nav-search-btn, .auth-nav-btn, .cart-icon-btn { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 10px; } .nav-actions { gap: 2px; } /* boutons & liens d'action : hauteur de frappe confortable */ .lang-toggle { min-height: 40px; } .cart-qty-btn { min-width: 40px; min-height: 40px; } .cart-close, .search-close-btn { min-width: 40px; min-height: 40px; } } /* ── 3. Confort tactile global sur mobile ── */ @media (max-width: 768px) { /* retire le délai de 300ms et le halo bleu au tap */ a, button, input, textarea, select, [onclick], .cal-day, .cal-slot { -webkit-tap-highlight-color: rgba(139,96,64,.15); touch-action: manipulation; } /* boutons principaux : pleine largeur & hauteur généreuse pour le pouce */ .cal-submit, .hero-btn, .ck-submit, .pay-submit, .ac-submit, .ct-submit, .cart-checkout-btn { min-height: 52px; } /* évite tout débordement horizontal accidentel */ body { overflow-x: hidden; } img, video { max-width: 100%; height: auto; } } /* ── 4. Réservation (calendrier) : lisibilité & ergonomie tactile ── */ @media (max-width: 600px) { /* padding réduit pour que la grille 7 colonnes tienne dans l'écran */ .ic-cal-col, .ic-form-col { padding: 22px 14px !important; } .cal-grid, .cal-grid-head { gap: 3px; } /* créneaux & jours bien dimensionnés au doigt */ .cal-slots-grid { gap: 8px; } .cal-slot { min-height: 46px; font-size: .95rem; } .cal-day { min-height: 42px; } /* l'indicateur d'étapes ne doit pas déborder */ .cal-steps { font-size: .7rem; flex-wrap: nowrap; gap: 4px; } .cal-step, .cal-step-item { font-size: .68rem; letter-spacing: 0; white-space: nowrap; } .cal-step-line, .cal-step-sep { min-width: 8px; } /* la carte de réservation démarre sous le header fixe */ .ic-shell, #icInlineCal, .ch-offers .ic-wrap { scroll-margin-top: 100px; } } /* ── 5. Modal calendrier : plein écran confortable sur mobile ── */ @media (max-width: 600px) { .cal-overlay { align-items: flex-start; padding: 0; } .cal-modal { width: 100%; max-width: 100%; max-height: 100dvh; height: auto; border-radius: 0 !important; margin: 0; } .cal-body { padding: 18px 16px 28px; } .cal-header { padding: 16px; } } /* ===================================================================== CORRECTIF MOBILE — Section « Comment commencer ? » (processus) Placé en fin de fichier pour garantir la priorité sur la règle desktop .process-grid (3 colonnes) définie plus haut : sur mobile, on empile les 3 étapes en 1 seule colonne et on tourne la flèche vers le bas. ===================================================================== */ @media (max-width: 768px) { .process-grid { grid-template-columns: 1fr; gap: 0; } .process-arrow { transform: rotate(90deg); margin: 6px auto; } } /* ═══════════════════════════════════════════════════════════════════════ OPTIMISATION MOBILE (2026-08) — ajouts NON destructifs • Desktop inchangé (tout est en @media mobile ou éléments injectés cachés au-dessus de 768px) • Respecte prefers-reduced-motion • Suppression = retirer ce bloc + le bloc JS "OPTIMISATION MOBILE" de main.js ═══════════════════════════════════════════════════════════════════════ */ /* — 1. Fond des hero fluide sur mobile (background-attachment:fixed est ignoré/saccadé sur mobile, notamment iOS) — */ @media (max-width: 768px) { .hero, .page-hero { background-attachment: scroll; } } /* — 2. Cibles tactiles ≥ 44px sur mobile (le desktop garde ses tailles) — */ @media (max-width: 768px) { .ts-btn { min-width: 44px; min-height: 44px; } .lang-toggle, .lang-option { min-height: 44px; } .search-input { min-height: 44px; } .search-close-btn, .cart-close { min-width: 44px; min-height: 44px; } .newsletter-form input, .newsletter-form button { min-height: 46px; } .nav-links a { padding-top: 12px; padding-bottom: 12px; } .mega-footer a { display: inline-block; padding: 9px 2px; } .nl-social-pill { min-height: 44px; } .cart-empty-link { display: inline-block; min-height: 44px; padding: 10px 0; } } /* — 3. Accessibilité : le scroll-reveal existant (.fade-up) respecte désormais prefers-reduced-motion (contenu visible immédiatement) — */ @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; } } /* — 4. Bouton de réservation flottant (mobile), discret et chaleureux — */ .m-cta-sticky { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(150%); z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 50px; background: var(--primary); color: #fff; font-family: var(--font-body); font-size: .98rem; letter-spacing: .3px; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 30px rgba(75,53,34,.28); border: 1.5px solid rgba(255,255,255,.14); opacity: 0; pointer-events: none; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease, background .2s ease; } .m-cta-sticky.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .m-cta-sticky:active { background: var(--primary-dark); } .m-cta-sticky svg { width: 17px; height: 17px; flex: none; } /* — 5. Retour en haut de page (mobile) — */ .m-to-top { position: fixed; right: 16px; bottom: 18px; z-index: 899; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-card); color: var(--primary); border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .35s ease, background .2s ease; } .m-to-top.is-visible { opacity: .97; transform: none; pointer-events: auto; } .m-to-top:active { background: var(--bg-alt); } .m-to-top svg { width: 20px; height: 20px; } /* décale le retour-haut au-dessus du CTA flottant quand les deux coexistent */ .m-to-top.with-cta.raise { bottom: 80px; } /* — 6. Barre de progression de lecture (pages longues) — */ .m-read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1001; background: linear-gradient(90deg, var(--accent), var(--gold)); pointer-events: none; } /* — Éléments injectés : mobile uniquement (desktop 100% inchangé) — */ @media (min-width: 769px) { .m-cta-sticky, .m-to-top, .m-read-progress { display: none !important; } } /* — Accessibilité : animations réduites — */ @media (prefers-reduced-motion: reduce) { .m-cta-sticky { transition: opacity .2s ease !important; } .m-to-top { transition: opacity .2s ease !important; } } /* ═══════════════════════════════════════════════════════════════════════ OPTIMISATION GLOBALE (2026-08) — PC + mobile, non destructif ═══════════════════════════════════════════════════════════════════════ */ /* Accessibilité clavier : anneau de focus visible seulement au clavier (n'apparaît pas au clic souris). Aide la navigation PC. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* Médias fluides : jamais de débordement, ratio préservé */ img, svg, video, canvas { max-width: 100%; } video { height: auto; } /* Respect de prefers-reduced-motion pour le défilement fluide global */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ── Header capsule : logo compact + hero sans filtre (2026-08) ── */ .logo-img { height: 44px; } .header.scrolled .logo-img { height: 40px; } /* Lisibilité du texte du hero sur l'image non filtrée */ .hero-title { text-shadow: 0 2px 26px rgba(18,12,5,.55), 0 1px 6px rgba(18,12,5,.45); } .hero-subtitle { text-shadow: 0 2px 16px rgba(18,12,5,.55), 0 1px 4px rgba(18,12,5,.45); } .hero-bismillah{ text-shadow: 0 2px 20px rgba(18,12,5,.5); } .hero-scroll { text-shadow: 0 1px 10px rgba(18,12,5,.5); } /* ── Capsule header : finition premium & interactions douces (2026-08) ── */ .header{ background: linear-gradient(180deg, rgba(250,247,242,.60), rgba(243,238,231,.48)); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 16px 42px rgba(52,38,22,.15), inset 0 1px 0 rgba(255,255,255,.65); } .header.scrolled{ background: linear-gradient(180deg, rgba(250,247,242,.9), rgba(243,238,231,.84)); box-shadow: 0 10px 32px rgba(52,38,22,.2), inset 0 1px 0 rgba(255,255,255,.7); } /* Liens : pastille douce au survol (remplace le soulignement) */ .nav-links{ gap: 2px; } .nav-links > li > a{ padding: 9px 15px; border-radius: 999px; transition: color .25s ease, background .25s ease; } .nav-links > li > a::after{ display: none; } .nav-links > li > a:hover{ background: rgba(139,96,64,.1); color: var(--primary); } /* Icônes d'action : cible ronde + survol/appui doux */ .nav-search-btn, .auth-nav-btn, .cart-icon-btn, .lang-toggle, .nav-toggle{ border-radius: 999px; transition: background .2s ease, transform .12s ease; } .nav-search-btn:hover, .auth-nav-btn:hover, .cart-icon-btn:hover, .lang-toggle:hover, .nav-toggle:hover{ background: rgba(139,96,64,.1); } .nav-search-btn:active, .auth-nav-btn:active, .cart-icon-btn:active, .nav-toggle:active{ transform: scale(.93); } /* ── Menu mobile : tiroir latéral transparent, coins arrondis ── */ @media (max-width: 768px){ .nav-links{ width: 78%; max-width: 320px; background: rgba(244,236,224,.88); border: none; border-radius: 28px; box-shadow: 0 20px 60px rgba(38,28,16,.22); padding: 0 16px; gap: 4px; } .nav-links > li{ width: 100%; max-width: 260px; } .nav-links > li > a{ display: block; text-align: center; /* Pas de pastille derrière le lien */ background: transparent; color: #2e2419 !important; font-family: 'Cormorant', serif; font-size: 1.5rem; font-weight: 600; letter-spacing: .4px; padding: 15px 20px; border: none !important; border-bottom: none !important; border-radius: 18px; text-shadow: none; box-shadow: none; } .nav-links > li > a:hover, .nav-links > li > a:active{ background: rgba(139, 96, 64, 0.1); color: var(--primary) !important; } /* Lien actif (page courante) */ .nav-links > li > a[href="index.html"] { background: transparent; } /* Sous-menu (Ressources) : centré, lisible, repliable par défaut. display:none est la seule condition de visibilité (comme pour le panneau principal) — aucune transition en cours ne peut donc être interrompue par un clic immédiat sur Ebook/Blog juste après l'ouverture, ce qui évite tout résidu visuel pendant la navigation. */ .nav-dropdown .dropdown-menu{ background: transparent !important; text-align: center; padding: 0; display: none; flex-direction: column; gap: 4px; } .nav-dropdown.open .dropdown-menu{ display: flex; padding: 6px 0 0 0; /* Neutralise la règle desktop (hors media query) qui positionne le sous-menu en absolu centré via transform — sans quoi elle gagne ici à cause d'une spécificité plus élevée. */ position: static !important; transform: none !important; left: auto !important; } .nav-dropdown .dropdown-menu a{ color: #3D2B1F !important; font-weight: 600; font-size: .95rem; justify-content: center; background: rgba(255, 255, 255, 0.35); border-radius: 14px; padding: 12px 18px; display: flex; align-items: center; gap: 8px; transition: background .2s ease, transform .2s ease; } .nav-dropdown .dropdown-menu a:hover{ background: rgba(255, 255, 255, 0.65); transform: translateX(3px); } .nav-dropdown .dd-arrow{ display: inline-block; transition: transform .3s ease; } .nav-dropdown.open .dd-arrow{ transform: rotate(180deg); } } /* ═══════════════════════════════════════════════════════════ COMPACTION GLOBALE — Header (hamburger tablette) + Footer Reprend le travail fait sur l'accueil, appliqué à toutes les pages via la feuille partagée. ═══════════════════════════════════════════════════════════ */ /* Footer resserré (toutes largeurs) */ .mega-footer { padding-top: 38px; } .mega-footer .mf-top { gap: 22px; padding-bottom: 24px; } .mega-footer .mf-links { gap: 16px; } .mega-footer .mf-newsletter .nl-title { margin: 6px 0 14px; } .mega-footer .mf-brand { gap: 10px; } .mega-footer .mf-social { gap: 8px; } .mega-footer .mf-bottom { padding: 16px 0; } /* Footer ultra-compact dès que la grille s'empile (≤900px), même contenu */ @media (max-width: 900px) { .mega-footer { padding-top: 14px !important; } .mega-footer .mf-top { gap: 8px !important; padding-bottom: 8px !important; } .mega-footer .mf-brand { align-items: center !important; text-align: center; gap: 3px !important; } .mega-footer .logo-img-footer { height: 38px !important; } .mega-footer .mf-tagline { font-size: .7rem !important; margin: 0 !important; } .mega-footer .mf-social { flex-direction: row !important; justify-content: center !important; gap: 8px !important; margin-top: 2px !important; } .mega-footer .nl-social-pill { padding: 6px 13px !important; min-height: 0 !important; font-size: .82rem !important; } .mega-footer .mf-newsletter .nl-eyebrow { margin-bottom: 1px !important; font-size: .58rem !important; } .mega-footer .mf-newsletter .nl-title { font-size: 1.02rem !important; line-height: 1.15 !important; margin: 1px 0 7px !important; } .mega-footer .mf-newsletter .newsletter-form input, .mega-footer .mf-newsletter .newsletter-form button { padding-top: 9px !important; padding-bottom: 9px !important; } .mega-footer .mf-newsletter .nl-note { margin-top: 4px !important; font-size: .64rem !important; } .mega-footer .mf-links { align-items: center !important; gap: 6px !important; } .mega-footer .mf-nav { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 2px 14px !important; } .mega-footer .mf-nav a { padding: 1px 2px !important; } .mega-footer .mf-contact { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 1px 12px !important; } .mega-footer .mf-contact a, .mega-footer .mf-contact span { padding: 1px 2px !important; } .mega-footer .mf-bottom { padding: 8px 0 !important; gap: 2px 8px !important; } .mega-footer .mf-bottom, .mega-footer .mf-bottom a, .mega-footer .mf-bottom span { font-size: .64rem !important; } } /* Header : menu hamburger dès la tablette (≤1024px) — évite le chevauchement des liens Tiroir latéral, fond opaque, sans flou ni transition (voir notes plus haut) : display:none/flex est la seule condition de visibilité, ce qui exclut tout résidu visuel pendant un changement de page. */ @media (max-width: 1024px) { .nav-links { display: none !important; flex-direction: column; align-items: center; justify-content: center; position: fixed; top: 12px; bottom: 12px; right: 12px; left: auto; transform: none; width: 78%; max-width: 320px; height: auto; background: rgba(244,236,224,.88); padding: 0 20px; box-shadow: 0 20px 60px rgba(38,28,16,.22); gap: 4px; z-index: 999; overflow-y: auto; border: none; border-radius: 28px; } .nav-links.open { display: flex !important; } .nav-links > li { width: 100%; max-width: 260px; } .nav-links > li > a { color: #3D2B1F !important; font-family: 'Cormorant', serif; font-size: 1.5rem; font-weight: 600; letter-spacing: .4px; text-align: center; padding: 15px 12px; background: transparent !important; box-shadow: none !important; border: none !important; border-bottom: none !important; display: block; border-radius: 18px; } .nav-links > li > a:hover, .nav-links > li > a:active { background: rgba(139, 96, 64, 0.1) !important; color: var(--primary) !important; } .nav-links > li > a::after { display: none; } .nav-toggle { display: flex !important; } .dropdown-menu { position: static; transform: none; box-shadow: none; background: var(--bg-alt); border: none; padding: 0 0 0 16px; opacity: 1; pointer-events: all; display: none; border-radius: 0; } .nav-dropdown.open .dropdown-menu { display: block; } } /* ═══════════════════════════════════════════════════════════ BOUTONS — couleur unique marron foncé (tout le site) (le bouton newsletter reste clair : il est sur le footer sombre) ═══════════════════════════════════════════════════════════ */ .btn-primary, .hero-btn, .ch-offer-btn, .ch-offer-btn.gold, .rv-submit, .cart-checkout-btn, .testi-cta-wrap .btn-primary, .cta-checkout, .ac-submit, .ct-submit { background: #9E8C7C !important; border-color: #9E8C7C !important; color: #fdf7ee !important; } .btn-primary:hover, .hero-btn:hover, .ch-offer-btn:hover, .ch-offer-btn.gold:hover, .rv-submit:hover, .cart-checkout-btn:hover, .testi-cta-wrap .btn-primary:hover, .ac-submit:hover, .ct-submit:hover { background: #8a7969 !important; border-color: #8a7969 !important; box-shadow: 0 10px 30px rgba(46,36,25,.42) !important; transform: translateY(-2px); }