/* =====================================================================
   SILKARO SOURCING — Feuille de style globale
   ---------------------------------------------------------------------
   Sommaire :
   1.  Reset & box-model
   2.  Variables (:root) — couleurs, typo, espacements, ombres
   3.  Base (html / body / typographie par défaut)
   4.  Utilitaires de mise en page (.container, .section…)
   5.  Typographie de section (.s-tag, .s-title, .lead…)
   6.  Boutons (.btn et ses variantes)
   7.  Header & navigation (desktop)
   8.  Menu mobile (hamburger + panneau)
   9.  Footer
   10. Composants réutilisables (pills, cartes, KPI…)
   11. Hero (accueil)
   12. FAQ (accordéon)
   13. Formulaire multi-étapes + barre de progression (page devis)
   14. Études de cas
   15. Animations (apparition au scroll + keyframes)
   16. Responsive (media queries)
   ===================================================================== */


/* ============================ 1. RESET ============================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; }


/* ========================== 2. VARIABLES ============================ */
:root {
  /* Couleurs de marque */
  --rouge:        #BF1827;
  --rouge-fonce:  #9E1320;
  --rouge-pale:   #F9ECED;
  --or:           #C8922A;
  --or-pale:      #FDF6EC;

  /* Neutres */
  --encre:   #18130F;   /* texte principal / fonds sombres */
  --gris-f:  #3D3530;   /* texte fort */
  --gris-m:  #7A706A;   /* texte secondaire */
  --gris-c:  #C4BBB5;   /* texte tertiaire / désactivé */
  --fond:    #FAFAF8;   /* fond de page */
  --blanc:   #FFFFFF;
  --bordure: #EAE5E0;

  /* Typographie */
  --font-titre: 'Cormorant Garamond', Georgia, serif;
  --font-texte: 'Outfit', system-ui, sans-serif;
  --font-cn:    'Noto Serif SC', serif;

  /* Rythme & formes */
  --radius:    10px;
  --radius-lg: 16px;
  --ombre:     0 2px 16px rgba(0,0,0,.07);
  --ombre-lg:  0 8px 40px rgba(0,0,0,.10);
  --ombre-rouge: 0 6px 22px rgba(191,24,39,.28);

  /* Largeurs & transitions */
  --max:    1200px;
  --gutter: 5rem;        /* marge horizontale des sections (desktop) */
  --header-h: 64px;
  --t-fast: .18s ease;
  --t-med:  .3s cubic-bezier(.16,1,.3,1);
  --t-slow: .7s cubic-bezier(.16,1,.3,1);
}


/* ============================ 3. BASE ============================== */
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  font-family: var(--font-texte);
  color: var(--encre);
  background: var(--fond);
  line-height: 1.6;
  min-height: 100vh;
  /* Atmosphère subtile : léger halo or/rouge dans les coins */
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(200,146,42,.05), transparent 45%),
    radial-gradient(120% 90% at 0% 100%, rgba(191,24,39,.04), transparent 45%);
  background-attachment: fixed;
}

::selection { background: var(--rouge-pale); color: var(--rouge); }


/* ======================= 4. UTILITAIRES MISE EN PAGE =============== */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.section    { padding-block: 5rem; }
.section--sm { padding-block: 3.5rem; }

/* Filet de séparation entre blocs */
.divider { height: 1px; background: var(--bordure); max-width: var(--max); margin-inline: auto; }

/* Helpers ponctuels */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }


/* ====================== 5. TYPOGRAPHIE DE SECTION ================== */
/* Petit intitulé rouge précédé d'un trait */
.s-tag {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rouge); margin-bottom: .8rem;
}
.s-tag::before { content: ''; width: 22px; height: 1.5px; background: var(--rouge); }
.s-tag--or { color: var(--or); }
.s-tag--or::before { background: var(--or); }

.s-title {
  font-family: var(--font-titre);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700; line-height: 1.12; color: var(--encre); margin-bottom: .8rem;
}
.s-title em { font-style: italic; color: var(--rouge); }

.s-sub { font-size: 1rem; line-height: 1.75; color: var(--gris-m); max-width: 540px; }

.lead { font-size: 1.05rem; line-height: 1.8; color: var(--gris-f); }


/* ============================ 6. BOUTONS ========================== */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.7rem; border-radius: 8px;
  font-size: .88rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform .15s, box-shadow var(--t-fast);
}
.btn:active { transform: translateY(0); }

.btn--rouge { background: var(--rouge); color: var(--blanc); box-shadow: var(--ombre-rouge); }
.btn--rouge:hover { background: var(--rouge-fonce); transform: translateY(-2px); box-shadow: 0 9px 26px rgba(191,24,39,.34); }

.btn--outline { background: transparent; color: var(--encre); border: 1.5px solid var(--bordure); }
.btn--outline:hover { border-color: var(--gris-c); background: var(--blanc); transform: translateY(-2px); }

.btn--ghost { padding-inline: .4rem; color: var(--gris-m); }
.btn--ghost:hover { color: var(--rouge); }

/* Flèche qui glisse au survol */
.btn .arrow { transition: transform var(--t-fast); }
.btn:hover .arrow { transform: translateX(3px); }


/* =================== 7. HEADER & NAVIGATION (desktop) ============= */
.site-header {
  position: sticky; top: 0; z-index: 200;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 3rem;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordure);
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
/* Ombre légère quand on a défilé (classe ajoutée par script.js) */
.site-header.is-scrolled { box-shadow: var(--ombre); background: rgba(255,255,255,.94); }

