/* =========================================================
   Terre d'Avenir — design system
   Palette et typo tirées du logo (crème / terracotta / sauge)
   Volontairement à l'opposé du "purple gradient / shadcn look"
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,500&family=Caveat:wght@500;600&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --cream: #FAF4EC;
  --cream-alt: #F1E7D9;
  --paper: #FFFDFA;
  --terracotta: #BE8760;
  --terracotta-dark: #9C6B48;
  --terracotta-light: #E9D2BC;
  --sage: #8A9573;
  --sage-dark: #667153;
  --sage-light: #DCE2D0;
  --ink: #3A342C;
  --ink-soft: #6E6455;
  --ink-faint: #9C9184;
  --border: #E6D8C6;
  --shadow: 0 8px 24px -12px rgba(58, 52, 44, 0.25);
  --shadow-soft: 0 4px 14px -8px rgba(58, 52, 44, 0.18);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-script: 'Caveat', cursive;
  --font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-w: 480px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

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

.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 22px;
}

/* ---------- Typography ---------- */

h1, h2, h3{
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: 0.2px;
}

h1{ font-size: 2.1rem; line-height: 1.18; }
h2{ font-size: 1.55rem; line-height: 1.25; }
h3{ font-size: 1.15rem; line-height: 1.3; }

.script{
  font-family: var(--font-script);
  color: var(--terracotta-dark);
  font-size: 1.35em;
  font-weight: 600;
}

p{ margin: 0 0 14px; color: var(--ink-soft); }

.eyebrow{
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sage-dark);
  margin: 0 0 10px;
}

/* ---------- Layout blocks ---------- */

header.site-header{
  padding: 18px 22px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

header.site-header img{ width: 36px; height: 36px; }

header.site-header .brand{
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}

section{ padding: 36px 0; }

.section-alt{
  background: var(--cream-alt);
}

/* organic wave divider between sections */
.wave{
  display: block;
  width: 100%;
  height: 46px;
  margin-top: -1px;
}

/* ---------- Buttons ---------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  padding: 16px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary{
  background: var(--terracotta);
  color: var(--paper);
  box-shadow: var(--shadow-soft);
}

.btn-primary:active{ transform: scale(0.97); opacity: 0.92; }

.btn-secondary{
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border);
}

.btn-secondary:active{ transform: scale(0.97); background: var(--cream-alt); }

.btn-ghost{
  width: auto;
  padding: 10px 4px;
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Cards ---------- */

.card{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  box-shadow: var(--shadow-soft);
}

/* ---------- Photo placeholder ----------
   Rempli plus tard : il suffit de remplacer le src de
   l'<img class="ph"> par la vraie photo, la taille/alt
   sont déjà posés donc aucune mise en page ne bouge. */

.photo{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream-alt);
}

