/* =============================================================
   SOMMAIRE
   1. Variables (design tokens)
   2. Reset & base
   3. Typographie
   4. Layout utilitaires
   5. En-tête / navigation / sélecteur de langue
   6. Boutons
   7. Hero (contenu + élément graphique)
   8. Badges de réassurance
   9. Séparateurs de section
   10. Sections génériques
   11. Frise (timeline 5 étapes)
   12. Section "relay" (Shmuel Arouche)
   13. Cartes de services
   14. Valeurs
   15. Proximité
   16. Formulaire de contact
   17. Footer
   18. Animations au scroll (reveal)
   19. RTL (hébreu)
   20. Chiffres clés (stats)
   21. Autofinancement (schéma pédagogique)
   22. Comparaison visuelle des types d'investissement
   23. Pages légales
   24. Accessibilité (lien d'évitement)
   25. Responsive
   16bis. Formulaire — validation, piège anti-robot, retours premium
   26. Sélecteur téléphone international (surcharge du thème intl-tel-input)
============================================================= */

/* ---------- 1. VARIABLES ---------- */
:root {
  --color-bg: #FAFAF8;
  --color-bg-alt: #F0EEE9;
  --color-text: #1C1B19;
  --color-text-secondary: #6B6862;
  --color-accent: #8B7355;
  --color-accent-dark: #6E5A42;
  --color-accent-soft: rgba(139, 115, 85, 0.08);
  --color-border: #E3E0D9;
  --color-bg-card: #FFFFFF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-section-desktop: 120px;
  --space-section-mobile: 64px;
  --container-max: 1140px;
  --container-narrow: 700px;

  --transition-base: 0.25s ease;
  --shadow-soft: 0 1px 2px rgba(28, 27, 25, 0.04), 0 8px 24px rgba(28, 27, 25, 0.04);
  --shadow-hover: 0 4px 8px rgba(28, 27, 25, 0.05), 0 16px 32px rgba(28, 27, 25, 0.07);

  /* Nuances dédiées aux graphiques de la section comparative — déclinaisons
     de l'accent existant, pour rester dans la palette sobre du site plutôt
     que d'introduire des couleurs arbitraires (pas de rouge/vert/bleu). */
  --chart-1: #8B7355;
  --chart-2: #6E5A42;
  --chart-3: #B49A78;
  --chart-4: #D8C7AC;
  --chart-5: #4A3B2C;
}

/* Police adaptée à l'hébreu, activée via html[lang="he"] */
html[lang="he"] {
  --font-display: 'Frank Ruhl Libre', 'Fraunces', serif;
  --font-body: 'Rubik', 'Inter', sans-serif;
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. TYPOGRAPHIE ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  color: var(--color-text);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 16px;
}

.section__title { font-size: 34px; max-width: 640px; margin-bottom: 20px; }
.section__lead { font-size: 18px; color: var(--color-text-secondary); max-width: 620px; margin: 0 0 56px; }

.section__note {
  margin-top: 48px;
  padding: 24px 28px;
  border-inline-start: 2px solid var(--color-accent);
  background-color: var(--color-bg-card);
  color: var(--color-text-secondary);
  font-size: 15.5px;
  line-height: 1.7;
  border-radius: 4px;
}

.prose p { margin: 0 0 22px; color: var(--color-text-secondary); font-size: 18px; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- 4. LAYOUT UTILITAIRES ---------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: var(--container-narrow); }
.section { padding: var(--space-section-desktop) 0; position: relative; }
.section--alt { background-color: var(--color-bg-alt); }

/* ---------- 5. EN-TÊTE / NAVIGATION / LANGUE ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(250, 250, 248, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.logo__icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-accent); }
.site-nav { display: flex; align-items: center; gap: 32px; font-size: 15px; }
.site-nav a { color: var(--color-text-secondary); transition: color var(--transition-base); }
.site-nav a:hover { color: var(--color-text); }

.site-nav__cta {
  color: var(--color-text) !important;
  padding: 9px 18px;
  border: 1px solid var(--color-text);
  border-radius: 4px;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.site-nav__cta:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF !important; }

/* Sélecteur de langue */
.lang-switch { position: relative; }
.lang-switch__current {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--color-text-secondary);
  padding: 8px 10px; border-radius: 4px;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.lang-switch__current:hover { background-color: var(--color-bg-alt); color: var(--color-text); }