/* Logo */
.logo {
  display: flex; align-items: baseline; gap: .35rem;
  font-family: var(--font-titre); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.01em; user-select: none;
}
.logo .silk { color: var(--encre); }
.logo .aro  { color: var(--rouge); }
.logo .src  { font-size: .9rem; font-weight: 400; color: var(--gris-m); margin-left: .15rem; }
.logo .cn   { font-family: var(--font-cn); font-size: .8rem; color: var(--gris-c); margin-left: .3rem; }

/* Liens de nav */
.nav { display: flex; align-items: center; gap: .15rem; }
.nav__link {
  position: relative; padding: .45rem .9rem; border-radius: 6px;
  font-size: .82rem; font-weight: 500; letter-spacing: .02em; color: var(--gris-m);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: var(--encre); background: var(--fond); }
.nav__link.is-active { color: var(--rouge); background: var(--rouge-pale); font-weight: 600; }

.header__cta { display: flex; align-items: center; gap: .6rem; }

/* Bouton hamburger (masqué en desktop) */
.burger {
  display: none; width: 40px; height: 40px; border-radius: 8px;
  position: relative; flex: 0 0 40px;
}
.burger span {
  position: absolute; left: 9px; right: 9px; height: 2px; border-radius: 2px;
  background: var(--encre); transition: transform var(--t-med), opacity var(--t-fast), top var(--t-med);
}
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 25px; }
/* État « ouvert » → croix */
.burger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }


/* ===================== 8. MENU MOBILE (panneau) =================== */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 190;
  background: var(--blanc);
  padding: 2rem 1.5rem 3rem;
  display: none; flex-direction: column; gap: .25rem;   /* none par défaut → affiché en mobile */
  transform: translateX(100%);
  transition: transform var(--t-med);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__link {
  padding: 1rem .25rem; font-family: var(--font-titre); font-size: 1.5rem; font-weight: 600;
  color: var(--gris-f); border-bottom: 1px solid var(--bordure);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.mobile-nav__link:hover,
.mobile-nav__link.is-active { color: var(--rouge); padding-left: .6rem; }
.mobile-nav .btn { margin-top: 1.5rem; justify-content: center; }

/* Empêche le défilement du fond quand le menu mobile est ouvert */
body.no-scroll { overflow: hidden; }


/* ============================= 9. FOOTER ========================== */
.site-footer { background: var(--encre); color: rgba(255,255,255,.7); margin-top: 5rem; }
.footer__inner {
  max-width: var(--max); margin-inline: auto; padding: 3.5rem var(--gutter) 2rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
}
.footer__brand .logo .silk { color: var(--blanc); }
.footer__brand .logo .src  { color: rgba(255,255,255,.5); }
.footer__brand p { margin-top: 1rem; font-size: .85rem; line-height: 1.7; max-width: 280px; color: rgba(255,255,255,.55); }
.footer__col h4 {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--or); margin-bottom: 1rem;
}
.footer__col a { display: block; font-size: .85rem; padding: .3rem 0; color: rgba(255,255,255,.7); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--blanc); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding: 1.4rem var(--gutter);
  max-width: var(--max); margin-inline: auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: .78rem; color: rgba(255,255,255,.45);
}


/* ==================== 10. COMPOSANTS RÉUTILISABLES ================ */

/* Pastille d'accroche (or) */
.pill {
  display: inline-flex; align-items: center; gap: .45rem; width: fit-content;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--or); background: var(--or-pale);
  border: 1px solid rgba(200,146,42,.22); padding: .3rem .85rem; border-radius: 100px;
}
.pill .dot { width: 5px; height: 5px; background: var(--or); border-radius: 50%; animation: blink 2s infinite; }

/* Badge */
.badge {
  display: inline-flex; padding: .3rem .85rem; border-radius: 100px;
  font-size: .73rem; font-weight: 500;
  background: var(--or-pale); color: var(--or); border: 1px solid rgba(200,146,42,.2);
}

/* Carte générique */
.card {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius-lg);
  padding: 1.7rem; transition: border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-med);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }

/* Carte secteur */
.sector-card { text-align: center; }
.sector-card:hover { border-color: var(--rouge); box-shadow: 0 6px 24px rgba(191,24,39,.1); }
.sector-card .emoji { font-size: 2.2rem; margin-bottom: .7rem; }
.sector-card h3 { font-family: var(--font-titre); font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem; }
.sector-card p { font-size: .78rem; color: var(--gris-m); line-height: 1.5; }

/* Carte témoignage */
.testi-card { display: flex; flex-direction: column; gap: 1.2rem; }
.testi-card .quote { font-size: .92rem; line-height: 1.7; color: var(--gris-f); font-style: italic; }
.testi-card .author { display: flex; align-items: center; gap: .8rem; }
.testi-av {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  background: var(--rouge-pale); color: var(--rouge);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .85rem;
}
.testi-name { font-weight: 600; font-size: .85rem; }
.testi-role { font-size: .73rem; color: var(--gris-m); }
.stars { color: var(--or); letter-spacing: .08em; font-size: .8rem; }

/* KPI */
.kpi-row { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.kpi__val { font-family: var(--font-titre); font-size: 2.2rem; font-weight: 700; line-height: 1; }
.kpi__val span { color: var(--rouge); }
.kpi__lbl { font-size: .74rem; color: var(--gris-m); margin-top: .3rem; letter-spacing: .03em; }

/* Bandeau partenaires */
.partners { border-block: 1px solid var(--bordure); background: var(--blanc); }
.partners__inner { max-width: var(--max); margin-inline: auto; padding: 2.5rem var(--gutter); }
.partners__label { text-align: center; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-c); margin-bottom: 1.6rem; }
.partners__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem 3.5rem; }
.partner-logo { font-family: var(--font-titre); font-size: 1.2rem; font-weight: 700; color: var(--gris-f); opacity: .55; transition: opacity var(--t-fast); }
.partner-logo span { display: block; font-family: var(--font-texte); font-size: .62rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-c); }
.partner-logo:hover { opacity: 1; }


