/* ========================================================================== accueil-v2.css — Sections de conversion V2 de la page d'accueil -------------------------------------------------------------------------- RÈGLE D'OR : aucune couleur ni police inventée, aucun CSS existant modifié. Ce fichier n'ajoute que la mise en page des sections nouvelles ; toutes les valeurs chromatiques sont COPIÉES du CSS/HTML existant (provenance ci-dessous). CLASSES EXISTANTES RÉUTILISÉES (jamais redéfinies ici) : .container-xxl .row .col-* .py-60 .my-12 .mb-60 .mt-34 .mx-auto .d-grid .d-flex .gap-12 .text-center .text-dark .text-white .fw-semiBold .rounded-pill .btn .btn-primary .btn-apply .fs-14 .heading-text-3 → surtitre de section (« Avantages », « Tarifs ») .heading-section-3 → titre de section (« Inclus parce que c'est la loi ») .heading-text-4 → texte courant des items du socle .card .card-icon → cartes des Avantages .pricing-card → cartes de la grille tarifaire .svg-inject .svg-icon → icônes (check.svg) HEX COPIÉS DU CSS EXISTANT — AUCUNE VALEUR INVENTÉE : #1F1E2F ← .bg-black (fond marine du footer) #C5EF73 ← .btn-accent + CTA carte Start (accent du site) #546F22 ← CTA carte Start (index.html:364) (texte posé sur l'accent) #5E4386 ← .pricing-card + .heading-text-3 (violet des cartes/surtitres) #5F4BDB ← --bs-primary (violet des liens et boutons) #363848 ← --bs-body-color (texte courant) #818181 ← --bs-gray (texte secondaire, notes) #F8F9FD ← --bs-ghost-white (fonds clairs) #ECECEC ← --bs-bright-gray-rgb 236,236,236 (bordures) #FFFFFF ← .pricing-title (blanc) Police : font-family:inherit partout — la charte typographique est intacte. ========================================================================== */ /* --- A. Hero : ligne de 3 preuves ---------------------------------------- */ .a1e-proofs { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; } .a1e-proof { display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 15px; color: #363848; } .a1e-proof img { width: 16px; min-width: 16px; height: 16px; } /* --- B. Bande de chiffres ------------------------------------------------ */ .a1e-stats { background-color: #1F1E2F; padding: 44px 0; } .a1e-stat { text-align: center; padding: 16px 8px; font-family: inherit; } .a1e-stat-value { font-size: 40px; font-weight: 700; line-height: 1.2; color: #C5EF73; } .a1e-stat-label { font-size: 15px; font-weight: 400; color: #FFFFFF; margin-top: 6px; } /* --- C. Simulateur ------------------------------------------------------- */ .a1e-card { background-color: #FFFFFF; border: 1px solid #ECECEC; border-radius: 30px; padding: 32px; box-shadow: 0px 7px 22px rgba(143, 134, 196, 0.07); font-family: inherit; } .a1e-field { margin-bottom: 26px; } .a1e-field-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .a1e-field-label { font-size: 16px; color: #363848; } .a1e-field-value { font-size: 18px; font-weight: 700; color: #5E4386; } .a1e-range { width: 100%; accent-color: #C5EF73; height: 22px; background: transparent; cursor: pointer; } .a1e-result-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid #ECECEC; } .a1e-result-row:last-of-type { border-bottom: 0; } .a1e-result-label { font-size: 15px; color: #363848; } .a1e-result-value { font-size: 18px; font-weight: 600; color: #5E4386; white-space: nowrap; } .a1e-strike { text-decoration: line-through; color: #818181; } .a1e-saving { background-color: #C5EF73; border-radius: 20px; padding: 20px 24px; text-align: center; margin-top: 18px; } .a1e-saving-label { font-size: 15px; color: #546F22; } .a1e-saving-value { font-size: 30px; font-weight: 700; color: #546F22; line-height: 1.3; } .a1e-note { font-size: 13px; color: #818181; margin-top: 18px; margin-bottom: 0; font-family: inherit; } /* --- D. Comparateur ------------------------------------------------------ */ .a1e-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .a1e-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-family: inherit; background-color: #FFFFFF; } .a1e-table th, .a1e-table td { padding: 16px 18px; text-align: left; font-size: 15px; border-bottom: 1px solid #ECECEC; vertical-align: top; } .a1e-table thead th { font-weight: 600; color: #363848; background-color: #F8F9FD; border-bottom: 1px solid #ECECEC; } .a1e-table tbody th { font-weight: 400; color: #363848; } .a1e-table thead th.a1e-col-us { background-color: #C5EF73; color: #546F22; font-weight: 700; } .a1e-table td.a1e-col-us { background-color: rgba(197, 239, 115, 0.14); color: #363848; font-weight: 600; } .a1e-table thead th:first-child { border-top-left-radius: 20px; } .a1e-table thead th:last-child { border-top-right-radius: 20px; } /* --- E. Options à la carte ----------------------------------------------- */ .a1e-option { height: 100%; background-color: #FFFFFF; border: 1px solid #ECECEC; border-radius: 30px; padding: 26px; font-family: inherit; box-shadow: 0px 7px 22px rgba(143, 134, 196, 0.07); } .a1e-option--featured { border: 2px solid #C5EF73; } .a1e-option-code { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #5E4386; } .a1e-option-title { font-size: 18px; font-weight: 600; color: #363848; margin: 8px 0 10px; } .a1e-option-text { font-size: 14px; color: #818181; margin-bottom: 16px; } .a1e-option-price { font-size: 16px; font-weight: 700; color: #5E4386; } .a1e-badge { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 40px; background-color: #F8F9FD; color: #5E4386; font-size: 12px; font-weight: 600; } .a1e-badge--featured { background-color: #C5EF73; color: #546F22; } /* --- F. Mise en avant du plan Portage ------------------------------------ */ .a1e-plan-flag { display: inline-block; margin-bottom: 10px; padding: 7px 18px; border-radius: 40px; background-color: #C5EF73; color: #546F22; font-size: 13px; font-weight: 700; font-family: inherit; } /* --- G. FAQ accueil ------------------------------------------------------ */ .a1e-faq-item { background-color: #FFFFFF; border: 1px solid #ECECEC; border-radius: 20px; padding: 4px 24px; margin-bottom: 14px; font-family: inherit; } .a1e-faq-item > summary { list-style: none; cursor: pointer; padding: 18px 0; font-size: 17px; font-weight: 600; color: #363848; display: flex; justify-content: space-between; gap: 16px; } .a1e-faq-item > summary::-webkit-details-marker { display: none; } .a1e-faq-item > summary::after { content: '+'; font-size: 22px; font-weight: 400; color: #5E4386; line-height: 1; } .a1e-faq-item[open] > summary::after { content: '\2212'; } .a1e-faq-answer { font-size: 15px; color: #363848; padding: 0 0 20px; margin: 0; } /* --- H. CTA final -------------------------------------------------------- */ .a1e-final { background-color: #1F1E2F; padding: 70px 0; text-align: center; } .a1e-final-title { font-size: 34px; font-weight: 700; color: #FFFFFF; margin-bottom: 14px; font-family: inherit; } .a1e-final-text { font-size: 17px; color: #FFFFFF; opacity: 0.85; margin-bottom: 28px; font-family: inherit; } /* --- I. CTA sticky mobile ------------------------------------------------ */ .a1e-sticky { display: none; } @media (max-width: 700px) { .a1e-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background-color: #FFFFFF; border-top: 1px solid #ECECEC; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); font-family: inherit; } .a1e-sticky .btn { width: 100%; } body.page__homepage { padding-bottom: 84px; } .a1e-stat-value { font-size: 32px; } .a1e-final-title { font-size: 27px; } .a1e-card { padding: 22px; } } /* ========================================================================== PACK E-COMMERCE — boutique des options (§4) et configurateur de pack (§5) Mêmes hex que ci-dessus, copiés du style.css existant. font-family:inherit. ========================================================================== */ /* --- §4 Boutique : bouton Ajouter / Retirer ------------------------------ */ .a1e-option { display: flex; flex-direction: column; } .a1e-option-body { flex: 1 1 auto; } .a1e-opt-toggle { margin-top: 16px; width: 100%; border-radius: 40px; padding: 10px 16px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background-color: #C5EF73; color: #546F22; border: 1px solid #C5EF73; transition: 0.25s ease-in-out; } .a1e-opt-toggle[aria-pressed="true"] { background-color: #FFFFFF; color: #5E4386; border: 1px solid #ECECEC; } .a1e-opt-toggle[disabled] { background-color: #F8F9FD; color: #818181; border: 1px solid #ECECEC; cursor: default; } /* --- §5 Configurateur de pack -------------------------------------------- */ .a1e-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .a1e-plan-opt { position: relative; } .a1e-plan-opt input { position: absolute; opacity: 0; pointer-events: none; } .a1e-plan-opt span { display: block; border: 1px solid #ECECEC; border-radius: 20px; padding: 16px; cursor: pointer; font-family: inherit; font-size: 15px; color: #363848; text-align: center; transition: 0.25s ease-in-out; } .a1e-plan-opt input:checked + span { border: 2px solid #C5EF73; color: #5E4386; font-weight: 700; } .a1e-plan-price { display: block; font-size: 13px; color: #818181; font-weight: 400; margin-top: 4px; } .a1e-cart-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ECECEC; font-family: inherit; font-size: 15px; color: #363848; } .a1e-cart-line:last-child { border-bottom: 0; } .a1e-cart-amount { font-weight: 600; color: #5E4386; white-space: nowrap; } .a1e-cart-remove { background: none; border: 0; color: #818181; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 0 0 10px; font-family: inherit; } .a1e-cart-included { color: #546F22; font-weight: 600; } .a1e-usage-box { background-color: #F8F9FD; border-radius: 20px; padding: 16px 20px; margin-top: 16px; } .a1e-usage-title { font-size: 13px; font-weight: 700; color: #5E4386; margin-bottom: 6px; } .a1e-usage-line { font-size: 14px; color: #363848; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; } .a1e-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 20px; } .a1e-total-label { font-size: 16px; color: #363848; } .a1e-total-value { font-size: 32px; font-weight: 700; color: #5E4386; white-space: nowrap; } .a1e-total-sub { font-size: 13px; color: #818181; margin-top: 4px; } .a1e-reassurance { font-size: 13px; color: #818181; margin-top: 14px; margin-bottom: 0; text-align: center; font-family: inherit; } .a1e-empty { font-size: 14px; color: #818181; padding: 12px 0; font-family: inherit; } @media (max-width: 700px) { .a1e-plan-grid { grid-template-columns: 1fr; } .a1e-total-value { font-size: 26px; } } /* --- Mention tarifaire sous chaque plan (mission V2.1) ------------------- */ .a1e-plan-mention { max-width: 360px; margin: 14px auto 0; font-family: inherit; font-size: 12px; line-height: 1.5; color: #818181; text-align: center; }