/* ========================================================================== ASTRONISS — design system Univers clair et doux (blanc / rose pâle), inspiré du site de référence choisi par la cliente. Chargé après le style d'Astra (voir functions.php). Changez une variable ci-dessous et tout le site suit. ========================================================================== */ /* ============ CONTENEUR ASTRA (uniquement sur cette page) ============ */ /* Astra encadre normalement le contenu dans .ast-container, limité à 1240px — ce qui laisse deux bandes blanches sur grand écran alors que les sections sont conçues pour s'étendre bord à bord. On neutralise cette limite seulement sur le gabarit "Accueil" (classe de ajoutée automatiquement par WordPress), sans toucher aux autres pages du site. Spécificité (0,3,0) : plus élevée que la règle d'Astra (0,1,0), donc pas besoin de !important. */ .page-template-template-accueil .site-content > .ast-container{ max-width: 100%; padding-left: 0; padding-right: 0; } /* ============ POLICE (fichier réel, dans assets/fonts/) ============ */ /* Le texte courant utilise la police système (rapide, pas de fichier à charger) — seuls les titres utilisent Playfair Display, comme sur le site de référence. */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/playfair-normal.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('../fonts/playfair-italic.woff2') format('woff2'); } /* ============ VARIABLES (modifiez ici pour changer couleurs/typo partout) ============ */ :root{ --bg: #FFFFFF; --bg-soft: #FDF6F8; --surface: #FFFFFF; --surface-2: #FBEAF0; --ink: #2B2730; --ink-soft: #6B6570; --ink-faint: #726B77; --rose: #A85575; --rose-strong: #8B3F5F; --rose-soft: #C97B98; --rose-pale: #F7D9E3; --on-rose: #FFFFFF; --gold: #9C7A2E; --gold-soft: #E8D2A0; --danger: #A6473F; --border: #F0DEE6; --border-strong: #E3B9CB; --ring: rgba(168,85,117,0.45); --font-display: 'Playfair Display', Georgia, 'Iowan Old Style', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.75rem; --space-8: 3.5rem; --space-9: 5rem; --space-10: 7rem; --text-xs: .8125rem; --text-sm: .9375rem; --text-base: 1rem; --text-lg: 1.1875rem; --text-xl: 1.375rem; --text-2xl: 1.9rem; --text-3xl: 2.5rem; --text-4xl: 3.2rem; --text-5xl: clamp(2.6rem, 5.6vw, 4.4rem); --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-pill: 999px; --ease: cubic-bezier(.22,.61,.36,1); --shadow-soft: 0 20px 60px -24px rgba(43,39,48,.22); } /* ============ BASE ============ */ /* Tout est scopé à .atelier-astres-accueil (le conteneur du template d'accueil), pas au : le header/footer natifs d'Astra gardent leur propre style, réglable dans le Personnaliseur. */ *,*::before,*::after{ box-sizing: border-box; } .atelier-astres-accueil{ background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; -webkit-font-smoothing: antialiased; position:relative; /* .ast-container (son parent direct) est en display:flex côté Astra ; sans largeur explicite, cet élément se réduirait à la largeur de son contenu (~1180px) au lieu de remplir la ligne flex pleine largeur. */ width: 100%; } .atelier-astres-accueil img,.atelier-astres-accueil svg,.atelier-astres-accueil canvas{ display:block; max-width:100%; } .atelier-astres-accueil h1,.atelier-astres-accueil h2,.atelier-astres-accueil h3,.atelier-astres-accueil h4{ font-family: var(--font-display); font-weight: 600; margin:0; text-wrap: balance; color: var(--ink); } .atelier-astres-accueil p{ margin:0; } .atelier-astres-accueil ::selection{ background: var(--rose-pale); color: var(--rose-strong); } .atelier-astres-accueil a:focus-visible, .atelier-astres-accueil button:focus-visible, .atelier-astres-accueil :focus-visible{ outline: 2px solid var(--rose); outline-offset: 3px; border-radius: var(--radius-s); } .aa-container{ max-width: 1180px; margin-inline:auto; padding-inline: var(--space-5); } @media (max-width: 640px){ .aa-container{ padding-inline: var(--space-4); } } .aa-eyebrow{ font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--rose); display:flex; align-items:center; gap: .6em; } .aa-section{ padding-block: var(--space-9); } .aa-section-head{ display:flex; flex-direction:column; gap: var(--space-3); max-width: 640px; margin-bottom: var(--space-7); } .aa-section-head h2{ font-size: var(--text-3xl); } .aa-section-head .aa-lede{ color: var(--ink-soft); font-size: var(--text-lg); line-height:1.55; } .aa-reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .aa-reveal.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .aa-reveal{ opacity:1; transform:none; transition:none; } } .aa-empty-note{ color: var(--ink-faint); font-size: var(--text-sm); font-style:italic; } /* ============ BOUTONS ============ */ .aa-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family: var(--font-body); font-weight:600; font-size: var(--text-sm); padding: .85em 1.7em; border-radius: var(--radius-pill); border: 1px solid transparent; cursor:pointer; transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); letter-spacing: .01em; white-space: nowrap; text-decoration:none; } .aa-btn:active{ transform: translateY(1px); } .aa-btn-primary{ background: var(--rose); color: var(--on-rose); } .aa-btn-primary:hover{ background: var(--rose-strong); color: var(--on-rose); } .aa-btn-ghost{ background: transparent; color: var(--rose-strong); border-color: var(--border-strong); } .aa-btn-ghost:hover{ background: var(--rose-pale); border-color: var(--rose-soft); } .aa-btn-block{ width:100%; } /* ============ HERO ============ */ .aa-hero{ position:relative; overflow:hidden; background: var(--bg-soft); } .aa-hero-grid{ position:relative; display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items:center; padding-block: var(--space-9); } @media (max-width: 900px){ .aa-hero-grid{ grid-template-columns: 1fr; padding-block: var(--space-8); } } .aa-hero-copy h1{ font-size: var(--text-5xl); font-weight:600; line-height:1.08; margin-block: var(--space-4) var(--space-5); letter-spacing:-.01em; } .aa-hero-copy h1 em{ font-style: italic; color: var(--rose); } .aa-hero-copy .aa-lede{ font-size: var(--text-lg); color: var(--ink-soft); max-width: 46ch; line-height:1.6; } .aa-hero-cta{ display:flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap:wrap; } .aa-hero-proof{ display:flex; gap: var(--space-5); margin-top: var(--space-7); font-size: var(--text-xs); color: var(--ink-faint); flex-wrap:wrap; } .aa-hero-proof strong{ color: var(--ink); font-weight:600; } .aa-hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; } .aa-hero-visual svg{ width: min(360px, 90%); height:auto; } /* ============ TÉMOIGNAGES ============ */ .aa-rating-row{ display:flex; align-items:center; gap: var(--space-3); flex-wrap:wrap; margin-top: var(--space-2); } .aa-stars{ display:inline-flex; gap:2px; color: var(--gold); } .aa-rating-copy{ font-size: var(--text-sm); color: var(--ink-soft); } .aa-rating-copy strong{ color: var(--ink); } .aa-rating-link{ font-size: var(--text-sm); color: var(--rose); text-decoration:none; } .aa-rating-link:hover{ text-decoration: underline; } .aa-carousel{ position:relative; display:flex; align-items:stretch; gap: var(--space-3); } .aa-carousel-track{ display:flex; gap: var(--space-5); overflow-x:auto; scroll-snap-type: x mandatory; scroll-behavior:smooth; padding-block: var(--space-2); flex:1; } .aa-carousel-track::-webkit-scrollbar{ display:none; } .aa-testimonial-card{ scroll-snap-align:start; flex: 0 0 min(340px, 82vw); background: var(--surface-2); border:none; border-radius: var(--radius-m); padding: var(--space-5); display:flex; flex-direction:column; gap: var(--space-3); } .aa-testimonial-card p{ color: var(--ink-soft); font-size: var(--text-sm); line-height:1.65; flex:1; } .aa-testimonial-author{ font-size: var(--text-sm); font-weight:600; } .aa-testimonial-author span{ font-weight:400; color: var(--ink-faint); font-size: var(--text-xs); } .aa-carousel-btn{ flex:none; width:40px; align-self:center; background: var(--surface); border:1px solid var(--border-strong); border-radius:50%; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--ink-soft); transition: all .18s var(--ease); } .aa-carousel-btn:hover{ border-color: var(--rose); color: var(--rose); background: var(--rose-pale); } .aa-carousel-note{ font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--space-4); } @media (max-width: 640px){ .aa-carousel-btn{ display:none; } } /* ============ VIDÉOS ============ */ .aa-video-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 820px){ .aa-video-grid{ grid-template-columns:1fr; } } .aa-video-thumb{ position:relative; aspect-ratio: 16/9; border-radius: var(--radius-m); overflow:hidden; background: var(--surface-2) center/cover no-repeat; margin-bottom: var(--space-3); cursor:pointer; } .aa-video-thumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .aa-play-btn{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background: var(--rose); color:var(--on-rose); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .2s var(--ease); padding-left:3px; } .aa-play-btn:hover{ transform: translate(-50%,-50%) scale(1.08); background: var(--rose-strong); } .aa-video-card h3{ font-size: var(--text-base); font-family: var(--font-body); font-weight:600; } .aa-video-cta{ text-align:center; margin-top: var(--space-7); } /* ============ ANALYSES ASTROLOGIQUES (boutique) ============ */ .aa-products{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } @media (max-width: 980px){ .aa-products{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .aa-products{ grid-template-columns: 1fr; } } .aa-product-card{ background: transparent; border:none; border-radius: 0; padding: 0; display:flex; flex-direction:column; gap: var(--space-3); position:relative; } .aa-product-glyph{ width:100%; aspect-ratio:1/1; padding: var(--space-7); color: var(--rose-soft); background: var(--surface-2); border-radius: var(--radius-m); } .aa-product-image{ width:100%; aspect-ratio:1/1; border-radius: var(--radius-m); overflow:hidden; background: var(--surface-2); } .aa-product-image img{ width:100%; height:100%; object-fit:cover; } .aa-product-card h3{ font-size: var(--text-lg); font-weight: 600; } .aa-product-card p{ color: var(--ink-soft); font-size: var(--text-sm); line-height:1.55; flex:1; } .aa-product-price{ font-variant-numeric: tabular-nums; color: var(--ink); font-size: var(--text-base); font-weight:600; } .aa-card-badge{ font-size: .75rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600; color: var(--rose); align-self:flex-start; background: var(--rose-pale); padding: .3em .8em; border-radius: var(--radius-pill); } .aa-card-actions{ display:flex; flex-direction:column; gap: var(--space-2); margin-top: var(--space-2); } .aa-qv-btn{ background:none; border:none; padding:0; text-align:left; cursor:pointer; color: var(--ink-soft); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: color .18s var(--ease); } .aa-qv-btn:hover{ color: var(--rose); text-decoration-color: var(--rose); } /* ============ APERÇU RAPIDE ============ */ .aa-qv-dialog{ position:relative; border:none; border-radius: var(--radius-l); background: var(--surface); color: var(--ink); padding: var(--space-6); max-width: 560px; width: calc(100vw - 2rem); margin:auto; box-shadow: var(--shadow-soft); display:grid; grid-template-columns: .7fr 1fr; gap: var(--space-6); } .aa-qv-dialog:not([open]){ display:none; } .aa-qv-dialog::backdrop{ background: rgba(43,39,48,.35); backdrop-filter: blur(3px); } @media (max-width: 560px){ .aa-qv-dialog{ grid-template-columns: 1fr; } } .aa-qv-visual{ aspect-ratio:1/1; background: var(--surface-2); border-radius: var(--radius-m); display:flex; align-items:center; justify-content:center; overflow:hidden; } .aa-qv-visual svg{ width:44%; color: var(--rose-soft); } .aa-qv-visual img{ width:100%; height:100%; object-fit:cover; } .aa-qv-close{ position:absolute; top:var(--space-4); right:var(--space-4); background:none; border:none; cursor:pointer; color: var(--ink-faint); } .aa-qv-close:hover{ color: var(--ink); } .aa-qv-title{ font-size: var(--text-xl); margin-block: var(--space-2); } .aa-qv-desc{ color: var(--ink-soft); font-size: var(--text-sm); line-height:1.6; margin-bottom: var(--space-4); } .aa-qv-price{ font-size: var(--text-lg); margin-bottom: var(--space-5); font-weight:600; } /* ============ MOYENS DE PAIEMENT (bandeau de réassurance) ============ */ .aa-payment-badges{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } @media (max-width: 760px){ .aa-payment-badges{ grid-template-columns: repeat(2, 1fr); } } .aa-payment-badge{ display:flex; align-items:center; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border:none; border-radius: var(--radius-m); } .aa-payment-icon{ width:26px; height:26px; flex:none; color: var(--rose); } .aa-payment-badge .aa-name{ font-weight:600; font-size: var(--text-sm); display:block; } .aa-payment-badge .aa-desc{ font-size: var(--text-xs); color: var(--ink-faint); } /* ============ NEWSLETTER ============ */ .aa-newsletter-section{ background: var(--rose-pale); padding-block: var(--space-8); } .aa-newsletter-inner{ text-align:center; max-width: 560px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap: var(--space-3); } .aa-newsletter-inner h2{ font-size: var(--text-2xl); } .aa-news-form{ display:flex; gap: var(--space-2); width:100%; max-width:420px; margin-top: var(--space-2); } .aa-news-form input{ flex:1; min-width:0; background: var(--surface); border:1px solid var(--border-strong); border-radius: var(--radius-pill); padding: .7em 1.1em; color: var(--ink); font-size: var(--text-sm); font-family: var(--font-body); } .aa-news-form input:focus{ outline:none; border-color: var(--rose); } /* ============ FOOTER (contenu maison, au-dessus du footer natif d'Astra) ============ */ .aa-footer{ background: var(--bg-soft); border-top:none; padding-block: var(--space-8) var(--space-6); } .aa-footer-grid{ display:grid; grid-template-columns: 1.4fr .9fr 1.1fr; gap: var(--space-7); } @media (max-width: 820px){ .aa-footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 520px){ .aa-footer-grid{ grid-template-columns: 1fr; } } .aa-footer h4{ font-size: var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color: var(--ink-faint); margin-bottom: var(--space-4); font-weight:600; } .aa-footer-brand p{ color: var(--ink-soft); font-size: var(--text-sm); margin-top: var(--space-3); max-width:32ch; line-height:1.6; } .aa-footer-contact{ display:flex; align-items:center; gap: var(--space-4); margin-top: var(--space-4); } .aa-footer-contact a{ text-decoration:none; color: var(--ink-soft); font-size: var(--text-sm); } .aa-footer-contact a:hover{ color: var(--rose); } .aa-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-2); } .aa-footer a{ text-decoration:none; color: var(--ink-soft); font-size: var(--text-sm); } .aa-footer a:hover{ color: var(--rose); } .aa-footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top: var(--space-8); padding-top: var(--space-5); border-top:1px solid var(--border); font-size: var(--text-xs); color: var(--ink-faint); flex-wrap:wrap; gap: var(--space-3); } .aa-wide-table-wrap{ overflow-x:auto; }