/* ============================ 11. HERO ============================ */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--header-h)); }
.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 4rem 5rem var(--gutter); border-right: 1px solid var(--bordure);
}
.hero__title {
  font-family: var(--font-titre); font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 700; line-height: 1.08; margin: 1.6rem 0 1.2rem;
}
.hero__title em { font-style: italic; color: var(--rouge); }
.hero__lead { font-size: 1.02rem; line-height: 1.75; color: var(--gris-m); max-width: 430px; margin-bottom: 2.2rem; }
.hero__btns { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero__kpis { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--bordure); }

.hero__visual {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem; position: relative; overflow: hidden;
}
/* Idéogramme « source » en filigrane */
.hero__visual::before {
  content: '源'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-cn); font-size: 24rem; font-weight: 700;
  color: rgba(191,24,39,.045); pointer-events: none; user-select: none;
}

/* Carte « route Chine→France » */
.info-card { position: relative; z-index: 1; width: 100%; max-width: 360px; padding: 2rem; }
.route { display: flex; align-items: center; margin-bottom: 1.6rem; }
.route__city { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.route__flag { width: 44px; height: 44px; border-radius: 50%; background: var(--fond); border: 1.5px solid var(--bordure); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.route__name { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-m); }
.route__mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; margin: 0 .8rem; }
.route__line { width: 100%; height: 1px; background: repeating-linear-gradient(90deg, var(--gris-c) 0 5px, transparent 5px 10px); }
.route__plane { font-size: 1rem; }
.route__dur { font-size: .65rem; color: var(--gris-c); }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.4rem; }
.mini-cell { background: var(--fond); border: 1px solid var(--bordure); border-radius: 8px; padding: .75rem .9rem; }
.mini-cell .v { font-family: var(--font-titre); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.mini-cell .v.red { color: var(--rouge); }
.mini-cell .l { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-m); margin-top: .15rem; }
.info-card__foot { display: flex; align-items: center; justify-content: center; gap: .5rem; padding-top: 1.2rem; border-top: 1px solid var(--bordure); font-size: .75rem; color: var(--gris-m); }


/* ============================ 12. FAQ ============================= */
.faq { max-width: 720px; }
.faq__item { border-bottom: 1px solid var(--bordure); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; text-align: left; }
.faq__q-text { font-family: var(--font-titre); font-size: 1.12rem; font-weight: 600; }
.faq__arrow { width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid var(--bordure); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gris-m); transition: transform var(--t-med), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.faq__item.is-open .faq__arrow { transform: rotate(45deg); background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }
.faq__a { max-height: 0; overflow: hidden; font-size: .9rem; line-height: 1.75; color: var(--gris-m); transition: max-height var(--t-med), padding var(--t-fast); }
.faq__item.is-open .faq__a { max-height: 320px; padding-bottom: 1.3rem; }


/* ========= 13. FORMULAIRE MULTI-ÉTAPES (page devis.html) ========== */
/* Barre de progression */
.steps-bar { display: flex; align-items: center; margin-bottom: 2.5rem; }
.steps-bar__step { display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; flex: 0 0 auto; }
.steps-bar__dot {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titre); font-weight: 700; font-size: 1rem;
  background: var(--blanc); border: 2px solid var(--bordure); color: var(--gris-c);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.steps-bar__label { font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: var(--gris-c); white-space: nowrap; }
.steps-bar__line { flex: 1; height: 2px; background: var(--bordure); margin: 0 .6rem; position: relative; top: -10px; }
.steps-bar__line::after { content: ''; position: absolute; inset: 0; width: 0; background: var(--rouge); transition: width var(--t-med); }
/* États pilotés par script.js */
.steps-bar__step.is-active .steps-bar__dot { border-color: var(--rouge); color: var(--rouge); }
.steps-bar__step.is-active .steps-bar__label { color: var(--rouge); }
.steps-bar__step.is-done .steps-bar__dot { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.steps-bar__step.is-done .steps-bar__label { color: var(--gris-f); }
.steps-bar__line.is-filled::after { width: 100%; }

/* Panneaux d'étape */
.form-step { display: none; animation: fadeUp .35s ease; }
.form-step.is-active { display: block; }

/* Champs */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.f-full { grid-column: 1 / -1; }
.f-group { display: flex; flex-direction: column; gap: .4rem; }
.f-label { font-size: .73rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gris-f); }
.f-label .req { color: var(--rouge); margin-left: .15rem; }
.f-input, .f-select, .f-textarea {
  width: 100%; padding: .72rem .9rem; border-radius: 7px;
  background: var(--fond); border: 1.5px solid var(--bordure);
  font-family: var(--font-texte); font-size: .9rem; color: var(--encre);
  outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance: none; appearance: none;
}
.f-input:focus, .f-select:focus, .f-textarea:focus {
  border-color: var(--rouge); background: var(--blanc); box-shadow: 0 0 0 3px rgba(191,24,39,.09);
}
.f-textarea { resize: vertical; min-height: 100px; }
.f-input.has-error, .f-select.has-error { border-color: var(--rouge); background: var(--rouge-pale); }

/* Cases à cocher / options */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.check-opt { display: flex; align-items: center; gap: .65rem; padding: .65rem .9rem; border-radius: 7px; background: var(--fond); border: 1.5px solid var(--bordure); cursor: pointer; user-select: none; transition: border-color var(--t-fast), background var(--t-fast); }
.check-opt:hover { border-color: var(--gris-c); }
.check-opt.is-checked { border-color: var(--rouge); background: var(--rouge-pale); }
.check-box { width: 18px; height: 18px; flex: 0 0 18px; border: 2px solid var(--gris-c); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--blanc); transition: background var(--t-fast), border-color var(--t-fast); }
.check-opt.is-checked .check-box { background: var(--rouge); border-color: var(--rouge); }
.check-label { font-size: .82rem; color: var(--gris-f); }

