/* ========================================================================== NAO — accueil, en deux thèmes. Le noir est la base : c'est le fond du logo, et il fait ressortir l'or. Le violet devient l'accent vivant, l'or la ponctuation rare. Le thème vit sur — bascule dans le header, choix mémorisé, défaut = préférence système. ========================================================================== */ :root { --ui: 'Sora', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --serif: 'Frank Ruhl Libre', Georgia, serif; --mono: 'Space Mono', monospace; /* Les trois couleurs de marque, identiques dans les deux thèmes. */ --gold: #E9B44C; --gold-deep: #C08F2E; --violet: #7C5CFF; --violet-soft: #A88BFF; --violet-deep: #4A2FD0; --cream: #F4F1E8; --peri: #A88BFF; } /* ---------- thème sombre : le noir du logo ---------- */ :root, :root[data-theme="dark"] { --bg: #000000; --panel: #0C0C12; --panel-2: #14131C; --line: rgba(244, 241, 232, .10); --line-2: rgba(168, 139, 255, .26); --text: #F4F1E8; --muted: rgba(244, 241, 232, .60); --muted-2: rgba(244, 241, 232, .36); --bar-bg: rgba(8, 8, 12, .74); --chip-bg: rgba(124, 92, 255, .16); --chip-line: rgba(124, 92, 255, .28); --chip-ink: #C9B8FF; --btn-bg: #F4F1E8; --btn-ink: #000000; --star: #F4F1E8; --hero-a: rgba(74, 47, 208, .46); --hero-b: rgba(233, 180, 76, .10); --glow: rgba(124, 92, 255, .22); --phone-shadow: rgba(74, 47, 208, .5); --statement-off: rgba(244, 241, 232, .13); --stat-grad: linear-gradient(160deg, #F4F1E8 6%, #C9B8FF 32%, #7C5CFF 62%, #E9B44C 92%); --pill-bg: rgba(20, 19, 28, .84); --ring-track: rgba(244, 241, 232, .14); } /* ---------- thème clair : crème du mot-symbole ---------- */ :root[data-theme="light"] { --bg: #F5F2EA; --panel: #FFFFFF; --panel-2: #EFEADF; --line: rgba(11, 11, 16, .12); --line-2: rgba(74, 47, 208, .24); --text: #0B0B10; --muted: rgba(11, 11, 16, .64); --muted-2: rgba(11, 11, 16, .42); --bar-bg: rgba(255, 255, 255, .74); --chip-bg: rgba(124, 92, 255, .11); --chip-line: rgba(124, 92, 255, .22); --chip-ink: #4A2FD0; --btn-bg: #0B0B10; --btn-ink: #F4F1E8; --star: #7C5CFF; --hero-a: rgba(124, 92, 255, .24); --hero-b: rgba(233, 180, 76, .14); --glow: rgba(124, 92, 255, .16); --phone-shadow: rgba(74, 47, 208, .28); --statement-off: rgba(11, 11, 16, .15); --stat-grad: linear-gradient(160deg, #0B0B10 6%, #4A2FD0 36%, #7C5CFF 66%, #C08F2E 92%); --pill-bg: rgba(255, 255, 255, .86); --ring-track: rgba(11, 11, 16, .13); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--ui); line-height: 1.5; overflow-x: clip; transition: background .35s ease, color .35s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ---------- header pilule ---------- */ .bar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 100; width: min(1160px, calc(100% - 20px)); display: flex; align-items: center; gap: 14px; padding: 9px 9px 9px 20px; background: var(--bar-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 999px; border: 1px solid var(--line); } .bar-mark { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 4px; color: var(--text); white-space: nowrap; } .bar-mark span { color: var(--gold); } .bar-nav { display: flex; gap: 4px; margin-left: auto; } .bar-nav a { font-size: 14px; font-weight: 500; color: var(--muted); padding: 9px 13px; border-radius: 999px; transition: color .2s, background .2s; } .bar-nav a:hover { color: var(--text); background: var(--chip-bg); } .theme-btn { flex-shrink: 0; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--chip-bg); border: 1px solid var(--chip-line); color: var(--chip-ink); transition: transform .25s; } .theme-btn:hover { transform: rotate(18deg) scale(1.06); } .theme-btn svg { width: 16px; height: 16px; } .theme-btn .sun { display: none; } :root[data-theme="light"] .theme-btn .sun { display: block; } :root[data-theme="light"] .theme-btn .moon { display: none; } /* L'accès aux cours doit tenir dans la barre y compris sur téléphone : la navigation, elle, disparaît sous 900 px, et le site n'offrait alors plus aucun chemin vers l'espace membre. */ .bar-alt { flex-shrink: 0; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text); background: var(--chip-bg); border: 1px solid var(--chip-line); padding: 10px 17px; border-radius: 999px; transition: border-color .25s, transform .25s cubic-bezier(.16,1,.3,1); } .bar-alt:hover { border-color: var(--peri); transform: scale(1.04); } .bar-cta { flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--btn-ink); background: var(--btn-bg); padding: 11px 19px; border-radius: 999px; transition: transform .25s cubic-bezier(.16,1,.3,1); } .bar-cta:hover { transform: scale(1.04); } /* ---------- ciel étoilé ---------- */ .sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .sky i { position: absolute; border-radius: 50%; background: var(--star); animation: twinkle 4s ease-in-out infinite; } :root[data-theme="light"] .sky i { opacity: .3 !important; } @keyframes twinkle { 0%,100% { opacity: .2; } 50% { opacity: .9; } } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(110px, 17vh, 180px) 20px 0; background: radial-gradient(58% 42% at 50% 30%, var(--hero-a), transparent 72%), radial-gradient(40% 30% at 50% 12%, var(--hero-b), transparent 70%), var(--bg); } .hero-glow { position: absolute; left: 50%; top: 24%; /* 100vw et pas 120vw : centré puis décalé de la moitié, un halo plus large que l'écran dépasse des deux côtés et crée un défilement horizontal sur les petits téléphones. */ width: min(620px, 100vw); height: 620px; transform: translateX(-50%); background: radial-gradient(circle, var(--glow), transparent 60%); pointer-events: none; } .hero-inner { position: relative; z-index: 2; } .hero h1 { font-size: clamp(46px, 9.4vw, 108px); font-weight: 800; letter-spacing: -.035em; line-height: .98; } .hero-sub { margin-top: 20px; font-size: clamp(15px, 1.6vw, 18px); color: var(--muted); padding: 0 6px; } .stores { margin-top: 28px; display: flex; justify-content: center; gap: 12px; } .store-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--btn-bg); color: var(--btn-ink); border-radius: 13px; padding: 9px 18px 9px 14px; text-align: left; transition: transform .25s cubic-bezier(.16,1,.3,1); } .store-badge:hover { transform: scale(1.04); } .store-badge small { display: block; font-size: 10px; font-weight: 500; line-height: 1.2; } .store-badge b { display: block; font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; } .laurel { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted-2); } .laurel svg { width: 24px; height: 46px; flex-shrink: 0; } .laurel-mid { display: flex; flex-direction: column; line-height: 1.35; } .laurel-mid .l-star { color: var(--gold); font-size: 15px; } .laurel-mid b { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .laurel-mid span:last-child { font-size: 11px; color: var(--muted-2); } .hero-phone { position: relative; z-index: 1; margin-top: clamp(36px, 6vh, 66px); width: min(300px, 70vw); filter: drop-shadow(0 40px 80px var(--phone-shadow)); animation: heroFloat 7s ease-in-out infinite; } .hero-phone img { border-radius: 38px; border: 1px solid var(--line-2); } @keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* ---------- statement ---------- */ .statement { padding: clamp(100px, 18vh, 210px) 22px; display: grid; place-items: center; } .statement p { max-width: 880px; font-size: clamp(24px, 4.4vw, 46px); font-weight: 700; letter-spacing: -.025em; line-height: 1.24; text-align: center; } .statement .w { color: var(--statement-off); transition: color .25s linear; } .statement .w.on { color: var(--text); } /* ---------- features ---------- */ .features { padding: 0 22px; } .feat { max-width: 1080px; margin: 0 auto; min-height: 74vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 6vw, 80px); padding: 40px 0; } .feat-media { display: grid; place-items: center; } .feat-media img { width: min(290px, 66vw); border-radius: 34px; border: 1px solid var(--line-2); filter: drop-shadow(0 34px 70px var(--phone-shadow)); transform: rotate(-5deg); transition: transform 1s cubic-bezier(.16,1,.3,1); } .feat.flip .feat-media img { transform: rotate(5deg); } .feat:hover .feat-media img { transform: rotate(0deg) scale(1.02); } .feat.flip .feat-media { order: 2; } .feat.flip .feat-copy { order: 1; } .feat-tag { display: inline-block; font-size: 13px; font-weight: 600; color: var(--chip-ink); background: var(--chip-bg); border: 1px solid var(--chip-line); padding: 8px 15px; border-radius: 999px; margin-bottom: 16px; } .feat-copy h2 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; } .feat-copy p { margin-top: 15px; font-size: clamp(15px, 1.5vw, 17px); color: var(--muted); max-width: 400px; } /* ---------- grosse stat métallique ---------- */ .bigstat { padding: clamp(100px, 16vh, 190px) 22px; text-align: center; background: radial-gradient(46% 34% at 50% 62%, var(--hero-b), transparent 74%); } .bigstat h3 { font-size: clamp(26px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .stat-num { margin-top: 14px; font-size: clamp(110px, 24vw, 300px); font-weight: 900; letter-spacing: -.04em; line-height: .95; background: var(--stat-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-sub { margin-top: 8px; font-size: 14px; color: var(--muted-2); padding: 0 12px; } /* ---------- quiz ---------- */ .tryit { max-width: 780px; margin: 0 auto; padding: clamp(70px, 11vh, 130px) 22px; text-align: center; } .tryit h3 { font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; } .tryit h3 em { font-style: normal; color: var(--violet); } :root[data-theme="light"] .tryit h3 em { color: var(--violet-deep); } .try-sub { margin-top: 12px; font-size: 15px; color: var(--muted); } .try-tabs { margin-top: 24px; display: inline-flex; gap: 4px; background: var(--chip-bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px; } .try-tab { font-family: var(--ui); font-size: 13.5px; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 9px 18px; border-radius: 999px; transition: background .2s, color .2s; } .try-tab.active { background: var(--btn-bg); color: var(--btn-ink); } .sign-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .sign-btn { font-family: var(--ui); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 13px 4px 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; color: var(--muted); transition: background .2s, border-color .2s, color .2s, transform .2s; } .sign-btn i { font-style: normal; font-size: 20px; font-family: 'Noto Sans Symbols', var(--ui); color: var(--chip-ink); } .sign-btn b { font-size: 11px; font-weight: 600; } .sign-btn:hover { border-color: var(--line-2); transform: translateY(-2px); } .sign-btn.active { border-color: var(--violet); color: var(--text); background: var(--chip-bg); } .try-result { margin-top: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 22px; text-align: left; box-shadow: 0 24px 60px rgba(20, 10, 60, .12); } .tr-id { display: flex; align-items: center; gap: 12px; } .tr-id i { font-style: normal; font-size: 30px; font-family: 'Noto Sans Symbols', var(--ui); color: var(--gold); } .tr-id b { display: block; font-size: 18px; font-weight: 700; } .tr-id span { font-size: 12px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } .tr-verdict { display: flex; align-items: center; gap: 18px; margin-top: 18px; } .tr-ring { position: relative; flex-shrink: 0; width: 68px; height: 68px; } .tr-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 800; } .tr-track { stroke: var(--ring-track); } #trFill { transition: stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1); } .tr-line { font-size: 16px; line-height: 1.45; font-weight: 500; transition: filter .5s; } .calculating .tr-line { filter: blur(9px); } .calculating .tr-ring b { filter: blur(5px); } .tr-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--chip-ink); } .tr-cta span { transition: transform .25s; } .tr-cta:hover span { transform: translateX(3px); } /* ---------- formation ---------- */ .course { padding: clamp(50px, 9vh, 100px) 22px; } .course-card-x { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(22px, 5vw, 60px); background: linear-gradient(140deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: 32px; padding: clamp(26px, 5vw, 56px); overflow: hidden; } .course-copy h3 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; } .course-copy p { margin-top: 14px; font-size: 15.5px; color: var(--muted); max-width: 380px; } .pill-white { display: inline-block; margin-top: 22px; font-size: 14.5px; font-weight: 600; color: var(--btn-ink); background: var(--btn-bg); padding: 13px 24px; border-radius: 999px; transition: transform .25s cubic-bezier(.16,1,.3,1); } .pill-white:hover { transform: scale(1.04); } .course-covers { position: relative; height: 240px; } .course-covers img { position: absolute; width: 62%; border-radius: 16px; border: 1px solid var(--line-2); box-shadow: 0 22px 50px rgba(20, 10, 60, .35); } .course-covers img:nth-child(1) { left: 0; top: 8%; transform: rotate(-7deg); z-index: 1; } .course-covers img:nth-child(2) { left: 24%; top: 26%; transform: rotate(2deg); z-index: 2; } .course-covers img:nth-child(3) { left: 44%; top: 2%; transform: rotate(8deg); z-index: 0; } /* ---------- finale ---------- */ .finale { position: relative; padding: clamp(110px, 20vh, 210px) 22px 150px; text-align: center; background: radial-gradient(52% 40% at 50% 68%, var(--hero-a), transparent 72%); } .finale h3 { position: relative; z-index: 1; font-size: clamp(34px, 6.4vw, 72px); font-weight: 800; letter-spacing: -.033em; line-height: 1.04; } .finale p { position: relative; z-index: 1; margin-top: 16px; font-size: 16px; color: var(--muted); } .finale-actions { position: relative; z-index: 1; margin-top: 28px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; } .finale .pill-white { margin-top: 0; } /* ---------- footer ---------- */ .foot { border-top: 1px solid var(--line); padding: 42px 22px 120px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .foot nav { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } .foot nav a { font-size: 13.5px; color: var(--muted); } .foot nav a:hover { color: var(--text); } .foot-heb { font-family: var(--serif); font-size: 16px; color: var(--gold); } .foot p { font-size: 12px; color: var(--muted-2); } /* ---------- pilule lune live ---------- */ .moon-pill { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 9px; background: var(--pill-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px 10px 11px; font-size: 13px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; max-width: calc(100vw - 20px); overflow: hidden; text-overflow: ellipsis; box-shadow: 0 12px 34px rgba(20, 10, 60, .25); transition: transform .25s; } .moon-pill:hover { transform: translateX(-50%) scale(1.04); } .mp-disc { position: relative; width: 20px; height: 20px; border-radius: 50%; background: #EDE9FF; overflow: hidden; flex-shrink: 0; border: 1px solid var(--line-2); } .mp-disc i { position: absolute; inset: -2px; border-radius: 50%; background: #241C4A; } /* ---------- reveals ---------- */ .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); } .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hero-phone { animation: none; } .sky i { animation: none; } .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- responsive ---------- */ @media (max-width: 900px) { .bar-nav { display: none; } .bar { gap: 8px; padding-left: 16px; } .bar-alt { margin-left: auto; } } @media (max-width: 860px) { .bk { display: none; } .feat { grid-template-columns: 1fr; min-height: 0; padding: 52px 0; text-align: center; } .feat-copy p { margin-left: auto; margin-right: auto; } .feat.flip .feat-media { order: 0; } .feat.flip .feat-copy { order: 1; } .sign-grid { grid-template-columns: repeat(4, 1fr); } .course-card-x { grid-template-columns: 1fr; } .course-covers { height: 190px; margin-top: 6px; } .foot { padding-bottom: 96px; } .moon-pill { font-size: 12px; padding: 9px 14px 9px 10px; } } @media (max-width: 480px) { .sign-grid { grid-template-columns: repeat(3, 1fr); } .bar { gap: 6px; padding: 7px 7px 7px 13px; } .bar-mark { font-size: 10px; letter-spacing: 2.2px; } .theme-btn { width: 33px; height: 33px; } .theme-btn svg { width: 14px; height: 14px; } .bar-cta { font-size: 12.5px; padding: 9px 13px; } .bar-alt { font-size: 12.5px; padding: 8px 12px; } .tr-verdict { gap: 14px; } .tr-line { font-size: 14.5px; } .laurel svg { display: none; } } /* ============ INSTAGRAM ============ Un carrousel des publications de Naomi. La formatrice est une personnalité : la page doit montrer qu'elle vit, pas seulement qu'elle vend. Aucun script d'Instagram n'est chargé. On garde l'adresse du post et une image, et le clic renvoie chez elle. C'est ce qui permet de tenir la promesse de la politique de confidentialité : aucun traceur tiers ici. */ .ig { padding: clamp(70px, 10vw, 120px) 0 clamp(40px, 6vw, 70px); overflow: hidden; } .ig-head { max-width: 1080px; margin: 0 auto clamp(24px, 4vw, 38px); padding: 0 clamp(20px, 5vw, 40px); display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .ig-head-txt { display: flex; flex-direction: column; align-items: flex-start; } .ig-head .feat-tag { margin-bottom: 14px; } .ig-head h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 5vw, 46px); line-height: 1.05; color: var(--text); } /* La preuve sociale de la section : ce sont ses abonnés Instagram, pas les utilisateurs de l'app, et la phrase doit le dire pour rester honnête. « +100 000 » plutôt que le compte exact, qui bouge tous les jours. */ .ig-communaute { margin: 14px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--muted); } .ig-communaute b { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3vw, 32px); line-height: 1; color: var(--text); } .ig-communaute a { color: var(--peri); text-decoration: none; } .ig-communaute a:hover { text-decoration: underline; } /* Un vrai bouton, pas un lien discret : c'est l'invitation à rejoindre. */ .ig-follow { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--chip-line); transition: border-color .3s, background .3s; } .ig-follow:hover { border-color: var(--peri); background: var(--panel); } .ig-follow span { display: inline-block; color: var(--peri); transition: transform .25s cubic-bezier(.16,1,.3,1); } .ig-follow:hover span { transform: translateX(5px); } /* Le rail déborde des marges volontairement : on doit sentir qu'il continue au-delà du bord, sinon rien n'invite à faire défiler. */ .ig-rail { display: flex; gap: clamp(12px, 1.6vw, 18px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Le rail est pleine largeur et déborde volontairement à droite : c'est ce débordement qui dit qu'il y a d'autres publications. Mais son départ doit tomber sur le titre, qui appartient à un bloc centré de 1080 px, sinon la première carte se colle au bord sur grand écran. */ --ig-marge: clamp(20px, 5vw, 40px); --ig-depart: max(var(--ig-marge), calc((100% - 1080px) / 2 + var(--ig-marge))); padding: 4px var(--ig-marge) 20px var(--ig-depart); /* Sans ça l'accrochage aligne la première carte sur le bord du rail et mange le retrait : le rail ne pouvait jamais revenir à zéro, donc la flèche « précédent » ne se désactivait jamais au départ. */ scroll-padding-inline-start: var(--ig-depart); scroll-padding-inline-end: var(--ig-marge); scrollbar-width: none; } .ig-rail::-webkit-scrollbar { display: none; } .ig-rail:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 24px; } .ig-card { position: relative; flex: 0 0 auto; width: clamp(200px, 23vw, 264px); aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; scroll-snap-align: start; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .45s; } .ig-card:hover { transform: translateY(-5px); border-color: var(--chip-line); } .ig-card img, .ig-card video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Le dégradé n'existe que pour rendre la légende lisible ; il reste en bas et ne mange pas l'image. Un simple fondu vers zéro ne suffisait pas : sur une photo claire, la première des trois lignes tombait là où le voile était déjà presque transparent. On le tient donc dense sur toute la hauteur du texte avant de le laisser s'éteindre, et l'ombre porte le reste. */ .ig-card figcaption { position: absolute; inset: auto 0 0 0; padding: 56px 14px 13px; font-size: 12.5px; line-height: 1.45; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); background: linear-gradient(to top, rgba(10,8,22,.95) 0%, rgba(10,8,22,.88) 40%, rgba(10,8,22,.5) 72%, rgba(10,8,22,0) 100%); overflow: hidden; } /* La coupe se fait ici : une boîte non positionnée, où `-webkit-box` tient. */ .ig-card .ig-texte { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .ig-nav { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); display: flex; justify-content: flex-end; gap: 10px; } .ig-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color .2s, opacity .2s; } .ig-arrow:hover:not(:disabled) { border-color: var(--chip-line); } .ig-arrow:disabled { opacity: .28; cursor: default; } @media (max-width: 640px) { /* Les flèches ne servent à rien au doigt et prennent de la place. */ .ig-nav { display: none; } .ig-follow { width: 100%; justify-content: center; margin-top: 4px; } .ig-card { width: 64vw; } } @media (prefers-reduced-motion: reduce) { .ig-rail { scroll-behavior: auto; } .ig-card, .ig-card:hover, .ig-follow span { transition: none; transform: none; } } /* ---------- le mot-symbole NAO ---------- Le SVG hérite de `currentColor` pour les lettres, donc il suit le thème sans variante de fichier ; seul l'éclat d'or reste fixe, c'est le seul élément du logo qui porte un sens et non une couleur. */ .nao { height: 22px; width: auto; display: block; } .nav-mark.small .nao, .mark.small .nao { height: 15px; }