/* Ruper — vitrine statique, sans dépendance distante. */
/* Police du nom Ruper, identique à l'application, hébergée localement. */
@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/Comfortaa-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

.site-header .brand,
.site-footer .brand,
.page-home .agenda-preview .app-logo {
  font-family: "Comfortaa", sans-serif;
  font-weight: 400;
}

:root {
  --bg:#101112;
  --surface:#191b1d;
  --ink:#202123;
  --muted:#66676b;
  --orange:#ff7900;
  --orange-light:#ff9b36;
  --paper:#f9f8f5;
  --line:#deded8;
  --radius:14px;
--max:1480px;

  color-scheme:dark
}

* {
  box-sizing:border-box
}

html {
  font-size:110%;
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--bg);
  color:#f7f7f4;
  font-family:Arial,Helvetica,sans-serif;
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

/* Filigrane identique à celui de l'application, visible sur les fonds des pages.
   Décor uniquement : aucun clic ni défilement n'est intercepté. */
body::after {
  content: "";
  position: fixed;
  right: -420px;
  bottom: -380px;
  width: 900px;
  height: 900px;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
    circle,
    transparent 0 190px,
    rgba(100, 116, 139, .055) 191px 220px,
    transparent 221px 280px,
    rgba(100, 116, 139, .045) 281px 320px,
    transparent 321px 380px,
    rgba(100, 116, 139, .035) 381px 420px,
    transparent 421px
  );
}

a {
  color:inherit;
  text-decoration:none
}

button,input,textarea {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button {
  color:inherit
}

img {
  max-width:100%;
  height:auto;
  display:block
}

button:disabled {
  cursor:default
}

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--orange-light);
  outline-offset:5px
}

button {
  border:0
}

h1,h2,h3,p {
  margin:0
}

h1,h2 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.045em
}

h3 {
  line-height:1.3;
  letter-spacing:-.025em
}

h1 {
  font-size:clamp(42px,5.3vw,76px)
}

h2 {
  font-size:clamp(34px,3.7vw,52px)
}

h3 {
  font-size:1.3125rem
}

em {
  color:var(--orange);
  font-style:normal
}

.container {
  width:calc(100% - 96px);
  max-width:var(--max);
  margin:auto
}

.eyebrow {
  display:block;
  font-size:0.6875rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange-light);
  margin-bottom:22px
}

.section-light .eyebrow {
  color:#ab4d00
}

.section-light {
  background:var(--paper);
  color:var(--ink);
  color-scheme:light
}

.section-light em {
  color:#c35500
}

.section-light p {
  color:var(--muted)
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  left:12px;
  top:-80px;
  padding:12px 20px;
  background:white;
  color:black;
  z-index:100
}

.skip-link:focus {
  top:12px
}

[hidden] {
  display:none!important
}

.mobile-only {
  display:none
}

.orange {
  color:var(--orange)
}

/* En-tête et navigation, communs aux cinq pages. */
.site-header {
  height:86px;
  border-bottom:1px solid #ffffff12;
  background:#101112f2;
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(16px)
}

.header-inner {
  height:100%;
 max-width:var(--max);
 
  width:calc(100% - 96px);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:1.8125rem;
  font-weight:750;
  letter-spacing:-1.5px;
  line-height:1
}

.brand img {
  border-radius:0;
  width:36px;
  height:36px;
  object-fit:contain
}

.brand-dot {
  color:var(--orange)
}

#navigation {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:0.8125rem
}

#navigation>a:not(.button) {
  color:#c3c3c5;
  white-space:nowrap;
  transition:color .2s
}

#navigation>a:hover,#navigation>a[aria-current=page] {
  color:white
}

#navigation>a[aria-current=page] {
  text-decoration:underline;
  text-underline-offset:8px;
  text-decoration-color:var(--orange)
}

.nav-login {
  margin-left:42px
}

.nav-login span {
  color:#999;
  margin-left:5px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px 35px;
  border-radius:7px;
  background:linear-gradient(110deg,#ff8b12,#f36b00);
  color:#17100a;
  font-size:0.875rem;
  font-weight:700;
  line-height:1.4;
  box-shadow:0 4px 30px #ff790015;
  transition:transform .2s,box-shadow .2s;
  min-height:48px
}

.button:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 35px #ff790036
}

.button span {
  font-size:1.1875rem;
  font-weight:400
}

.button-small {
  padding:12px 18px;
  gap:16px;
  min-height:44px;
  font-size:0.75rem
}

.button-dark {
  background:#202123;
  color:white;
  box-shadow:none
}

.button-outline {
  border:1px solid #5b5c5d;
  background:transparent;
  color:inherit;
  box-shadow:none
}

.button-play {
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:transparent;
  color:#f6f6f3;
  padding:7px 0;
  min-height:44px;
  font-size:0.875rem
}

.play-circle {
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border:1px solid #8a8b8b;
  border-radius:50%;
  font-size:0.6875rem;
  padding-left:2px;
  transition:background .2s,border-color .2s
}

.button-play:hover .play-circle {
  background:var(--orange);
  border-color:var(--orange);
  color:#17100a
}

.menu-toggle {
  display:none
}