/* Cartes formule (radio) */
.plan-card { position: relative; cursor: pointer; border: 2px solid var(--bordure); }
.plan-card.is-selected { border-color: var(--rouge); box-shadow: 0 4px 20px rgba(191,24,39,.12); }
.plan-badge { position: absolute; top: -10px; right: 14px; background: var(--or); color: var(--blanc); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 100px; }
.plan-name { font-family: var(--font-titre); font-size: 1.15rem; font-weight: 700; }
.plan-price { font-family: var(--font-titre); font-size: 1.5rem; font-weight: 700; color: var(--rouge); line-height: 1; }

/* Navigation entre étapes */
.form-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }

/* Écran de succès */
.form-success { display: none; text-align: center; padding: 4rem 2rem; }
.form-success.is-shown { display: block; animation: fadeUp .4s ease; }
.form-success .check { width: 72px; height: 72px; margin: 0 auto 1.2rem; border-radius: 50%; background: var(--rouge-pale); color: var(--rouge); display: flex; align-items: center; justify-content: center; font-size: 2rem; }


/* ======================= 14. ÉTUDES DE CAS ======================== */
.case-card { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0; overflow: hidden; padding: 0; }
.case-card__media { background: var(--encre); color: var(--blanc); padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; position: relative; }
.case-card__media .sector { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.case-card__media .emoji { font-size: 3.5rem; }
.case-card__body { padding: 2.5rem; }
.case-card__body h3 { font-family: var(--font-titre); font-size: 1.5rem; font-weight: 700; margin-bottom: .6rem; }
.case-card__body p { font-size: .9rem; line-height: 1.7; color: var(--gris-m); }
.case-metrics { display: flex; gap: 2rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bordure); }
.case-metric .v { font-family: var(--font-titre); font-size: 1.8rem; font-weight: 700; color: var(--rouge); line-height: 1; }
.case-metric .l { font-size: .7rem; color: var(--gris-m); margin-top: .25rem; }

/* Visuel sombre : dégradé + grand idéogramme en filigrane (touche premium) */
.case-card__media { background-image: radial-gradient(120% 100% at 0% 0%, rgba(200,146,42,.14), transparent 55%); }
.case-card__media::after {
  content: '源'; position: absolute; right: -.4rem; bottom: -3rem;
  font-family: var(--font-cn); font-size: 9rem; font-weight: 700;
  color: rgba(255,255,255,.05); pointer-events: none; line-height: 1;
}
.case-card__media .product { font-family: var(--font-titre); font-size: 1.4rem; font-weight: 700; color: var(--blanc); margin-top: .6rem; position: relative; z-index: 1; }
.case-card__media .client { font-size: .78rem; color: rgba(255,255,255,.55); margin-top: .4rem; position: relative; z-index: 1; }

/* Mise en page alternée (un cas sur deux : visuel à droite) */
.case-card--reverse { grid-template-columns: 1.3fr 1fr; }
.case-card--reverse .case-card__media { order: 2; }

/* Blocs Défi / Solution */
.case-block { margin-bottom: 1.1rem; }
.case-block__label { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem; display: flex; align-items: center; gap: .4rem; }
.case-block__label.defi { color: var(--gris-m); }
.case-block__label.solution { color: var(--rouge); }
.case-block__label.solution::before { content: ''; width: 14px; height: 1.5px; background: var(--rouge); }
.case-block p { font-size: .88rem; line-height: 1.65; color: var(--gris-f); }


/* ============= 14b. OUTILS (calculateur + comparatif) ============ */

/* — Calculateur d'économies (carte sombre) — */
.calc { background: var(--encre); color: var(--blanc); border-radius: var(--radius-lg); padding: 2.5rem; }
.calc__title { font-family: var(--font-titre); font-size: 1.5rem; font-weight: 700; color: var(--blanc); margin-bottom: .3rem; }
.calc__sub { font-size: .88rem; color: rgba(255,255,255,.5); margin-bottom: 2rem; }
.calc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }

/* Curseurs */
.calc__control { margin-bottom: 1.8rem; }
.calc__control:last-child { margin-bottom: 0; }
.calc__control-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7rem; }
.calc__control-label { font-size: .8rem; color: rgba(255,255,255,.6); }
.calc__control-value { font-family: var(--font-titre); font-size: 1.2rem; font-weight: 700; color: var(--or); }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.15); outline: none; cursor: pointer; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--rouge); border: 3px solid var(--blanc); cursor: pointer; transition: transform var(--t-fast); }
.range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--rouge); border: 3px solid var(--blanc); cursor: pointer; }

