/* * ════════════════════════════════════════════════ * Belle Époque — Page Dream Machine * dream-machine.css * Chargé UNIQUEMENT sur page-dream-machine.php * Contenu et agencement : _references/belle-epoque-produit-dream-machine_2.html * Habillage : charte graphique _references/charte-belle-epoque.html (source de vérité) * * Mise en page reprise à l'identique de la charte (section « Mise en page ») : * conteneur 1280px, marges 130px/34px desktop → 24px tablette → 20px mobile, * rythme vertical 110px/66px mobile. « glass » est un composant générique * de la charte (section Composants), pas une pièce signature réservée à * l'accueil — reste donc utilisable ici. * * Fond animé #dm-veils (page-dream-machine.js) : réutilise le moteur de * canvas de l'accueil, mais UNIQUEMENT les voiles diffus bleu/mauve * (type "soft" de page-accueil.js) — jamais le brin ADN net et brillant, * qui reste une pièce signature réservée à l'accueil (charte §05 * Mouvement : "le sablier ADN et le fond d'hélices... ne pas les * répliquer sur les pages intérieures"). Remplace les anciens .halo * statiques (supprimés ci-dessous). * ════════════════════════════════════════════════ */ /* Sélecteur composé (pas de descendant) — la classe est PORTÉE PAR , pas un ancêtre. ".page-template-page-dream-machine body" (avec espace) ne matche jamais rien pour cette raison — bug resté invisible tant que chaque section avait son propre fond opaque (retiré plus bas au profit du canvas #dm-veils, qui a justement révélé ce bug). */ body.page-template-page-dream-machine { background: var(--bg) !important; overflow-x: hidden !important; } /* Même raison que page-accueil.css : Kadence peint son propre fond sur #wrapper, un ancestor entre et le contenu — opaque, il masquerait #dm-veils (empilement CSS : un sibling non positionné passe devant un enfant à z-index négatif). Cette feuille ne charge que sur cette page. */ #wrapper { background: transparent !important; } #dm-veils { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* Kadence pose sa propre couleur directement sur les balises h1/h2/h3 (customizer → var(--global-palette3), pensée pour un fond clair). Une règle directe sur l'élément bat toujours une couleur héritée, quelle que soit la spécificité de l'ancêtre — cf. le même bug déjà corrigé sur page-accueil.css. On neutralise ici avec !important, et on donne à .chrome une spécificité supérieure pour qu'il continue à s'appliquer sur les titres qui le portent (h1.dm-hero-title, h2.dm-cta-title). */ .page-template-page-dream-machine h1, .page-template-page-dream-machine h2, .page-template-page-dream-machine h3 { color: var(--ink) !important; } .page-template-page-dream-machine .chrome { color: transparent !important; } /* ── Conteneur & rythme vertical (charte §04 Mise en page) ── */ .dm-page { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 34px 0 130px; } @media (max-width: 960px) { .dm-page { padding: 0 24px; } } @media (max-width: 640px) { .dm-page { padding: 0 20px; } } /* border-top retiré (17/09/2026) — l'accueil n'a pas ce trait fin entre chaque section, Dream Machine ne doit pas en avoir non plus. */ .dm-section { padding: 110px 0; position: relative; overflow: hidden; } @media (max-width: 640px) { .dm-section { padding: 66px 0; } } /* ── Scroll reveal (partagé avec scroll-reveal.js) ── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.visible { opacity: 1; transform: none; } .d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; } .d4 { transition-delay: 0.4s; } /* ── Composants génériques charte ── */ .glass { background: var(--glass); backdrop-filter: blur(11px) saturate(1.2); -webkit-backdrop-filter: blur(11px) saturate(1.2); border: 1px solid var(--line-2); } .chrome { background: linear-gradient(102deg, var(--ch-a), var(--ch-c) 22%, var(--ch-b) 44%, var(--ch-c) 66%, var(--ch-a)); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: dm-dr 14s ease-in-out infinite; } @keyframes dm-dr { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } } /* Kicker de section — tokens partagés avec page-accueil.css (style.css :root), texte saisi en majuscules directement dans le HTML (charte : pas de text-transform, cf. gotcha 17/09/2026). */ .dm-kick { display: block; font-family: var(--ui); font-weight: var(--kick-weight); font-size: var(--kick-size); letter-spacing: var(--kick-tracking); color: var(--ice-2); margin-bottom: var(--kick-gap); } .dm-kick.center { text-align: center; } /* H2 de section — tokens partagés avec page-accueil.css (style.css :root) */ .dm-h2 { font-family: var(--disp); font-weight: var(--h2-weight); font-size: var(--h2-size); letter-spacing: var(--h2-tracking); color: var(--ink); line-height: var(--h2-line); margin-bottom: 16px; } /* Chapô (charte : Inter 300 1-1.06rem ink-2) */ .dm-sub { font-family: var(--ui); font-weight: 300; font-size: 1.02rem; line-height: 1.65; color: var(--ink-2); max-width: 60ch; } .dm-sub--full { max-width: none; } /* Libellé discret (réutilisé dans plusieurs blocs) */ .lbl { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 10px; } /* .dm-tag retiré (17/09/2026) — remplacé par .tag (pilier, hero) et .kwtag (mots-clés, dm-hero-tags), partagés avec l'accueil, voir style.css. .dm-link : idem, voir style.css. */ /* ══════════════════════════════════════════ HERO ══════════════════════════════════════════ */ .dm-hero { position: relative; overflow: hidden; padding: 150px 0 90px; } .dm-hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } @media (min-width: 900px) { .dm-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 40px; } } /* .dm-pillar retiré (17/09/2026) — remplacé par .tag (voir style.css) */ .tag { margin-bottom: 20px !important; } .dm-hero-title { font-family: var(--disp); font-weight: 300; font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1.05; letter-spacing: -.015em; margin-bottom: 18px; } .dm-hero-brand { font-family: var(--disp); font-weight: 300; font-style: italic; font-size: 1.15rem; color: var(--ch-b); margin-bottom: 22px; } .dm-hero-lead { font-family: var(--ui); font-size: 1.05rem; font-weight: 500; color: var(--ink); margin-bottom: 8px; line-height: 1.5; } .dm-hero-desc { font-family: var(--ui); font-weight: 300; font-size: .96rem; line-height: 1.7; color: var(--ink-2); max-width: 44ch; margin-bottom: 28px; } .dm-hero-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; } .dm-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; } /* Sous 900px la grille hero passe en 1 colonne (voir .dm-hero-grid) : les deux boutons, de largeurs différentes selon leur texte, sont alors empilés pleine largeur pour rester visuellement identiques. */ @media (max-width: 899px) { .dm-hero-btns { flex-direction: column; } .dm-hero-btns > a { width: 100%; text-align: center; } } .dm-hero-visual { position: relative; z-index: 1; } /* Pas de fond/bordure ici : le PNG est transparent et doit flotter directement sur les voiles animées du canvas de fond. Un cadre (même translucide à 6%) peint par-dessus le canvas crée un carré visible où la voile s'arrête net. */ .dm-product-frame img { display: block; width: 100%; height: auto; } /* Sous 900px, .dm-hero-grid passe en 1 colonne : sans plafond, l'image s'étire sur 100% de la largeur de page (pensée pour ~la moitié d'une grille 2 colonnes) et écrase visuellement le texte au-dessus. */ @media (max-width: 899px) { .dm-product-frame { max-width: 300px; margin: 0 auto; } } /* Desktop/grand écran : sans plafond, l'image remplit sa colonne à 100% — déjà ~510px de large sur un écran 1564px, et .dm-page (ligne 55, max-width 1280px) empêche que ça grossisse davantage même sur un écran plus large. Plafond ajouté pour réduire la taille perçue sur grand écran. */ @media (min-width: 900px) { .dm-product-frame { max-width: 380px; margin-left: auto; } } /* ══════════════════════════════════════════ L'EXPÉRIENCE ══════════════════════════════════════════ */ .dm-exp-grid { display: grid; grid-template-columns: 1fr; gap: 48px; margin-top: 44px; } .dm-exp-full { grid-column: 1 / -1; } /* Description / La technologie : blocs alignés côte à côte, séparés par le trait lumineux partagé .idiv (voir style.css) — plus empilés en colonne comme avant. */ .dm-exp-cols { display: grid; grid-template-columns: 1fr; gap: 30px; } @media (min-width: 900px) { .dm-exp-cols { grid-template-columns: 1fr auto 1fr; gap: 44px; } } .dm-block { margin-bottom: 26px; } .dm-block p { font-family: var(--ui); font-weight: 400; font-size: .96rem; line-height: 1.7; color: var(--ink); } .dm-note { font-family: var(--ui); font-size: .82rem; color: var(--ink-3); font-style: italic; margin-top: 8px; line-height: 1.6; } /* Badge "BE APPROVED" — sans encadrement, icône verte (mode "validé"), seule exception à la palette ice/mauve/ink de la charte : le vert est ici un signifiant universel de validation, pas un choix décoratif. */ .dm-approved { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--ui); font-size: .78rem; letter-spacing: .04em; color: var(--ice-2); font-weight: 500; line-height: 1.5; } .dm-approved-icon { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #5FBF8F; color: #5FBF8F; box-shadow: 0 0 8px -1px #5FBF8F; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .68rem; } .dm-quote { display: flex; gap: 18px; align-items: flex-start; margin-top: 40px; padding: 28px; } .dm-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(145deg, var(--ch-a), var(--bg)); border: 1px solid var(--line-2); flex-shrink: 0; overflow: hidden; } .dm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .dm-quote-name { font-family: var(--disp); font-weight: 400; font-size: 1.05rem; color: var(--ink); margin-bottom: 8px; } .dm-quote p { font-family: var(--ui); font-weight: 300; font-size: .9rem; line-height: 1.7; color: var(--ink-2); } /* Bénéfices — cartes pleine largeur avec icônes colorées (rotation des 3 teintes de la charte : ice/mauve/ice-2), "un truc stylé" demandé explicitement plutôt que la simple liste plate d'avant. */ /* 6 bénéfices sur une seule ligne en desktop (demande explicite du 17/09/2026) — empilés en 2 colonnes sur mobile/tablette, faute de place. */ .dm-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; } @media (min-width: 700px) { .dm-benefits { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .dm-benefits { grid-template-columns: repeat(6, 1fr); } } .dm-benefit { background: var(--panel); border: 1px solid var(--line-2); padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transition: border-color .3s, box-shadow .3s, transform .3s; } .dm-benefit:hover { transform: translateY(-3px); } .dm-benefit-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .92rem; } .dm-benefit-label { font-family: var(--ui); font-size: .78rem; font-weight: 500; color: var(--ink); } /* Couleurs choisies une par une selon le sens du mot (hors palette de la charte — demande explicite : "amener de la lumière" prime ici sur les tokens habituels). */ .dm-benefit:nth-child(1) { border-color: rgba(94,197,214,.3); } /* Relaxation profonde — bleu-vert apaisant */ .dm-benefit:nth-child(1):hover { border-color: #5EC5D6; box-shadow: 0 0 30px -14px rgba(94,197,214,.65); } .dm-benefit:nth-child(1) .dm-benefit-icon { background: rgba(94,197,214,.12); border: 1px solid #5EC5D6; color: #5EC5D6; } .dm-benefit:nth-child(2) { border-color: rgba(167,139,250,.3); } /* Lâcher-prise — lavande, léger/aérien */ .dm-benefit:nth-child(2):hover { border-color: #A78BFA; box-shadow: 0 0 30px -14px rgba(167,139,250,.65); } .dm-benefit:nth-child(2) .dm-benefit-icon { background: rgba(167,139,250,.12); border: 1px solid #A78BFA; color: #A78BFA; } .dm-benefit:nth-child(3) { border-color: rgba(240,198,116,.3); } /* Clarté mentale — or clair, lumineux */ .dm-benefit:nth-child(3):hover { border-color: #F0C674; box-shadow: 0 0 30px -14px rgba(240,198,116,.65); } .dm-benefit:nth-child(3) .dm-benefit-icon { background: rgba(240,198,116,.12); border: 1px solid #F0C674; color: #F0C674; } .dm-benefit:nth-child(4) { border-color: rgba(242,137,107,.3); } /* Élan créatif — corail, énergique */ .dm-benefit:nth-child(4):hover { border-color: #F2896B; box-shadow: 0 0 30px -14px rgba(242,137,107,.65); } .dm-benefit:nth-child(4) .dm-benefit-icon { background: rgba(242,137,107,.12); border: 1px solid #F2896B; color: #F2896B; } .dm-benefit:nth-child(5) { border-color: rgba(232,160,196,.3); } /* Pause sensorielle — rose doux */ .dm-benefit:nth-child(5):hover { border-color: #E8A0C4; box-shadow: 0 0 30px -14px rgba(232,160,196,.65); } .dm-benefit:nth-child(5) .dm-benefit-icon { background: rgba(232,160,196,.12); border: 1px solid #E8A0C4; color: #E8A0C4; } .dm-benefit:nth-child(6) { border-color: rgba(107,111,232,.3); } /* Préparation au sommeil — indigo nuit */ .dm-benefit:nth-child(6):hover { border-color: #6B6FE8; box-shadow: 0 0 30px -14px rgba(107,111,232,.65); } .dm-benefit:nth-child(6) .dm-benefit-icon { background: rgba(107,111,232,.12); border: 1px solid #6B6FE8; color: #6B6FE8; } /* ══════════════════════════════════════════ LE PROTOCOLE ══════════════════════════════════════════ */ .dm-subsection { border-top: 1px solid var(--line-2); padding-top: 40px; margin-top: 40px; } /* Cartes "moments" — disposition portée depuis _references/LeProtocole_preview.png : en-tête numéro/nom du moment, image (à intégrer), titre + texte, encart session recommandée collé en bas de carte. Chaque carte est encadrée individuellement (pas la technique "trait 1px partagé" de .dm-benefits) — un vrai espace entre les 3 cartes, demandé explicitement. */ .dm-moments { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 820px) { .dm-moments { grid-template-columns: repeat(3, 1fr); } } .dm-moment { background: var(--panel); border: 1px solid var(--line-2); display: flex; flex-direction: column; } .dm-moment-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line-2); } .dm-moment-num { font-family: var(--ui); font-size: .7rem; letter-spacing: .04em; color: var(--ink-3); } .dm-moment-label { font-family: var(--ui); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ice-2); } .dm-moment-img { height: 190px; background: rgba(234,237,240,.02); border-bottom: 1px solid var(--line-2); overflow: hidden; } .dm-moment-img img { display: block; width: 100%; height: 100%; object-fit: cover; } /* "La journée" : photo portrait avec le visage dans le tiers supérieur ET la Dream Machine plus bas, vers le milieu — "center top" (0%) montrait le visage mais coupait l'appareil, qui tombait sous la fenêtre de crop. 35% déplace la fenêtre vers le bas pour cadrer les deux. Pour affiner : object-position est un axe de 0% (haut de la photo visible) à 100% (bas visible) ; monter la valeur descend la fenêtre de crop dans la photo, la baisser la remonte. */ .dm-moment-img--top img { object-position: center 35%; } .dm-moment-body { padding: 22px 22px 24px; } .dm-moment-title { font-family: var(--disp); font-weight: 400; font-size: 1.12rem; color: var(--ink); margin-bottom: 10px; } .dm-moment p { font-family: var(--ui); font-size: .86rem; font-weight: 300; line-height: 1.65; color: var(--ink-2); } .dm-moment-session { margin-top: auto; padding: 16px 22px; background: rgba(126,180,219,.05); border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; } .dm-moment-session span { font-family: var(--ui); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .dm-moment-session b { font-family: var(--disp); font-weight: 400; font-size: .95rem; color: var(--ink); } /* Note de clôture encadrée par 2 traits lumineux fins et étroits (même effet dégradé que .rentbar::before sur l'accueil), pour la faire ressortir sans prendre toute la largeur. */ .dm-note-center { position: relative; text-align: center; max-width: 640px; margin: 44px auto; padding: 28px 0; } .dm-note-center::before, .dm-note-center::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 140px; height: 1px; background: linear-gradient(90deg, transparent, var(--ice-2), transparent); } .dm-note-center::before { top: 0; } .dm-note-center::after { bottom: 0; } /* Panneau "Le rituel de Laura" — 2 colonnes (citation / conseil), encadré d'une lueur mauve sur tout le pourtour (pas juste une bordure gauche comme .rental-waiver — plus mis en avant ici). */ .dm-ritual-laura { margin-top: 56px; padding: 36px; border: 1px solid rgba(175,143,197,.4); box-shadow: 0 0 46px -14px rgba(175,143,197,.4); display: grid; grid-template-columns: 1fr; gap: 30px; } @media (min-width: 900px) { .dm-ritual-laura { grid-template-columns: 4fr auto 1fr; padding: 44px; gap: 40px; } } /* Variante 1 colonne (pas de 2e bloc "conseil") — "Pourquoi la Dream Machine" : sans ce modificateur, la grille à 3 pistes ne remplirait que la 1ère et laisserait le texte "bloqué à gauche" avec un grand vide à droite. */ @media (min-width: 900px) { .dm-ritual-laura.dm-ritual-laura--full { grid-template-columns: 1fr; } } .dm-ritual-laura .dm-kick { margin-bottom: 14px; } .dm-ritual-title { font-family: var(--disp); font-weight: 400; font-size: 1.32rem; color: var(--ink); margin-bottom: 16px; } .dm-ritual-laura > div:first-child p { font-family: var(--ui); font-weight: 300; font-size: .92rem; line-height: 1.75; color: var(--ink-2); } /* Avatar + texte côte à côte (reprend le même agencement que .dm-quote avant sa conversion à ce style) — utilisé uniquement par "Pourquoi la Dream Machine". */ .dm-ritual-body { display: flex; gap: 20px; align-items: flex-start; } /* Conseil centré horizontalement, ET centré verticalement par rapport à la colonne de gauche ("Le rituel de Laura"), plus haute — align-self l'empêche de s'étirer sur toute la hauteur de la ligne (comportement par défaut de la grille). Le séparateur est le trait lumineux partagé .idiv (voir style.css). */ .dm-ritual-advice { text-align: center; align-self: center; } /* Texte du conseil — restait sans style dédié (hérite du défaut du navigateur, quasi invisible sur fond sombre) : reprend la même recette que le paragraphe de citation ci-contre (demande explicite 18/09/2026). */ .dm-ritual-advice-text { font-family: var(--ui); font-weight: 300; font-size: .92rem; line-height: 1.75; color: var(--ink-2); } /* ══════════════════════════════════════════ POURQUOI LOUER ══════════════════════════════════════════ */ /* Les 3 blocs restent tels quels, seuls les traits deviennent lumineux — même esprit que l'encadrement des avis, mais plus discret (halo plus petit, moins opaque). */ .dm-loc-args { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 820px) { .dm-loc-args { grid-template-columns: repeat(3, 1fr); } } .dm-loc-arg { background: var(--panel) !important; padding: 30px 26px; border: 1px solid rgba(126,180,219,.28); box-shadow: 0 0 32px -18px rgba(126,180,219,.4); } .dm-loc-num { font-family: var(--disp); font-weight: 300; font-size: 1.9rem; color: var(--ice-2); margin-bottom: 14px; } .dm-loc-arg p { font-family: var(--ui); font-weight: 300; font-size: .9rem; line-height: 1.7; color: var(--ink-2); } /* ══════════════════════════════════════════ COMMENT ÇA MARCHE — composant partagé avec l'accueil (.steps/.step/ .stepnum/.stepn/.dep-link), voir style.css. .dm-hw-star reste ici : il sert aussi au déclencheur du certificat plus haut sur cette page (voir "Pourquoi la Dream Machine ?"). ══════════════════════════════════════════ */ .dm-hw-star { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(126,180,219,.5); text-decoration-style: dotted; text-underline-offset: 3px; transition: color .2s; } .dm-hw-star:hover { color: var(--ice-2); } /* Modal Tyllt : voir style.css (.dm-modal-*, composant partagé avec l'accueil) */ /* Certificat de praticienne (scan PDF converti en image) */ .dm-certif-img { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); margin-bottom: 16px; } /* ══════════════════════════════════════════ AVIS CLIENTS ══════════════════════════════════════════ */ .dm-avis-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 44px; } .dm-avis-agg { text-align: right; } .dm-avis-score { font-family: var(--disp); font-weight: 300; font-size: 1.9rem; color: var(--ink); } .dm-avis-agg span { font-family: var(--ui); font-size: .76rem; color: var(--ink-3); } /* Cartes séparées et lumineuses — même traitement que les avis de l'accueil (.rc, page-accueil.css) : halo bleu ambiant, trait supérieur dégradé, grand guillemet décoratif en filigrane. */ .dm-avis-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 820px) { .dm-avis-grid { grid-template-columns: repeat(3, 1fr); } } .dm-avis-card { background: var(--panel) !important; padding: 30px 26px; position: relative; overflow: hidden; border: 1px solid rgba(126,180,219,.4); box-shadow: 0 0 50px -16px rgba(126,180,219,.6); } .dm-avis-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ice), transparent); } .dm-avis-quote { position: absolute; top: 6px; right: 18px; font-family: var(--disp); font-size: 4.6rem; color: var(--ice); opacity: .22; pointer-events: none; line-height: 1; } .dm-avis-who { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; position: relative; } .dm-avis-who .dm-avatar { width: 38px; height: 38px; border: 1px solid var(--ice); box-shadow: 0 0 10px -2px var(--ice); } .dm-avis-who b { font-family: var(--disp); font-weight: 400; font-size: 1rem; color: var(--ink); display: block; } .dm-avis-who span { font-family: var(--ui); font-size: .76rem; color: var(--ink-3); } .dm-avis-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; margin-bottom: 16px; } .dm-avis-scores div { font-family: var(--ui); font-size: .76rem; color: var(--ink-3); font-weight: 300; } .dm-avis-scores b { color: var(--ice-2); font-weight: 500; } .dm-avis-meta { font-family: var(--ui); font-size: .72rem; color: var(--ink-3); margin-bottom: 14px; display: flex; gap: 14px; flex-wrap: wrap; } .dm-avis-text { font-family: var(--ui); font-size: .88rem; color: var(--ink); font-weight: 300; font-style: italic; line-height: 1.6; } .dm-avis-source { text-align: center; margin-top: 32px; font-family: var(--ui); font-size: .8rem; color: var(--ink-3); font-weight: 300; } /* ══════════════════════════════════════════ FAQ ══════════════════════════════════════════ */ .dm-faq-list { border-top: 1px solid var(--line-2); } .dm-faq-item { border-bottom: 1px solid var(--line-2); } .dm-faq-q { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 20px 4px; cursor: pointer; font-family: var(--ui); font-size: .98rem; font-weight: 500; color: var(--ink) !important; background: none !important; border: none !important; box-shadow: none !important; text-align: left; } .dm-faq-chev { transition: transform .2s; color: var(--ice-2); font-size: 1.1rem; flex-shrink: 0; } .dm-faq-item.open .dm-faq-chev { transform: rotate(45deg); } .dm-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .dm-faq-item.open .dm-faq-a { max-height: 280px; } /* 280 (pas 220) : la réponse "Contre-indications" est plus longue */ .dm-faq-a p { font-family: var(--ui); font-size: .88rem; color: var(--ink-2); font-weight: 300; line-height: 1.65; padding: 0 4px 20px; margin: 0; } /* ══════════════════════════════════════════ CTA FINAL ══════════════════════════════════════════ */ .dm-ctafinal { text-align: center; } /* Séparateur lumineux avant la section, même trait que .final sur l'accueil (460px, dégradé ice-2). */ .dm-ctafinal::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 460px; height: 1px; background: linear-gradient(90deg, transparent, var(--ice-2), transparent); } .dm-ctafinal .dm-page { position: relative; z-index: 1; } .dm-cta-title { font-family: var(--disp); font-weight: 300; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.15; letter-spacing: -.015em; margin: 14px 0 32px; } .dm-ctafinal .btn-primary { margin: 0 auto; } /* ══════════════════════════════════════════ BARRE COLLANTE ══════════════════════════════════════════ */ /* [MODIFIÉ 22/09/2026] "Dream Machine" et "Offre de lancement" retirés (demande explicite) — ne reste que le bouton "Louer". Simplifié de grid 3 zones (nécessaire quand il fallait centrer "Offre de lancement" indépendamment des deux autres éléments) à un simple flex aligné à droite, plus rien à répartir sur plusieurs zones. */ .dm-sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: rgba(10,13,17,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line-2); padding: 18px 32px; display: flex; justify-content: flex-end; align-items: center; } /* [AJOUT 21/09/2026] Faisceau qui balaie la bordure du haut en boucle — même effet que .rentbar::before sur la page d'accueil (page-accueil.css), dupliqué ici (fichiers CSS séparés par page, jamais chargés ensemble, voir Assets::enqueue()) plutôt que partagé. */ .dm-sticky::before { content: ''; position: absolute; top: -1px; left: 0; width: 260px; height: 1px; background: linear-gradient(90deg, transparent, var(--ice-2), transparent); animation: dm-sweep 12s ease-in-out infinite; } @keyframes dm-sweep { 0% { transform: translateX(-260px); } 100% { transform: translateX(100vw); } } .dm-sticky .btn-primary { padding: 14px 28px !important; font-size: .88rem !important; white-space: nowrap; flex-shrink: 0; } @media (max-width: 640px) { .dm-sticky { padding: 14px 18px; } .dm-sticky .btn-primary { padding: 11px 18px !important; font-size: .78rem !important; } } /* Espace pour ne pas passer sous la barre collante */ .page-template-page-dream-machine #colophon { padding-bottom: 76px; }