/* ========================================================= ACCOMPAGNEMENT NOUVELLE — page de vente. Réutilise la charte éditoriale de la home (tokens/base/components/home.css) : les sections reprises (pour qui, FAQ, CTA) gardent leurs classes d'origine. Ce fichier ne contient QUE les éléments propres à cette page : l'en-tête d'intro, la grille « Ce que vous vivrez », les rituels signature, le pull-quote et les blocs philosophie. ========================================================= */ /* ---- En-tête d'intro (compacte : titre/sous-titre/intro resserrés) ---- */ .acc-head { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.5rem); } .acc-head .section-head { margin-bottom: 0; } /* supprime le grand vide sous l'intro */ .acc-head h1 { font-size: var(--fs-display); letter-spacing: -0.015em; } /* E de NouvElle : couleur terracotta + police Baskerville (Libre Baskerville, alternative web de la Fry's Baskerville du monogramme du logo). Le reste du mot garde Newsreader, en gras comme « Accompagnement ». Règle générale : vaut pour tous les titres où « NouvElle » est stylisé (H1 intro, H2 rituels…). */ .nv-e { color: var(--terracotta-deep); font-family: "Libre Baskerville", Georgia, "Times New Roman", serif; font-weight: 700; font-size: 0.92em; /* Libre Baskerville rend plus grand que Newsreader → léger ajustement pour rester proportionné */ } .acc-subtitle { font-family: var(--font-title); font-style: italic; /* Reste au-dessus du corps (--fs-lead, ~18-20px) tout en tenant dans la fourchette validée 20-22px : plancher 1.25rem (20px), plafond 1.375rem (22px). */ font-size: clamp(1.25rem, 1.8vw, 1.375rem); color: var(--terracotta-deep); margin-top: .5rem; } .acc-head .section-head .lead { margin-top: .9rem; } /* Sections reprises : resserrer l'espace en-tête → contenu (cf. rythme du site) */ .section-head--wide { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } /* ---- « Ce que vous vivrez » : grille de 6 cartes à icône (3×2 → 2 → 1) ---- Cartes crème (cf. .card de components.css) posées sur le fond beige de la section pour ressortir légèrement. Icônes SVG outline discrètes en terracotta. */ .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } .value-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 2.5vw, 2rem); box-shadow: 0 18px 40px -30px rgba(61, 43, 31, 0.35); /* ombre douce teintée espresso */ } .value-ico { display: inline-flex; color: var(--terracotta-deep); margin-bottom: 1rem; } .value-ico svg { width: 30px; height: 30px; } /* Titre dominant (poids 500, serif) au-dessus d'un corps plus petit et atténué : on inverse la hiérarchie précédente où le corps (--fs-lead) était plus gros. */ .value-card h3 { font-size: clamp(1.15rem, 1.5vw, 1.3rem); font-weight: 500; margin-bottom: .45rem; } .value-card p { color: var(--espresso-soft); font-size: 1rem; line-height: 1.55; margin: 0; } @media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .value-grid { grid-template-columns: 1fr; } } /* ---- Rituels signature : encadré crème à bordure terracotta sur fond beige-mid ---- Se démarque du reste sans introduire de rupture sombre (cf. footer / CTA). */ .rituels-box { max-width: 60rem; margin-inline: auto; background: var(--cream); border: 1.5px solid var(--terracotta); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 3rem); /* Colonne « coffret » un peu plus large : rééquilibre le nombre de lignes après l'enrichissement du texte du coffret (coffret ≈ ancrage ≈ 7 lignes). */ display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 4vw, 3rem); } .rituel-ico { display: inline-flex; color: var(--terracotta-deep); margin-bottom: .9rem; } .rituel-ico svg { width: 32px; height: 32px; } .rituel h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin-bottom: .6rem; } .rituel p { color: var(--espresso-soft); font-size: var(--fs-lead); margin: 0; } @media (max-width: 700px) { .rituels-box { grid-template-columns: 1fr; } } /* ---- Pull-quote : grande phrase serif italique, centrée, entourée d'espace ---- */ .acc-pullquote { /* 34ch + taille plafonnée : chaque phrase tient sur sa propre ligne en desktop (coupure nette à la frontière de phrase, 2 lignes équilibrées). */ max-width: 34ch; margin-inline: auto; font-family: var(--font-title); font-style: italic; font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--espresso); text-align: center; text-wrap: balance; } .acc-pullquote .hl { color: var(--terracotta-deep); } /* ---- Philosophie : 2 blocs sobres à bordure latérale terracotta ---- */ /* Colonne droite légèrement plus large : équilibre le nombre de lignes des deux textes (sans les modifier) → 5 lignes de chaque côté en desktop. */ .philo-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.75rem, 4vw, 3.5rem); max-width: 60rem; margin-inline: auto; } .philo-block { border-left: 3px solid var(--terracotta); padding-left: clamp(1.25rem, 2.5vw, 1.75rem); } .philo-block h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin-bottom: .7rem; } .philo-block p { color: var(--espresso-soft); font-size: var(--fs-lead); margin: 0; } @media (max-width: 700px) { .philo-grid { grid-template-columns: 1fr; } } /* ---- Bloc investissement : accroche centrée au-dessus du prix ---- */ /* Pas de max-width étroit ici : la phrase doit tenir sur UNE seule ligne en desktop. Taille au niveau des H3 de section (~28px) pour la présence. */ .invest-title { text-align: center; font-size: var(--fs-h3); margin: 0 auto 1.5rem; } /* ---- FAQ : réponses longues (multi-paragraphes + listes à puces) ---- Espacement des paragraphes + puces terracotta au style du site (cf. .fit-list / .legal-body ul). Le composant accordéon reste inchangé. */ .faq-answer p { margin-bottom: .9rem; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer ul { margin: .2rem 0 .9rem; } .faq-answer li { position: relative; padding: .3rem 0 .3rem 1.5rem; } .faq-answer li::before { content: ""; position: absolute; left: 0; top: calc(.3rem + .825em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); } /* ---- Surlignage terracotta (groupes de mots à faire ressortir) ---- */ .tc { color: var(--terracotta-deep); } /* ---- Mini-promesse client : énoncé fort, aligné à gauche (largeur standard) ---- */ .mini-promise { font-family: var(--font-body); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.5; color: var(--espresso); } /* ---- « Ce que comprend concrètement » : inventaire factuel (liste à ✓, volontairement distinct du format carte de « Ce que vous vivrez ») ---- */ .includes-list { display: grid; gap: .6rem; } .includes-list li { position: relative; padding-left: 2rem; color: var(--espresso-soft); font-size: var(--fs-lead); line-height: 1.5; } .includes-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--terracotta-deep); font-weight: 700; line-height: inherit; } /* ---- Bloc « Votre investissement » : justification → prix isolé → CTA ---- */ /* Les paragraphes de justification restent en .lead SANS contrainte de largeur : ils reprennent ainsi exactement la largeur du paragraphe .lead de la méthode (« Un accompagnement structuré… »), sans largeur redéfinie ici. */ .invest-intro p + p { margin-top: 1rem; } /* Prix isolé : filets fins haut + bas, espace clair, contenu centré (registre sobre, pas de carte à ombre ni d'encart « pricing SaaS »). */ .invest-price { text-align: center; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); padding-block: clamp(1.75rem, 3.5vw, 2.75rem); margin-block: clamp(2rem, 4vw, 3rem); } .invest-amount { font-family: var(--font-title); font-size: clamp(2.8rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.01em; color: var(--espresso); } .invest-installments { margin-top: .5rem; font-size: 1.1rem; color: var(--espresso-soft); } .invest-legal { margin-top: .7rem; font-size: .7rem; font-style: italic; color: var(--espresso-soft); } /* ~11px, note contractuelle discrète */ /* CTA + réassurance : centrés sous le bloc */ .invest-cta { margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align: center; } .invest-note { margin-top: .85rem; font-size: var(--fs-small); color: var(--espresso-soft); } /* ---- Témoignage : EMPLACEMENT RÉSERVÉ (placeholder) ---- Reprend le format témoignage (étoiles / citation / nom) mais volontairement « en travaux » : bordure pointillée + opacité réduite + couleurs atténuées, pour ne JAMAIS être confondu avec un vrai avis tant que le contenu réel n'est pas intégré. */ .testimonial-placeholder { max-width: 46rem; margin: 0 auto; text-align: center; background: var(--cream); border: 1.5px dashed var(--terracotta); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); opacity: .72; } .testimonial-placeholder .tp-stars { color: var(--espresso-soft); letter-spacing: 3px; opacity: .5; margin-bottom: .85rem; } .testimonial-placeholder blockquote { margin: 0; font-family: var(--font-title); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.4; color: var(--espresso-soft); } .testimonial-placeholder figcaption { margin-top: .9rem; font-size: var(--fs-small); font-style: italic; color: var(--espresso-soft); } /* ---- Méthode : en-tête aéré. Le head reprend le margin-bottom standard de .section-head (head → timeline, cohérent avec les autres sections), et le H2 → intro reçoit un peu plus d'air que le 1.25rem par défaut. ---- */ .acc-method-head .lead { margin-top: clamp(1.5rem, 2vw, 1.75rem); } /* ---- Méthode : timeline éditoriale (grand numéro serif terracotta, sans carte) ---- */ .acc-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); } .acc-timeline-num { display: block; font-family: var(--font-title); font-weight: 500; font-size: clamp(2rem, 3vw, 2.4rem); line-height: 1; color: var(--terracotta-deep); letter-spacing: -0.01em; margin-bottom: .55rem; } .acc-timeline-step h3 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); margin-bottom: .35rem; } .acc-timeline-step p { color: var(--espresso-soft); font-size: var(--fs-lead); margin: 0; } @media (max-width: 700px) { .acc-timeline { grid-template-columns: 1fr; gap: 1.75rem; } } /* ---- Blocs split : texte + placeholder photo côte à côte, colonnes équilibrées. Photo étirée à la hauteur de la colonne texte (align-items: stretch) et texte centré verticalement → hauteurs visuellement équilibrées. ---- */ .acc-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; } .acc-split + .acc-split { margin-top: clamp(1.75rem, 4vw, 3rem); } .acc-split-text { display: flex; flex-direction: column; justify-content: center; } .acc-split-text h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: .7rem; } .acc-split-text > p { color: var(--espresso-soft); font-size: var(--fs-lead); margin: 0; } /* Conteneur média (porte le cadre de profondeur ::before, fond transparent, PAS d'overflow hidden) */ .acc-split-media { position: relative; height: 100%; min-height: clamp(240px, 40vw, 320px); background: transparent; } /* Cadre qui rogne proprement la photo (overflow:hidden + radius → plus de coins noirs), au-dessus du cadre décalé */ .acc-split-frame { position: relative; z-index: 1; height: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 48px -26px rgba(61, 43, 31, 0.42); } .acc-split-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); } /* Cadre fin terracotta décalé, façon ombre en arrière-plan. Proportions ÉTIRÉES pour suivre le format paysage des photos (rectangle allongé, pas un carré). Offset FIXE en px. Bas-gauche par défaut (coffret) ; --br pour le bas-droite. */ .acc-split-media::before { content: ""; position: absolute; z-index: 0; pointer-events: none; left: -18px; bottom: -18px; width: 82%; height: 82%; border: 1.5px solid var(--terracotta); border-radius: var(--radius-lg); } /* Variante bas-droite (photos « Ce que comprend » et « Ancrage M+3 ») */ .acc-split-media--br::before { left: auto; right: -18px; } @media (max-width: 760px) { .acc-split { grid-template-columns: 1fr; gap: 1.5rem; } .acc-split-media { min-height: 220px; } /* Bloc « coffret » : l'image précède son titre en mobile. Le cadre décalé (::before, -18px) empiète sur le gap de 1.5rem et colle l'image au titre. On ajoute 18px (l'exact débordement du cadre) sur le texte qui suit l'image pour retrouver le même espacement image/texte que le bloc « M+3 » (où le texte précède l'image). Marge posée sur le texte : la marge d'un média étiré par align-items:stretch serait absorbée. */ .acc-split > .acc-split-media:first-child + .acc-split-text { margin-top: 18px; } } /* Placeholder témoignage inséré dans le bloc investissement : marge haute (l'espace sous le placeholder est assuré par le margin-top de .invest-price). */ .invest-testimonial { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); } /* ========================================================= REFONTE 2026 — hero, introduction, méthode enrichie, « parcours complet » (cartes + synthèse), investissement sans prix. ========================================================= */ /* ---- Hero : surtitre + titre NouvElle® + tagline + CTA, centré et aéré ---- */ .acc-hero { text-align: center; padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.25rem, 4vw, 3.5rem); } .acc-hero-inner { max-width: 52rem; } .acc-hero .eyebrow { margin-bottom: 1.35rem; } .acc-hero-title { font-family: var(--font-title); font-weight: 500; color: var(--espresso); font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: 1; letter-spacing: -0.02em; } .acc-reg { font-size: .32em; vertical-align: super; font-weight: 500; margin-left: .06em; } .acc-hero-tagline { font-family: var(--font-title); font-style: italic; color: var(--espresso-soft); font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 1.15rem; } .acc-hero-cta { margin-top: clamp(1.9rem, 3.5vw, 2.75rem); } .acc-hero-cta .btn { white-space: normal; } .acc-cta-arrow { font-style: normal; } /* ---- Introduction (sous le hero) : paragraphes .lead (largeur de référence), 4e paragraphe en espresso pleine. Filet bas pour séparer de la méthode (crème). */ .acc-intro > p + p { margin-top: 1.15rem; } /* Seul « L'objectif : » ressort (espresso 600) ; le reste de la phrase reste en --espresso-soft comme les 3 paragraphes précédents. */ .acc-obj-label { color: var(--espresso); font-weight: 600; } .acc-intro-section { border-bottom: 1px solid var(--line); } /* ---- Méthode : sous-titre italique sous le H2 (un peu plus d'air), hiérarchie des 3 piliers : 01/02/03 > titre d'étape > libellé capitales > paragraphe = objectif. Rythme vertical régulier (numéro → titre → libellé → paragraphe → objectif). ---- */ /* Sous-titre italique de la section méthode : agrandi pour respirer entre le grand H2 et le corps (cumul depuis l'origine 20→24 px plancher, 22→27 px plafond ; +2 px mobile / +3 px desktop lors de ce 2e ajustement). Reste nettement subordonné au H2 (~44 px desktop / ~30 px mobile). Italique/terracotta/ Newsreader/graisse inchangés (hérités de .acc-subtitle). */ .acc-method-sub { margin-top: 1.15rem; font-size: clamp(1.5rem, 2.2vw, 1.6875rem); } .acc-timeline-step { display: flex; flex-direction: column; } /* 1.5rem = écart minimum garanti paragraphe → objectif (colonne la plus remplie, où margin-top:auto de l'objectif se réduit à 0). */ .acc-timeline-step > p:not(.acc-step-label) { margin-bottom: 1.5rem; } /* Spécificité (…-step p.…) pour battre « .acc-timeline-step p » qui impose sinon --fs-lead + espresso-soft au libellé. */ .acc-timeline-step p.acc-step-label { font-family: var(--font-body); font-weight: 600; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--terracotta-deep); margin: 0 0 .85rem; } .acc-objective { margin-top: auto; /* pousse le bloc objectif en bas → les 3 filets se terminent à la même hauteur */ border-left: 3px solid var(--terracotta); padding-left: clamp(1rem, 1.6vw, 1.25rem); } .acc-objective p { margin: 0; color: var(--espresso-soft); font-size: var(--fs-lead); line-height: 1.5; } .acc-objective strong { color: var(--terracotta-deep); font-weight: 600; } /* ---- « Un parcours complet » : 3 cartes beige (sur section crème) + encart synthèse ---- */ .acc-includes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; } .acc-include-card { background: var(--beige); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: clamp(1.5rem, 2.5vw, 2rem); box-shadow: 0 18px 40px -30px rgba(61, 43, 31, 0.35); } .acc-include-card h3 { font-family: var(--font-title); font-weight: 500; color: var(--terracotta-deep); font-size: clamp(1.2rem, 1.9vw, 1.4rem); margin-bottom: 1rem; } @media (max-width: 900px) { .acc-includes-grid { grid-template-columns: 1fr; max-width: 42rem; margin-inline: auto; } } /* Liste à ✓ terracotta (cartes + synthèse), plus dense que .includes-list */ .acc-check-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; } .acc-check-list li { position: relative; padding-left: 1.7rem; color: var(--espresso-soft); font-size: 1rem; line-height: 1.45; } .acc-check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--terracotta-deep); font-weight: 700; line-height: inherit; } /* Encart de synthèse pleine largeur, fond beige-mid, 5 puces sur 2 colonnes */ .acc-summary { margin-top: clamp(1.5rem, 3vw, 2.25rem); background: var(--beige-mid); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); } .acc-summary h3 { font-family: var(--font-title); font-weight: 500; color: var(--espresso); font-size: clamp(1.35rem, 2.3vw, 1.75rem); margin-bottom: .85rem; } .acc-summary > p { color: var(--espresso-soft); font-size: 1rem; line-height: 1.55; margin: 0 0 1.4rem; max-width: none; } /* Deux colonnes INDÉPENDANTES (chaque