.lang-switch__current svg { transition: transform var(--transition-base); }
.lang-switch.is-open .lang-switch__current svg { transform: rotate(180deg); }

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: var(--shadow-hover);
  min-width: 140px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-switch__menu li {
  padding: 9px 12px;
  font-size: 14px;
  border-radius: 4px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.lang-switch__menu li:hover { background-color: var(--color-accent-soft); color: var(--color-text); }
.lang-switch__menu li[aria-selected="true"] { color: var(--color-accent); font-weight: 600; }

/* ---------- 6. BOUTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 32px; border-radius: 4px; font-size: 15.5px; font-weight: 600;
  border: 1px solid transparent;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.btn--primary { background-color: var(--color-accent); color: #FFFFFF; border-color: var(--color-accent); }
.btn--primary:hover { background-color: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.btn--primary:active { transform: scale(0.98); }
.btn--ghost { color: var(--color-text); border-color: var(--color-border); background-color: transparent; }
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---------- 7. HERO ---------- */
.hero { padding: 150px 0 var(--space-section-desktop); overflow: hidden; }
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
}
.hero__content { max-width: 640px; }
.hero__title { font-size: 50px; margin-bottom: 22px; }
.hero__subtitle { font-size: 19px; color: var(--color-text-secondary); max-width: 560px; margin: 0 0 32px; }
.hero__actions { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }

.hero__decor { justify-self: center; width: 100%; max-width: 340px; }
.hero__decor svg { width: 100%; height: auto; }

/* ---------- 8. BADGES DE RÉASSURANCE ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 12px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--color-text-secondary);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 8px 14px; border-radius: 100px;
}
.badge svg { color: var(--color-accent); flex-shrink: 0; }

/* ---------- 9. SÉPARATEURS DE SECTION ---------- */
.divider { display: flex; justify-content: center; padding: 0; }
.divider span {
  width: 44px; height: 1px; background-color: var(--color-border); position: relative;
}
.divider span::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background-color: var(--color-accent);
  transform: translate(-50%, -50%);
}

/* ---------- 11. FRISE (TIMELINE) ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; position: relative; }
.timeline--5 { grid-template-columns: repeat(5, 1fr); }
.timeline__item { position: relative; padding-top: 46px; border-top: 1px solid var(--color-border); }

/* Marqueur numéroté premium : badge circulaire en dégradé, en léger
   surplomb de la ligne de séparation, avec une ombre portée pour
   attirer davantage le regard tout en restant sobre. */
.timeline__marker {
  position: absolute;
  top: -24px;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  box-shadow: var(--shadow-hover);
}
.timeline__title { font-size: 18px; margin-bottom: 10px; }
.timeline__text { font-size: 15px; color: var(--color-text-secondary); margin: 0; }

/* ---------- 12. SECTION RELAY (Shmuel Arouche) ---------- */
.relay-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}
.relay-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 36px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.relay-card:hover { box-shadow: var(--shadow-hover); border-color: var(--color-accent); }
.relay-card__index {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px;
}
.relay-card__title { font-size: 21px; margin-bottom: 14px; }
.relay-card__text { font-size: 15.5px; color: var(--color-text-secondary); margin: 0; line-height: 1.7; }
.relay-connector { display: flex; align-items: center; justify-content: center; }

/* ---------- 13. CARTES DE SERVICES ---------- */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 32px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  background-color: var(--color-accent-soft); color: var(--color-accent);
  margin-bottom: 18px;
}
.card__icon svg { width: 20px; height: 20px; }
.card__title { font-size: 19px; margin-bottom: 12px; }
.card__text { font-size: 15.5px; color: var(--color-text-secondary); margin: 0; }

/* ---------- 14. VALEURS ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.value__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background-color: var(--color-accent-soft); color: var(--color-accent);
  margin-bottom: 20px;
}
.value__icon svg { width: 20px; height: 20px; }
.value__title { font-size: 18px; margin-bottom: 10px; }
.value__text { font-size: 15px; color: var(--color-text-secondary); margin: 0; line-height: 1.6; }

/* ---------- 15. PROXIMITÉ ---------- */
.proximity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.proximity {
  padding: 28px; background-color: var(--color-bg-card);
  border: 1px solid var(--color-border); border-radius: 8px;
  transition: box-shadow var(--transition-base);
}
.proximity:hover { box-shadow: var(--shadow-soft); }
.proximity__title { font-size: 18px; margin-bottom: 10px; }
.proximity__text { font-size: 15px; color: var(--color-text-secondary); margin: 0; line-height: 1.6; }