/* Accueil : titre, essai gratuit et aperçu de l’application. */
.hero {
  position:relative;
  overflow:hidden;
  padding:52px 0 27px;
  background:radial-gradient(ellipse at 50% 81%,#392a172b 0%,transparent 58%),#101112
}

.hero-glow {
  position:absolute;
  pointer-events:none;
  inset:35% 12% 0;
  background:radial-gradient(ellipse at center,#db660017,transparent 64%)
}

.hero-copy {
  text-align:center;
  position:relative
}

.hero-eyebrow {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  margin-bottom:16px;
  font-size:0.625rem;
  color:#bfc0c1
}

.status-dot {
  height:6px;
  width:6px;
  background:var(--orange);
  border-radius:50%;
  box-shadow:0 0 14px #ff790060
}

.hero-description {
  font-size:1rem;
  color:#a7a8ab;
  line-height:1.7;
  margin:20px auto 23px
}

.hero-actions {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:33px
}

.trial-note {
  font-size:0.6875rem;
  color:#a1a1a4;
  margin-top:13px
}

.trial-note>span:first-child {
  color:var(--orange);
  margin-right:5px
}

.note-dot {
  padding:0 8px;
  color:#767679
}

/* Slideshow : agenda, rappels, clients et fidélité. */
.showcase {
  position:relative;
  margin-top:43px;
  padding:0 35px
}

.showcase-frame {
  position:relative;
  border:1px solid #72512c;
  border-top-color:#b2783b;
  border-radius:16px;
  background:linear-gradient(125deg,#222425,#141618);
  box-shadow:0 0 0 5px #ffffff03,0 28px 70px #0009,0 -7px 60px #ff790008;
  transform:perspective(1600px) rotateX(3deg);
  transform-origin:bottom;
  isolation:isolate
}

.showcase-slide {
height:420px;
  position:relative;
  animation:slide-enter .55s ease both
}

.hero-mascot {
  position:absolute;
  left:-34px;
  bottom:102px;
  width:137px;
  z-index:3;
  filter:drop-shadow(0 10px 20px #0008);
  transform:rotate(-12deg);
  pointer-events:none
}

.app-preview {
  display:flex;
  height:100%;
  overflow:hidden;
  border-radius:16px;
  text-align:left;
  font-size:0.6875rem
}

.app-sidebar {
  width:175px;
  flex-shrink:0;
  border-right:1px solid #ffffff0b;
  padding:24px 17px;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:#1c1e20
}

.app-logo {
  font-size:1.3125rem;
  font-weight:700;
  letter-spacing:-1px;
  margin-bottom:15px
}

.app-logo span {
  color:var(--orange)
}

.sidebar-item {
  display:flex;
  gap:11px;
  padding:9px;
  color:#94979b;
  border-radius:5px
}

.sidebar-item>span {
  width:14px;
  text-align:center;
  color:#929396
}

.sidebar-item.active {
  background:#ff790013;
  color:#ffaf54
}

.sidebar-item.active>span {
  color:#ffaf54
}

.sidebar-bottom {
  margin-top:auto;
  color:#6e7376;
  font-size:0.5625rem;
  line-height:1.4
}

.app-content {
  flex:1;
  min-width:0;
  padding:23px 25px;
  background:linear-gradient(135deg,#222527,#17191b)
}

.app-toolbar {
  display:flex;
  align-items:center;
  gap:26px;
  padding-bottom:22px
}

.app-toolbar strong {
  font-size:1rem
}

.app-date {
  color:#b6b8bb;
  margin-left:auto
}

.view-pill {
  border:1px solid #454747;
  padding:4px 9px;
  border-radius:5px;
  font-size:0.625rem;
  display:flex;
  gap:13px;
  align-items:center
}

.calendar-head {
  display:grid;
  grid-template-columns:39px repeat(5,1fr);
  height:32px;
  border-bottom:1px solid #ffffff14;
  color:#9da1a4;
  text-align:center;
  font-size:0.625rem
}

.calendar-head .today {
  color:#ffc384
}

.calendar-body {
  display:grid;
  grid-template-columns:39px repeat(5,1fr);
height:295px;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 47px,#ffffff07 48px,transparent 49px)
}

.calendar-times {
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:start;
  color:#6f7478;
  font-size:0.5625rem
}

.calendar-day {
  position:relative;
  border-left:1px solid #ffffff0c
}

.calendar-day.current {
  background:#ffffff02
}

.appointment {
  position:absolute;
  top:var(--top);
  height:var(--height);
  left:5px;
  right:6px;
  border-radius:5px;
  border:1px solid #cc7800;
  background:linear-gradient(120deg,#b262164f,#ff8a1422);
  padding:7px 8px;
  line-height:1.5;
  overflow:hidden;
  box-shadow:inset 2px 0 0 #fb8c1a
}

.appointment b {
  font-size:0.5625rem;
  color:#ffcb8c;
  display:block;
  font-weight:400
}

.appointment span {
  font-size:0.625rem;
  color:#efebe5;
  display:block
}

.appointment.subtle {
  border-color:#805729;
  background:#76542625;
  box-shadow:inset 2px 0 0 #aa7136
}

.floating-notice {
  position:absolute;
  right:-27px;
  bottom:49px;
  background:#272b2d;
  border:1px solid #515756;
  border-radius:10px;
  padding:12px 18px;
  display:flex;
  gap:12px;
  align-items:center;
  box-shadow:0 12px 30px #0005
}

.floating-notice b {
  font-size:0.75rem;
  display:block
}

.floating-notice small {
  font-size:0.625rem;
  color:#a9adae;
  display:block
}

.notice-check {
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#8db78a;
  color:#142a15;
  width:26px;
  height:26px;
  font-size:0.9375rem
}

.showcase-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:20px;
  position:relative
}

.slide-tabs {
  display:flex;
  gap:27px
}

.slide-tabs button {
  background:none;
  font-size:0.75rem;
  color:#818386;
  padding:8px 0;
  border-bottom:1px solid transparent;
  transition:color .2s
}

.slide-tabs button span {
  font-size:0.625rem;
  opacity:.5;
  margin-right:9px
}

.slide-tabs button[aria-selected=true] {
  color:#f0ebe5;
  border-color:var(--orange)
}

.slide-arrows {
  display:flex;
  align-items:center;
  gap:12px
}

.slide-arrows button {
  background:#ffffff07;
  border:1px solid #ffffff14;
  border-radius:50%;
  width:34px;
  height:34px;
  font-size:0.9375rem
}

.slide-arrows button:hover {
  background:#ffffff15
}

.slide-arrows>span {
  font-size:0.625rem;
  letter-spacing:2px;
  color:#9b9da0
}

.slide-arrows [data-pause] {
  border:0;
  background:none;
  width:26px
}

.illustration-note {
  color: #747779;
  font-size: 0.5625rem;
  text-align: center;
  margin-top: 12px;
  letter-spacing: .04em;
  display: none;
}

.reminder-demo,.loyalty-demo {
  display:grid;
  grid-template-columns:1fr 1fr;
  height:100%;
  padding:38px 58px;
  gap:65px;
  align-items:center
}

.demo-heading .eyebrow,.loyalty-demo .eyebrow {
  font-size:0.5625rem;
  letter-spacing:.1em;
  margin-bottom:13px
}

.demo-heading h3,.loyalty-demo h3 {
  font-family:Georgia,serif;
  font-size:2.125rem;
  font-weight:400;
  line-height:1.14;
  letter-spacing:-1px
}

.demo-heading p,.loyalty-demo p {
  font-size:0.75rem;
  line-height:1.7;
  color:#a4a8ab;
  margin-top:13px
}

.timeline {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.625rem;
  margin-top:20px;
  color:#a0a4a6
}

.timeline i {
  font-style:normal;
  border:1px solid #676b6d;
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  margin-right:9px
}

.message-card {
  padding:20px;
  background:#2c3031;
  border:1px solid #4c5355;
  border-radius:12px;
  font-size:0.75rem;
  box-shadow:0 12px 22px #0003
}

.message-card>div {
  display:flex;
  align-items:center;
  gap:9px
}

.message-card small {
  margin-left:auto;
  color:#a6abae;
  font-size:0.5625rem
}

.message-card p {
  margin-top:13px;
  font-size:0.75rem;
  line-height:1.7;
  color:#d0d4d5
}

.message-icon {
  width:24px;
  height:24px;
  display:inline-grid;
  place-items:center;
  border-radius:6px;
  color:white;
  font-size:1.0625rem;
  flex-shrink:0
}

.sms-icon {
  background:#287b46
}

.mail-icon {
  background:#3762a0
}

.message-status {
  display:block;
  color:#a6c3a2;
  margin-top:10px;
  font-size:0.625rem
}

.email-message {
  margin-top:12px;
  transform:translateX(12px);
  padding:15px 20px
}

.email-message strong {
  font-size:0.6875rem
}

.email-message p {
  font-size:0.6875rem;
  margin-top:8px
}

.client-row {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:25px;
  padding:12px;
  background:#ffffff05;
  border:1px solid #ffffff12;
  border-radius:9px;
  font-size:0.75rem
}

.client-row small {
  display:block;
  color:#9fa4a5;
  font-size:0.625rem
}

.avatar {
  height:35px;
  width:35px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#aa682933;
  color:#ffd5a9;
  font-size:0.6875rem
}

.client-check {
  margin-left:auto;
  color:#9ac09b
}

.loyalty-card {
  background:linear-gradient(135deg,#e68a27,#ffb65b);
  color:#301c09;
  padding:25px;
  border-radius:15px;
  transform:rotate(-5deg);
  box-shadow:0 20px 40px #0004
}

.loyalty-card-top {
  display:flex;
  justify-content:space-between;
  font-size:0.5625rem;
  letter-spacing:2px;
  font-weight:bold
}

.loyalty-card-top>span:last-child {
  font-size:1.25rem;
  line-height:1
}

.loyalty-card-label {
  font-size:0.625rem;
  display:block;
  margin-top:21px
}

.loyalty-card strong {
  display:block;
  font-family:Georgia,serif;
  font-size:1.8125rem;
  line-height:1.1;
  margin:8px 0 19px
}

.stamps {
  display:flex;
  gap:8px;
  margin-bottom:14px
}

.stamps span {
  width:24px;
  height:24px;
  border:1px solid #72400f6b;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:0.6875rem
}

.stamps span:not(:empty) {
  background:#573510;
  color:#ffd28f;
  border-color:#573510
}

.loyalty-card small {
  font-size:0.5rem;
  letter-spacing:.05em
}

/* Bandeau des trois points forts. */
.benefits {
  padding:65px 0 70px
}

.section-heading {
  text-align:center
}

.section-heading .eyebrow {
  margin-bottom:14px
}

.section-heading h2 {
  font-size:clamp(33px,3.2vw,45px)
}

.benefit-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:35px;
  margin-top:47px;
  margin-bottom: 30px;
}

.benefit-grid article {
  display:flex;
  gap:19px
}

.benefit-grid article+article {
  border-left:1px solid var(--line);
  padding-left:35px
}

.line-icon {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex-shrink:0;
  border:1px solid #e7cdb5;
  border-radius:12px;
  background:#faecdf;
  color:#00000094;
  font-size:1.8125rem;
  line-height:1
}

.benefit-grid h3 {
  font-size:1.0625rem;
  margin-bottom:9px
}

.benefit-grid p {
  font-size:0.8125rem;
  line-height:1.8
}

.arrow-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:0.75rem;
  font-weight:700;
  margin-top:17px;
  color:#9f4500
}

.arrow-link span {
  font-size:1.125rem;
  transition:transform .2s
}

.arrow-link:hover span {
  transform:translate(2px,-2px)
}

.editorial-section {
  border-top:1px solid var(--line);
  padding:95px 0
}

.editorial-grid {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:80px;
  align-items:center
}

.editorial-copy h2 {
  font-size:clamp(33px,3.2vw,46px)
}

.editorial-copy>p {
  font-size:0.9375rem;
  margin-top:24px;
  max-width:490px
}

.check-list {
  list-style:none;
  padding:0;
  margin:25px 0 30px;
  font-size:0.8125rem;
  color:#505156
}

.check-list li {
  margin:10px 0;
  padding-left:24px;
  position:relative
}

.check-list li:before {
  content:'✓';
  position:absolute;
  left:0;
  color:#a85308
}

.phone-scene {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:480px;
  background:radial-gradient(ellipse,#f0d9c4,transparent 65%)
}

.phone {
  width:265px;
  height:452px;
  border:7px solid #303234;
  border-radius:38px;
  background:linear-gradient(165deg,#785943,#292e31 65%);
  color:white;
  position:relative;
  padding:20px 12px;
  box-shadow:0 30px 45px #191b2225,inset 0 0 0 1px #ffffff30;
  transform:rotate(6deg)
}

.phone-speaker {
  width:65px;
  height:15px;
  background:#272a2c;
  border-radius:20px;
  position:absolute;
  left:50%;
  top:7px;
  transform:translateX(-50%)
}

.phone-clock {
  text-align:center;
  font-size:2.875rem;
  letter-spacing:-2px;
  margin-top:17px;
  line-height:1.2;
  font-weight:300
}

.phone-date {
  text-align:center;
  font-size:0.625rem;
  margin:4px 0 25px;
  color:#dfd9d3
}

.phone-message {
  background:#ffffffea;
  color:#303235;
  border-radius:13px;
  padding:12px 11px;
  box-shadow:0 10px 15px #0001
}

.phone-message>div {
  display:flex;
  align-items:center;
  gap:7px
}

.phone-message .message-icon {
  height:17px;
  width:17px;
  border-radius:4px;
  font-size:0.6875rem
}

.phone-message b {
  font-size:0.5625rem
}

.phone-message small {
  font-size:0.4375rem;
  margin-left:auto;
  color:#777
}

.phone-message p {
  font-size:0.6875rem;
  color:#373b3d;
  line-height:1.6;
  margin-top:9px
}

.phone-message.secondary {
  margin-top:11px;
  opacity:.88
}

.phone-message.secondary p {
  font-size:0.625rem
}

.phone-bar {
  position:absolute;
  width:70px;
  height:3px;
  background:#dfe0db;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  border-radius:3px
}

.scene-label {
  position:absolute;
  bottom:89px;
  left:0;
  background:white;
  padding:12px 21px;
  box-shadow:0 10px 30px #0001;
  border:1px solid #e5e3df;
  border-radius:8px;
  font-size:0.75rem;
  transform:rotate(-4deg);
  font-weight:bold
}

.scene-caption {
  position:absolute;
  bottom:0;
  font-size:0.5625rem;
  color:#7e7f80
}

.pub-section {
  padding:78px 0;
  border-top:1px solid #ffffff0b;
  background:#141516
}

.pub-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
  align-items:center
}

.pub-grid h2 {
  font-size:clamp(35px,3.5vw,49px)
}

.pub-grid p {
  font-size:0.875rem;
  color:#a6a8aa;
  margin:20px 0 25px;
  max-width:360px
}

.pub-poster {
  position:relative;
  border-radius:14px;
  overflow:hidden;
  padding:0;
  background:#111;
  border:1px solid #ffffff12
}

.pub-poster img {
  width:100%;
  aspect-ratio:1.7;
  object-fit:cover;
  opacity:.85;
  transition:transform .6s,opacity .6s
}

.pub-poster:hover img {
  transform:scale(1.025);
  opacity:1
}

.poster-play {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  border:1px solid #ffffff9a;
  background:#ffffff24;
  backdrop-filter:blur(8px);
  border-radius:50%;
  color:white;
  font-size:1.0625rem;
  padding-left:4px
}

.audience-teaser {
  padding:85px 0
}

.audience-teaser .section-heading>p {
  max-width:590px;
  margin:25px auto 0;
  font-size:0.875rem
}

.audience-tags {
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:28px 0 10px
}

.audience-tags span {
  padding:8px 16px;
  border:1px solid #dfdcd5;
  border-radius:30px;
  font-size:0.75rem;
  color:#606166
}

.cta-section {
  background:#1a1b1c;
  padding:70px 0;
  border-top:1px solid #ffffff0c
}

.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.cta-inner .eyebrow {
  margin-bottom:12px
}

.cta-inner h2 {
  font-size:2.625rem
}

.cta-action p {
  font-size:0.6875rem;
  color:#aaa;
  margin-top:12px
}

.share-section {
  background:#f0eee9;
  color:#353638;
  padding:25px 0;
  color-scheme:light
}

.share-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.share-inner>p {
  font-size:0.8125rem;
  font-weight:700
}

.share-links {
  display:flex;
  align-items:center;
  gap:21px;
  font-size:0.6875rem
}

.share-links a {
  white-space:nowrap
}

.share-links a span {
  color:#a76223;
  margin-left:3px
}

.share-links a:hover {
  text-decoration:underline
}

.copy-link {
  font-size:0.6875rem;
  background:transparent;
  padding:7px;
  color:#353638
}

.site-footer {
  padding:44px 0 25px;
  background:#101112
}

.footer-main {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}

.footer-main .brand {
  font-size:1.5625rem
}

.footer-main .brand img {
  width:29px;
  height:29px;
  object-fit:contain
}

.footer-main p {
  font-size:0.75rem;
  color:#979a9c;
  margin-top:17px;
  line-height:1.8
}

.footer-nav {
  display:flex;
  gap:30px;
  align-items:start;
  justify-content:end;
  font-size:0.75rem;
  color:#c4c5c5;
  padding-top:9px
}

.footer-meta {
  grid-column:1/-1;
  border-top:1px solid #ffffff13;
  padding-top:20px;
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  color:#85898c;
  font-size:0.625rem
}

.footer-meta>span:first-child {
  margin-right:auto
}

.footer-meta a:hover,.text-button:hover {
  color:white
}

.text-button {
  font:inherit;
  color:inherit;
  background:none;
  padding:0;
  text-decoration:underline;
  text-underline-offset:3px
}

.video-dialog,.privacy-dialog {
  border:1px solid #47494a;
  border-radius:15px;
  background:#17191b;
  color:#f4f4f2;
  box-shadow:0 30px 120px #000b;
  padding:0;
  max-width:calc(100% - 32px);
  max-height:calc(100dvh - 40px)
}

dialog::backdrop {
  background:#000d;
  backdrop-filter:blur(7px)
}

.video-dialog {
  width:980px
}

.video-dialog-bar {
  padding:13px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.video-dialog-bar h2 {
  font:700 15px Arial,sans-serif;
  letter-spacing:0
}

.video-dialog-bar button {
  background:none;
  font-size:0.75rem;
  display:flex;
  gap:12px;
  align-items:center
}

.video-dialog-bar button span {
  font-size:1.5625rem
}

.video-player-shell {
  position:relative;
  min-height:180px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#080909
}

.video-dialog video {
  display:block;
  width:100%;
  max-height:70dvh;
  background:#080909;
  opacity:1;
  transition:opacity .25s ease
}

.video-dialog.is-loading video {
  opacity:0
}

.video-loader {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  color:#c7c7c7;
  font-size:0.75rem;
  letter-spacing:.3px;
  background:#080909;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease
}

.video-dialog.is-loading .video-loader {
  opacity:1;
  visibility:visible
}

.video-loader span {
  width:30px;
  height:30px;
  border:2px solid #ffffff2b;
  border-top-color:var(--orange);
  border-radius:50%;
  animation:video-loader-spin .8s linear infinite
}

@keyframes video-loader-spin {
  to { transform:rotate(360deg); }
}

.video-dialog>p {
  margin:0;
  font-size:0.625rem;
  color:#aaa;
  padding:10px 20px
}

.video-dialog>.video-sound-notice {
  padding:12px 20px;
  border-bottom:1px solid #ffffff12;
  color:#f0f0f0;
  font-size:0.8125rem;
  text-align:center
}

.video-sound-notice span {
  margin-right:6px;
  color:var(--orange)
}

.privacy-dialog {
  width:610px;
  padding:38px
}

.privacy-dialog h2 {
  font-size:2.1875rem;
  margin-bottom:22px
}

.privacy-dialog p {
  font-size:0.8125rem;
  color:#bfc3c5;
  margin:15px 0
}

.privacy-dialog .button {
  margin-top:10px
}

.dialog-close {
  position:absolute;
  right:15px;
  top:8px;
  font-size:1.875rem;
  background:none
}

.dialog-open {
  overflow:hidden
}

/* Documents juridiques de la vitrine : une lecture ample, y compris sur mobile. */
.privacy-dialog.legal-dialog {
  width: 1040px;
  padding: clamp(24px, 4vw, 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.legal-dialog h2 {
  padding-right: 24px;
  font-size: clamp(25px, 3.5vw, 40px);
}

.legal-content h3 {
  color: var(--orange);
  margin-top: 28px;
  font: 600 18px/1.4 Arial, sans-serif;
  letter-spacing: 0;
}

.legal-content p {
  font-size: 0.9375rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.legal-content a {
  color: var(--orange-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Compléments fonctionnels : grille compacte sans allonger les grands visuels. */
.feature-extras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 42px 0;
}

.feature-extra {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff8;
}

.feature-extra h3 {
  font-size: 1.5rem;
  margin: 12px 0 16px;
}

.feature-extra p, .feature-extra li {
  font-size: 0.9375rem;
}

@media (max-width: 700px) {
  .feature-extras { grid-template-columns: 1fr; }
  .feature-extra { padding: 24px; }
}

/* Pages intérieures : mêmes repères visuels, contenus écrits dans chaque page. */
/* Pages intérieures. */
.page-hero {
  padding:75px 0 70px;
  background:radial-gradient(ellipse at 90% 80%,#38241755,transparent 55%);
  border-bottom:1px solid #ffffff10
}

.page-hero h1 {
  max-width:970px;
  font-size:clamp(42px,5.6vw,73px)
}

.page-hero p:not(.eyebrow) {
  color:#adb0b2;
  margin-top:23px;
  max-width:650px;
  font-size:1rem
}

.page-hero .button {
  margin-top:26px
}

.crumb {
  font-size:0.6875rem;
  color:#a3a6a9;
  margin-bottom:26px
}

.crumb a:hover {
  color:white
}

.page-section {
  padding:78px 0
}

.feature-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:center;
  padding:60px 0;
  border-bottom:1px solid var(--line)
}

.feature-row:first-child {
  padding-top:0
}

.feature-row:last-child {
  border-bottom:0;
  padding-bottom:0
}

.feature-row h2 {
  font-size:2.625rem
}

.feature-row p {
  margin-top:19px;
  font-size:0.875rem
}

.feature-row .eyebrow {
  margin-bottom:14px
}

.feature-visual {
  min-height:280px;
  padding:35px;
  background:#eae6df;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden
}

.feature-visual.dark {
  background:#202426;
  color:#f0f1ed
}

.feature-visual .message-card {
  width:100%;
  max-width:330px
}

.feature-visual .message-card p {
  color:#e0e2e1;
  font-size:0.8125rem
}

.feature-visual .loyalty-card {
  max-width:310px;
  width:100%
}

.feature-visual .client-row {
  width:100%;
  margin:0
}

.feature-number {
  font-family:Georgia,serif;
  font-size:7.5rem;
  line-height:1;
  color:#d0bba6;
  position:absolute;
  right:16px;
  bottom:-8px
}

.mini-calendar {
  width:100%;
  max-width:310px;
  background:#fff;
  padding:25px;
  border:1px solid #dad7d1;
  border-radius:13px;
  box-shadow:0 12px 25px #0001;
  z-index:1
}

.mini-calendar strong {
  font-size:0.9375rem
}

.mini-calendar>div {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  margin-top:20px
}

.mini-calendar span {
  background:#f4f1eb;
  border-radius:5px;
  padding:10px 0;
  text-align:center;
  font-size:0.75rem
}

.mini-calendar .selected {
  background:#ff8309;
  color:#1c1106
}

.mini-calendar p {
  font-size:0.6875rem;
  margin-top:15px
}

.audience-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}

.audience-card {
  padding:35px;
  border:1px solid #dfddd6;
  border-radius:13px;
  background:#fff
}

.audience-card .card-number {
  color:#b65a0e;
  font-size:0.6875rem;
  letter-spacing:2px;
  margin-bottom:30px;
  display:block
}

.audience-card h2 {
  font-size:2rem
}

.audience-card p {
  margin-top:15px;
  font-size:0.875rem
}

.audience-card ul {
  font-size:0.8125rem;
  margin-bottom:0
}

.notice-box {
  margin-top:35px;
  padding:20px 25px;
  border-left:3px solid #ce6b17;
  background:#f0e9df;
  font-size:0.8125rem;
  color:#5c5247
}

.offer-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:stretch
}

.offer-card {
  padding:45px;
  border-radius:16px;
  border:1px solid #d9d6ce;
  background:white;
  display:flex;
  flex-direction:column;
  align-items:start
}

.offer-card .eyebrow {
  margin-bottom:20px
}

.offer-card.featured {
  background:#1c1e20;
  color:#f5f5f1;
  border-color:#353737
}

.offer-card.featured p,.offer-card.featured li {
  color:#b8bcbd
}

.offer-card.featured .eyebrow {
  color:#ffaf5d
}

.offer-card h2 {
  font-size:2.625rem
}

.offer-card p {
  font-size:0.875rem;
  margin:20px 0 0
}

.offer-card ul {
  margin-bottom:30px
}

.offer-card .button {
  margin-top:auto
}

.offer-card .days {
  font-size:5.5rem;
  letter-spacing:-6px;
  font-family:Georgia,serif;
  line-height:1;
  margin-top:20px
}

.offer-card .days span {
  font:18px Arial,sans-serif;
  letter-spacing:0
}

.offer-card .small-print {
  font-size:0.6875rem;
  margin-top:13px
}

.faq-section {
  max-width:840px;
  margin:70px auto 0
}

.faq-section h2 {
  font-size:2.25rem;
  margin-bottom:28px
}

details {
  border-top:1px solid #d9d6d0;
  padding:20px 0
}

details:last-child {
  border-bottom:1px solid #d9d6d0
}

summary {
  cursor:pointer;
  font-size:0.9375rem;
  font-weight:bold;
  list-style:none;
  position:relative;
  padding-right:30px
}

summary::-webkit-details-marker {
  display:none
}

summary:after {
  content:'+';
  position:absolute;
  right:0;
  top:0;
  color:#a95a12;
  font-size:1.375rem;
  font-weight:400
}

details[open] summary:after {
  content:'−'
}

details p {
  font-size:0.875rem;
  line-height:1.8;
  margin-top:15px;
  max-width:710px
}

.contact-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:65px
}

.contact-grid h2 {
  font-size:2.5rem
}

.contact-grid p {
  font-size:0.875rem;
  margin:20px 0
}

.contact-email {
  display:inline-block;
  font-size:clamp(21px,3vw,33px);
  color:#a84900;
  letter-spacing:-.04em;
  border-bottom:1px solid #d3b397;
  margin:10px 0 30px
}

.contact-box {
  border:1px solid #dfdcd4;
  border-radius:14px;
  padding:32px;
  background:white;
  margin-bottom:20px
}

.contact-box h3 {
  font-size:1.1875rem
}

.contact-box p {
  margin:12px 0 18px;
  font-size:0.8125rem
}

.contact-box .arrow-link {
  margin-top:0
}

.section-light .footnote {
  font-size:0.6875rem;
  margin-top:22px;
  color:#777
}

@keyframes slide-enter {
  from {
    opacity:0;
    transform:translateY(12px)
  }

  to {
    opacity:1;
    transform:translateY(0)
  }

}

/* Adaptations aux différentes largeurs d’écran. */
@media(min-width:1600px) {
  .hero {
    padding-top:65px
  }

  .hero-copy h1 {
    font-size:5rem
  }

  .showcase {
    margin-top:50px
  }

  .showcase-slide {
height:460px
  }

  .calendar-body {
height:335px
  }

}

@media(max-width:1150px) {
  .container,.header-inner {
    width:calc(100% - 56px)
  }

  #navigation {
    gap:19px
  }

  .nav-login {
    margin-left:15px
  }

  .hero-mascot {
    width:105px;
    left:-8px;
    bottom:100px
  }

  .showcase {
    padding:0 25px
  }

  .benefit-grid {
    gap:20px
  }

  .benefit-grid article {
    gap:13px
  }

  .benefit-grid article+article {
    padding-left:20px
  }

  .reminder-demo,.loyalty-demo {
    gap:28px;
    padding:30px
  }

  .editorial-grid {
    gap:45px
  }

  .pub-grid {
    gap:35px
  }

  .share-links {
    gap:13px
  }

  .footer-nav {
    gap:22px
  }

  .app-sidebar {
    width:150px
  }

  .appointment {
    padding:6px
  }

  .appointment span {
    font-size:0.5625rem
  }

}

@media(max-width:900px) {
  .site-header {
    height:73px
  }

  .header-inner {
    gap:20px
  }

  .menu-toggle {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    background:transparent;
    border:1px solid #ffffff22;
    border-radius:7px
  }

  .menu-lines,.menu-lines:before,.menu-lines:after {
    display:block;
    width:19px;
    height:1px;
    background:#fff;
    position:relative
  }

  .menu-lines:before,.menu-lines:after {
    content:'';
    position:absolute;
    left:0
  }

  .menu-lines:before {
    top:-6px
  }

  .menu-lines:after {
    top:6px
  }

  #navigation {
    position:absolute;
    top:72px;
    left:0;
    right:0;
    display:none;
    background:#17191a;
    padding:22px 28px 30px;
    border-bottom:1px solid #ffffff26;
    align-items:stretch;
    flex-direction:column;
    gap:0;
    box-shadow:0 30px 50px #0006
  }

  #navigation.is-open {
    display:flex
  }

  #navigation>a:not(.button) {
    padding:12px 0
  }

  .nav-login {
    margin:0
  }

  #navigation>.button {
    margin-top:12px;
    align-self:flex-start
  }

  .hero {
    padding-top:44px
  }

  .hero-description {
    font-size:0.875rem
  }

  .showcase {
    padding:0 10px
  }

  .app-sidebar {
    width:120px;
    padding:22px 12px
  }

  .app-content {
    padding:20px 15px
  }

  .app-date {
    font-size:0.5625rem
  }

  .app-toolbar {
    gap:12px
  }

  .floating-notice {
    right:-5px;
    bottom:36px;
    padding:10px 13px
  }

  .hero-mascot {
    left:-20px;
    width:90px
  }

  .benefit-grid {
    grid-template-columns:1fr;
    gap:24px;
    max-width:610px;
    margin:35px auto 0
  }

  .benefit-grid article+article {
    border-left:0;
    border-top:1px solid var(--line);
    padding:24px 0 0
  }

  .benefit-grid article {
    gap:22px
  }

  .benefit-grid h3 {
    font-size:1.1875rem
  }

  .benefit-grid p {
    font-size:0.875rem
  }

  .benefit-grid .arrow-link {
    margin-top:8px
  }

  .editorial-grid {
    gap:30px
  }

  .phone-scene {
    min-height:470px
  }

  .phone {
    width:240px
  }

  .scene-label {
    left:-10px;
    font-size:0.625rem;
    padding:10px 14px
  }

  .share-inner {
    flex-direction:column;
    align-items:center;
    gap:12px
  }

  .footer-nav {
    flex-wrap:wrap;
    gap:15px 24px
  }

  .cta-inner h2 {
    font-size:2.1875rem
  }

  .reminder-demo,.loyalty-demo {
    gap:20px;
    padding:28px
  }

  .demo-heading h3,.loyalty-demo h3 {
    font-size:1.875rem
  }

  .loyalty-card {
    padding:20px
  }

  .stamps {
    gap:5px
  }

  .stamps span {
    width:22px;
    height:22px
  }

  .feature-row {
    gap:30px
  }

  .feature-visual {
    padding:23px
  }

  .contact-grid {
    gap:35px
  }

}

@media(max-width:650px) {
  .container,.header-inner {
    width:calc(100% - 36px)
  }

  .brand {
    font-size:1.625rem
  }

  .brand img {
    height:32px;
    width:32px;
    object-fit:contain
  }

  .hero {
    padding-top:34px
  }

  .hero-eyebrow {
    font-size:0.5rem;
    letter-spacing:.15em;
    margin-bottom:18px
  }

  .hero h1 {
    font-size:clamp(36px,9.2vw,57px);
    line-height:1.12;
    letter-spacing:-.04em
  }

  .hero-description {
    font-size:0.8125rem;
    max-width:340px;
    margin:19px auto 23px
  }

  .hero-actions {
    gap:22px
  }

  .button {
    font-size:0.75rem;
    padding:14px 18px;
    gap:15px
  }

  .button-play {
    font-size:0.75rem;
    gap:9px
  }

  .play-circle {
    width:31px;
    height:31px
  }

  .trial-note {
    font-size:0.625rem;
    margin-top:15px
  }

  .showcase {
    margin-top:35px;
    padding:0;
    width:calc(100% - 28px)
  }

  .showcase-frame {
    transform:none;
    border-radius:11px
  }

  .showcase-slide {
    height:315px
  }

  .hero-mascot {
    width:64px;
    bottom:89px;
    left:-12px
  }

  .app-sidebar {
    display:none
  }

  .app-preview {
    border-radius:11px
  }

  .app-content {
    padding:19px 12px
  }

  .app-toolbar strong {
    font-size:0.875rem
  }

  .app-toolbar {
    gap:8px;
    padding-bottom:20px
  }

  .app-date {
    font-size:0.5625rem
  }

  .view-pill {
    font-size:0.5rem;
    padding:3px 5px;
    gap:5px
  }

  .calendar-head {
    font-size:0.5rem;
    grid-template-columns:29px repeat(5,1fr);
    height:26px
  }

  .calendar-body {
    height:219px;
    grid-template-columns:29px repeat(5,1fr)
  }

  .calendar-times {
    font-size:0.5rem
  }

  .appointment {
    left:2px;
    right:3px;
    padding:5px 3px;
    border-radius:3px
  }

  .appointment b {
    font-size:0.4375rem
  }

  .appointment span {
    font-size:0.5rem;
    line-height:1.4;
    margin-top:3px
  }

  .floating-notice {
    right:10px;
    bottom:13px;
    padding:7px 10px;
    gap:8px;
    border-radius:7px
  }

  .floating-notice b {
    font-size:0.625rem
  }

  .floating-notice small {
    font-size:0.5rem
  }

  .notice-check {
    width:20px;
    height:20px;
    font-size:0.75rem
  }

  .showcase-controls {
    flex-direction:column;
    gap:11px;
    margin-top:14px
  }

  .slide-tabs {
    gap:24px
  }

  .slide-tabs button {
    font-size:0.6875rem
  }

  .slide-tabs button span {
    font-size:0.5rem;
    margin-right:5px
  }

  .slide-arrows {
    gap:16px
  }

  .slide-arrows button {
    width:31px;
    height:31px
  }

  .illustration-note {
    font-size:0.5rem;
    margin-top:10px
  }

  .reminder-demo,.loyalty-demo {
    padding:24px 20px;
    gap:13px;
    grid-template-columns:.9fr 1fr
  }

  .demo-heading h3,.loyalty-demo h3 {
    font-size:1.4375rem
  }

  .demo-heading .eyebrow,.loyalty-demo .eyebrow {
    font-size:0.4375rem;
    line-height:1.6;
    letter-spacing:.06em
  }

  .demo-heading p,.loyalty-demo p {
    font-size:0.5625rem;
    margin-top:11px
  }

  .timeline {
    font-size:0.5rem;
    margin-top:14px;
    gap:7px
  }

  .timeline i {
    height:14px;
    width:14px;
    margin-right:4px
  }

  .message-card {
    padding:12px 9px;
    border-radius:8px;
    font-size:0.5625rem
  }

  .message-card>div {
    gap:5px
  }

  .message-card p {
    font-size:0.5625rem;
    margin-top:9px
  }

  .message-card small {
    display:none
  }

  .message-icon {
    height:19px;
    width:19px;
    font-size:0.75rem;
    border-radius:4px
  }

  .email-message {
    padding:10px 9px;
    transform:none;
    margin-top:9px
  }

  .email-message strong {
    font-size:0.5rem
  }

  .email-message p {
    font-size:0.5rem
  }

  .message-status {
    font-size:0.5rem
  }

  .loyalty-card {
    padding:14px 11px;
    border-radius:10px;
    transform:rotate(-4deg)
  }

  .loyalty-card strong {
    font-size:1.5rem
  }

  .loyalty-card-top {
    font-size:0.4375rem;
    letter-spacing:1px
  }

  .loyalty-card-label {
    font-size:0.5rem;
    margin-top:15px
  }

  .stamps {
    flex-wrap:wrap;
    gap:6px
  }

  .stamps span {
    width:21px;
    height:21px;
    font-size:0.5625rem
  }

  .loyalty-card small {
    font-size:0.375rem
  }

  .client-row {
    margin-top:17px;
    padding:8px;
    gap:6px;
    font-size:0.5625rem
  }

  .client-row small {
    font-size:0.4375rem
  }

  .avatar {
    width:25px;
    height:25px;
    font-size:0.5rem;
    flex-shrink:0
  }

  .client-check {
    display:none
  }

  .benefits {
    padding:47px 0
  }

  .section-heading h2 {
    font-size:2.0625rem
  }

  .mobile-only {
    display:block
  }

  .eyebrow {
    font-size:0.5625rem;
    letter-spacing:.15em
  }

  .benefit-grid {
    gap:23px
  }

  .benefit-grid article {
    gap:17px
  }

  .line-icon {
    width:43px;
    height:43px;
    font-size:1.625rem
  }

  .benefit-grid h3 {
    font-size:1.0625rem
  }

  .benefit-grid p {
    font-size:0.8125rem
  }

  .editorial-section {
    padding:52px 0
  }

  .editorial-grid {
    grid-template-columns:1fr;
    gap:25px
  }

  .editorial-copy h2 {
    font-size:2.25rem
  }

  .editorial-copy>p {
    font-size:0.875rem
  }

  .phone-scene {
    min-height:420px
  }

  .phone {
    height:400px;
    width:239px
  }

  .phone-clock {
    font-size:2.625rem
  }

  .phone-date {
    margin-bottom:18px
  }

  .scene-label {
    left:4px;
    bottom:60px;
    font-size:0.6875rem
  }

  .pub-section {
    padding:48px 0
  }

  .pub-grid {
    grid-template-columns:1fr;
    gap:30px
  }

  .pub-grid h2 {
    font-size:2.3125rem
  }

  .pub-grid p {
    margin:18px 0;
    font-size:0.8125rem
  }

  .pub-poster {
    max-width:100%
  }

  .pub-poster img {
    aspect-ratio:1.55
  }

  .audience-teaser {
    padding:54px 0
  }

  .audience-teaser .section-heading>p {
    font-size:0.8125rem
  }

  .audience-tags {
    gap:8px;
    margin-top:22px
  }

  .audience-tags span {
    padding:6px 12px;
    font-size:0.625rem
  }

  .cta-section {
    padding:49px 0
  }

  .cta-inner {
    flex-direction:column;
    align-items:start;
    gap:26px
  }

  .cta-inner h2 {
    font-size:2.25rem
  }

  .cta-action p {
    font-size:0.625rem
  }

  .share-section {
    padding:24px 0
  }

  .share-links {
    flex-wrap:wrap;
    justify-content:center;
    gap:12px 18px;
    font-size:0.625rem
  }

  .share-inner>p {
    font-size:0.75rem
  }

  .site-footer {
    padding-top:32px
  }

  .footer-main {
    grid-template-columns:1fr;
    gap:25px
  }

  .footer-nav {
    justify-content:center;
    text-align:center;
    font-size:0.6875rem;
    gap:19px
  }

  .footer-nav a {
    white-space:nowrap;
  }

  .footer-meta {
    justify-content:center;
    text-align:center;
    gap:12px 18px;
    font-size:0.5625rem
  }

  .footer-meta>span:first-child {
    width:100%;
    margin:0
  }

  .privacy-dialog {
    padding:30px 23px
  }

  .privacy-dialog h2 {
    font-size:1.9375rem
  }

  .video-dialog-bar {
    padding:10px 13px
  }

  .video-dialog>p {
    padding:10px 13px;
    font-size:0.5625rem
  }

  .page-hero {
    padding:42px 0 45px
  }

  .page-hero h1 {
    font-size:2.6875rem
  }

  .page-hero p:not(.eyebrow) {
    font-size:0.875rem
  }

  .crumb {
    font-size:0.625rem;
    margin-bottom:24px
  }

  .page-section {
    padding:45px 0
  }

  .feature-row {
    grid-template-columns:1fr;
    gap:25px;
    padding:37px 0
  }

  .feature-row h2 {
    font-size:2.1875rem
  }

  .feature-row p {
    font-size:0.8125rem;
    margin-top:16px
  }

  .feature-visual {
    min-height:245px
  }

  .audience-grid,.offer-layout,.contact-grid {
    grid-template-columns:1fr;
    gap:20px
  }

  .audience-card {
    padding:25px
  }

  .audience-card .card-number {
    margin-bottom:20px
  }

  .audience-card h2 {
    font-size:1.875rem
  }

  .audience-card p {
    font-size:0.8125rem
  }

  .offer-card {
    padding:29px
  }

  .offer-card h2 {
    font-size:2.25rem
  }

  .offer-card .days {
    font-size:4.6875rem
  }

  .faq-section {
    margin-top:45px
  }

  .faq-section h2 {
    font-size:1.9375rem
  }

  summary {
    font-size:0.875rem
  }

  details p {
    font-size:0.8125rem
  }

  .contact-grid {
    gap:30px
  }

  .contact-grid h2 {
    font-size:2.125rem
  }

  .contact-box {
    padding:25px
  }

  .notice-box {
    padding:18px;
    font-size:0.75rem
  }

  .contact-email {
    font-size:1.6875rem
  }

}

.mini-calendar>div {
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px
}

.mini-calendar b {
  font-size:0.5625rem;
  text-align:center;
  color:#777
}

.mini-calendar span {
  padding:7px 0
}

.feature-visual:not(.dark) .client-row {
  background:#fff;
  border-color:#d8d3cb;
  margin-top:10px
}

.feature-visual:not(.dark) .client-row small {
  color:#65686a
}

.contact-email {
  overflow-wrap:anywhere;
  max-width:100%
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

  .showcase-frame {
    transform:none
  }

}

/* ==========================================================
   INDEX UNIQUEMENT : perspective, mascotte et retour en haut.
   Les pages intérieures ne sont pas affectées par ces règles.
   ========================================================== */
.page-home .showcase {
  margin-top: 50px;
  padding: 0 0 10px 240px;
  isolation: isolate;
}

/* Entrée unique sur PC : le parent emporte la mascotte et tout le diaporama.
   Les transformations internes du cadre et des slides restent inchangées. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .page-home .showcase {
    animation: home-showcase-arrival 3500ms cubic-bezier(.16, 1, .3, 1) both;
  }
}

@keyframes home-showcase-arrival {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-home .showcase-frame {
  z-index: 1;
  /* Le cadre disparaît progressivement : aucune bordure orange en bas. */
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  transform:
    perspective(1500px)
    rotateX(calc(5deg + var(--pointer-x, 0deg)))
    rotateY(calc(8deg + var(--pointer-y, 0deg)))
    rotateZ(2.5deg);
  transform-origin: 50% 70%;
  transition: transform 550ms cubic-bezier(.2, .7, .2, 1);
  border-color: #bd7b31;
  box-shadow:
    -4px 0 0 #a76523,
    -7px 2px 0 #322416,
    0 28px 55px #0009,
    0 0 36px #ff790018;
}

/* Reflet discret sur le cadre, sans gêner les clics. */
.page-home .showcase-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 #ffd6a666;
  background: linear-gradient(130deg, #ffffff05, transparent 38%);
}

.page-home .hero-mascot {
  width: 190px;
  height: auto;
  left: 42px;
  bottom: 94px;
  z-index: 0;
  transform: none;
  filter: none;
  /* Le PNG possède une vraie transparence : aucun fond ni logo atténué. */
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

.page-home .showcase-slide {
  animation: none;
}

/* Premier aperçu : l'assistant vocal, animé sans image de fond. */
.page-home .voice-demo {
  height: 100%;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  grid-template-rows: 1fr auto;
  gap: 8px 28px;
  padding: 38px 44px 24px;
  background:
    radial-gradient(circle at 72% 45%, #ff79001c, transparent 34%),
    linear-gradient(125deg, #1f2022, #111315);
  overflow: hidden;
}

.page-home .voice-demo-copy {
  align-self: center;
}

.page-home .voice-demo-copy h3 {
  margin: 10px 0 12px;
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(23px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1.08;
}

.page-home .voice-demo-copy h3 em {
  color: var(--orange);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-style: normal;
}

.page-home .voice-demo-copy p {
  margin: 0;
  color: #c9c9c9;
  font-size: 0.75rem;
  line-height: 1.65;
}

.page-home .voice-demo-stage {
  position: relative;
  min-width: 0;
}

.page-home .voice-request,
.page-home .voice-response {
  position: absolute;
  z-index: 3;
  margin: 0;
  border: 1px solid #ff790088;
  border-radius: 14px;
  background: #25272bde;
  color: #f8f8f8;
  box-shadow: 0 12px 28px #0005;
}

/* Les échanges arrivent seulement après le fondu du slide, dans l'ordre naturel. */
.page-home .voice-showcase-slide:not([hidden]) .voice-request {
  opacity: 0;
  animation: voice-message-request 1s cubic-bezier(.22, 1, .36, 1) .75s forwards;
}

.page-home .voice-showcase-slide:not([hidden]) .voice-response {
  opacity: 0;
  animation: voice-message-response 1.1s cubic-bezier(.22, 1, .36, 1) 1.55s forwards;
}

.page-home .voice-request {
  top: 2px;
  right: 0;
  max-width: 245px;
  padding: 10px 14px;
  font-size: 0.75rem;
}

.page-home .voice-listening {
  position: absolute;
  top: 50%;
  left: 48%;
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%);
}

.page-home .voice-ring {
  position: absolute;
  inset: 0;
  border: 1px solid #ff790070;
  border-radius: 50%;
  animation: voice-pulse 2s ease-out infinite;
}

.page-home .voice-ring-two { animation-delay: 1s; }

.page-home .voice-microphone {
  position: absolute;
  inset: 20px;
  display: grid;
  place-items: center;
  border: 2px solid #ffb15b;
  border-radius: 50%;
  color: transparent;
  background: linear-gradient(145deg, #ff9a22, #ed5700);
  box-shadow: 0 0 28px #ff790070;
}

.page-home .voice-microphone::before {
  content: "🎤";
  color: #fff;
  font-size: 1.4375rem;
  filter: grayscale(1) brightness(3);
}

.page-home .voice-wave {
  position: absolute;
  top: 42px;
  left: -76px;
  right: -76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: -1;
}

.page-home .voice-wave i {
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: var(--orange);
  animation: voice-wave .8s ease-in-out infinite alternate;
}

.page-home .voice-wave i:nth-child(2n) { animation-delay: .18s; }
.page-home .voice-wave i:nth-child(3n) { animation-delay: .36s; }

.page-home .voice-response {
  right: 0;
  bottom: 4px;
  display: flex;
  align-items: center;
  max-width: 275px;
  min-height: 54px;
  padding: 9px 14px 9px 60px;
  font-size: 0.6875rem;
}

.page-home .voice-avatar {
  position: absolute;
  left: -7px;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #231c18;
}

.page-home .voice-avatar img {
  position: absolute;
  top: -2px;
  left: -23px;
  width: 96px;
  max-width: none;
}

.page-home .voice-examples {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.page-home .voice-examples span {
  padding: 8px 14px;
  border: 1px solid #ff790070;
  border-radius: 999px;
  color: #ddd;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

@keyframes voice-pulse {
  0% { opacity: .8; transform: scale(.62); }
  100% { opacity: 0; transform: scale(1.65); }
}

@keyframes voice-wave {
  from { transform: scaleY(.35); opacity: .45; }
  to { transform: scaleY(1.6); opacity: 1; }
}

@keyframes voice-message-request {
  from { opacity: 0; transform: translate(8px, 4px); filter: blur(2px); }
  to { opacity: 1; transform: translate(0, 0); filter: blur(0); }
}

@keyframes voice-message-response {
  from { opacity: 0; transform: translate(8px, 4px); filter: blur(2px); }
  to { opacity: 1; transform: translate(0, 0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .voice-showcase-slide .voice-request,
  .page-home .voice-showcase-slide .voice-response {
    opacity: 1;
    transform: none;
  }
}

.mobile-showcase-voice {
  display: flex;
  align-items: center;
  gap: 22px;
  background:
    radial-gradient(circle at 20% 38%, #ff790035, transparent 34%),
    linear-gradient(145deg, #202124, #111315) !important;
}

.mobile-showcase-voice .mobile-voice-icon {
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 2px solid #ffb15b;
  border-radius: 50%;
  color: transparent;
  background: linear-gradient(145deg, #ff9a22, #ed5700);
  box-shadow: 0 0 0 12px #ff790018, 0 0 30px #ff790050;
}

.mobile-showcase-voice .mobile-voice-icon::before {
  content: "🎤";
  color: #fff;
  font-size: 1.875rem;
  filter: grayscale(1) brightness(3);
}

.page-home .showcase-slide.is-leaving {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-home .showcase-slide.is-entering {
  z-index: 2;
}

.page-home .showcase-controls {
  margin-top: 24px;
  z-index: 3;
}

.page-home .slide-tabs button {
  position: relative;
  overflow: hidden;
}

.page-home .slide-tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--orange);
  transform-origin: left;
  animation: home-slide-progress 4s linear;
  animation-play-state: paused;
}

.page-home .showcase[data-playing="true"]
.slide-tabs button[aria-selected="true"]::after {
  animation-play-state: running;
}

@keyframes home-slide-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.page-home .home-prices {
  margin: 24px auto;
  padding: 12px 20px;
  border: 1px solid #ffffff20;
  border-radius: 10px;
  font-size: 0.8125rem;
}

.page-home .home-prices summary {
  cursor: pointer;
  color: #f7f7f4;
}

.page-home .home-prices p,
.page-home .home-prices li {
  color: #b8bcbd;
}

.page-home .home-prices a {
  color: var(--orange-light);
}

/* Bouton identique dans le menu commun des cinq pages. */
.site-header #navigation > .button-small {
  min-height: 42px;
  padding: 10px 20px;
  gap: 12px;
  font-size: 0.875rem;
  font-weight: 400;
}

.site-header #navigation > .button-small:hover {
  color: #17100a;
}

.site-header #navigation > .button-small span {
  font-size: 1rem;
}

.back-to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius:50%;
  background: var(--orange);
  color: #17120e;
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: 0 6px 22px #0004;
}

.back-to-top[hidden] {
  display: none;
}

.back-to-top:hover {
  background: #ff9b36;
}

@media (max-width: 1150px) {
  .page-home .showcase {
    padding-left: 200px;
  }

  .page-home .hero-mascot {
    width: 160px;
    left: 28px;
    bottom: 94px;
  }
}

@media (max-width: 900px) {
  .page-home .showcase {
    padding-left: 160px;
  }

  .page-home .hero-mascot {
    width: 130px;
    left: 30px;
    bottom: 92px;
  }

  .page-home .showcase-frame {
    transform: perspective(1200px) rotateY(5deg) rotateZ(1.5deg);
  }
}

@media (max-width: 650px) {
  .page-home .showcase {
    padding: 0 0 5px 75px;
    margin-top: 24px;
  }

  .page-home .showcase-frame {
    transform: perspective(950px) rotateY(3deg) rotateZ(1deg);
  }

  .page-home .hero-mascot {
    width: 70px;
    left: -5px;
    bottom: 125px;
  }

  .page-home .showcase-controls {
    margin-top: 22px;
    margin-left: -75px;
  }

  .page-home .slide-tabs {
    gap: 18px;
  }

  .back-to-top {
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 38px;
    height: 38px;
    font-size: 1.4375rem;
  }
}

/* Accessibilité : aucun mouvement imposé si l'utilisateur le réduit. */
@media (prefers-reduced-motion: reduce) {
  .page-home .showcase-frame {
    transform: none;
    transition: none;
  }

  .page-home .slide-tabs button::after {
    animation: none !important;
  }
}

/* Index : taille du titre demandée et raccord progressif au bloc blanc. */
.page-home .hero h1 {
  font-size: clamp(42px,5.3vw,55px);
}

.page-home .hero {
  padding: 24px 0 12px;
  background: linear-gradient(
    to bottom,
    #101112 0,
    #101112 calc(100% - 185px),
    var(--paper) calc(100% - 80px)
  );
}

.page-home .showcase-slide {
  height: 360px;
}

/* Réduire les espaces au-dessus du slide, en particulier sur un petit écran. */
.page-home .hero-description {
  margin: 12px auto 16px;
}

.page-home .trial-note {
  margin-top: 8px;
}

.page-home .showcase-controls,
.page-home .slide-tabs button[aria-selected="true"],
.page-home .slide-arrows > span {
  color: #343638;
}

.page-home .slide-tabs button {
  color: #62666a;
}

.page-home .slide-arrows button {
  background: #e8e6e0;
  border-color: #d5d2cb;
}

.page-home .illustration-note {
  color: #666a6d;
}

/* Agenda de la maquette : navigation, semaine sur sept jours, rappels à droite. */
.page-home .agenda-preview .app-sidebar {
  width: 125px;
  padding: 22px 12px;
}

.page-home .agenda-preview .app-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1.1875rem;
}

.page-home .agenda-center {
  flex: 1;
  min-width: 0;
  padding: 20px 12px 0;
  background: linear-gradient(135deg, #1c1f20, #111314);
}

.page-home .agenda-preview .app-toolbar {
  padding-bottom: 15px;
}

.page-home .agenda-tools {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 13px;
  font-size: 0.5rem;
  white-space: nowrap;
}

.page-home .agenda-tools > span {
  padding: 4px 6px;
  border: 1px solid #ffffff17;
  border-radius: 4px;
}

.page-home .agenda-tools strong {
  font-weight: 400;
  color: #ddd;
}

.page-home .agenda-view {
  margin-left: auto;
}

.page-home .agenda-view b {
  color: #ffa247;
}

.page-home .agenda-tools .agenda-add {
  background: #ff7900;
  color: #fff;
  font-size: 0.75rem;
  padding: 1px 5px;
}

.page-home .agenda-preview .calendar-head,
.page-home .agenda-preview .calendar-body {
  grid-template-columns: 32px repeat(7, minmax(0, 1fr));
}

.page-home .agenda-preview .calendar-head {
  height: 28px;
  font-size: 0.5rem;
}

.page-home .agenda-preview .calendar-body {
  position: relative;
  height: 260px;
  background: repeating-linear-gradient(
    to bottom, transparent 0, transparent 31.5px, #ffffff0a 32.5px
  );
}

.page-home .agenda-preview .calendar-times {
  justify-content: flex-start;
  font-size: 0.5rem;
}

.page-home .agenda-preview .calendar-times span {
  height: 32.5px;
}

.page-home .agenda-preview .appointment {
  --appointment-color: #754526;
  --appointment-text: #fff3e6;
  padding: 4px;
  left: 2px;
  right: 2px;
  background: var(--appointment-color);
  color: var(--appointment-text);
  border-color: var(--appointment-color);
  box-shadow: none;
}

.page-home .agenda-preview .appointment b {
  font-size: 0.5rem;
  color: var(--appointment-text);
}

.page-home .agenda-preview .appointment span {
  font-size: 0.5rem;
  margin-top: 0;
  line-height: 1.3;
}

.page-home .agenda-preview .appointment small {
  display: block;
  font-size: 0.4375rem;
  line-height: 1.2;
  color: var(--appointment-text);
}

/* Marron discret pour le visuel ; bleu et vert conservés. */
.page-home .agenda-preview .appointment-blue {
  --appointment-color: #3788d8;
  --appointment-text: #172033;
}

.page-home .agenda-preview .appointment-green {
  --appointment-color: #10b981;
  --appointment-text: #172033;
}

/* Carte noir et or, inspirée des cartes créées dans l'application. */
.page-home .loyalty-demo .loyalty-card {
  width: 100%;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-self: center;
  padding: 12px 16px 0;
  transform: none;
  overflow: hidden;
  border: 1px solid #d5ad5c55;
  border-radius: 14px;
  color: #f8f7f3;
  background:
    linear-gradient(125deg, transparent 52%, #d0a44b20 52%, #d0a44b20 53%, transparent 53%),
    radial-gradient(ellipse at 110% 110%, transparent 48%, #b3863855 48.5%, transparent 49%),
    radial-gradient(ellipse at 95% 5%, #ad792b24, transparent 46%),
    linear-gradient(135deg, #060a13, #111827 65%, #090e1c);
}

.page-home .loyalty-card-top {
  align-items: flex-start;
  gap: 10px;
}

.page-home .loyalty-card-tier {
  display: block;
  margin-top: 0;
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 500;
  color: #f4d47d;
  letter-spacing: 2px;
}

.page-home .loyalty-card-qr {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
}

.page-home .loyalty-card-label {
  margin-top: 7px;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: .5px;
}

.page-home .loyalty-card-details {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 8px;
  margin: 12px 0;
}

.page-home .loyalty-card-details > div {
  padding: 6px 8px;
  border: 1px solid #d5ad5c;
  border-radius: 9px;
  background: #050a1580;
}

.page-home .loyalty-card-details span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: #f4d47d;
}

.page-home .loyalty-card-details b {
  font-size: 0.6875rem;
}

.page-home .loyalty-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: auto -16px 0;
  padding: 8px 16px;
  background: linear-gradient(110deg, #f4d47d, #b58028);
  color: #0b1020;
  font-size: 0.625rem;
}

.page-home .loyalty-card-footer small {
  font-size: 0.4375rem;
}

/* Même colonne et décalage que les deux messages du slide Rappels. */
.page-home .loyalty-cards {
  min-width: 0;
  width: 100%;
}

.page-home .loyalty-demo .loyalty-card-silver {
  min-height: 110px;
  margin-top: 12px;
  transform: translateX(12px);
  border-color: #90b5ce66;
  background:
    linear-gradient(125deg, transparent 52%, #c6e0f020 52%, #c6e0f020 53%, transparent 53%),
    linear-gradient(135deg, #162b40, #304c65);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

.page-home .loyalty-card-silver .loyalty-card-tier {
  color: #d6e8f5;
}

.page-home .loyalty-card-silver .loyalty-card-footer {
  background: linear-gradient(110deg, #d7e6f0, #8eabc0);
}

@media (max-width: 650px) {
  .page-home .loyalty-demo .loyalty-card {
    padding: 12px 12px 0;
  }

  .page-home .loyalty-card-qr {
    width: 32px;
    height: 32px;
  }

  .page-home .loyalty-card-tier {
    font-size: 0.8125rem;
    letter-spacing: 1px;
  }

  .page-home .loyalty-card-details {
    grid-template-columns: 1fr;
    margin: 12px 0;
    gap: 5px;
  }

  .page-home .loyalty-card-details > div {
    padding: 6px;
  }

  .page-home .loyalty-card-footer {
    margin: auto -12px 0;
    padding: 10px 12px;
    flex-wrap: wrap;
  }
}

.page-home .agenda-now {
  position: absolute;
  top: 31.25%;
  left: 32px;
  right: 0;
  height: 1px;
  background: #ff8a1b99;
  pointer-events: none;
}

.page-home .agenda-now::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8a1b;
}

.page-home .agenda-notifications {
  width: 174px;
  flex-shrink: 0;
  padding: 62px 12px 0 5px;
}

.page-home .agenda-notification {
  margin-bottom: 12px;
  padding: 12px 10px;
  border: 1px solid #ffffff20;
  border-radius: 8px;
  background: linear-gradient(135deg, #252829, #151718);
  font-size: 0.5625rem;
}

.page-home .agenda-notification > div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-home .agenda-notification small {
  margin-left: auto;
  font-size: 0.4375rem;
  color: #b3b5b6;
}

.page-home .agenda-notification p {
  margin-top: 8px;
  line-height: 1.45;
  color: #dedede;
}

.page-home .sms-dot {
  color: #62c862;
  font-size: 1rem;
}

@media (max-width: 1150px) {
  .page-home .agenda-notifications {
    width: 140px;
    padding-right: 7px;
  }

  .page-home .agenda-preview .app-sidebar {
    width: 106px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .page-home .agenda-view {
    display: none;
  }
}

@media (max-width: 900px) {
  .page-home .agenda-notifications {
    display: none;
  }

  .page-home .agenda-preview .app-sidebar {
    display: none;
  }
}

@media (max-width: 650px) {
  /* Garder le titre lisible sans dépasser la largeur du téléphone. */
  .page-home .hero h1 {
    font-size: clamp(32px,8.3vw,42px);
  }

  .page-home .showcase-slide {
    height: 300px;
  }

  .page-home .agenda-center {
    padding: 16px 5px 0;
  }

  .page-home .agenda-tools {
    gap: 4px;
    font-size: 0.4375rem;
  }

  .page-home .agenda-tools > span:first-child {
    display: none;
  }

  .page-home .agenda-preview .calendar-head,
  .page-home .agenda-preview .calendar-body {
    grid-template-columns: 23px repeat(7, minmax(0, 1fr));
  }

  .page-home .agenda-preview .calendar-head {
    font-size: 0.375rem;
  }

  .page-home .agenda-preview .appointment {
    padding: 3px 1px;
    left: 1px;
    right: 1px;
  }

  .page-home .agenda-preview .appointment b,
  .page-home .agenda-preview .appointment span {
    font-size: 0.375rem;
  }

  .page-home .agenda-preview .appointment small {
    display: none;
  }

  .page-home .agenda-now {
    left: 23px;
  }
}

/************************************************/

.feature-visual {
    overflow: hidden;
}

.feature-visual img.fade-img {
    opacity: 0;
    transform: translateY(70px) scale(0.88);
    filter: blur(8px);
    transition:
        opacity 1.6s ease,
        transform 1.6s cubic-bezier(.16,1,.3,1),
        filter 1.4s ease;
}

.feature-visual img.fade-img.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* ===== ANIMATION INTERIEURE SLIDES RUPER ===== */

.showcase-slide:not([hidden]) {
    animation: ruperSlideIn 1.4s cubic-bezier(.16,1,.3,1) both;
}

.showcase-slide:not([hidden]) .app-preview,
.showcase-slide:not([hidden]) .reminder-demo,
.showcase-slide:not([hidden]) .loyalty-demo {
    animation: ruperContentIn 1.8s cubic-bezier(.16,1,.3,1) both;
}

/* Eléments secondaires */
.showcase-slide:not([hidden]) .appointment,
.showcase-slide:not([hidden]) .message-card,
.showcase-slide:not([hidden]) .loyalty-card,
.showcase-slide:not([hidden]) .client-row {
    opacity: 0;
    animation: ruperItemIn 1.25s cubic-bezier(.16,1,.3,1) forwards;
}

.showcase-slide:not([hidden]) .appointment:nth-child(1),
.showcase-slide:not([hidden]) .message-card:nth-child(1),
.showcase-slide:not([hidden]) .loyalty-card:nth-child(1) {
    animation-delay: .65s;
}

.showcase-slide:not([hidden]) .appointment:nth-child(2),
.showcase-slide:not([hidden]) .message-card:nth-child(2),
.showcase-slide:not([hidden]) .loyalty-card:nth-child(2) {
    animation-delay: 1s;
}

/* Notifications */
.showcase-slide:not([hidden]) .agenda-notification {
    opacity: 0;
    animation: ruperNotifIn 1.25s cubic-bezier(.16,1,.3,1) forwards;
}

.showcase-slide:not([hidden]) .agenda-notification:nth-child(1) {
    animation-delay: .8s;
}

.showcase-slide:not([hidden]) .agenda-notification:nth-child(2) {
    animation-delay: 1.2s;
}

/* ===== KEYFRAMES ===== */

@keyframes ruperSlideIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.97);
        filter: blur(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ruperContentIn {
    from {
        opacity: 0;
        transform: translateY(45px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ruperItemIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.90);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ruperNotifIn {
    from {
        opacity: 0;
        transform: translateX(55px) scale(.92);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}