/* Résultats du calcul */
.calc__results { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 1.8rem; }
.calc__result-row { display: flex; justify-content: space-between; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.calc__result-row:last-child { border-bottom: none; }
.calc__result-label { font-size: .82rem; color: rgba(255,255,255,.6); }
.calc__result-val { font-family: var(--font-titre); font-size: 1.25rem; font-weight: 700; color: var(--blanc); }
.calc__result-row.highlight { margin-top: .5rem; padding-top: 1.2rem; border-top: 2px solid var(--or); }
.calc__result-row.highlight .calc__result-label { color: var(--or); font-weight: 600; }
.calc__result-row.highlight .calc__result-val { color: var(--or); font-size: 1.9rem; }

/* — Tableau comparatif — */
.compare { width: 100%; border-collapse: collapse; }
.compare th { padding: .9rem 1.2rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-m); text-align: left; border-bottom: 2px solid var(--bordure); }
.compare th.hl { background: var(--rouge); color: var(--blanc); border-radius: 8px 8px 0 0; text-align: center; }
.compare td { padding: .85rem 1.2rem; font-size: .88rem; color: var(--gris-f); border-bottom: 1px solid var(--bordure); }
.compare td.center { text-align: center; }
.compare td.hl { background: var(--rouge-pale); text-align: center; font-weight: 600; color: var(--rouge); }
.compare tr:hover td { background: rgba(0,0,0,.02); }
.compare tr:hover td.hl { background: #F3D8DB; }
.ico-yes { color: #2D7D46; font-weight: 700; }
.ico-no  { color: var(--gris-c); }
.ico-warn { color: var(--or); }


/* ============= 14c. SERVICES (onglets verticaux) ================= */
.services-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; margin-top: 3rem; }

/* Menu d'onglets (colonne gauche, collante) */
.srv-menu { display: flex; flex-direction: column; gap: .3rem; position: sticky; top: calc(var(--header-h) + 1.5rem); height: fit-content; }
.srv-tab { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; text-align: left; border: 1.5px solid transparent; border-radius: var(--radius); transition: background var(--t-fast), border-color var(--t-fast); }
.srv-tab:hover { background: var(--fond); border-color: var(--bordure); }
.srv-tab.is-active { background: var(--rouge-pale); border-color: rgba(191,24,39,.2); }
.srv-tab .ico { width: 38px; height: 38px; flex: 0 0 38px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: background var(--t-fast), border-color var(--t-fast); }
.srv-tab.is-active .ico { background: var(--rouge); border-color: var(--rouge); }
.srv-tab .name { font-size: .86rem; font-weight: 500; color: var(--gris-f); }
.srv-tab.is-active .name { color: var(--rouge); font-weight: 600; }

/* Panneaux de contenu (colonne droite) */
.srv-panel { display: none; }
.srv-panel.is-active { display: block; animation: fadeUp .3s ease; }   /* fondu au changement d'onglet */

.srv-hero { display: flex; align-items: flex-start; gap: 1.5rem; padding: 2rem; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius-lg); margin-bottom: 1.5rem; }
.srv-hero__icon { font-size: 2.2rem; width: 64px; height: 64px; flex: 0 0 64px; background: var(--rouge-pale); border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.srv-hero__title { font-family: var(--font-titre); font-size: 1.6rem; font-weight: 700; margin-bottom: .4rem; }
.srv-hero__desc { font-size: .9rem; line-height: 1.7; color: var(--gris-m); }

.srv-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.srv-feat { display: flex; align-items: flex-start; gap: .8rem; padding: 1.2rem 1.4rem; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius); }
.srv-feat__dot { width: 8px; height: 8px; flex: 0 0 8px; background: var(--rouge); border-radius: 50%; margin-top: .4rem; }
.srv-feat__title { font-weight: 600; font-size: .88rem; margin-bottom: .2rem; }
.srv-feat__desc { font-size: .8rem; color: var(--gris-m); line-height: 1.55; }

.srv-badges { display: flex; flex-wrap: wrap; gap: .6rem; }


/* ============= 14d. MÉTHODE (process en étapes) ================== */
.process { position: relative; margin-top: 3rem; }
/* Ligne verticale pointillée rouge reliant les étapes (centrée sur les pastilles) */
.process::before {
  content: ''; position: absolute; left: 27px; top: 40px; bottom: 40px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--rouge) 0 6px, transparent 6px 14px);
}
.proc-step { display: flex; gap: 2rem; padding: 1.5rem 0; position: relative; }
.proc-num {
  width: 56px; height: 56px; flex: 0 0 56px;
  background: var(--blanc); border: 2px solid var(--rouge); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titre); font-size: 1.3rem; font-weight: 700; color: var(--rouge);
  position: relative; z-index: 1;
  transition: background var(--t-fast), color var(--t-fast);
}
.proc-step:hover .proc-num { background: var(--rouge); color: var(--blanc); }
.proc-body { padding-top: .4rem; }
.proc-title { font-family: var(--font-titre); font-size: 1.35rem; font-weight: 700; margin-bottom: .35rem; }
.proc-desc { font-size: .92rem; line-height: 1.7; color: var(--gris-m); max-width: 600px; }
.proc-delay {
  display: inline-block; margin-top: .7rem;
  font-size: .72rem; font-weight: 600; color: var(--or);
  background: var(--or-pale); border: 1px solid rgba(200,146,42,.2);
  padding: .2rem .7rem; border-radius: 100px;
}

/* Blocs de réassurance */
.reassure-card .ico { font-size: 1.8rem; margin-bottom: .7rem; }
.reassure-card h3 { font-family: var(--font-titre); font-size: 1.15rem; font-weight: 700; margin-bottom: .4rem; }
.reassure-card p { font-size: .84rem; color: var(--gris-m); line-height: 1.6; }


/* ============= 14e. À PROPOS (histoire, équipe, bureaux) ========= */

/* Mise en page asymétrique : visuel + contenu */
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3.5rem; margin-top: 3rem; align-items: center; }

/* Bloc visuel superposé */
.about-photo-stack { position: relative; }
.about-photo-main {
  background: var(--encre);
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(191,24,39,.28), transparent 55%);
  border-radius: var(--radius-lg); min-height: 440px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--blanc); position: relative;
}
.about-photo-main::before {
  content: '上海'; position: absolute; left: -.5rem; bottom: -2rem;
  font-family: var(--font-cn); font-size: 8.5rem; font-weight: 700;
  color: rgba(255,255,255,.06); line-height: 1; pointer-events: none;
}
.about-photo-main .pm-flag { font-size: 3rem; margin-bottom: .5rem; }
.about-photo-main .pm-city { font-family: var(--font-titre); font-size: 1.4rem; color: rgba(255,255,255,.7); }
.about-photo-main .pm-sub { font-size: .75rem; color: rgba(255,255,255,.4); letter-spacing: .1em; margin-top: .2rem; }