/* ---------- 16. FORMULAIRE DE CONTACT ---------- */
.contact-form {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 40px;
  box-shadow: var(--shadow-soft);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-field { display: flex; flex-direction: column; }
.form-field label { font-size: 14px; font-weight: 500; margin-bottom: 8px; color: var(--color-text); }
.form-field input {
  font-family: var(--font-body); font-size: 16px; padding: 13px 14px;
  border: 1px solid var(--color-border); border-radius: 4px;
  background-color: var(--color-bg); color: var(--color-text);
  transition: border-color var(--transition-base);
}
.form-field input:focus { border-color: var(--color-accent); outline: none; }
.form-field input:invalid:not(:placeholder-shown) { border-color: #B3554A; }

/* État d'erreur appliqué en JS (voir main.js) : plus fiable que :invalid seul,
   qui ne couvre pas nos règles de validation personnalisées (nom, téléphone). */
.form-field.is-invalid input,
.form-field.is-invalid .iti input { border-color: #B3554A; }
.form-field.is-invalid input:focus { border-color: #B3554A; }

.form-field__error {
  display: block;
  min-height: 18px;
  font-size: 12.5px;
  color: #B3554A;
  margin-top: 6px;
  line-height: 1.4;
}

.form-note { font-size: 13.5px; color: var(--color-text-secondary); text-align: center; margin: 18px 0 0; }

/* ---------- 16bis. FORMULAIRE — VALIDATION, PIÈGE ANTI-ROBOT, RETOURS PREMIUM ---------- */

/* Piège à robots (honeypot) : masqué visuellement hors de l'écran plutôt
   qu'avec display:none, pour rester efficace contre des robots qui
   ignorent les champs non affichés. Champ inatteignable au clavier
   (tabindex="-1") et exclu des lecteurs d'écran (aria-hidden sur le parent). */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  left: -9999px;
}

/* --- Retour utilisateur premium (succès / erreur) --- */
.form-feedback {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-card);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.form-feedback[hidden] { display: none; }
.form-feedback.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.form-feedback__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 1px;
}
.form-feedback__icon svg {
  width: 26px;
  height: 26px;
  display: none;
}

/* Succès : anneau + coche, tracés à l'apparition façon "validation premium" */
.form-feedback--success .form-feedback__icon-success { display: block; color: #3F6B4A; }
.form-feedback--success .form-feedback__icon-ring {
  stroke: currentColor;
  fill: none;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
}
.form-feedback--success .form-feedback__icon-check {
  stroke: currentColor;
  fill: none;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.form-feedback--success.is-visible .form-feedback__icon-ring {
  animation: feedback-draw 0.5s ease forwards 0.05s;
}
.form-feedback--success.is-visible .form-feedback__icon-check {
  animation: feedback-draw 0.35s ease forwards 0.45s;
}

/* Erreur : anneau + point d'exclamation, avec une légère secousse
   (indépendante du tracé) pour signaler clairement le problème
   sans devenir agressive. */
.form-feedback--error .form-feedback__icon-error { display: block; color: #B3554A; }
.form-feedback--error .form-feedback__icon-ring {
  stroke: currentColor;
  fill: none;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
}
.form-feedback--error.is-visible .form-feedback__icon-ring {
  animation: feedback-draw 0.5s ease forwards 0.05s;
}
.form-feedback--error.is-visible {
  animation: feedback-shake 0.5s ease 0.5s;
}

@keyframes feedback-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes feedback-shake {
  0%, 100% { transform: translateY(0) scale(1) translateX(0); }
  20% { transform: translateY(0) scale(1) translateX(-3px); }
  40% { transform: translateY(0) scale(1) translateX(3px); }
  60% { transform: translateY(0) scale(1) translateX(-2px); }
  80% { transform: translateY(0) scale(1) translateX(2px); }
}

.form-feedback--success { border-color: rgba(63, 107, 74, 0.28); background-color: rgba(63, 107, 74, 0.06); }
.form-feedback--error { border-color: rgba(179, 85, 74, 0.28); background-color: rgba(179, 85, 74, 0.06); }

.form-feedback__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.form-feedback__title { font-size: 14.5px; font-weight: 600; color: var(--color-text); }
.form-feedback__text { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.5; }

.form-feedback__close {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  padding: 4px;
  margin: -4px;
  border-radius: 4px;
  transition: color var(--transition-base), background-color var(--transition-base);
}
.form-feedback__close:hover { color: var(--color-text); background-color: var(--color-accent-soft); }

@media (prefers-reduced-motion: reduce) {
  .form-feedback { transition: opacity 0.2s linear; transform: none !important; }
  .form-feedback--success .form-feedback__icon-ring,
  .form-feedback--success .form-feedback__icon-check,
  .form-feedback--error .form-feedback__icon-ring {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  .form-feedback--error.is-visible { animation: none !important; }
}

/* ---------- 17. FOOTER ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-alt);
  padding-top: 72px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer-brand__logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-brand__tagline {
  font-size: 14.5px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 260px;
  margin: 0 0 24px;
}

.footer-social { display: flex; gap: 10px; }
.footer-social__link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-secondary);
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.footer-social__link:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}
.footer-social__link svg { width: 16px; height: 16px; }

.footer-col__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 18px;
}

.footer-nav, .footer-legal, .footer-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav a, .footer-legal a {
  font-size: 14.5px;
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}
.footer-nav a:hover, .footer-legal a:hover { color: var(--color-accent); }

/* Met en évidence, dans le footer, le lien correspondant à la page légale
   actuellement affichée (remplace l'ancien style="..." inline). */
.footer-legal__active { color: var(--color-accent); font-weight: 600; }

.footer-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.footer-contact__item svg {
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--color-text-secondary);
}
.site-footer__note { font-style: italic; }

/* ---------- 18. ANIMATIONS AU SCROLL ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- 19. RTL (HÉBREU) ---------- */
/* Remarque : .lang-switch__menu utilise `inset-inline-end: 0` (règle de
   base ci-dessus), qui s'inverse déjà automatiquement en RTL grâce aux
   propriétés logiques (inline-end = right en LTR, left en RTL). Aucune
   règle RTL supplémentaire n'est nécessaire ici — en ajouter une qui fixe
   `inset-inline-start` recréerait le bug de débordement horizontal corrigé
   précédemment (le menu s'étendrait hors de l'écran à gauche en hébreu). */
html[dir="rtl"] .relay-connector svg { transform: scaleX(-1); }
html[dir="rtl"] .hero__decor { transform: scaleX(-1); }


/* ---------- 20. STATS SECTION ---------- */
.stats-section{
    padding:80px 0;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.stat-card{
    background:var(--color-bg-card);
    border:1px solid rgba(0,0,0,.06);
    border-radius:24px;
    padding:36px 28px;
    text-align:center;
    transition:.35s ease;
}

.stat-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.stat-icon{
    width:72px;
    height:72px;
    margin:0 auto 24px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(201,169,110,.12);
    color:var(--color-accent);
}

.stat-icon svg{
    width:34px;
    height:34px;
}

.stat-number{
    font-size:3rem;
    line-height:1;
    font-weight:700;
    color:var(--color-accent);
    margin-bottom:14px;
}

.stat-title{
    font-size:1.15rem;
    font-weight:600;
    margin-bottom:12px;
    color:var(--color-text);
}

.stat-text{
    font-size:.95rem;
    line-height:1.7;
    color:var(--color-text-secondary);
}

/* ---------- 21. AUTOFINANCEMENT (SCHÉMA PÉDAGOGIQUE) ---------- */
.autofinance-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  align-items: stretch;
  margin-bottom: 48px;
}

.autofinance-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px;
  position: relative;
}

.autofinance-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: 18px;
  flex-shrink: 0;
}
.autofinance-step__icon svg { width: 26px; height: 26px; }

.autofinance-step__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.autofinance-step__value {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-text);
}

/* Flèche entre chaque étape (masquée sur la dernière via :last-child).
   LTR : bordure bas + droite, rotation -45° => flèche pointant vers la droite.
   RTL : bordure bas + gauche, rotation 45°  => flèche pointant vers la gauche,
   pour suivre le sens naturel de lecture hébreu (droite vers gauche). */
.autofinance-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 46px;
  inset-inline-end: -2px;
  width: 18px;
  height: 18px;
  border-bottom: 1.6px solid var(--color-accent);
  border-right: 1.6px solid var(--color-accent);
  transform: translateY(-50%) rotate(-45deg);
  opacity: 0.55;
}
html[dir="rtl"] .autofinance-step:not(:last-child)::after {
  border-right: none;
  border-left: 1.6px solid var(--color-accent);
  transform: translateY(-50%) rotate(45deg);
}

/* Encadré "exemple illustratif" — reprend le même esprit visuel que
   .section__note pour rester cohérent avec le reste du site, tout en
   étant plus riche visuellement (grille de valeurs chiffrées). */
.autofinance-example {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 36px;
  box-shadow: var(--shadow-soft);
}

.autofinance-example__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.autofinance-example__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.autofinance-example__item {
  text-align: center;
  padding: 16px 8px;
  border-inline-start: 1px solid var(--color-border);
}
.autofinance-example__item:first-child { border-inline-start: none; }

.autofinance-example__number {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-accent-dark);
  margin-bottom: 6px;
  /* Empêche l'algorithme bidirectionnel d'inverser l'ordre des groupes de
     chiffres (ex : "500 000" affiché "000 500") lorsque le texte environnant
     est en hébreu (RTL). Le nombre reste toujours lu de gauche à droite. */
  direction: ltr;
  unicode-bidi: isolate;
}

