/* ============================================================================= css/profil.css — Kookiya Flavors · Layouts spécifiques au parcours /profil ----------------------------------------------------------------------------- Règle intangible : alternance Encre ↔ Ivoire (BRIEF §3.3). IMPORTANT : le est position:relative car il contient .breath-bg en position:absolute inset:0. ========================================================================== */ /* ============================================================================ 1. BODY + DRIVER `data-scene` ========================================================================= */ body.profil{ position: relative; min-height: 100vh; display: flex; flex-direction: column; transition: background-color var(--t-slow) var(--ease-enter), color var(--t-slow) var(--ease-enter); } /* Fonds par scène ---------------------------------------------------------- */ body.profil[data-scene="acte"], body.profil[data-scene="generation"], body.profil[data-scene="erreur"]{ background: var(--encre); color: var(--ivoire); } body.profil[data-scene="q1"], body.profil[data-scene="q2"], body.profil[data-scene="q3"], body.profil[data-scene="q4"], body.profil[data-scene="q5"], body.profil[data-scene="q6"], body.profil[data-scene="q7"], body.profil[data-scene="email"], body.profil[data-scene="apercu"]{ background: var(--ivoire); color: var(--encre); } /* Breath bg (radial gradients) — visible uniquement sur scènes Encre ------- */ body.profil .breath-bg{ display: none; } body.profil[data-scene="acte"] .breath-bg, body.profil[data-scene="generation"] .breath-bg, body.profil[data-scene="erreur"] .breath-bg{ display: block; } body.profil[data-scene="acte"] .breath-bg{ background: radial-gradient(ellipse at 50% 20%, rgba(232,146,42,0.14), transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(27,122,120,0.18), transparent 55%), radial-gradient(ellipse at 85% 75%, rgba(212,168,75,0.10), transparent 55%); animation: none; } body.profil[data-scene="generation"] .breath-bg{ /* déjà défini dans components.css — rien à faire */ } body.profil[data-scene="erreur"] .breath-bg{ background: radial-gradient(ellipse at 50% 35%, rgba(201,106,58,0.18), transparent 55%), radial-gradient(ellipse at 25% 85%, rgba(27,122,120,0.14), transparent 55%); animation: none; } /* ============================================================================ 2. TOPBAR (variante selon scène) ========================================================================= */ body.profil[data-scene="acte"] .topbar, body.profil[data-scene="generation"] .topbar, body.profil[data-scene="erreur"] .topbar{ background: var(--encre); border-bottom-color: rgba(212,168,75,0.14); } body.profil[data-scene="acte"] .topbar__brand, body.profil[data-scene="generation"] .topbar__brand, body.profil[data-scene="erreur"] .topbar__brand{ color: var(--ivoire); } /* ============================================================================ 3. TICKS (7 segments) — visibles uniquement sur Q1-7 + email ========================================================================= */ body.profil .ticks{ display: none; } body.profil[data-scene^="q"] .ticks, body.profil[data-scene="email"] .ticks{ display: flex; margin-top: 6px; } /* Remplissage progressif par scène */ body.profil[data-scene="q1"] .ticks__seg:nth-child(-n+1), body.profil[data-scene="q2"] .ticks__seg:nth-child(-n+2), body.profil[data-scene="q3"] .ticks__seg:nth-child(-n+3), body.profil[data-scene="q4"] .ticks__seg:nth-child(-n+4), body.profil[data-scene="q5"] .ticks__seg:nth-child(-n+5), body.profil[data-scene="q6"] .ticks__seg:nth-child(-n+6), body.profil[data-scene="q7"] .ticks__seg:nth-child(-n+7), body.profil[data-scene="email"] .ticks__seg{ background: var(--safran); } /* ============================================================================ 4. FOOT-SIGN (variante selon scène + visibilité) ========================================================================= */ body.profil .foot-sign{ margin-top: auto; } /* Encre variant */ body.profil[data-scene="acte"] .foot-sign, body.profil[data-scene="generation"] .foot-sign, body.profil[data-scene="erreur"] .foot-sign{ padding-top: 22px; } body.profil[data-scene="acte"] .foot-sign .foot-sign__back, body.profil[data-scene="generation"] .foot-sign .foot-sign__back, body.profil[data-scene="erreur"] .foot-sign .foot-sign__back{ visibility: hidden; } body.profil[data-scene="acte"] .foot-sign__sig, body.profil[data-scene="generation"] .foot-sign__sig, body.profil[data-scene="erreur"] .foot-sign__sig{ color: var(--turquoise); font-size: 20px; margin-left: auto; } /* Cache le pied sur l'aperçu (le gate prend le relais) */ body.profil[data-scene="apercu"] .foot-sign{ display: none; } /* ============================================================================ 5. SCENE (conteneur du rendu dynamique) ========================================================================= */ #scene{ flex: 1; display: flex; flex-direction: column; padding: 40px 20px 24px; position: relative; z-index: 2; /* au-dessus de .breath-bg qui est en position:absolute inset:0 */ } /* Quand il y a des ticks, on laisse respirer un peu + */ body.profil[data-scene^="q"] #scene, body.profil[data-scene="email"] #scene{ padding-top: 48px; } /* Scènes Encre pleine hauteur centrées */ body.profil[data-scene="acte"] #scene, body.profil[data-scene="generation"] #scene, body.profil[data-scene="erreur"] #scene{ justify-content: center; align-items: center; text-align: center; } /* ============================================================================ 6. ACTE 0 (Encre) — 2 cartes Pour moi / Pour eux ========================================================================= */ .s-acte{ max-width: 720px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); padding: var(--space-7) 0; } .s-acte__title{ font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: clamp(28px, 4.5vw, 38px); line-height: 1.12; letter-spacing: -0.01em; color: var(--safran); max-width: 480px; } .s-acte__sub{ font-family: var(--ff-body); font-weight: 300; font-size: 13.5px; line-height: 1.75; color: rgba(251,243,227,0.82); max-width: 420px; text-wrap: pretty; } .s-acte__choose{ font-family: var(--ff-body); font-weight: 300; font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(251,243,227,0.55); margin-top: var(--space-3); } .s-acte__cards{ display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; margin-top: var(--space-2); } @media (min-width: 720px){ .s-acte__cards{ flex-direction: row; max-width: 640px; } .s-acte__cards > *{ flex: 1; } } .acte-card{ position: relative; display: flex; gap: 16px; align-items: center; width: 100%; padding: 20px 18px; background: transparent; border: 1px solid var(--or); color: var(--ivoire); cursor: pointer; text-align: left; transition: background-color var(--t-base) var(--ease-exit), color var(--t-base) var(--ease-exit), border-color var(--t-base) var(--ease-exit); } .acte-card:hover{ background: var(--ivoire); color: var(--encre); border-color: var(--ivoire); } .acte-card__num{ font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: 28px; line-height: 1; color: var(--safran); min-width: 34px; } .acte-card:hover .acte-card__num{ color: var(--terracotta); } .acte-card__body{ display: flex; flex-direction: column; gap: 4px; flex: 1; } .acte-card__title{ font-family: var(--ff-display); font-weight: 400; font-size: 17px; line-height: 1.15; color: inherit; } .acte-card__desc{ font-family: var(--ff-body); font-style: italic; font-weight: 300; font-size: 11.5px; color: rgba(251,243,227,0.62); letter-spacing: 0.02em; } .acte-card:hover .acte-card__desc{ color: #6a6a6a; } .acte-card__go{ font-family: var(--ff-mono); font-size: 13px; color: var(--safran); } .acte-card:hover .acte-card__go{ color: var(--terracotta); } /* Sélection (avant transition vers Q1) — écho du bouton d'option */ .acte-card.is-selected{ background: var(--ivoire); color: var(--encre); border-color: var(--ivoire); } .acte-card.is-selected::before{ content: ""; position: absolute; inset: 4px; border: 1px solid var(--or); pointer-events: none; } /* ============================================================================ 7. QUESTIONS (Q1-Q6 Ivoire) — chapter + q-num + h2 + options ========================================================================= */ .s-question{ max-width: 560px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; } .s-question .chapter{ margin-bottom: var(--space-6); } .s-question .q-num{ margin-bottom: var(--space-5); } .s-question__title{ font-family: var(--ff-display); font-weight: 300; font-size: clamp(26px, 4.2vw, 30px); line-height: 1.12; letter-spacing: -0.01em; color: var(--encre); margin-bottom: var(--space-7); } .s-question__title em{ font-family: var(--ff-display); font-style: italic; color: var(--turquoise); font-weight: 300; } .s-question__options{ display: flex; flex-direction: column; gap: 9px; } /* Q7 (saisie libre) — layout centré ---------------------------------------- */ .s-question--free .s-question__form{ display: flex; flex-direction: column; align-items: center; gap: var(--space-6); margin-top: var(--space-6); } .s-question__whisper{ font-family: var(--ff-script); color: var(--turquoise); font-size: 18px; opacity: 0.75; line-height: 1; } /* ============================================================================ 8. CAPTURE EMAIL (Ivoire) — prénom + email + CTA ========================================================================= */ .s-email{ max-width: 440px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; } .s-email .chapter{ text-align: center; margin-bottom: var(--space-4); color: var(--turquoise); opacity: 0.9; } .s-email__title{ font-family: var(--ff-display); font-weight: 300; font-size: clamp(26px, 4.2vw, 32px); line-height: 1.15; letter-spacing: -0.01em; color: var(--encre); text-align: center; margin-bottom: var(--space-7); } .s-email__title em{ font-family: var(--ff-display); font-style: italic; color: var(--safran); font-weight: 300; } .s-email__form{ display: flex; flex-direction: column; gap: var(--space-6); } .s-email__cta{ margin-top: var(--space-3); align-self: center; } .s-email__note{ font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: 12px; color: #8a7c5a; text-align: center; margin-top: var(--space-2); line-height: 1.5; } /* ============================================================================ 9. GÉNÉRATION (Encre) — orbe + texte pulsant ========================================================================= */ .s-generation{ display: flex; flex-direction: column; align-items: center; gap: var(--space-6); max-width: 420px; margin: 0 auto; padding: var(--space-9) 0 var(--space-8); } .s-generation__main{ font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: clamp(26px, 4vw, 30px); line-height: 1.15; color: var(--or); max-width: 320px; text-align: center; } .s-generation__sub{ font-family: var(--ff-body); font-weight: 300; font-size: 11px; letter-spacing: 0.22em; color: rgba(212,168,75,0.6); text-transform: uppercase; } /* ============================================================================ 10. ERREUR 09bis (Encre) — orb error + CTA Réessayer ========================================================================= */ .s-erreur{ display: flex; flex-direction: column; align-items: center; gap: var(--space-6); max-width: 420px; margin: 0 auto; padding: var(--space-9) 0 var(--space-8); } .s-erreur__title{ font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: clamp(26px, 4vw, 30px); line-height: 1.15; color: var(--terracotta); text-align: center; } .s-erreur__sub{ font-family: var(--ff-body); font-weight: 300; font-size: 13.5px; line-height: 1.7; color: rgba(251,243,227,0.78); text-align: center; max-width: 320px; margin-bottom: var(--space-3); } /* ============================================================================ 11. APERÇU + GATE (Ivoire) — écran 10 ========================================================================= */ .s-apercu{ max-width: 640px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; } .s-apercu .chapter{ text-align: center; margin-bottom: var(--space-3); color: var(--turquoise); } .s-apercu__titre{ font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: clamp(36px, 6vw, 48px); line-height: 1.04; letter-spacing: -0.01em; color: var(--safran); text-align: center; } .s-apercu__ingredient{ font-family: var(--ff-body); font-weight: 300; font-size: 15px; line-height: 1.75; color: var(--encre); text-align: center; margin-top: var(--space-3); max-width: 480px; align-self: center; } .s-apercu__ingredient strong{ font-family: var(--ff-display); font-style: italic; font-weight: 500; color: var(--safran); font-size: 16px; } .s-apercu__intention{ font-family: var(--ff-display); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--encre); text-align: center; margin-top: var(--space-4); max-width: 520px; align-self: center; } .s-apercu__ambiance{ font-family: var(--ff-body); font-weight: 300; font-size: 12.5px; color: #6a6a6a; text-align: center; margin-top: var(--space-3); line-height: 1.6; } .s-apercu__ambiance em{ font-family: var(--ff-display); font-style: italic; } /* Bloc recette */ .s-apercu__recette{ background: var(--ivoire-card); border: 1px solid rgba(26,39,68,0.14); padding: 22px 20px 20px; margin-top: var(--space-3); } .s-apercu__recette-nom{ font-family: var(--ff-display); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--encre); text-align: center; } .s-apercu__recette-meta{ display: flex; justify-content: center; gap: 10px; margin-top: 6px; font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.22em; color: var(--turquoise); text-transform: uppercase; } .s-apercu__recette-cols{ margin-top: var(--space-5); display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 640px){ .s-apercu__recette-cols{ grid-template-columns: 1fr 1fr; gap: var(--space-6); } } .s-apercu__recette-head{ font-family: var(--ff-mono); font-weight: 400; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--turquoise); margin-bottom: 10px; } .s-apercu__recette ul, .s-apercu__recette ol{ font-family: var(--ff-body); font-weight: 300; font-size: 13px; line-height: 1.75; color: var(--encre); padding-left: 0; list-style: none; counter-reset: step; } .s-apercu__recette ul li{ padding-left: 14px; position: relative; } .s-apercu__recette ul li::before{ content: "·"; position: absolute; left: 0; color: var(--or); font-weight: 500; } .s-apercu__recette ol li{ counter-increment: step; padding-left: 24px; position: relative; margin-bottom: 4px; } .s-apercu__recette ol li::before{ content: counter(step) "."; position: absolute; left: 0; color: var(--safran); font-family: var(--ff-mono); font-size: 11px; } /* Gate — titre + 2 cartes d'offre */ .s-gate{ margin-top: var(--space-6); } .s-gate__title{ font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: clamp(24px, 4vw, 30px); line-height: 1.12; color: var(--encre); text-align: center; } .s-gate__title em{ color: var(--safran); font-style: italic; } .s-gate__sub{ font-family: var(--ff-body); font-weight: 300; font-size: 13px; line-height: 1.7; color: #5a5a5a; text-align: center; margin-top: 8px; margin-bottom: var(--space-6); } .s-gate__offers{ display: grid; gap: var(--space-5); grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; } @media (min-width: 720px){ .s-gate__offers{ grid-template-columns: 1fr 1fr; gap: var(--space-6); } } /* Téléphone dans la carte Exclusive (sur Encre) */ .s-gate__tel{ margin-top: 14px; display: flex; flex-direction: column; gap: 12px; } /* ============================================================================ 12. RESPONSIVE DESKTOP ========================================================================= */ @media (min-width: 1024px){ #scene{ padding: 64px 20px 32px; } body.profil[data-scene^="q"] #scene, body.profil[data-scene="email"] #scene{ padding-top: 72px; } } /* ============================================================================ 13. FOCUS PROGRAMMATIQUE — les titres focusés via tabindex="-1" lors du changement de scène n'affichent pas d'outline (elle polluerait la composition). Les interactions clavier (tab, boutons) gardent leur outline Safran hérité de base.css. ========================================================================= */ #scene h1[tabindex="-1"]:focus, #scene h2[tabindex="-1"]:focus, #scene h1[tabindex="-1"]:focus-visible, #scene h2[tabindex="-1"]:focus-visible, #scene [data-focus]:focus, #scene [data-focus]:focus-visible{ outline: none; } /* ============================================================================ 14. prefers-reduced-motion — déjà cadré dans base.css, renforcé ici ========================================================================= */ @media (prefers-reduced-motion: reduce){ body.profil{ transition: none !important; } }