), donc une seule feuille plutôt que cinq quasi identiques. Portée depuis la section « 36. LANDING APPRENANT » de mew_dash/css/style.css, plus les quelques blocs partagés que ces pages empruntent ailleurs dans ce fichier (boutons, accordéon FAQ, étoiles d'avis). Conventions déjà établies pour les autres pages issues des maquettes (become-mentor-page.css, site-footer.css) : - Feuille autonome, chargée par la seule vue de cette page (@push('styles')), pas fusionnée dans main.css. - Tout est porté sous la racine « .ccm » : la maquette utilise des noms très génériques (.wrap, .btn, .ico, .stack, .price-line) qui entreraient en collision avec Bootstrap et main.css s'ils étaient posés globalement. - Les couleurs sont celles de la marque réelle du site (public/lernen/css/style.css), pas le corail de mew_dash : #ff6363 et non #FF6363. Les variables sont redéclarées sur .ccm plutôt que sur :root, pour la même raison que ci-dessus. - La variante « aérée » de la maquette (.bl--air, que cette page portait sur son

) est fusionnée dans les règles de base : la page l'utilise toujours, une seule valeur par déclaration vaut mieux que deux qui s'écrasent. - L'apparition au défilement passe par .is-visible (public/js/scrollix-reveal.js, chargé sur tout le site public), pas par les classes .pre/.in de mew_dash/js/main.js, qui n'existe pas ici. ============================================================= */ .ccm { /* couleurs de marque réelles (public/lernen/css/style.css) */ --brand: #ff6363; --brand-dark: #d8382a; --brand-soft: #fff1ef; --brand-line: #ffd9d4; --grad: linear-gradient(38deg, #ffbcbc 0%, #ff6363 54%); --ink: #1c1c1e; --ink-mid: #4a4a4e; --muted-2: #6e6d72; --muted-3: #7c7b80; --line: #f0ebe7; --line-2: #f2ede9; --surface: #f9f7f5; --surface-2: #f7f4f2; --muted-4: #8a8a8f; --muted-5: #9a999e; --gold: #f5a623; --r-xs: 16px; --pill: 44px; --font: "Nunito", system-ui, -apple-system, sans-serif; --font-display: "Capriola", Georgia, serif; font-family: var(--font); color: var(--ink); /* main.css pose sur un raccourci `font` qui fixe le corps à 14px et l'interlignage à 24px — une longueur, donc héritée telle quelle par toute la page, et l'espacement des lettres à .5px. La maquette part du nu (16px, interlignage `normal`) et règle ensuite chaque bloc : ces trois valeurs sont remises à leur état par défaut ici, sans quoi les grands nombres du bloc tarif (34 à 52px) se chevauchent dans 24px d'interligne. */ font-size: 16px; line-height: normal; letter-spacing: normal; -webkit-font-smoothing: antialiased; } .ccm *, .ccm *::before, .ccm *::after { box-sizing: border-box; } .ccm, .ccm * { min-width: 0; } .ccm a { color: var(--brand); text-decoration: none; } .ccm a:hover { color: var(--brand-dark); } /* Fond blanc : le site public pose #faf8f5 sur .am-bodywrap, la maquette de cette page est sur blanc franc. */ body:has(.ccm) { background: #fff; } /* Le pied de page prévoit 86px de marge haute (site-footer.css) ; la dernière section de cette page en apporte déjà 120. */ body:has(.ccm) .foot { margin-top: 0; } /* --- conteneur ------------------------------------------------ */ .ccm .wrap { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 40px; } /* --- boutons -------------------------------------------------- */ .ccm .btn { height: 52px; padding: 0 22px; border: 0; border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; flex-shrink: 0; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .ccm .btn:hover { transform: translateY(-1px); } .ccm .btn:active { transform: translateY(0); } .ccm .btn.is-lg { height: 56px; padding: 0 26px; font-size: 16.5px; font-weight: 800; } .ccm .btn--primary { background: var(--grad); color: #fff; box-shadow: 0 12px 24px -12px rgba(255, 99, 99, .7); } .ccm .btn--primary:hover { color: #fff; box-shadow: 0 16px 28px -12px rgba(255, 99, 99, .8); } .ccm .btn--white { background: #fff; color: var(--ink); font-weight: 700; } .ccm .btn--white:hover { color: var(--ink); } .ccm .btn--ghost { background: var(--surface-2); color: var(--ink); } .ccm .btn--ghost:hover { background: var(--line-2); color: var(--ink); } /* --- icônes Material Symbols ---------------------------------- */ .ccm .ico { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; font-size: 21px; -webkit-font-feature-settings: "liga"; font-variant-ligatures: none; } .ccm .ico-21 { font-size: 21px; } .ccm .ico-24 { font-size: 24px; } /* --- utilitaires ---------------------------------------------- */ .ccm .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ccm .grow { flex: 1; min-width: 0; } .ccm .stack { display: flex; flex-direction: column; gap: 16px; } .ccm .stack--sm { gap: 14px; } .ccm .price-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 700; } .ccm .price-line span:first-child { color: var(--muted-2); } /* --- rythme des sections -------------------------------------- */ .ccm .bl-sec { padding-top: 132px; padding-bottom: 132px; } .ccm .bl-sec--next { padding-top: 0; } .ccm .bl-statsec { padding-top: 112px; padding-bottom: 0; } /* Emplacement réservé à la barre de navigation, qui est fixe (scrollix-header.css : .nvg-root position:fixed, 40px de marge haute + la carte). La maquette réservait 400px pour un menu qui n'existait pas encore ; la vraie barre en occupe ~112. */ .ccm .bl-slot { height: 168px; } .ccm .bl-band { background: linear-gradient(180deg, #ffe8e5 0%, #fff4f3 58%, #ffffff 100%); border-radius: 0 0 48px 48px; } /* --- héros ---------------------------------------------------- */ .ccm .bl-hero { text-align: center; padding-bottom: 132px; } .ccm .bl-kick { display: inline-block; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); } .ccm .bl-h1 { margin: 20px auto 0; max-width: 900px; font-family: var(--font-display); font-size: clamp(46px, 6.6vw, 84px); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; } .ccm .bl-h1 em { font-style: normal; color: var(--brand); } .ccm .bl-lead { margin: 28px auto 0; max-width: 580px; font-size: 21px; line-height: 1.6; color: var(--muted-2); text-wrap: pretty; } .ccm .bl-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; } .ccm .bl-under { margin: 20px 0 0; font-size: 14.5px; font-weight: 600; color: var(--muted-2); } /* --- chiffres ------------------------------------------------- */ .ccm .bl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; padding: 56px 0; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); } .ccm .bl-stat { position: relative; } .ccm .bl-stat + .bl-stat::before { content: ""; position: absolute; left: -20px; top: 2px; bottom: 2px; width: 1.5px; background: var(--line); } .ccm .bl-stat b { display: block; font-family: var(--font-display); font-size: 52px; font-weight: 400; line-height: 1; letter-spacing: -.035em; color: var(--brand); transition: transform .25s cubic-bezier(.22, .8, .28, 1); } .ccm .bl-stat:hover b { transform: translateY(-3px); } .ccm .bl-stat span { display: block; margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--muted-3); } /* --- en-têtes de section -------------------------------------- */ .ccm .bl-head { max-width: 700px; margin: 0 auto 68px; text-align: center; } .ccm .bl-head h2 { margin: 16px 0 0; font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 56px); font-weight: 400; line-height: 1.06; letter-spacing: -.028em; text-wrap: balance; } .ccm .bl-head p { margin: 20px auto 0; max-width: 540px; font-size: 19px; line-height: 1.65; color: var(--muted-2); text-wrap: pretty; } /* --- cartes simples ------------------------------------------- */ .ccm .bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .ccm .bl-card { padding: 42px 38px; border-radius: 30px; background: #fff6f5; } .ccm .bl-card-ico { width: 44px; height: 44px; border-radius: 14px; background: #fff; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; } .ccm .bl-card-ico .ico { font-size: 23px; } .ccm .bl-card h3 { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -.012em; } .ccm .bl-card p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted-3); text-wrap: pretty; } /* --- étapes --------------------------------------------------- */ .ccm .bl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } .ccm .bl-step { padding-top: 32px; border-top: 2.5px solid var(--brand); } .ccm .bl-step b { display: block; font-family: var(--font-display); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); } .ccm .bl-step h3 { margin: 12px 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.014em; } .ccm .bl-step p { margin: 0; font-size: 17px; line-height: 1.62; color: var(--muted-3); } /* --- l'argent (frise + encadré tarif) ------------------------- */ .ccm .bl-money { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 52px; align-items: start; } .ccm .bl-flow { display: flex; flex-direction: column; } .ccm .bl-frow { display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding-bottom: 24px; position: relative; } .ccm .bl-frow:last-child { padding-bottom: 0; } .ccm .bl-frow::before { content: ""; position: absolute; left: 14.5px; top: 32px; bottom: 4px; width: 1.5px; background: var(--brand-line); } .ccm .bl-frow:last-child::before { display: none; } .ccm .bl-fdot { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; } .ccm .bl-fdot .ico { font-size: 17px; } .ccm .bl-frow b { display: block; font-size: 18.5px; font-weight: 800; } .ccm .bl-frow span { display: block; margin-top: 4px; font-size: 16.5px; line-height: 1.6; color: var(--muted-3); } .ccm .bl-frow .bl-fdot { margin-top: 0; } .ccm .bl-panel { padding: 40px; border-radius: 30px; background: #fff6f5; } .ccm .bl-panel-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1.5px solid var(--brand-line); } .ccm .bl-panel-top b { font-family: var(--font-display); font-size: 46px; font-weight: 400; letter-spacing: -.03em; } .ccm .bl-panel-net { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1.5px solid var(--brand-line); } .ccm .bl-panel-net b { font-family: var(--font-display); font-size: 34px; font-weight: 400; letter-spacing: -.03em; color: var(--brand); } /* --- deux colonnes (apprenant / mentor) ----------------------- */ .ccm .bl-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .ccm .bl-side { padding: 42px 38px; border-radius: 30px; background: #fff6f5; } .ccm .bl-side--out { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); } .ccm .bl-side h3 { margin: 0 0 22px; font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: -.02em; } .ccm .bl-side .bl-frow:last-child { padding-bottom: 0; } /* --- encadré d'appui ------------------------------------------ */ .ccm .bl-note { display: flex; align-items: flex-start; gap: 15px; padding: 26px 30px; border-radius: 24px; background: #fff6f5; font-size: 16.5px; line-height: 1.6; color: var(--muted-2); } .ccm .bl-note .ico { font-size: 23px; color: var(--brand); flex-shrink: 0; } .ccm .bl-note b { color: var(--ink); } /* --- liste de règles ------------------------------------------ */ .ccm .bl-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px 40px; } .ccm .bl-rule { padding-top: 22px; border-top: 1.5px solid var(--line); } .ccm .bl-rule b { display: block; font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; } .ccm .bl-rule span { display: block; margin-top: 7px; font-size: 16px; line-height: 1.6; color: var(--muted-3); } /* --- appel final + mot de fin --------------------------------- */ .ccm .bl-final { padding: 110px 48px; border-radius: 44px; background: var(--grad); text-align: center; color: #fff; } .ccm .bl-final h2 { margin: 0 auto; max-width: 680px; font-family: var(--font-display); font-size: clamp(34px, 4.8vw, 58px); font-weight: 400; line-height: 1.06; letter-spacing: -.03em; color: #fff; text-wrap: balance; } .ccm .bl-final p { margin: 22px auto 34px; max-width: 460px; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .92); } .ccm .bl-final .btn--primary { background: #fff; color: var(--brand); box-shadow: none; } .ccm .bl-final .btn--primary:hover { background: #fff; color: var(--brand); filter: brightness(.96); box-shadow: none; } .ccm .bl-final .btn { transition: transform .2s ease, filter .2s ease; } .ccm .bl-final .btn:hover { transform: translateY(-2px); } .ccm .bl-final small { display: block; margin-top: 20px; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .84); } .ccm .bl-word { padding: 96px 0 120px; text-align: center; font-family: var(--font-display); font-size: clamp(38px, 7vw, 92px); font-weight: 400; line-height: 1; letter-spacing: -.04em; } .ccm .bl-word em { font-style: normal; color: var(--brand); } /* --- pastilles de matières (devenir-mentor, devenir-apprenant) - */ .ccm .bl-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 44px; } .ccm .bl-chip { padding: 9px 17px; border-radius: var(--pill); background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1.5px rgba(255, 99, 99, .16); font-size: 14.5px; font-weight: 700; color: var(--ink); transition: background .18s ease, box-shadow .18s ease, transform .18s ease; } .ccm .bl-chip:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--brand-line); transform: translateY(-1px); } /* --- avis (devenir-mentor, devenir-apprenant) ------------------ */ .ccm .bl-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } .ccm .bl-quote { margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 38px; border-radius: 30px; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .2s ease, transform .2s ease; } .ccm .bl-quote:hover { box-shadow: inset 0 0 0 1.5px var(--brand-line); transform: translateY(-2px); } .ccm .bl-quote p { margin: 0; flex: 1; font-size: 19px; line-height: 1.58; color: var(--ink-mid); text-wrap: pretty; } .ccm .bl-who { display: flex; align-items: center; gap: 12px; } .ccm .bl-mono { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex-shrink: 0; } .ccm .bl-who b { display: block; font-size: 15px; font-weight: 800; } .ccm .bl-who small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--muted-4); } /* Étoiles des avis. Décoratives ici — l'original est le sélecteur de note de l'écran « avis après séance », d'où le curseur et les états de survol, retirés : sur ces pages on ne note rien. */ .ccm .stars { display: flex; gap: 8px; } .ccm .star { width: 54px; height: 54px; border-radius: 50%; background: var(--surface); color: var(--muted-5); display: flex; align-items: center; justify-content: center; } .ccm .star .ico { font-size: 27px; } .ccm .star.is-on { background: #fdf4e5; color: var(--gold); } .ccm .stars--sm { gap: 2px; } .ccm .stars--sm .star { width: 24px; height: 24px; background: none; } .ccm .stars--sm .star .ico { font-size: 18px; } .ccm .stars--sm .star.is-on { background: none; color: var(--gold); } /* --- accordéon des questions (les quatre pages) ---------------- */ /* ========================================================================== LES ACCORDÉONS DU SITE — le style de la fiche mentor -------------------------------------------------------------------------- Repris de mew_dash/faq-mentor.html, comme sur /mentor/{slug} : une carte par question, numérotée, qui change de teinte en s'ouvrant, et un chevron dans une pastille qui pivote. ÉCRIT UNE FOIS, POUR TOUT LE SITE. Quinze pages portent le même balisage `.acc / .acc-item / .acc-head / .acc-body` — les huit domaines, la foire aux questions, les litiges, devenir mentor, devenir apprenant, la recherche. Les habiller ici les change toutes, sans toucher à un seul gabarit. LE NUMÉRO VIENT D'UN COMPTEUR CSS. La maquette pose « 01 », « 02 » dans son balisage ; ici il faudrait l'ajouter dans quinze fichiers, et le tenir à jour à chaque question ajoutée ou retirée. `counter-increment` le calcule, et il ne peut pas se décaler. Une différence assumée avec la fiche mentor : là-bas la réponse se déplie sur une hauteur mesurée en JavaScript. Ici elle apparaît d'un coup — c'est le comportement que les quinze pages ont déjà, et le changer demanderait de toucher leur script commun. Le style, lui, est le même. */ .ccm .acc { display: flex; flex-direction: column; gap: 10px; counter-reset: ccm-faq; } .ccm .acc-item { counter-increment: ccm-faq; border-radius: 24px; background: #fff; /* En ombre interne plutôt qu'en bordure : le trait ne s'ajoute pas à la largeur, les cartes restent alignées quand l'une s'ouvre. */ box-shadow: inset 0 0 0 1.5px #F0EBE7; overflow: hidden; transition: box-shadow .22s ease, background .22s ease; } .ccm .acc-item.is-open { background: #F9F7F5; box-shadow: inset 0 0 0 1.5px #FFD3D3; } .ccm .acc-head { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 18px; border: none; background: transparent; font-family: inherit; text-align: left; cursor: pointer; } /* Le numéro, calculé. `01`, `02`… sur deux chiffres. */ .ccm .acc-head::before { content: counter(ccm-faq, decimal-leading-zero); flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 11px; background: #F5F0EF; color: #5F5E64; font-size: 13.5px; font-weight: 900; font-variant-numeric: tabular-nums; transition: background .2s ease, color .2s ease; } .ccm .acc-item.is-open .acc-head::before { background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%); color: #fff; } /* La question n'est jamais tronquée : elle passe à la ligne. */ .ccm .acc-head .grow { flex: 1; min-width: 0; padding-top: 4px; font-size: 17.5px; font-weight: 800; letter-spacing: -.025em; line-height: 1.4; color: #1C1C1E; text-wrap: pretty; } /* Le chevron du balisage pointe à DROITE : on le couche vers le bas, et on le retourne à l'ouverture. Aucun gabarit n'a besoin de changer. */ .ccm .acc-head .ico { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #F5F0EF; color: #1C1C1E; font-size: 21px; transform: rotate(90deg); transition: background .2s ease, color .2s ease, transform .28s cubic-bezier(.22, .9, .24, 1); } .ccm .acc-head:hover .ico { background: #FFF1F1; color: #C0392B; } .ccm .acc-item.is-open .acc-head .ico { background: #1C1C1E; color: #fff; transform: rotate(270deg); } /* Alignée sous la question, pas sous le numéro : la réponse se lit dans la colonne du texte qu'elle prolonge. */ .ccm .acc-body { padding: 0 18px 20px 64px; font-size: 16.5px; font-weight: 700; line-height: 1.6; color: #5F5E64; text-wrap: pretty; } .ccm .acc-item:not(.is-open) .acc-body { display: none; } .ccm .bl-faq { max-width: 780px; margin: 0 auto; } @media (max-width: 520px) { .ccm .acc-body { padding-left: 18px; } } @media (prefers-reduced-motion: reduce) { .ccm .acc-item, .ccm .acc-head::before, .ccm .acc-head .ico { transition: none; } } .ccm .bl-center { display: flex; justify-content: center; margin-top: 32px; } /* groupes de questions (page /faq) */ .ccm .bl-faqgroup + .bl-faqgroup { margin-top: 44px; } .ccm .bl-faqtitle { margin: 0 0 18px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); } /* --- pages de domaine (/domaines, /domaine/*) ------------------ Grille des sous-catégories, chacune avec ses sujets en pastilles cliquables. Portée de la section « 38. PAGE DE DOMAINE » de mew_dash/css/style.css. */ .ccm .dom-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 12px; } .ccm .dom-emo { width: 62px; height: 62px; border-radius: 20px; background: #fff6f5; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; } .ccm .dom-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); font-weight: 400; line-height: 1.06; letter-spacing: -.028em; } .ccm .dom-sub { margin: 0 0 42px 80px; font-size: 16.5px; line-height: 1.6; color: var(--muted-3); } .ccm .dom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .ccm .dom-card { padding: 30px 28px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); } .ccm .dom-card h3 { margin: 0 0 18px; font-size: 20px; font-weight: 800; letter-spacing: -.014em; } .ccm .dom-card h3 small { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--muted-4); } .ccm .dom-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ccm .dom-chip { padding: 9px 16px; border-radius: var(--pill); background: #fff3f2; font-size: 15px; font-weight: 600; color: var(--ink); transition: background .18s ease, color .18s ease, transform .18s ease; } .ccm .dom-chip:hover { background: var(--brand); color: #fff; transform: translateY(-1px); } /* Tailles de bouton que ces pages emploient en plus de `is-lg`. */ .ccm .btn.is-50 { height: 50px; font-size: 16px; } .ccm .btn.is-sm { height: 48px; padding: 0 20px; font-size: 15px; } .ccm .btn--block { width: 100%; } .ccm .ico-19 { font-size: 19px; } /* ============================================================= Apparitions ============================================================= */ @keyframes ccmUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* entrée du héros, en cascade */ .ccm .bl-hero > * { animation: ccmUp .8s cubic-bezier(.22, .8, .28, 1) both; } .ccm .bl-hero > :nth-child(1) { animation-delay: .05s; } .ccm .bl-hero > :nth-child(2) { animation-delay: .14s; } .ccm .bl-hero > :nth-child(3) { animation-delay: .23s; } .ccm .bl-hero > :nth-child(4) { animation-delay: .32s; } .ccm .bl-hero > :nth-child(5) { animation-delay: .4s; } /* les enfants d'un bloc révélé arrivent l'un après l'autre. scrollix-reveal.js pose .is-visible immédiatement sur tout ce qui est déjà au-dessus de la ligne de flottaison au chargement. */ .ccm [data-reveal] .bl-card, .ccm [data-reveal] .dom-card, .ccm [data-reveal] .bl-step, .ccm [data-reveal] .bl-quote, .ccm [data-reveal] .bl-stat, .ccm [data-reveal] .bl-side, .ccm [data-reveal] .bl-rule, .ccm [data-reveal] .bl-frow { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22, .8, .28, 1), transform .7s cubic-bezier(.22, .8, .28, 1); } .ccm [data-reveal].is-visible .bl-card, .ccm [data-reveal].is-visible .dom-card, .ccm [data-reveal].is-visible .bl-step, .ccm [data-reveal].is-visible .bl-quote, .ccm [data-reveal].is-visible .bl-stat, .ccm [data-reveal].is-visible .bl-side, .ccm [data-reveal].is-visible .bl-rule, .ccm [data-reveal].is-visible .bl-frow { opacity: 1; transform: none; } .ccm [data-reveal].is-visible > * > :nth-child(1), .ccm [data-reveal].is-visible .bl-frow:nth-child(1) { transition-delay: .04s; } .ccm [data-reveal].is-visible > * > :nth-child(2), .ccm [data-reveal].is-visible .bl-frow:nth-child(2) { transition-delay: .12s; } .ccm [data-reveal].is-visible > * > :nth-child(3), .ccm [data-reveal].is-visible .bl-frow:nth-child(3) { transition-delay: .2s; } .ccm [data-reveal].is-visible > * > :nth-child(4), .ccm [data-reveal].is-visible .bl-frow:nth-child(4) { transition-delay: .28s; } .ccm [data-reveal].is-visible > * > :nth-child(5) { transition-delay: .36s; } .ccm [data-reveal].is-visible > * > :nth-child(6) { transition-delay: .44s; } @media (prefers-reduced-motion: reduce) { .ccm .bl-hero > * { animation: none; } .ccm [data-reveal] .bl-card, .ccm [data-reveal] .dom-card, .ccm [data-reveal] .bl-step, .ccm [data-reveal] .bl-quote, .ccm [data-reveal] .bl-stat, .ccm [data-reveal] .bl-side, .ccm [data-reveal] .bl-rule, .ccm [data-reveal] .bl-frow { opacity: 1; transform: none; transition: none; } .ccm .bl-stat:hover b, .ccm .bl-final .btn:hover { transform: none; } } /* ============================================================= Responsive ============================================================= */ @media (max-width: 1040px) { .ccm .wrap { padding-left: 26px; padding-right: 26px; } .ccm .bl-sec { padding-top: 84px; padding-bottom: 84px; } .ccm .bl-sec--next { padding-top: 0; } .ccm .bl-statsec { padding-top: 76px; } .ccm .bl-slot { height: 148px; } .ccm .bl-hero { padding-bottom: 84px; } .ccm .bl-grid, .ccm .bl-steps, .ccm .bl-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ccm .bl-money { grid-template-columns: 1fr; gap: 36px; } .ccm .bl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .ccm .bl-stat:nth-child(3)::before { display: none; } .ccm .bl-card { padding: 32px 28px; } .ccm .bl-final { padding: 72px 30px; } .ccm .bl-word { padding: 64px 0 80px; } } @media (max-width: 700px) { .ccm .wrap { padding-left: 20px; padding-right: 20px; } .ccm .bl-sec { padding-top: 54px; padding-bottom: 54px; } .ccm .bl-sec--next { padding-top: 0; } .ccm .bl-statsec { padding-top: 56px; } .ccm .bl-slot { height: 120px; } .ccm .bl-hero { padding-bottom: 54px; } .ccm .bl-band { border-radius: 0 0 30px 30px; } .ccm .bl-grid, .ccm .bl-steps, .ccm .bl-stats, .ccm .bl-quotes { grid-template-columns: 1fr; } .ccm .bl-stat + .bl-stat::before { display: none; } .ccm .bl-card, .ccm .bl-panel { padding: 24px; } .ccm .bl-side { padding: 28px 24px; } .ccm .dom-head { gap: 14px; } .ccm .dom-emo { width: 50px; height: 50px; border-radius: 16px; font-size: 24px; } .ccm .dom-sub { margin-left: 0; margin-bottom: 30px; } .ccm .dom-card { padding: 24px 22px; } .ccm .bl-quote { padding: 26px; border-radius: 24px; } .ccm .bl-note { padding: 22px; } .ccm .bl-final { padding: 46px 22px; border-radius: 28px; } .ccm .bl-word { padding: 44px 0 60px; } }