@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap');

:root{
  /* colors */
  --color-beige:#F9EEE4;
  --color-brown-deep:#170B04;
  --color-olive:#746A0F;
  --color-brown-20:rgba(23,11,4,.2);
  --color-brown-30:rgba(23,11,4,.3);
  --color-brown-50:rgba(23,11,4,.5);
  --color-brown-70:rgba(23,11,4,.7);
  --surface-page:var(--color-beige);
  --surface-inverse:var(--color-brown-deep);
  --text-primary:var(--color-brown-deep);
  --text-inverse:var(--color-beige);
  --text-muted:var(--color-brown-70);
  --text-faint:var(--color-brown-50);
  --accent:var(--color-olive);
  --accent-text:var(--color-beige);
  --border-subtle:var(--color-brown-20);
  --border-default:var(--color-brown-30);
  --btn-primary-bg:var(--color-olive);
  --btn-primary-text:var(--color-beige);
  --btn-primary-hover-bg:var(--color-brown-deep);
  --btn-secondary-border:var(--color-brown-deep);
  --btn-secondary-text:var(--color-brown-deep);
  --btn-secondary-hover-bg:var(--color-brown-deep);
  --btn-secondary-hover-text:var(--color-beige);

  /* spacing / radius / shadow / motion */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --space-11:160px;
  --radius-sm:2px; --radius-md:4px; --radius-none:0px;
  --shadow-none:none; --shadow-soft:0 1px 2px rgba(23,11,4,.06);
  --border-width:1px;
  --container-max:1120px; --container-narrow:720px;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:150ms; --duration-standard:250ms;

  /* typography */
  --font-serif:'Cormorant Garamond',ui-serif,Georgia,serif;
  --text-display-1:103px; --text-display-2:80px; --text-display-3:64px;
  --text-subtitle-1:58px; --text-subtitle-2:44px; --text-subtitle-3:34px;
  --text-body-lg:22px; --text-body:18px; --text-body-sm:16px;
  --text-label:16px; --text-label-sm:14px;
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600;
  --leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.5; --leading-relaxed:1.7;
  --tracking-tight:-0.01em; --tracking-normal:0; --tracking-label:0.14em; --tracking-wide:0.2em;
}

html,body{margin:0;padding:0;background:#F9EEE4;overflow-x:hidden}
*{box-sizing:border-box}
body{font-family:var(--font-serif)}
.ab-home-copy h1,.ab-home-copy p{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--text-primary)}
::selection{background:rgba(116,106,15,.18)}
.ab-cta-full > *{display:block}
.ab-cta-full button{width:100%}
button{font-family:var(--font-serif)}
input,select,textarea{font-family:var(--font-serif)}