.photo img.ph{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.photo .ph-tag{
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(58,52,44,0.72);
  color: #fff;
  font-size: 0.68rem;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  letter-spacing: 0.3px;
}

/* ---------- Hero ---------- */

.hero{ padding-top: 6px; text-align: center; }

.hero .photo{ aspect-ratio: 4 / 5; margin: 18px 0 22px; }

.hero p.lead{ font-size: 1.02rem; }

/* ---------- Feature rows ---------- */

.feature{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.feature:last-child{ border-bottom: none; }

.feature .icon{
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--sage-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage-dark);
}

.feature h3{ margin-bottom: 4px; font-size: 1.02rem; }
.feature p{ margin: 0; font-size: 0.92rem; }

/* ---------- Quiz progress (motif ondulations) ---------- */

.quiz-progress{
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 6px 0 26px;
}

.ripple{
  width: 15px;
  height: 15px;
}

.ripple circle{
  fill: none;
  stroke: var(--terracotta-light);
  stroke-width: 2;
  transition: stroke 0.25s ease, fill 0.25s ease;
}

.ripple.done circle{ fill: var(--terracotta); stroke: var(--terracotta); }
.ripple.current circle{ stroke: var(--terracotta-dark); stroke-width: 2.4; }

/* ---------- Quiz question ---------- */

.quiz-shell{ min-height: calc(100dvh - 120px); display: flex; flex-direction: column; }

.q-topbar{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.q-back{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  color: var(--ink);
}

.q-count{ font-size: 0.82rem; color: var(--ink-faint); font-weight: 600; }

.q-card{
  animation: qin 0.32s ease both;
}

@keyframes qin{
  from{ opacity: 0; transform: translateX(18px); }
  to{ opacity: 1; transform: translateX(0); }
}

.q-card.leaving{
  animation: qout 0.22s ease both;
}

@keyframes qout{
  to{ opacity: 0; transform: translateX(-18px); }
}

.q-title{ font-size: 1.35rem; margin: 10px 0 6px; }
.q-sub{ font-size: 0.9rem; margin-bottom: 22px; }

.options{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.option{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--ink);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.option:active{ transform: scale(0.985); }

.option .dot{
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex: none;
  position: relative;
}

.option.selected{
  border-color: var(--terracotta);
  background: #FBF2E9;
}

.option.selected .dot{
  border-color: var(--terracotta);
  background: var(--terracotta);
}

.option.selected .dot::after{
  content:'';
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: var(--paper);
}

.option strong{ display:block; font-weight: 600; }
.option span.hint{ display:block; font-size: 0.82rem; color: var(--ink-faint); margin-top: 2px; }

.q-footer{ margin-top: auto; padding-top: 14px; }

/* ---------- Résultat ---------- */

.verdict-card{
  background: linear-gradient(180deg, #FBF2E9 0%, var(--paper) 70%);
  border: 1.5px solid var(--terracotta-light);
  text-align: center;
}

.verdict-card .eyebrow{ color: var(--terracotta-dark); }

.verdict-number{
  font-family: var(--font-serif);
  font-size: 2.3rem;
  color: var(--terracotta-dark);
  margin: 4px 0;
}

.stat-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
}

.stat{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
}

.stat .val{ font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink); }
.stat .lbl{ font-size: 0.74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }

.locked{
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-top: 22px;
}

.locked .blurred{
  filter: blur(5px);
  opacity: 0.65;
  padding: 20px;
  user-select: none;
}

.locked .lock-overlay{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(250,244,236,0.35) 0%, rgba(250,244,236,0.92) 55%);
}

.lock-badge{
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Waitlist form ---------- */

.waitlist{ margin-top: 14px; }

.waitlist input[type="email"]{
  width: 100%;
  padding: 15px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  font-family: var(--font-sans);
  font-size: 1rem;
  background: var(--paper);
  margin-bottom: 10px;
}

.waitlist input[type="email"]:focus{ outline: 2px solid var(--terracotta-light); border-color: var(--terracotta); }

.hp-field{ position: absolute; left: -9999px; top: -9999px; }

.form-note{ font-size: 0.78rem; color: var(--ink-faint); text-align: center; margin-top: 8px; }

.confirm-box{
  display: none;
  text-align: center;
  padding: 18px;
}

.confirm-box.show{ display: block; }

/* ---------- Footer ---------- */

footer{
  padding: 30px 0 40px;
  text-align: center;
}

footer .brand-mini{
  font-family: var(--font-serif);
  font-size: 1rem;
  margin-bottom: 6px;
}

footer nav{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0;
}

footer nav a{
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer .copyright{ font-size: 0.76rem; color: var(--ink-faint); margin-top: 8px; }

/* ---------- Legal / about pages ---------- */

.legal p, .legal li{ font-size: 0.92rem; }
.legal h2{ font-size: 1.15rem; margin-top: 24px; }

/* ---------- utility ---------- */

.mt-0{ margin-top: 0; }
.center{ text-align: center; }
.stack{ display:flex; flex-direction:column; gap:14px; }

/* =========================================================
   v2 — grain, asymétrie, écran large
   Objectif : casser le rendu "carte shadcn générique" et
   donner une vraie identité desktop, pas juste une carte
   mobile posée au milieu d'un fond vide.
   ========================================================= */

body{
  background-color: var(--cream-alt);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(58,52,44,0.05) 1px, transparent 0);
  background-size: 22px 22px;
}

.app-shell{
  display: flex;
  min-height: 100dvh;
}

.page{
  background: var(--cream);
  position: relative;
  z-index: 1;
}

/* Panneau décoratif, visible seulement à partir du desktop.
   Anneaux concentriques façon tour de potier + accroche. */
.side-panel{
  display: none;
}

@media (min-width: 900px){
  .app-shell{ justify-content: center; }

  .page{
    width: var(--max-w);
    flex: none;
    min-height: 100dvh;
    box-shadow: 0 30px 80px -20px rgba(58,52,44,0.28);
  }

  .side-panel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: min(46vw, 620px);
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 30% 25%, #F3E4D2 0%, transparent 55%),
      linear-gradient(155deg, #EFE1CF 0%, #E4D2BA 55%, #D8C3A4 100%);
  }

  .side-panel .rings{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .side-panel .rings svg{ width: 130%; height: auto; opacity: 0.55; }

  .side-panel .side-copy{
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 48px;
    max-width: 420px;
  }

  .side-panel .side-copy img{ width: 64px; height: 64px; margin: 0 auto 18px; }

  .side-panel .side-copy h2{
    font-size: 1.9rem;
    margin-bottom: 10px;
  }

  .side-panel .side-copy p.script{ font-size: 1.6rem; }

  .side-panel .side-copy p.side-note{
    margin-top: 22px;
    font-size: 0.88rem;
    color: var(--ink-soft);
  }
}

/* ---------- Options : tuiles "façonnées à la main", pas des
   cartes shadcn parfaitement identiques. Coins irréguliers,
   légère rotation alternée, marque de sélection en cachet. ---------- */

.option{
  border-radius: 14px 24px 16px 26px;
  padding: 17px 50px 17px 18px;
  position: relative;
}

.option .dot{
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
}

.option:nth-child(odd){ transform: rotate(-0.35deg); }
.option:nth-child(even){ transform: rotate(0.35deg); }

.option.selected{
  transform: rotate(0deg) scale(1.01);
}

.option.selected .dot::after{
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--paper);
  clip-path: polygon(20% 52%, 40% 72%, 82% 24%, 92% 34%, 40% 90%, 8% 58%);
  background: var(--paper);
}

.option.selected .dot::before{
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px dashed var(--terracotta-dark);
  opacity: 0.5;
}

/* ---------- Slider (simulateur de cotisations) ---------- */

.slider-block{ margin: 22px 0 6px; }

.slider-value{
  text-align: center;
  margin-bottom: 14px;
}

.slider-value .amount{
  font-family: var(--font-serif);
  font-size: 2.6rem;
  color: var(--terracotta-dark);
  line-height: 1;
}

.slider-value .amount small{ font-size: 1rem; font-family: var(--font-sans); color: var(--ink-faint); }

input[type="range"].clay-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--terracotta) 0%, var(--terracotta) var(--fill,50%), var(--sage-light) var(--fill,50%), var(--sage-light) 100%);
  outline: none;
  margin: 14px 0;
}