.autofinance-example__label {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.autofinance-disclaimer {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  font-style: italic;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  margin: 0;
}

/* ---------- 22. COMPARAISON VISUELLE DES TYPES D'INVESTISSEMENT ---------- */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 32px;
}

.comparison-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.comparison-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.comparison-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.comparison-card__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.comparison-card__capital {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--color-accent-dark);
  /* Même correctif que pour l'exemple d'autofinancement : empêche
     l'inversion visuelle des groupes de chiffres en contexte RTL. */
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Donut CSS (conic-gradient) + légende interactive --- */
.comparison-donut-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}

.comparison-donut {
  width: 148px;
  height: 148px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  background: conic-gradient(
    var(--chart-1) 0% calc(var(--seg1) * 1%),
    var(--chart-2) calc(var(--seg1) * 1%) calc(var(--seg2) * 1%),
    var(--chart-3) calc(var(--seg2) * 1%) calc(var(--seg3) * 1%),
    var(--chart-4) calc(var(--seg3) * 1%) calc(var(--seg4) * 1%),
    var(--chart-5) calc(var(--seg4) * 1%) calc(var(--seg5) * 1%)
  );
  position: relative;
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.7s ease, opacity 0.7s ease;
}
.comparison-donut.is-visible { transform: scale(1); opacity: 1; }