@keyframes abfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes abradar{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes abq1{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@keyframes abq2{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@keyframes abhero{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* --- Adaptations MOBILE uniquement (desktop inchangé) --- */
@media (max-width:640px){
  header{padding:10px 24px 2px!important}
  header img{width:112px!important;max-width:40vw!important}
  footer{padding:6px 24px 10px!important}
  footer span{font-size:11px!important}
  .ab-pad-main{padding:6px 20px 10px!important;align-items:center!important}
  .ab-scale-row{margin-top:14px!important}
  .ab-pad-side{padding:0 20px!important}
  .ab-home-grid{grid-template-columns:1fr!important;gap:0!important;max-width:520px!important;text-align:center!important}
  .ab-home-copy{order:2!important}
  .ab-home-copy p{margin-left:auto!important;margin-right:auto!important}
  .ab-home-visual{order:1!important;margin:0 auto 12px!important;max-width:210px!important;width:100%!important}
  .ab-home-copy h1{font-size:24px!important;width:auto!important;height:auto!important;margin-bottom:10px!important}
  .ab-home-copy p{font-size:14px!important;line-height:1.32!important;margin-bottom:12px!important;width:auto!important;height:auto!important}
  .ab-q{font-size:25px!important;min-height:152px!important;margin-bottom:0!important}
  .ab-scale-row{gap:12px!important}
  .ab-scale-circles{gap:6px!important}
  .ab-scale-lbl{font-size:12px!important;white-space:normal!important;max-width:5em!important;text-align:center!important;line-height:1.25!important}
  .ab-scale-circles button:nth-child(1),.ab-scale-circles button:nth-child(7){width:30px!important;height:30px!important}
  .ab-scale-circles button:nth-child(2),.ab-scale-circles button:nth-child(6){width:26px!important;height:26px!important}
  .ab-scale-circles button:nth-child(3),.ab-scale-circles button:nth-child(5){width:21px!important;height:21px!important}
  .ab-scale-circles button:nth-child(4){width:18px!important;height:18px!important}
  .ab-h-44{font-size:26px!important;margin-bottom:12px!important}
  .ab-h-46{font-size:26px!important}
  .ab-h-52{font-size:28px!important}
  .ab-lead-p{font-size:14px!important;line-height:1.4!important;margin-bottom:16px!important}
  .ab-form-box{padding:16px 16px 16px!important}
  .ab-field-stack{gap:12px!important;margin-bottom:14px!important}
  .ab-btn-lg{padding:15px 16px!important;font-size:14px!important;letter-spacing:.09em!important;white-space:nowrap!important}
  .ab-cta-sub{font-size:12px!important;margin-top:6px!important}
  .ab-quiz-back{position:static!important;margin-top:22px!important}
  .ab-quiz-wrap{align-self:center!important}
  .ab-exit-hero{gap:16px!important;margin-bottom:4px!important}
  .ab-exit-img-wrap{width:64px!important;height:88px!important}
  .ab-exit-h{font-size:24px!important;margin-bottom:8px!important}

  /* Quiz: 4-affirmations-per-screen group (mobile only) */
  .ab-q-group{display:flex;flex-direction:column;gap:18px;width:100%}
  .ab-q-item{padding-bottom:16px;border-bottom:1px solid var(--border-subtle)}
  .ab-q-item:last-child{border-bottom:none;padding-bottom:0}
  .ab-q-mini{font-size:16px;font-weight:400;line-height:1.28;letter-spacing:-.01em;margin:0 0 10px;color:var(--text-primary)}
  .ab-scale-row-mini{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:4px}
  .ab-scale-lbl-mini{font-size:9px;letter-spacing:.04em;white-space:nowrap;color:var(--text-faint);flex:none}
  .ab-scale-circles-mini{display:flex;align-items:center;gap:5px}
  .ab-scale-circles-mini button:nth-child(1),.ab-scale-circles-mini button:nth-child(7){width:20px!important;height:20px!important}
  .ab-scale-circles-mini button:nth-child(2),.ab-scale-circles-mini button:nth-child(6){width:17px!important;height:17px!important}
  .ab-scale-circles-mini button:nth-child(3),.ab-scale-circles-mini button:nth-child(5){width:14px!important;height:14px!important}
  .ab-scale-circles-mini button:nth-child(4){width:12px!important;height:12px!important}
  .ab-display-label-mini{text-align:center;font-size:10px;font-style:italic;color:var(--text-muted);min-height:1.3em;margin-top:2px}
}

/* Button (design-system Button.jsx, primary/lg) */
.ab-btn{
  font-family:var(--font-serif);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background var(--duration-standard) var(--ease-standard),
             color var(--duration-standard) var(--ease-standard),
             opacity var(--duration-standard) var(--ease-standard);
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-content:center;
}
.ab-btn:disabled{cursor:default;opacity:.4}
.ab-btn-lg{padding:18px 40px;font-size:18px}
.ab-btn-primary{
  background:var(--btn-primary-bg);
  color:var(--btn-primary-text);
  border:1px solid var(--btn-primary-bg);
}

/* image placeholders (were <image-slot> in the design source) */
.ab-img{width:100%;height:100%;object-fit:cover;display:block}

/* filter options (screen 1) */
.ab-filter-btn{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  width:100%;text-align:left;padding:16px 20px;
  border:1px solid var(--border-subtle);border-radius:2px;background:transparent;
  color:var(--text-primary);font-size:18px;cursor:pointer;
  transition:all 220ms cubic-bezier(.4,0,.2,1);
}

/* 7-point scale dots (quiz screen) */
.ab-scale-dot{
  flex:none;padding:0;border-radius:50%;cursor:pointer;background:transparent;
  transition:all 180ms cubic-bezier(.4,0,.2,1);
}
.ab-scale-dot.selected{background:var(--dot-color)}

/* Hover-only affordances: gated to devices with a real pointer (mouse/trackpad).
   Without this gate, touch devices "stick" the hover style on the tapped element
   after a full DOM rebuild (iOS synthesizes hover on whatever lands under the
   finger), which looked like a dot/back-button staying selected on the wrong screen. */
@media (hover:hover) and (pointer:fine){
  .ab-btn-primary:hover:not(:disabled){
    background:var(--btn-primary-hover-bg);
    color:var(--btn-primary-text);
  }
  .ab-filter-btn:hover{border-color:#170B04;background:#170B04;color:#F9EEE4}
  .ab-scale-dot:hover:not(.selected){background:var(--dot-color);transform:scale(1.1)}
  .ab-back-btn:hover{color:var(--text-primary)}
}

/* Quiz "précédent" button (desktop): pinned to a fixed spot in the main area
   regardless of how many lines the current question wraps to. */
.ab-quiz-back{position:absolute;left:40px;bottom:28px}

/* text inputs (capture / exit-guide / exit-popup forms) */
.ab-field{
  font-size:19px;color:var(--text-primary);background:transparent;
  border:1px solid var(--border-default);border-radius:2px;
  padding:13px 15px;outline:none;width:100%;transition:border-color 200ms ease;
}
.ab-field.error{border-color:#a1291f}