/* Encart superposé "28 experts" */
.about-photo-accent {
  position: absolute; right: -1.2rem; bottom: -1.2rem;
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius-lg);
  box-shadow: var(--ombre-lg); padding: 1.4rem 1.7rem; text-align: center; min-width: 150px; z-index: 2;
}
.about-team-val { font-family: var(--font-titre); font-size: 2.6rem; font-weight: 700; color: var(--rouge); line-height: 1; }
.about-team-lbl { font-size: .75rem; color: var(--gris-m); margin-top: .2rem; }

/* Contenu : intro + 4 piliers */
.about-lead { font-size: 1.05rem; line-height: 1.8; color: var(--gris-f); margin-bottom: 1.8rem; }
.about-values { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.8rem; }
.about-values li { display: flex; gap: 1rem; align-items: flex-start; }
.about-val-icon { font-size: 1.3rem; width: 44px; height: 44px; flex: 0 0 44px; background: var(--rouge-pale); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.about-val-text strong { display: block; font-size: .95rem; margin-bottom: .2rem; color: var(--encre); }
.about-val-text span { font-size: .85rem; line-height: 1.6; color: var(--gris-m); }

/* Grille des bureaux */
.bureaux-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.bureau-card { background: var(--blanc); border: 1.5px solid var(--bordure); border-radius: var(--radius); padding: 1.5rem 1.3rem; text-align: center; transition: border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-med); }
.bureau-card:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
/* Sièges (Shanghai & Paris) mis en valeur */
.bureau-card.main { border-color: var(--rouge); background: var(--rouge-pale); }
.bureau-flag { font-size: 1.8rem; margin-bottom: .5rem; }
.bureau-city { font-family: var(--font-titre); font-size: 1.15rem; font-weight: 700; margin-bottom: .25rem; }
.bureau-card.main .bureau-city { color: var(--rouge); }
.bureau-role { font-size: .75rem; color: var(--gris-m); line-height: 1.5; }


/* ===================== 14f. CONTACT ============================= */
.contact-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.5rem; }
.contact-flag { font-size: 2.4rem; width: 60px; height: 60px; flex: 0 0 60px; background: var(--fond); border: 1px solid var(--bordure); border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.contact-city { font-family: var(--font-titre); font-size: 1.4rem; font-weight: 700; }
.contact-city-sub { font-size: .85rem; color: var(--gris-m); }
.contact-infos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
.contact-info { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; line-height: 1.55; color: var(--gris-f); }
.contact-info .ci-ico { font-size: 1.1rem; flex: 0 0 auto; }
.contact-info strong { display: block; color: var(--encre); margin-bottom: .1rem; }
.contact-info a { color: var(--rouge); }
.contact-info a:hover { text-decoration: underline; }

/* Petites cartes des bureaux chinois (réutilise .bureau-card centré) */
.office-contact { font-size: .78rem; margin-top: .6rem; line-height: 1.6; }
.office-contact a { color: var(--rouge); }
.office-contact a:hover { text-decoration: underline; }


/* ===================== 15. ANIMATIONS / SCROLL ==================== */
/* Apparition au scroll — activée par IntersectionObserver (classe .is-visible) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow), transform var(--t-slow); transition-delay: var(--reveal-delay, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes blink  { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ========================== 16. RESPONSIVE ======================= */
@media (max-width: 1024px) {
  :root { --gutter: 2.5rem; }
  .hero { grid-template-columns: 1fr; }
  .hero__text { border-right: none; border-bottom: 1px solid var(--bordure); }
  .hero__visual { min-height: 420px; }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .bureaux-grid { grid-template-columns: repeat(3, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* Bascule desktop → mobile : on cache la nav inline, on montre le hamburger */
  .nav { display: none; }
  .header__cta .btn--text-cta { display: none; }   /* on garde le hamburger seul */
  .burger { display: block; }
  .mobile-nav { display: flex; }                    /* affiché seulement en mobile */
  .site-header { padding-inline: 1.25rem; }

  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr !important; }
  .form-grid, .check-grid { grid-template-columns: 1fr; }
  .calc__grid { grid-template-columns: 1fr; }

  /* Services : menu d'onglets en bandeau horizontal scrollable */
  .services-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .srv-menu { position: static; flex-direction: row; overflow-x: auto; padding-bottom: .5rem; }
  .srv-tab { flex: 0 0 auto; white-space: nowrap; }
  .srv-tab .name { font-size: .8rem; }
  .srv-features { grid-template-columns: 1fr; }
  .srv-hero { flex-direction: column; gap: 1rem; }
  .proc-step { gap: 1.2rem; }
  .bureaux-grid { grid-template-columns: repeat(2, 1fr); }
  .about-photo-stack { margin-bottom: 1.5rem; }
  .about-photo-accent { right: .5rem; bottom: -1rem; padding: 1.1rem 1.3rem; }
  .contact-infos { grid-template-columns: 1fr; }
  .case-card { grid-template-columns: 1fr; }
  .case-card--reverse { grid-template-columns: 1fr; }
  .case-card--reverse .case-card__media { order: 0; }   /* visuel toujours au-dessus en mobile */
  .steps-bar__label { display: none; }   /* on garde juste les pastilles numérotées */
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .kpi-row { gap: 1.5rem 2rem; }
}

/* Grilles génériques utilisées dans les pages */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } }


/* =====================================================================
   17. AJOUTS — Thème sombre, sélecteur de langue, espaces client/admin
   (bloc ajouté : ne modifie pas les sections existantes)
   ===================================================================== */

