/* ============================================================ ARUSH DESIGN — feuille de style Les couleurs/polices sont en variables : on les ajustera au "pixel près" une fois les vraies valeurs du site Wix connues. ============================================================ */ /* Police de marque : Arimo (Google Fonts) — chargée via dans le */ :root { /* Couleurs — À AJUSTER d'après le site Wix */ --color-bg: #ffffff; --color-text: #2b2b2b; --color-muted: #6b6b6b; --color-primary: #b9a3d6; /* lavande holographique (accents, icônes, liens) */ --color-primary-dark: #8d72b8; --color-accent: #f5f0fa; /* fond pastel très clair */ --color-dark: #1a1a1a; /* Couleurs de boutons (marque) */ --color-btn: #FFF86B; /* jaune — boutons */ --color-btn-dark: #f0e83f; /* jaune survol */ --color-blue: #2B6CFF; /* bleu — bouton CTA haut de page */ --color-blue-dark: #1f5be0; /* Dégradé signature (repris du logo) */ --gradient-brand: linear-gradient(115deg, #fbe4ef 0%, #e9d9f3 28%, #d6e4f5 52%, #e7f0d9 74%, #fdf3da 100%); /* Typographies — titres Stack Sans Headline, corps Arimo */ --font-title: 'Stack Sans Headline', 'Arimo', -apple-system, Helvetica, Arial, sans-serif; --font-body: 'Arimo', -apple-system, Helvetica, Arial, sans-serif; /* Mesures */ --container: 1200px; --radius: 8px; --header-h: 76px; --transition: 0.25s ease; } /* Titres en hébreu : Heebo (Stack Sans Headline ne couvre pas l'hébreu) */ [dir="rtl"] { --font-title: 'Heebo', 'Arimo', -apple-system, Helvetica, Arial, sans-serif; } /* ---------- Reset léger ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Lenis (smooth scroll) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.6; font-weight: 400; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .section-title { font-family: var(--font-title); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; text-align: center; margin-bottom: 1.5rem; } /* ---------- Boutons ---------- */ .btn { display: inline-block; padding: 14px 34px; border-radius: 40px; font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.5px; cursor: pointer; border: 1.5px solid transparent; transition: var(--transition); } .btn--primary { background: var(--color-btn); color: var(--color-dark); font-weight: 700; } .btn--primary:hover { background: var(--color-btn-dark); } .btn--blue { background: var(--color-blue); color: #fff; font-weight: 700; } .btn--blue:hover { background: var(--color-blue-dark); } .btn--outline { background: transparent; border-color: var(--color-dark); color: var(--color-dark); font-weight: 500; } .btn--outline:hover { background: var(--color-dark); color: #fff; } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid #eee; } .header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); } .logo { color: var(--color-dark); } .logo__img { height: 30px; width: auto; display: block; } .nav__list { display: flex; gap: 28px; align-items: center; } .nav__link { font-size: 0.9rem; letter-spacing: 0.3px; position: relative; padding: 4px 0; transition: var(--transition); } .nav__link:hover, .nav__link.is-active { color: var(--color-primary-dark); } /* Sous-menu */ .has-submenu { position: relative; } .submenu { position: absolute; top: 100%; left: 0; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.1); border-radius: var(--radius); padding: 10px 0; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--transition); } .has-submenu:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); } .submenu li a { display: block; padding: 10px 20px; font-size: 0.88rem; } .submenu li a:hover { background: var(--color-accent); } /* Sélecteur de langue */ .lang-switch { position: relative; display: flex; align-items: center; } .lang-switch__menu { display: flex; align-items: center; gap: 10px; } .lang-switch__current { display: none; } /* affiché uniquement en mobile (dropdown) */ .lang-switch__btn { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 0.85rem; color: var(--color-muted); padding: 4px 4px; transition: var(--transition); } .lang-switch__btn:hover { color: var(--color-primary-dark); } .lang-switch__btn.is-active { color: var(--color-dark); font-weight: 700; } /* Burger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { width: 26px; height: 2px; background: var(--color-text); transition: var(--transition); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 78vh; display: grid; place-items: center; text-align: center; background: var(--gradient-brand); background-size: cover; background-position: center; padding: 60px 0; overflow: hidden; } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; /* lecture en fond, non déclenchable */ } .hero__overlay { position: absolute; inset: -2px; /* couvre exactement la vidéo, sans liseré/décalage */ background: rgba(255, 255, 255, 0.45); z-index: 1; } .hero__inner { position: relative; z-index: 2; } .hero__title { font-family: var(--font-title); font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 700; color: var(--color-dark); line-height: 1.1; margin-bottom: 1rem; } .hero__subtitle { font-size: clamp(1rem, 2.5vw, 1.4rem); color: var(--color-text); margin-bottom: 1rem; font-weight: 400; } .hero__text { max-width: 620px; margin: 0 auto 2rem; font-size: 1rem; color: var(--color-text); font-weight: 400; } /* ============================================================ AVANTAGES ============================================================ */ .features { padding: 90px 0; } .features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 1.4rem; } .feature { text-align: center; padding: 20px; } .feature__icon { font-size: 3.4rem; line-height: 1; margin-bottom: 1rem; } /* Icônes : bicolore bleu / parme, transition douce */ .feature__icon, .howto__icon, .reassure__icon { background: linear-gradient(135deg, var(--color-blue) 28%, var(--color-primary) 72%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Retourne les icônes directionnelles en hébreu (droite -> gauche) */ [dir="rtl"] .flip-rtl { display: inline-block; transform: scaleX(-1); } .feature__title { font-family: var(--font-title); font-size: 1.3rem; font-weight: 700; margin-bottom: 0.6rem; } .feature p { font-size: 0.92rem; color: var(--color-muted); } /* ============================================================ CONCEPT ============================================================ */ .concept { padding: 90px 0; background: var(--color-accent); } .concept__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .concept__text .section-title { text-align: left; } .concept__text p { margin-bottom: 1.2rem; color: var(--color-muted); } .services-list--inline { grid-template-columns: 1fr; max-width: none; margin: 0 0 1.4rem; } .concept__text .btn { margin-top: 0.5rem; } .concept__img { aspect-ratio: 4/3; width: 100%; object-fit: cover; border-radius: var(--radius); } /* ============================================================ CONTACT ============================================================ */ .contact { padding: 90px 0; } .contact__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; } .contact__info .section-title { text-align: left; } .contact__list { margin-top: 1.5rem; } .contact__list li { margin-bottom: 0.8rem; } .contact__list a { color: var(--color-primary-dark); } .contact__form { display: flex; flex-direction: column; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact__form input, .contact__form textarea { width: 100%; padding: 14px 16px; border: 1px solid #ddd; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.95rem; } .contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--color-primary); } .contact__form .btn { align-self: flex-start; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: transparent; color: var(--color-text); padding: 20px 0; text-align: center; } .footer__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; } .footer__social { display: flex; gap: 20px; align-items: center; } .footer__social a { display: inline-flex; transition: var(--transition); } .footer__social svg { width: 24px; height: 24px; fill: #000; display: block; } .footer__social a:hover { opacity: 0.6; } .footer__copy { font-size: 0.8rem; color: var(--color-muted); margin: 0; } /* ============================================================ CARTES "NOS INVITATIONS" (accueil) ============================================================ */ .services-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 1.4rem; } .service-card { position: relative; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 26px rgba(0,0,0,0.07); display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); } .service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); } .service-card--featured { border: 2px solid var(--color-blue); } .service-card__badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--color-blue); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 6px 13px; border-radius: 40px; box-shadow: 0 3px 10px rgba(0,0,0,0.18); } .service-card__media { aspect-ratio: 4/3; background: var(--gradient-brand); } .service-card__media img { width: 100%; height: 100%; object-fit: cover; } .service-card__body { padding: 26px 24px 30px; display: flex; flex-direction: column; flex-grow: 1; text-align: center; } .service-card__title { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.3rem; } .service-card__price { color: var(--color-blue); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.8rem; } .service-card__body p { color: var(--color-muted); font-size: 0.95rem; margin-bottom: 1.4rem; } .service-card__body p.service-card__price { flex-grow: 0; } .service-card__body > p:not(.service-card__price) { flex-grow: 1; } /* ============================================================ "COMMENT ÇA MARCHE ?" (accueil) — 4 bandes pleine largeur ============================================================ */ .howto { display: grid; grid-template-columns: repeat(4, 1fr); } .howto__col { padding: 70px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; } /* Colonne titre (noire) */ .howto__col--title { background: #000; justify-content: center; align-items: flex-start; text-align: left; } .howto__col--title h2 { font-family: var(--font-title); color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.4rem); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; line-height: 1.3; margin: 0; } /* Fonds des 3 étapes */ .howto__col--yellow { background: #FBF6C9; } .howto__col--blue { background: #E6EFF2; } .howto__col--lavender { background: linear-gradient(135deg, #E7E3F5 0%, #F3F1FA 70%, #ffffff 100%); } .howto__icon { font-size: 3.6rem; line-height: 70px; margin-bottom: 1.6rem; } .howto__title { font-family: var(--font-title); font-size: 1.6rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1rem; } .howto__col p { color: var(--color-text); font-size: 0.98rem; margin-bottom: 2rem; flex-grow: 1; } .howto__col .btn { margin-top: auto; } /* ============================================================ PAGES INTÉRIEURES ============================================================ */ /* Bannière de titre de page */ .page-head { background: var(--gradient-brand); text-align: center; padding: 90px 0 70px; } .page-head h1 { font-family: var(--font-title); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; color: var(--color-dark); margin-bottom: 0.8rem; } .page-head p { max-width: 640px; margin: 0 auto; color: var(--color-text); font-size: 1.05rem; } /* En-tête : image à gauche + cadre blanc qui chevauche par-dessus à droite */ .page-head--split { background: var(--color-accent); padding: 60px 0; text-align: left; } .page-head--split .page-head__inner { position: relative; display: block; } .page-head__media { width: 64%; min-height: 540px; } .page-head__media img, .page-head__media video { width: 100%; height: 540px; object-fit: cover; display: block; } .page-head__box { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 54%; background: #fff; padding: 50px 60px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); text-align: left; } .page-head__box h1 { margin: 0 0 1rem; text-align: left; } .page-head__box p { margin: 0 0 1.6rem; max-width: none; text-align: left; color: var(--color-muted); } .page-head__box .btn { margin-top: 0; } /* Hébreu : l'image passe à droite, le cadre blanc à gauche */ [dir="rtl"] .page-head__box { right: auto; left: 0; text-align: right; } [dir="rtl"] .page-head__box h1, [dir="rtl"] .page-head__box p { text-align: right; } .section { padding: 80px 0; } .section--alt { background: var(--color-accent); } .lead { text-align: center; max-width: 720px; margin: 0 auto 1.5rem; color: var(--color-muted); } /* ============================================================ FONDS DE PAGE (couleur unique de la bande de titre jusqu'en bas) ============================================================ */ /* Sur ces pages, le dégradé du header et les sections alternées deviennent transparents pour laisser voir le fond de la page. */ .page-bg .page-head, .page-bg .page-head--split, .page-bg .section--alt { background: transparent; } body.bg-whatsapp { background: #E3EFF3; } body.bg-siteweb { background: #DFDFFF; } body.bg-video { background: #E0E0E0 url('../assets/images/bg-video-grey.jpg'); } body.bg-autour { background: url('../assets/images/autour-bg.jpg') center center / cover no-repeat fixed; } body.bg-formules { background: linear-gradient(160deg, #CFE7F7 0%, #E6EFD6 55%, #FFF86B 100%) fixed; } body.bg-questionnaire { background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url('../assets/images/quest.jpg') center center / cover no-repeat fixed; } /* Grille de modèles (sites web / vidéo / whatsapp) — flex pour centrer la dernière ligne */ .template-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 1.4rem; } .template-card { flex: 0 1 220px; border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.06); transition: transform var(--transition), box-shadow var(--transition); cursor: default; } .template-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.08); } .template-card__media { aspect-ratio: 3/4; background: var(--gradient-brand); display: grid; place-items: center; } .template-card__media img, .template-card__media video { width: 100%; height: 100%; object-fit: cover; } .template-card__name { font-family: var(--font-title); font-size: 1.1rem; font-weight: 700; text-align: center; padding: 14px 10px 4px; border-top: 1px solid #f0f0f0; } .template-card__cat { text-align: center; font-size: 0.74rem; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-primary-dark); padding: 0 10px 12px; } /* Ligne de prix sous les intros */ .priceline { color: var(--color-blue); font-weight: 600; font-size: 0.98rem; margin-top: 0.9rem; } /* Bandeau d'infos transparent, juste au-dessus des invitations */ .invit-info { text-align: center; margin: 0 auto 1.6rem; background: transparent; } .invit-info .priceline { margin-top: 0; font-size: 1.05rem; } .invit-info__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 0.9rem 0 1.2rem; } .invit-info__list li { position: relative; padding-left: 20px; font-size: 0.9rem; color: var(--color-text); } .invit-info__list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-blue); font-weight: 700; } .invit-info .offer__note { max-width: 640px; margin: 0 auto 1.2rem; } /* Espacements réduits sur Vidéo et WhatsApp */ body.bg-video .section, body.bg-whatsapp .section { padding: 40px 0; } body.bg-video .page-head, body.bg-whatsapp .page-head { padding: 60px 0 24px; } /* Bloc "Ce qui est inclus" (pages Vidéo / WhatsApp) */ .offer { max-width: 600px; margin: 0 auto; background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 36px 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); text-align: center; } .offer__title { font-family: var(--font-title); font-size: 1.3rem; font-weight: 700; margin-bottom: 1.2rem; } .offer__list { max-width: 380px; margin: 0 auto 1.6rem; text-align: left; } .offer__note { color: var(--color-muted); font-size: 0.92rem; margin-bottom: 1.4rem; } /* Autour : blocs services + faire-parts + tarif */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 2.4rem; } .svc-block { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 24px 22px; box-shadow: 0 6px 20px rgba(0,0,0,0.05); } .svc-block h3 { font-family: var(--font-title); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; } .svc-block p { color: var(--color-muted); font-size: 0.92rem; } .papier { max-width: 720px; margin: 0 auto 2.4rem; text-align: center; background: var(--color-accent); border-radius: 16px; padding: 30px 32px; } .papier h3 { font-family: var(--font-title); font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; } .papier p { color: var(--color-text); } .autour-tarif { text-align: center; max-width: 620px; margin: 0 auto; } .autour-tarif p { color: var(--color-muted); margin-bottom: 1.2rem; } /* Variante "rectangle paysage" (ex. captures de sites web) */ .template-grid--rect .template-card { flex: 0 1 340px; } .template-grid--rect .template-card__media { aspect-ratio: 16 / 10; } /* Grille tarifs */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 1.4rem; } .price-card { border: 1px solid #eee; border-radius: 16px; padding: 36px 28px; text-align: center; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); } .price-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.1); } .price-card__title { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; } .price-card__price { font-size: 0.9rem; font-style: italic; font-weight: 400; color: #000; white-space: nowrap; margin-left: 6px; } .price-card__list { text-align: left; margin: 1.5rem 0; flex-grow: 1; } .price-card__list li { padding: 8px 0 8px 24px; position: relative; font-size: 0.92rem; color: var(--color-text); border-bottom: 1px solid #f3f3f3; } .price-card__list li::before { content: "✦"; position: absolute; left: 0; color: var(--color-primary); } .price-card__list .opt { color: var(--color-muted); font-style: italic; } .price-card .note { font-size: 0.78rem; color: #aaa; margin-bottom: 1.2rem; } /* Liste de services */ .services-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 820px; margin: 0 auto 1.5rem; } .services-list li { background: #fff; border-radius: var(--radius); padding: 18px 22px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); font-size: 0.98rem; position: relative; padding-left: 46px; } .services-list li::before { content: "✦"; position: absolute; left: 20px; top: 18px; color: var(--color-primary); } /* Galerie */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 1.4rem; } .gallery img, .gallery video, .gallery__item { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); background: var(--gradient-brand); display: block; } /* Grille de modèles "à plat" : pas de fond derrière les PNG (ex. WhatsApp) */ .template-grid--plain .template-card { box-shadow: none; background: transparent; } .template-grid--plain .template-card__media { background: transparent; } .template-grid--plain .template-card__media img { object-fit: contain; } /* Bouton "retour en haut" */ .to-top { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--color-blue); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease; z-index: 200; } .to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .to-top:hover { background: var(--color-blue-dark); } .to-top svg { width: 22px; height: 22px; fill: currentColor; } /* Boutons contact (accueil) : tél + WhatsApp côte à côte sous le texte */ .contact-btns { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; } /* Bouton Envoyer centré dans les formulaires en carte (questionnaire) */ .form-card button[type="submit"] { display: block; margin: 0.5rem auto 0; } /* Questionnaire / formulaires longs */ .form-card { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); } .field { margin-bottom: 22px; } .field > label { display: block; font-weight: 500; font-size: 0.95rem; margin-bottom: 8px; } .field .req { color: #d06; } .field-note { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--color-muted); font-style: italic; } .field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="date"], .field input[type="file"], .field textarea { width: 100%; padding: 13px 15px; border: 1px solid #ddd; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.95rem; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--color-primary); } /* Formulaire "être contacté" : 4 champs en ligne + bouton pleine largeur */ .contact-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: end; max-width: 1180px; margin: 2rem auto 0; } .contact-row .field { margin-bottom: 0; } .contact-row .field > label { font-weight: 400; color: var(--color-text); } .contact-row input { width: 100%; padding: 15px 16px; border: none; border-radius: 6px; background: rgba(255, 255, 255, 0.7); font-family: var(--font-body); font-size: 0.95rem; } .contact-row input:focus { outline: 2px solid var(--color-primary); } .contact-row__send { grid-column: 1 / -1; width: 100%; border-radius: 40px; padding: 16px; font-size: 1.05rem; } .choices { display: flex; flex-wrap: wrap; gap: 14px; } .choices label { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 400; background: var(--color-accent); padding: 10px 16px; border-radius: 40px; cursor: pointer; } /* ============================================================ PAGE FORMULES & TARIFS (refonte) ============================================================ */ .tarifs-hero { text-align: center; padding: 80px 0 30px; } .tarifs-hero h1 { font-family: var(--font-title); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; margin-bottom: 1rem; } .tarifs-hero p { max-width: 640px; margin: 0 auto; color: var(--color-text); font-size: 1.1rem; } /* Les 3 formules */ .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; margin-top: 1.5rem; } .plan { position: relative; background: #fff; border: 1px solid #ececec; border-radius: 18px; padding: 40px 30px 34px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.06); } /* Carte mise en avant */ .plan--featured { border: 2px solid var(--color-blue); background: #fbfcff; box-shadow: 0 20px 50px rgba(43,108,255,0.16); } .plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--color-blue); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 16px; border-radius: 40px; white-space: nowrap; } .plan__title { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; } .plan__price { font-size: 2rem; font-weight: 800; color: var(--color-dark); line-height: 1.1; } .plan__price span { font-size: 0.9rem; font-weight: 400; color: var(--color-muted); } .plan__price--quote { font-size: 1.4rem; } .plan__delai { color: var(--color-blue); font-weight: 600; font-size: 0.9rem; margin: 0.5rem 0 1.4rem; } .plan__inclus { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.8rem; } .plan__list { margin-bottom: 1.8rem; flex-grow: 1; } .plan__list li { position: relative; padding: 7px 0 7px 26px; font-size: 0.94rem; color: var(--color-text); } .plan__list li::before { content: "✓"; position: absolute; left: 0; top: 7px; color: var(--color-blue); font-weight: 700; } .plan__list-hl { font-weight: 700; } .plan__cta { width: 100%; text-align: center; } .plan__note { font-size: 0.8rem; color: var(--color-muted); text-align: center; margin-top: 0.9rem; } /* Réassurance */ .reassure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .reassure__item { text-align: center; padding: 10px; } .reassure__icon { font-size: 3.4rem; line-height: 1; margin-bottom: 0.9rem; } .reassure__item h3 { font-family: var(--font-title); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; } .reassure__item p { color: var(--color-muted); font-size: 0.95rem; } /* FAQ (accordéon natif) */ .faq { max-width: 760px; } .faq__item { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 4px 22px; margin-bottom: 14px; } .faq__item summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 1.02rem; padding: 16px 30px 16px 0; position: relative; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--color-blue); font-weight: 700; } .faq__item[open] summary::after { content: "−"; } .faq__item p { color: var(--color-muted); font-size: 0.95rem; padding: 0 0 16px; } .tarifs-final { text-align: center; max-width: 680px; } /* ============================================================ OVERLAY DE TRANSITION DE PAGE (animé par GSAP) ============================================================ */ #page-transition { position: fixed; inset: 0; background: #000; z-index: 99999; pointer-events: none; } /* ============================================================ CURSEUR PERSONNALISÉ (point de navigation) Visible sur tous les fonds grâce à mix-blend-mode: difference. Activé seulement sur les appareils à pointeur fin (souris). ============================================================ */ @media (hover: hover) and (pointer: fine) { * { cursor: none !important; } .cursor-dot { position: fixed; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: width .18s ease, height .18s ease, background .18s ease; } .cursor-dot.is-hover { width: 34px; height: 34px; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .features__grid { grid-template-columns: repeat(2, 1fr); } .concept__inner, .contact__inner { grid-template-columns: 1fr; gap: 40px; } .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .plans { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } .reassure { grid-template-columns: 1fr; gap: 24px; } .svc-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } .services-cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } .howto { grid-template-columns: repeat(2, 1fr); } .howto__col--title { align-items: center; text-align: center; } .contact-row { grid-template-columns: repeat(2, 1fr); } /* Header mobile : cadre texte à cheval sur l'image/vidéo (visible sans scroll) */ .page-head--split { padding: 0 0 36px; } .page-head__media { width: 100%; min-height: 0; } .page-head__media img, .page-head__media video { height: 320px; } .page-head__box { position: relative; top: auto; transform: none; width: 86%; margin: -150px auto 0; padding: 30px 26px; z-index: 2; } } @media (max-width: 560px) { .page-head__media img, .page-head__media video { height: 270px; } .page-head__box { width: 92%; margin-top: -130px; padding: 24px 22px; } } @media (max-width: 768px) { /* Disposition : burger à gauche · logo centré · langue à droite */ .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav-toggle { display: flex; order: 1; justify-self: start; } .logo { order: 2; justify-self: center; } .lang-switch { order: 3; justify-self: end; } /* Langue en menu déroulant */ .lang-switch__current { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #ddd; border-radius: 40px; padding: 5px 12px; font-size: 0.82rem; color: var(--color-dark); cursor: pointer; } .lang-switch__current::after { content: "▾"; font-size: 0.7em; } .lang-switch__menu { position: absolute; top: 100%; right: 0; margin-top: 8px; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px 0; min-width: 116px; z-index: 120; opacity: 0; visibility: hidden; transform: translateY(6px); transition: var(--transition); } .lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-switch__menu .lang-switch__btn { padding: 11px 18px; text-align: left; } /* Menu déroulant sous le header (s'ouvre sous le bouton menu) */ .nav { position: fixed; top: var(--header-h); left: 0; width: 100%; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,0.12); max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .nav.is-open { max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .nav__list { flex-direction: column; gap: 0; align-items: stretch; padding: 6px 0; } .nav__list > li { border-bottom: 1px solid #f0f0f0; } .nav__list > li:last-child { border-bottom: none; } .nav__link { display: block; padding: 15px 28px; } .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: var(--color-accent); padding: 0; } .submenu li a { padding-left: 44px; } /* burger -> croix */ .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } @media (max-width: 520px) { .features__grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer__social { flex-wrap: wrap; gap: 16px; } .services-list { grid-template-columns: 1fr; } .form-card { padding: 24px; } .template-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .howto { grid-template-columns: 1fr; } .contact-row { grid-template-columns: 1fr; } } /* ============================================================ HÉBREU — sens de lecture droite à gauche (RTL) ============================================================ */ [dir="rtl"] body, [dir="rtl"] { text-align: right; } /* Aligne à droite les titres et textes alignés à gauche en LTR */ [dir="rtl"] .concept__text .section-title, [dir="rtl"] .contact__info .section-title { text-align: right; } /* Listes : la puce et le padding passent à droite */ [dir="rtl"] .price-card__list li, [dir="rtl"] .services-list li { padding-left: 0; padding-right: 24px; text-align: right; } [dir="rtl"] .price-card__list li::before { left: auto; right: 0; } [dir="rtl"] .services-list li { padding-right: 46px; } [dir="rtl"] .services-list li::before { left: auto; right: 20px; } [dir="rtl"] .price-card__list { text-align: right; } /* Sous-menu : ouverture alignée à droite */ [dir="rtl"] .submenu { left: auto; right: 0; } /* Formulaire : champs alignés à droite */ [dir="rtl"] .field input, [dir="rtl"] .field textarea, [dir="rtl"] .contact__form input, [dir="rtl"] .contact__form textarea { text-align: right; } /* Menu mobile : il s'ouvre depuis la gauche en hébreu */ @media (max-width: 768px) { [dir="rtl"] .submenu li a { padding-left: 0; padding-right: 44px; } [dir="rtl"] .lang-switch__menu { right: auto; left: 0; } [dir="rtl"] .lang-switch__menu .lang-switch__btn { text-align: right; } }