.comparison-donut__hole {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background-color: var(--color-bg-card);
  box-shadow: inset 0 0 0 1px var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
}
.comparison-donut__hole-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.comparison-legend {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.comparison-legend__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  transition: background-color var(--transition-base), transform var(--transition-base);
}
.comparison-legend__item:hover {
  background-color: var(--color-accent-soft);
  transform: translateX(4px);
}
html[dir="rtl"] .comparison-legend__item:hover { transform: translateX(-4px); }
.comparison-legend__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Couleurs par segment — remplace les anciens style="background:..." inline
   (nécessaire pour une CSP style-src stricte, sans 'unsafe-inline'). */
.comparison-legend__dot--1 { background-color: var(--chart-1); }
.comparison-legend__dot--2 { background-color: var(--chart-2); }
.comparison-legend__dot--3 { background-color: var(--chart-3); }
.comparison-legend__dot--4 { background-color: var(--chart-4); }
.comparison-legend__dot--5 { background-color: var(--chart-5); }
.comparison-legend__label {
  font-size: 14px;
  color: var(--color-text-secondary);
  flex: 1;
}
.comparison-legend__value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

/* --- Bloc "réalité tangible" (immobilier) --- */
.comparison-realestate {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}
.comparison-realestate__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.comparison-realestate__icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  flex-shrink: 0;
}
.comparison-realestate__icon svg { width: 18px; height: 18px; }
.comparison-realestate__title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.comparison-realestate__text {
  display: block;
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* --- Graphiques stylisés (SVG) --- */
.comparison-chart {
  position: relative;
  background-color: var(--color-bg-alt);
  border-radius: 8px;
  padding: 22px 16px 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.comparison-chart.is-visible { opacity: 1; transform: translateY(0); }

.comparison-chart__badge {
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 100px;
}

/* Les graphiques (courbes de temps) restent toujours orientés de gauche à
   droite, y compris en hébreu : inverser une courbe de croissance créerait
   une confusion visuelle (une pente montante inversée évoque une baisse). */
.comparison-chart__svg {
  direction: ltr;
  width: 100%;
  height: auto;
  display: block;
  margin-top: 4px;
}

.comparison-chart__path {
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
}
.comparison-chart.is-visible .comparison-chart__path {
  animation: comparison-draw 1.5s ease forwards;
}
.comparison-chart__path--volatile { stroke: var(--chart-1); }
.comparison-chart__path--stable { stroke: var(--color-accent-dark); }

.comparison-chart__ticks line {
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.45;
}

@keyframes comparison-draw {
  to { stroke-dashoffset: 0; }
}

.comparison-chart__caption {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  text-align: center;
  margin: 10px 0 0;
}

.comparison-disclaimer {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.7;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .comparison-donut, .comparison-chart { opacity: 1 !important; transform: none !important; }
  .comparison-chart__path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ---------- 23. PAGES LÉGALES ---------- */
.legal-page { padding: 64px 0 var(--space-section-desktop); }
.legal-page .container--narrow { max-width: 760px; }
.legal-page__updated {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  margin: -8px 0 40px;
}
.legal-page h2 {
  font-size: 22px;
  margin: 40px 0 14px;
}
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page p, .legal-page li {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin: 0 0 16px;
}
.legal-page ul { padding-inline-start: 20px; list-style: disc; }
.legal-page ul li { margin-bottom: 10px; }
.legal-page strong { color: var(--color-text); font-weight: 600; }
.legal-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: 32px;
}
.legal-page__back:hover { color: var(--color-accent-dark); }

/* ---------- 24. ACCESSIBILITÉ (LIEN D'ÉVITEMENT) ---------- */
.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 100;
  background-color: var(--color-text);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  transition: top var(--transition-base);
}
.skip-link:focus { top: 16px; }

/* ---------- 25. RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .timeline--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .timeline, .card-grid, .value-grid, .proximity-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__decor { max-width: 260px; margin: 0 auto 24px; order: -1; }
  .relay-diagram { grid-template-columns: 1fr; }
  .relay-connector {
    width: 28px;
    height: 64px;
    margin: 4px auto;
    transform: rotate(90deg);
  }
  .relay-connector svg { width: 28px; height: 64px; }
  html[dir="rtl"] .relay-connector { transform: rotate(90deg) scaleX(-1); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .autofinance-flow { grid-template-columns: repeat(3, 1fr); gap: 24px 0; }
  .autofinance-step:not(:last-child)::after { display: none; }
  .autofinance-example__grid { grid-template-columns: repeat(3, 1fr); }
  .autofinance-example__item:nth-child(4) { border-inline-start: none; }

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

@media (max-width: 720px) {
  :root { --space-section-desktop: var(--space-section-mobile); }
  .hero { padding: 120px 0 var(--space-section-mobile); }
  .hero__title { font-size: 32px; }
  .hero__subtitle { font-size: 17px; }
  .section__title { font-size: 26px; }
  .section__lead { font-size: 16.5px; margin-bottom: 40px; }
  .site-nav { gap: 12px; }
  .site-nav { flex-shrink: 0; }
  .site-nav a:not(.site-nav__cta):not(.lang-switch *) { display: none; }
  .site-nav__cta { padding: 8px 14px; font-size: 14px; }
  .timeline, .timeline--5, .card-grid, .value-grid, .proximity-grid, .stats-grid { grid-template-columns: 1fr; gap: 28px; }
  .form-row { grid-template-columns: 1fr; gap: 16px; }
  .contact-form { padding: 28px 20px; }
  .relay-card { padding: 26px; }
  .card { padding: 24px; }
  .proximity { padding: 22px; }
  .stat-card { padding: 28px 22px; }
  .stat-number { font-size: 2.5rem; }
  .section__note { padding: 18px 20px; }
  .prose p { font-size: 16.5px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
  .footer-brand__tagline { max-width: none; }
  .site-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }

  .autofinance-flow { grid-template-columns: repeat(2, 1fr); }
  .autofinance-flow .autofinance-step:last-child {
    grid-column: 1 / -1;
  }
  .autofinance-example { padding: 26px 20px; }
  .autofinance-example__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .autofinance-example__item:nth-child(3) { border-inline-start: none; }
  .autofinance-example__grid .autofinance-example__item:last-child {
    grid-column: 1 / -1;
    border-inline-start: none;
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
  }
  .comparison-card { padding: 24px 20px; }
  .comparison-donut { width: 124px; height: 124px; }
  .comparison-donut__hole { inset: 16px; }

  .legal-page { padding: 40px 0 var(--space-section-mobile); }
  .legal-page h2 { font-size: 19px; }
  .legal-page p, .legal-page li { font-size: 15px; }
}

@media (max-width: 480px) {
  .logo { font-size: 17px; }
  .lang-switch__current { padding: 6px 8px; font-size: 13px; }
  .lang-switch__menu { min-width: 120px; }

  .hero { padding: 104px 0 var(--space-section-mobile); }
  .hero__title { font-size: 27px; }
  .hero__subtitle { font-size: 15.5px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__decor { max-width: 170px; margin: 0 auto 8px; }
  .badge { font-size: 12.5px; padding: 7px 12px; }

  .section__title { font-size: 23px; }
  .section__lead { font-size: 15.5px; margin-bottom: 32px; }

  .timeline__item { padding-top: 40px; }
  .timeline__marker { width: 38px; height: 38px; font-size: 14px; top: -20px; }
  .relay-card { padding: 20px; }
  .relay-card__title { font-size: 19px; }
  .card { padding: 20px; }
  .proximity { padding: 18px; }

  .contact-form { padding: 22px 16px; }
  .form-field input { padding: 12px 12px; }
  .form-field .iti input { padding-top: 12px; padding-bottom: 12px; }

  .site-footer { padding-top: 48px; }
  .site-footer__bottom { font-size: 12.5px; padding: 20px 0; }

  .autofinance-flow { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .autofinance-step { padding: 18px 10px; }
  .autofinance-step__icon { width: 48px; height: 48px; }
  .autofinance-example__grid { grid-template-columns: 1fr 1fr; }

  .comparison-card { padding: 20px 16px; }
  .comparison-card__header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .comparison-donut-wrap { flex-direction: column; align-items: center; text-align: center; }
  .comparison-legend { width: 100%; }
  .comparison-realestate__item { gap: 12px; }
}

/* Note : les breakpoints de .stats-grid sont désormais alignés sur les
   seuils standards du site (960px / 720px) et intégrés dans les blocs
   @media correspondants ci-dessus, au lieu d'utiliser des seuils
   différents (1100px / 700px) qui créaient une incohérence avec le
   reste des grilles du site. */

/* ---------- 26. SÉLECTEUR TÉLÉPHONE INTERNATIONAL (surcharge du thème intl-tel-input) ---------- */
/* Bibliothèque : intl-tel-input v29.1.2 (auto-hébergée, voir vendor/intl-tel-input/VERSION.md).
   On aligne ses variables CSS (--iti-*) sur la palette du site, et on calque
   l'apparence du champ sur celle des autres <input> du formulaire. */
:root {
  --iti-border-color: var(--color-border);
  --iti-border-width: 1px;
  --iti-country-selector-bg: var(--color-bg-card);
  --iti-hover-color: var(--color-accent-soft);
  --iti-icon-color: var(--color-text-secondary);
  --iti-flag-width: 18px;
}

.form-field .iti { width: 100%; }
.form-field .iti input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-base);
}
.form-field .iti input:focus { border-color: var(--color-accent); outline: none; }

/* Le bouton de sélection de pays doit garder la même hauteur/rayon que le
   champ pour rester visuellement cohérent avec le reste du formulaire. */
.form-field .iti__selected-country {
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
}

/* Remarque RTL : la bibliothèque détecte automatiquement le sens de lecture
   via l'attribut dir hérité du document (html[dir="rtl"], déjà posé par
   i18n.js) et inverse d'elle-même la position du sélecteur de pays — aucune
   règle RTL manuelle n'est nécessaire ici. */

@media (prefers-reduced-motion: reduce) {
  .iti__country-selector, .iti__dropdown { transition: none !important; }
}