/* ---------- 17a. THÈME SOMBRE ---------------------------------------
   Le site est entièrement piloté par variables : on redéfinit les
   neutres sous [data-theme="dark"]. Les couleurs de marque (rouge/or)
   restent identiques.                                                  */
:root { color-scheme: light; }

[data-theme="dark"] {
  color-scheme: dark;
  --rouge-pale:  #2c161a;   /* teinte sombre pour fonds "actifs" */
  --or-pale:     #2a2113;
  --encre:   #F3EEE6;       /* devient la couleur de TEXTE principale */
  --gris-f:  #E0D8CE;
  --gris-m:  #A99E92;
  --gris-c:  #6E645B;
  --fond:    #14110D;       /* fond de page */
  --blanc:   #1E1812;       /* surfaces / cartes */
  --bordure: #322B23;
  --ombre:     0 2px 16px rgba(0,0,0,.55);
  --ombre-lg:  0 10px 44px rgba(0,0,0,.65);
  --ombre-rouge: 0 6px 22px rgba(191,24,39,.45);
}

/* Transition douce lors du basculement de thème */
body, .site-header, .card, .f-input, .f-select, .f-textarea, .nav__link,
.site-footer, .partners, .mobile-nav { transition: background-color var(--t-med), border-color var(--t-med), color var(--t-med); }