input[type="range"].clay-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--terracotta);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

input[type="range"].clay-slider::-moz-range-thumb{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--terracotta);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.toggle-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper);
  margin: 16px 0;
}

.toggle-row span.tlabel{ font-size: 0.92rem; font-weight: 600; }
.toggle-row span.tsub{ font-size: 0.78rem; color: var(--ink-faint); display:block; font-weight:400; }

.switch{
  position: relative;
  width: 46px; height: 27px;
  flex: none;
}

.switch input{ opacity: 0; width: 0; height: 0; }

.switch .track{
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.2s ease;
}

.switch .track::after{
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease;
}

.switch input:checked + .track{ background: var(--sage); }
.switch input:checked + .track::after{ transform: translateX(19px); }

.breakdown-row{
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

.breakdown-row:last-child{ border-bottom: none; font-weight: 700; }

.breakdown-row span:last-child{ font-family: var(--font-serif); }

/* ---------- Encart astuce (CPF, etc.) ---------- */

.tip-box{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--sage-light);
  border: 1px solid #C9D3B8;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 16px 0;
}

.tip-box .tip-icon{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--sage-dark);
  color: #fff;
  flex: none;
  display: flex; align-items: center; justify-content: center;
}

.tip-box p{ margin: 0; font-size: 0.88rem; color: var(--ink); }
.tip-box strong{ display: block; font-size: 0.92rem; margin-bottom: 2px; }

/* ---------- Plan d'équipement : teaser + verrouillé ---------- */

.equip-teaser{
  border: 1.5px solid var(--terracotta-light);
  background: #FBF2E9;
  border-radius: 14px 24px 16px 22px;
  padding: 14px 16px;
  margin: 14px 0 4px;
  position: relative;
}

.equip-teaser .badge{
  position: absolute;
  top: -10px; left: 14px;
  background: var(--terracotta);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}

.equip-teaser .poste{ font-weight: 700; font-family: var(--font-serif); font-size: 1.02rem; margin-top: 4px; }
.equip-teaser .fourchette{ color: var(--terracotta-dark); font-weight: 700; margin-top: 2px; }
.equip-teaser .note{ font-size: 0.82rem; color: var(--ink-soft); margin-top: 6px; }

.equip-locked-list{ list-style: none; padding: 0; margin: 10px 0 0; }
.equip-locked-list li{
  display: flex; justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.9rem;
}
.equip-locked-list li:last-child{ border-bottom: none; }

/* ---------- Sélecteur de ville ---------- */

.city-select{
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6455' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

.demand-result{
  margin-top: 14px;
  display: none;
}

.demand-result.show{ display: block; animation: qin 0.3s ease both; }

.demand-result .dnum{
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--terracotta-dark);
}

/* ---------- FAQ (details/summary natif, accessible sans JS) ---------- */

.faq-item{
  border-bottom: 1px solid var(--border);
  padding: 16px 2px;
}

.faq-item:first-of-type{ border-top: 1px solid var(--border); }

.faq-item summary{
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker{ display: none; }

.faq-item summary::after{
  content: '+';
  font-family: var(--font-sans);
  font-size: 1.3rem;
  color: var(--terracotta);
  flex: none;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after{ transform: rotate(45deg); }

.faq-item p{ margin: 12px 0 0; font-size: 0.92rem; }

.demand-result .dtier{
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sage-light);
  color: var(--sage-dark);
  margin-bottom: 8px;
}