/* ========================================================================== ACCUEIL — styles spécifiques au front page Chargé uniquement sur is_front_page() via functions.php. ========================================================================== */ /* ── 2 grandes offres côte à côte ─────────────────────────────────────────── */ .offres-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; } .offre-duo-card { position: relative; padding: clamp(32px, 4vw, 52px) clamp(28px, 3.5vw, 44px); border-radius: 24px; border: 1px solid rgba(169, 120, 69, 0.18); background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 16px; overflow: hidden; transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .offre-duo-card:hover { border-color: var(--bronze, #A97845); box-shadow: 0 24px 56px -18px rgba(169, 120, 69, 0.28); transform: translateY(-5px); } .offre-duo-num { position: absolute; top: 18px; right: 26px; font-family: var(--font-titre, "Syne", system-ui, sans-serif); font-size: 80px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: rgba(169, 120, 69, 0.07); pointer-events: none; user-select: none; } .offre-icon { flex-shrink: 0; width: 52px; height: 52px; } .offre-duo-card h3 { font-family: var(--font-titre, "Syne", system-ui, sans-serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; color: var(--noir, #111); line-height: 1.15; margin: 0; } .offre-duo-card > p { font-family: var(--font-texte, "DM Sans", system-ui, sans-serif); font-size: 16px; line-height: 1.7; color: rgba(17, 17, 17, 0.62); margin: 0; flex-grow: 1; } .offre-duo-card .link-arrow { align-self: flex-start; margin-top: 8px; } /* ── Variante 3 cartes (offres-trio) ─────────────────────────────────────── */ .offres-trio { grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ── Hero : titre maîtrisé + 3 boutons alignés ──────────────────────────── */ .page-index .hero-title, .page-index h1.hero-title, .page-index .title-xl.hero-title { font-size: clamp(28px, 3vw, 46px) !important; font-weight: 800 !important; line-height: 1.15; max-width: none; width: 100%; letter-spacing: -0.015em; margin-block: 0.2em 0.6em; white-space: normal; text-wrap: balance; } .page-index .hero-sub { max-width: 58ch; font-size: clamp(15px, 1.1vw, 17px); } /* ───────────────────────────────────────────────────────────────────── HERO — version ALIGNÉ À GAUCHE (active actuellement) Le contenu reste cadré dans la partie gauche du hero, dans l'esprit du design d'origine, avec les 3 boutons en bas et la barre verticale décorative à gauche réactivée. ───────────────────────────────────────────────────────────────────── */ .page-index .hero-layer--content { align-items: stretch; justify-content: stretch; padding: calc(var(--header-height, 88px) + 40px) 0 clamp(80px, 12vh, 140px); } .page-index .hero-layer--content .hero-content, .page-index .hero-content { max-width: 1280px; width: 100%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 100%; } .page-index .hero-sub { margin-inline: 0; } .page-index .hero-content > .eyebrow { margin-top: auto; } .page-index .hero-ctas--trio { justify-content: flex-start; margin-top: auto; width: 100%; max-width: 920px; } /* ───────────────────────────────────────────────────────────────────── HERO — version CENTRÉE (sauvegarde — utilisée précédemment, validée par Léo) Pour réactiver : ajouter la classe `.hero-centered` sur ou bien remplacer le bloc ci-dessus par celui-ci. ───────────────────────────────────────────────────────────────────── .page-index.hero-centered .hero-layer--content { align-items: stretch; justify-content: stretch; padding: calc(var(--header-height, 88px) + 40px) 0 clamp(80px, 12vh, 140px); } .page-index.hero-centered .hero-layer--content .hero-content, .page-index.hero-centered .hero-content { max-width: 1500px; width: 100%; text-align: center; padding: 0 32px; margin-left: auto !important; margin-right: auto !important; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; } .page-index.hero-centered .hero-content::before { display: none; } .page-index.hero-centered .hero-sub { margin-inline: auto; } .page-index.hero-centered .hero-content > .eyebrow { margin-top: auto; } .page-index.hero-centered .hero-ctas--trio { justify-content: center; margin-top: auto; width: 100%; max-width: 920px; } ───────────────────────────────────────────────────────────────────── */ /* 3 boutons sur une seule ligne horizontale en desktop */ .hero-ctas--trio { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; } .hero-ctas--trio .btn { flex: 1 1 0; min-height: 50px; padding: 0 18px; font-size: 14px; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; min-width: 0; } /* Mobile : on accepte que ça wrap, mais bien empilé */ @media (max-width: 760px) { .hero-ctas--trio { flex-wrap: wrap; } .hero-ctas--trio .btn { flex: 1 1 100%; } /* H1 du hero : on retire les
forcés pour laisser le texte respirer naturellement (sinon 6-7 lignes sur mobile). */ .page-index .hero-title br { display: none; } .page-index .hero-title, .page-index h1.hero-title, .page-index .title-xl.hero-title { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.15; text-align: left; } .page-index .hero-sub { font-size: 15px; line-height: 1.55; } /* Eyebrow plus visible : taille + opacité + lettrage */ .page-index .hero-content > .eyebrow { font-size: 13px !important; letter-spacing: 0.18em; color: var(--bronze, #A97845) !important; opacity: 1; margin-bottom: 14px; font-weight: 700; } } /* ── Méthode : header élargi pour titre sur 2 lignes max ─────────────── */ .section-methode .methode-header { max-width: 1200px; padding-inline: 24px; } .section-methode .methode-header h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.08; letter-spacing: -0.015em; } .section-methode .methode-header .methode-sub, .section-methode .methode-header .prestations-intro { text-align: center; margin: 18px auto 0; max-width: 640px; } /* ── Méthode : layout en flow normal (3 étapes au lieu de 4) ──────────── Le design d'origine positionnait les cards en absolute dans un conteneur de 720px. Avec 3 cards on repasse en flex column avec un zigzag horizontal. */ .section-methode .methode-steps-zigzag { height: auto !important; min-height: 0; display: flex; flex-direction: column; gap: 36px; padding: 16px 0; } .section-methode .methode-step-row, .section-methode .methode-step-row:nth-of-type(1), .section-methode .methode-step-row:nth-of-type(2), .section-methode .methode-step-row:nth-of-type(3), .section-methode .methode-step-row:nth-of-type(4) { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100%; max-width: 640px; /* On garde la rotation décorative mais discrète */ transform: rotate(-1deg); } .section-methode .methode-step-row:nth-of-type(odd) { align-self: flex-start; } .section-methode .methode-step-row:nth-of-type(even) { align-self: flex-end; transform: rotate(1.2deg); } /* On laisse toujours les cards visibles : le tracé SVG d'origine n'est plus là */ .section-methode .methode-step-row { opacity: 1 !important; } /* Tracé bézier — affichage + positionnement. L'animation au scroll est gérée par initMethodePathDraw() dans main.js : il calcule getTotalLength() puis pilote stroke-dashoffset selon le scroll. On NE touche pas à stroke-dasharray/dashoffset pour ne pas casser ça. */ .section-methode .methode-path-svg--trio { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; } .section-methode .methode-path-svg--trio path { fill: none; stroke: rgba(169, 120, 69, 0.55); stroke-width: 1.8; stroke-linecap: round; } /* ── Réalisations mini : grille statique au lieu du carrousel horizontal ── */ .section-realisations-mini .real-scroll-wrap { overflow: visible; cursor: default; padding: 32px 0 24px; } .section-realisations-mini .real-scroll-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 20px clamp(20px, 4vw, 60px); width: auto; max-width: 1280px; margin: 0 auto; } .section-realisations-mini .polaroid { width: auto; flex-shrink: 1; } @media (max-width: 900px) { .section-realisations-mini .real-scroll-track { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .section-realisations-mini .real-scroll-track { grid-template-columns: 1fr; max-width: 360px; } } @media (max-width: 1180px) { .hero-ctas--trio .btn { white-space: normal; } } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1080px) { .offres-trio { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .offres-duo, .offres-trio { grid-template-columns: 1fr; gap: 16px; } .offre-duo-num { font-size: 60px; } .offre-duo-card { padding: 28px 24px; } }