/* Surfaces qui étaient "encre" (sombres) en clair → restent sombres */
[data-theme="dark"] .site-header { background: rgba(20,16,12,.82); border-bottom-color: var(--bordure); }
[data-theme="dark"] .site-header.is-scrolled { background: rgba(20,16,12,.95); }
[data-theme="dark"] .site-footer { background: #0E0B08; }
[data-theme="dark"] .footer__brand .logo .silk { color: #F3EEE6; }
[data-theme="dark"] .case-card__media,
[data-theme="dark"] .calc,
[data-theme="dark"] .about-photo-main { background: #0E0B08; }
[data-theme="dark"] ::selection { background: var(--rouge); color: #fff; }
[data-theme="dark"] .partner-logo { color: var(--gris-f); }
[data-theme="dark"] img.has-photo { filter: brightness(.85) contrast(1.05); }

/* ---------- 17b. BANNIÈRE D'APPEL À L'ACTION (ex-style inline) ------
   Remplace l'ancien style inline "background:var(--encre)" pour rester
   sombre dans les deux thèmes.                                         */
.cta-banner {
  background: #18130F; color: #fff;
  text-align: center; padding: 3.5rem 2rem; border: none;
}
[data-theme="dark"] .cta-banner { background: #0E0B08; border: 1px solid var(--bordure); }
.cta-banner h2 { color: #fff !important; }
.cta-banner em { color: var(--or) !important; font-style: italic; }
.cta-banner p  { color: rgba(255,255,255,.62) !important; }

/* ---------- 17c. CONTRÔLES D'EN-TÊTE (langue + thème) --------------- */
.header__controls { display: flex; align-items: center; gap: .5rem; }

.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 100px;
  background: var(--fond); border: 1px solid var(--bordure);
}
.lang-btn {
  font-family: var(--font-texte); font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .3rem .55rem; border-radius: 100px; color: var(--gris-m);
  line-height: 1; transition: color var(--t-fast), background var(--t-fast);
}
.lang-btn[data-lang="zh"] { font-family: var(--font-cn); font-size: .82rem; }
.lang-btn:hover { color: var(--encre); }
.lang-btn.is-active { background: var(--rouge); color: #fff; box-shadow: var(--ombre-rouge); }

.theme-toggle {
  width: 36px; height: 36px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bordure); background: var(--fond);
  color: var(--gris-f); font-size: 1rem;
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.theme-toggle:hover { color: var(--or); border-color: var(--gris-c); transform: translateY(-1px); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: inline; }
[data-theme="dark"] .theme-toggle .sun  { display: inline; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

/* Réplique compacte des contrôles dans le menu mobile */
.mobile-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bordure);
}
.mobile-controls .lang-switch { background: var(--blanc); }

/* En desktop, on masque le bloc de contrôles mobile */
@media (min-width: 769px) { .mobile-controls { display: none; } }
@media (max-width: 768px) {
  .header__cta .lang-switch { display: none; }   /* déplacé dans le menu mobile */
}

/* ---------- 17d. AUTHENTIFICATION (client + admin) ----------------- */
.auth-wrap { max-width: 440px; margin: 4rem auto; padding-inline: 1.25rem; }
.auth-card { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius-lg); box-shadow: var(--ombre-lg); padding: 2.4rem 2rem; }
.auth-card h1 { font-family: var(--font-titre); font-size: 1.9rem; font-weight: 700; margin-bottom: .3rem; }
.auth-card .auth-sub { font-size: .9rem; color: var(--gris-m); margin-bottom: 1.6rem; line-height: 1.6; }
.auth-tabs { display: flex; gap: .3rem; margin-bottom: 1.6rem; background: var(--fond); padding: 4px; border-radius: 10px; border: 1px solid var(--bordure); }
.auth-tab { flex: 1; text-align: center; padding: .55rem; border-radius: 7px; font-size: .82rem; font-weight: 600; color: var(--gris-m); transition: background var(--t-fast), color var(--t-fast); }
.auth-tab.is-active { background: var(--blanc); color: var(--rouge); box-shadow: var(--ombre); }
.auth-card .f-group { margin-bottom: 1rem; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: .4rem; }
.auth-hint { margin-top: 1.3rem; font-size: .78rem; color: var(--gris-m); text-align: center; line-height: 1.6; background: var(--or-pale); border: 1px solid rgba(200,146,42,.25); border-radius: 8px; padding: .7rem .8rem; }
.auth-hint code { font-family: ui-monospace, monospace; color: var(--rouge); font-weight: 600; }
.auth-error { display: none; background: var(--rouge-pale); color: var(--rouge); font-size: .82rem; padding: .6rem .8rem; border-radius: 7px; margin-bottom: 1rem; border: 1px solid rgba(191,24,39,.25); }
.auth-error.is-shown { display: block; }

/* ---------- 17e. TABLEAU DE BORD (dashboard client/admin) ---------- */
.dash { max-width: var(--max); margin-inline: auto; padding: 2.5rem var(--gutter) 4rem; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.dash-head h1 { font-family: var(--font-titre); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; }
.dash-head p { font-size: .9rem; color: var(--gris-m); margin-top: .2rem; }
.dash-user { display: flex; align-items: center; gap: .8rem; }
.dash-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--rouge-pale); color: var(--rouge); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9rem; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.2rem; }
.stat-card { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; }
.stat-card .stat-val { font-family: var(--font-titre); font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-card .stat-val.red { color: var(--rouge); }
.stat-card .stat-val.gold { color: var(--or); }
.stat-card .stat-lbl { font-size: .76rem; color: var(--gris-m); margin-top: .4rem; letter-spacing: .03em; }

.dash-section-title { font-family: var(--font-titre); font-size: 1.4rem; font-weight: 700; margin: 2rem 0 1rem; display: flex; align-items: center; gap: .6rem; }
.dash-section-title .count { font-family: var(--font-texte); font-size: .7rem; font-weight: 600; background: var(--rouge-pale); color: var(--rouge); padding: .15rem .55rem; border-radius: 100px; }

/* Carte "demande / devis" (vue client) */
.req-list { display: flex; flex-direction: column; gap: 1rem; }
.req-card { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius-lg); padding: 1.4rem 1.6rem; transition: border-color var(--t-fast), box-shadow var(--t-med); }
.req-card:hover { border-color: var(--gris-c); box-shadow: var(--ombre); }
.req-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.req-ref { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--gris-m); letter-spacing: .03em; }
.req-title { font-family: var(--font-titre); font-size: 1.25rem; font-weight: 700; margin: .2rem 0; }
.req-meta { font-size: .82rem; color: var(--gris-m); display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .4rem; }
.req-meta b { color: var(--gris-f); font-weight: 600; }

/* Étiquette de statut */
.status-tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 600; padding: .3rem .7rem; border-radius: 100px; white-space: nowrap; }
.status-tag .sdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-recu        { background: rgba(122,112,106,.14); color: var(--gris-m); }
.status-analyse     { background: var(--or-pale); color: var(--or); }
.status-devis_envoye{ background: rgba(46,120,210,.12); color: #2E78D2; }
.status-accepte     { background: rgba(34,150,90,.14); color: #229650; }
.status-refuse      { background: var(--rouge-pale); color: var(--rouge); }
.status-production  { background: var(--or-pale); color: var(--or); }
.status-controle    { background: rgba(46,120,210,.12); color: #2E78D2; }
.status-expedition  { background: rgba(140,90,200,.14); color: #8C5AC8; }
.status-livre       { background: rgba(34,150,90,.14); color: #229650; }

/* Frise de progression (timeline horizontale) */
.timeline { display: flex; align-items: center; margin-top: 1.2rem; }
.timeline__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; position: relative; text-align: center; }
.timeline__dot { width: 26px; height: 26px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--bordure); color: var(--gris-c); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; z-index: 2; }
.timeline__lbl { font-size: .66rem; color: var(--gris-c); max-width: 80px; line-height: 1.3; }
.timeline__bar { position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--bordure); z-index: 1; }
.timeline__step:last-child .timeline__bar { display: none; }
.timeline__step.done .timeline__dot { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.timeline__step.done .timeline__lbl { color: var(--gris-f); }
.timeline__step.done .timeline__bar { background: var(--rouge); }
.timeline__step.current .timeline__dot { border-color: var(--rouge); color: var(--rouge); box-shadow: 0 0 0 4px var(--rouge-pale); }
.timeline__step.current .timeline__lbl { color: var(--rouge); font-weight: 600; }

/* Tableau admin */
.table-wrap { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--radius-lg); background: var(--blanc); }
.dash-table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 720px; }
.dash-table th { text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-m); padding: .9rem 1rem; border-bottom: 1px solid var(--bordure); white-space: nowrap; }
.dash-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table tr:hover td { background: var(--fond); }
.dash-table .t-ref { font-family: ui-monospace, monospace; font-size: .76rem; color: var(--gris-m); }
.dash-table .t-name { font-weight: 600; }
.dash-table .t-sub { font-size: .74rem; color: var(--gris-m); }
.status-select { font-family: var(--font-texte); font-size: .8rem; padding: .4rem .6rem; border-radius: 7px; border: 1.5px solid var(--bordure); background: var(--fond); color: var(--encre); cursor: pointer; }
.status-select:focus { outline: none; border-color: var(--rouge); }

.dash-toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem; }
.dash-search { flex: 1; min-width: 200px; max-width: 360px; }
.filter-chip { font-size: .78rem; font-weight: 600; padding: .4rem .8rem; border-radius: 100px; border: 1.5px solid var(--bordure); color: var(--gris-m); transition: all var(--t-fast); }
.filter-chip.is-active { background: var(--encre); color: var(--blanc); border-color: var(--encre); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--gris-m); }
.empty-state .emoji { font-size: 2.5rem; margin-bottom: .8rem; }

.btn--small { padding: .5rem .95rem; font-size: .8rem; }

@media (max-width: 768px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .timeline__lbl { display: none; }
  .dash { padding-inline: 1.25rem; }
}