/* =========================================================
   Kweedee - design system
   Aucune librairie CSS. Tout est ici.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Couleurs */
  --bg:          #0a0a0a;
  --bg-elevated: #111111;
  --bg-card:     #141414;
  --border:      #232323;
  --border-soft: #1b1b1b;

  --red:         #E8404A;   /* accent Kweedee (site live: #E63946) */
  --red-hover:   #FF4D5A;
  --red-dim:     rgba(232, 64, 74, 0.12);

  --text:        #ffffff;
  --text-muted:  #a1a1a1;
  --text-dim:    #6b6b6b;

  --green:       #2ecc71;
  --amber:       #f0ad4e;

  /* Typo */
  --font:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --max:     1400px;
  --radius:  14px;
  --radius-sm: 9px;
  --nav-h:   84px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

::selection { background: var(--red); color: #fff; }

/* ---------- Layout helpers ---------- */

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section   { padding: 110px 0; border-top: 1px solid var(--border-soft); }
.section--tight { padding: 72px 0; }
.center    { text-align: center; }
.stack-24 > * + * { margin-top: 24px; }
.stack-16 > * + * { margin-top: 16px; }
.hidden    { display: none !important; }

/* ---------- Typo ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; font-weight: 800; }

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }

.lead      { font-size: 1.2rem; color: var(--text-muted); max-width: 780px; }
.muted     { color: var(--text-muted); }
.dim       { color: var(--text-dim); font-size: 0.9rem; }
.accent    { color: var(--red); }
.mono      { font-family: var(--mono); }

.section-head { max-width: 960px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; }

/* ---------- Logo ----------
   Le vrai logo Kweedee, en image. Pas de reconstitution en texte. */

/* flex-shrink: 0 est indispensable : sans lui, flexbox écrase le logo
   horizontalement dès que la place manque (le bug vu sur mobile). */
/* Le fichier est recadré au plus juste : la hauteur ci-dessous est donc
   celle du texte lui-même, plus aucun vide autour.
   flex-shrink: 0 empêche flexbox de l'écraser quand la place manque. */
/* Le fichier source ne fait que 119x26 px : au-delà de cette taille il devient
   flou, et sur un écran Retina il l'est déjà. Tant que Cyril n'a pas fourni un
   SVG ou un PNG large, on reste au plus près de la taille native. */
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { height: 26px; width: auto; flex-shrink: 0; }

@media (max-width: 900px) {
  .logo img { height: 22px; }
}

/* ---------- Nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  font-size: 0.9rem; font-weight: 500; color: var(--text-muted);
  transition: color 0.18s;
}
.nav__links a:hover { color: var(--text); }
.nav__links a.current { color: var(--text); font-weight: 700; }

/* Un bouton reste un bouton, même dans le menu.
   Sans ces règles, `.nav__links a` (plus spécifique que `.btn--primary`)
   lui impose le gris du menu : texte gris sur fond rouge, illisible. */
.nav__links a.btn--primary,
.nav__links a.btn--primary:hover { color: #fff; }
.nav__links a.btn--ghost,
.nav__links a.btn--ghost:hover { color: var(--text); }

/* Bouton burger : caché sur grand écran, seul moyen de naviguer sur mobile. */
.nav__toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; flex-shrink: 0;
  background: none; border: 1px solid var(--border); border-radius: 9px;
  cursor: pointer; padding: 0 11px;
}
.nav__toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--text); border-radius: 2px;
  transition: transform 0.24s, opacity 0.18s;
}
.nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Fondateur (page À propos) ---------- */

.founder {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  align-items: start;
}
/* La photo est carrée : on garde le ratio 1:1, jamais d'étirement. */
.founder__photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.founder__text { padding-top: 8px; }

@media (max-width: 860px) {
  .founder { grid-template-columns: 1fr; gap: 32px; }
  .founder__photo { max-width: 320px; }
}

/* ---------- Nav mobile ---------- */

@media (max-width: 900px) {
  :root { --nav-h: 68px; }

  .nav__toggle { display: flex; }

  /* Le menu devient un panneau déroulant sous la barre. */
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: 10px 24px 22px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

    /* Fermé par défaut. Aucun lien n'est cliquable tant que c'est fermé. */
    display: none;
  }
  .nav__links.open { display: flex; }

  .nav__links a:not(.btn) {
    padding: 15px 4px;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav__links .btn { margin-top: 16px; width: 100%; padding: 15px 20px; }

  .nav { position: relative; }

  /* Le sélecteur de langue s'étale, plus de menu flottant au survol. */
  .nav__links .lang { margin-top: 16px; }
  .lang__current { width: 100%; justify-content: center; padding: 13px; }
  .lang__menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    display: none;
    margin-top: 8px; box-shadow: none; min-width: 0;
  }
  .lang:focus-within .lang__menu { display: block; }
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s, opacity 0.18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--red-hover); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover:not(:disabled) { border-color: #3a3a3a; background: var(--bg-elevated); }

.btn--danger { background: transparent; color: var(--red); border-color: rgba(232, 64, 74, 0.4); }
.btn--danger:hover:not(:disabled) { background: var(--red-dim); border-color: var(--red); }

.btn--sm  { padding: 9px 16px; font-size: 0.75rem; }
.btn--lg  { padding: 17px 34px; font-size: 0.95rem; }
.btn--full { width: 100%; }

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

.hero { padding: 120px 0 100px; position: relative; overflow: hidden; }
.hero::after {
  content: '';
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(232, 64, 74, 0.09), transparent 65%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero h1 { margin-bottom: 26px; max-width: 1100px; }
.hero .lead { font-size: 1.3rem; margin-bottom: 40px; max-width: 860px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border-soft);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  margin-top: 72px; overflow: hidden;
}
.stat { background: var(--bg); padding: 28px 24px; }
.stat__value { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; color: var(--red); }
.stat__label { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }

@media (max-width: 700px) {
  .hero__stats { grid-template-columns: 1fr; }
}

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

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

@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.card--pad-sm { padding: 24px; }
.card--accent { border-color: rgba(232, 64, 74, 0.35); }

.card__tag {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red); background: var(--red-dim);
  padding: 5px 10px; border-radius: 999px; margin-bottom: 20px;
}
.card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.card__tags .card__tag { margin-bottom: 0; }

/* Badge de l'offre en cours : il doit sauter aux yeux. */
.card__tag--promo {
  color: #fff;
  background: var(--red);
  animation: promo-pulse 2.4s ease-in-out infinite;
}
@keyframes promo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 64, 74, 0.45); }
  50%      { box-shadow: 0 0 0 7px rgba(232, 64, 74, 0); }
}

.card__price {
  font-size: 2.8rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
}
.card__price small { font-size: 1rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }

/* Ancien prix, barré. */
.card__price-old {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}
.card__sub { color: var(--text-muted); margin-top: 10px; }

.check-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--border-soft);
  color: var(--text-muted); font-size: 0.95rem;
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: '✓'; color: var(--red); font-weight: 700; flex-shrink: 0;
  font-family: var(--mono); line-height: 1.6;
}

/* ---------- Valeurs ---------- */

.value { padding: 30px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.value__num { font-family: var(--mono); font-size: 12px; color: var(--red); letter-spacing: 0.14em; }
.value h3 { margin: 14px 0 10px; }
.value p { color: var(--text-muted); font-size: 0.94rem; }

/* ---------- Réalisations (portfolio) ---------- */

.work {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.work:hover { border-color: rgba(232, 64, 74, 0.45); transform: translateY(-3px); }

.work__preview {
  display: block; width: 100%; padding: 0;
  border: 0; background: none; cursor: pointer;
  position: relative;
  border-bottom: 1px solid var(--border);
}

/* Le survol révèle l'invitation à agrandir. */
.work__hover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, 0.72);
  color: #fff; font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.22s;
}
.work__preview:hover .work__hover,
.work__preview:focus-visible .work__hover { opacity: 1; }

.work__body { padding: 26px 28px 30px; }

/* Faux cadre de navigateur, pour que la vignette ait l'air d'un vrai site. */
.browser { display: block; background: var(--bg-elevated); }

.browser__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: #1a1a1a;
  border-bottom: 1px solid var(--border);
}
.browser__dots { display: flex; gap: 6px; flex-shrink: 0; }
.browser__dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: #3a3a3a; display: block;
}
.browser__dots i:first-child { background: #ff5f57; }
.browser__dots i:nth-child(2) { background: #febc2e; }
.browser__dots i:nth-child(3) { background: #28c840; }

.browser__url {
  flex: 1;
  background: var(--bg);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--mono); font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Le site du client est chargé en vrai, puis réduit à l'échelle.
   pointer-events: none pour qu'il ne capture pas le clic. */
.browser__screen {
  display: block; position: relative;
  height: 300px; overflow: hidden;
  background: #fff;
}
.browser__screen iframe {
  position: absolute; top: 0; left: 0;
  width: 1440px; height: 1000px;
  border: 0;
  transform: scale(0.42);
  transform-origin: 0 0;
  pointer-events: none;
}

/* ---------- Aperçu plein écran ---------- */

.previewer {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.previewer__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.previewer__title { font-weight: 700; }
.previewer__actions { display: flex; gap: 10px; align-items: center; }
.previewer iframe { flex: 1; width: 100%; border: 0; background: #fff; }

@media (max-width: 640px) {
  .browser__screen { height: 220px; }
  .browser__screen iframe { transform: scale(0.3); }
  .previewer__title { display: none; }
}

/* ---------- Témoignages ---------- */

.testimonial {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px;
  display: flex;
  flex-direction: column;
}
/* Pas d'étoiles. Un badge qui dit que l'avis est vérifié. */
.testimonial__badge {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green);
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.3);
  padding: 5px 11px; border-radius: 999px;
  margin-bottom: 20px;
}
.testimonial__quote {
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.75;
  flex: 1;
  white-space: pre-line;
}
.testimonial__author {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.testimonial__name { font-weight: 700; }
.testimonial__role { color: var(--text-dim); font-size: 0.86rem; margin-top: 2px; }

/* ---------- Sélecteur de langue ---------- */

/* Menu déroulant avec drapeaux. Sans JavaScript : hover + focus au clavier. */
.lang { position: relative; }

.lang__current {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--text);
  transition: border-color 0.18s, background 0.18s;
}
.lang__current:hover { border-color: var(--red); background: #191919; }
.lang__flag { font-size: 15px; line-height: 1; }
.lang__chevron {
  font-size: 9px; color: var(--text-dim);
  transition: transform 0.22s;
}
.lang:hover .lang__chevron,
.lang:focus-within .lang__chevron { transform: rotate(180deg); }

.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 168px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);

  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.lang:hover .lang__menu,
.lang:focus-within .lang__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.lang__menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 0.88rem; font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.lang__menu a:hover { background: var(--bg-elevated); color: var(--text); }
.lang__menu a.active { color: var(--red); font-weight: 700; }
.lang__menu a.active::after { content: '✓'; margin-left: auto; font-size: 12px; }

@media (max-width: 780px) {
  .nav__links .lang { display: block; }
  .lang__menu { right: auto; left: 0; }
}

/* ---------- FAQ ---------- */

.faq { max-width: 780px; margin: 0 auto; border-top: 1px solid var(--border-soft); }
.faq__item { border-bottom: 1px solid var(--border-soft); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; text-align: left;
  color: var(--text); font-family: var(--font); font-size: 1.05rem; font-weight: 600;
}
.faq__q:hover { color: var(--red); }
.faq__icon {
  font-family: var(--mono); color: var(--red); font-size: 1.3rem; flex-shrink: 0;
  transition: transform 0.22s;
}
.faq__item.open .faq__icon { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.faq__a p { padding: 0 0 24px; color: var(--text-muted); max-width: 92%; }
.faq__item.open .faq__a { max-height: 400px; }

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

.footer { border-top: 1px solid var(--border-soft); padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer__grid h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px; font-weight: 700;
}
.footer__grid li { margin-bottom: 11px; }
.footer__grid a { color: var(--text-muted); font-size: 0.92rem; }
.footer__grid a:hover { color: var(--red); }
.footer__bottom {
  border-top: 1px solid var(--border-soft); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--text-dim); font-size: 0.85rem;
}
@media (max-width: 700px) { .footer__grid { grid-template-columns: 1fr; gap: 32px; } }

/* =========================================================
   Formulaires / Auth
   ========================================================= */

.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 48px 24px;
}
.auth-box { width: 100%; max-width: 520px; }
.auth-box--wide { max-width: 620px; }

/* Logo à gauche, sélecteur de langue à droite. */
.auth-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 30px;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

.field { margin-bottom: 18px; }
.field label {
  display: block; margin-bottom: 8px;
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
}
.field .req { color: var(--red); }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=url], select, textarea {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.95rem;
  transition: border-color 0.18s, background 0.18s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--red); background: #161616;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

/* Checkbox CGV */
.checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elevated); cursor: pointer;
  font-size: 0.9rem; color: var(--text-muted); line-height: 1.5;
}
.checkbox:hover { border-color: #333; }
.checkbox input { appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 20px; height: 20px; margin-top: 1px;
  border: 1px solid #3a3a3a; border-radius: 5px; background: var(--bg);
  cursor: pointer; position: relative; transition: background 0.15s, border-color 0.15s;
}
.checkbox input:checked { background: var(--red); border-color: var(--red); }
.checkbox input:checked::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700;
}
.checkbox a { color: var(--red); text-decoration: underline; }

/* File input */
.dropzone {
  border: 1px dashed #333; border-radius: var(--radius-sm);
  padding: 32px 20px; text-align: center; cursor: pointer;
  background: var(--bg-elevated); transition: border-color 0.18s, background 0.18s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--red); background: #161616; }
.dropzone input { display: none; }
.dropzone__hint { color: var(--text-dim); font-size: 0.82rem; margin-top: 6px; }

.file-list { margin-top: 14px; }
.file-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; font-size: 0.86rem;
}
.file-list .file-remove { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 1.1rem; }
.file-list .file-remove:hover { color: var(--red); }

/* ---------- Formulaire de contact ----------
   Piège à robots : invisible pour un humain, mais bien présent dans le DOM.
   Volontairement PAS display:none ni type=hidden, que les robots savent
   ignorer : on le sort de l'écran, il continue de les attirer. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field input.invalid,
.field textarea.invalid { border-color: var(--red); }

/* ---------- Oeil afficher / masquer le mot de passe ----------
   Le script password-eye.js enveloppe chaque champ mot de passe dans .pwd-wrap
   et y insère le bouton. On réserve de la place à droite (padding-right) pour
   que le texte du mot de passe ne passe jamais sous l'icone. */
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 46px; }
.pwd-eye {
  position: absolute; top: 0; right: 0;
  height: 100%; width: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--text-dim); cursor: pointer;
  transition: color 0.15s;
}
.pwd-eye:hover { color: var(--text-muted); }
.pwd-eye:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: var(--radius-sm); }
.pwd-eye svg { width: 20px; height: 20px; display: block; }
.pwd-eye .pwd-eye__off { display: none; }
.pwd-eye.is-visible .pwd-eye__on { display: none; }
.pwd-eye.is-visible .pwd-eye__off { display: block; }

/* ---------- URL du formulaire de contact (fiche client, admin) ----------
   min-width:0 est indispensable : sans lui, un élément flex refuse de
   descendre sous la largeur de son contenu, et une longue URL ferait
   déborder tout le tiroir au lieu de défiler dans son cadre. */
.contact-url {
  flex: 1 1 260px; min-width: 0; overflow-x: auto; white-space: nowrap;
  padding: 9px 12px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82rem; color: var(--text-muted);
}

/* ---------- Alerts ---------- */

.alert {
  padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: 0.9rem; margin-bottom: 18px; border: 1px solid;
}
.alert--error   { background: var(--red-dim); border-color: rgba(232,64,74,0.4); color: #ff8a91; }
.alert--success { background: rgba(46,204,113,0.1); border-color: rgba(46,204,113,0.35); color: #6fe0a0; }
.alert--info    { background: var(--bg-elevated); border-color: var(--border); color: var(--text-muted); }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; border: 1px solid;
}
.badge--green { color: var(--green); border-color: rgba(46,204,113,0.35); background: rgba(46,204,113,0.1); }
.badge--red   { color: var(--red);   border-color: rgba(232,64,74,0.35);  background: var(--red-dim); }
.badge--amber { color: var(--amber); border-color: rgba(240,173,78,0.35); background: rgba(240,173,78,0.1); }
.badge--grey  { color: var(--text-dim); border-color: var(--border); background: var(--bg-elevated); }

/* =========================================================
   Dashboard / Admin
   ========================================================= */

.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

.sidebar {
  border-right: 1px solid var(--border-soft);
  padding: 26px 20px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .logo { margin-bottom: 36px; padding: 0 10px; }
.sidebar nav { flex: 1; }
.sidebar nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 0.92rem; font-weight: 500;
  margin-bottom: 3px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sidebar nav a:hover { background: var(--bg-elevated); color: var(--text); }
.sidebar nav a.active { background: var(--red-dim); color: var(--red); font-weight: 600; }
.sidebar__foot { border-top: 1px solid var(--border-soft); padding-top: 16px; }
.sidebar__user { padding: 0 12px 14px; font-size: 0.85rem; }
.sidebar__user .name { font-weight: 600; }

.main { padding: 40px 44px 80px; max-width: 980px; }
.page-head { margin-bottom: 34px; }
.page-head h1 { font-size: 2rem; margin-bottom: 6px; }

.panel { display: none; }
.panel.active { display: block; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: column; }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .main { padding: 28px 22px 60px; }
}

/* ---------- Timeline du site (espace client) ---------- */

.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  position: relative;
}
.timeline li {
  position: relative;
  text-align: center;
  padding-top: 34px;
}

/* La barre qui relie les étapes. Elle passe DERRIÈRE les pastilles. */
.timeline li::before {
  content: '';
  position: absolute;
  top: 10px; left: 0; right: 0;
  height: 2px;
  background: var(--border);
}
.timeline li:first-child::before { left: 50%; }
.timeline li:last-child::before  { right: 50%; }
.timeline li.done::before,
.timeline li.current::before { background: var(--red); }
.timeline li.current::before { background: linear-gradient(to right, var(--red) 50%, var(--border) 50%); }
.timeline li:first-child.current::before { background: var(--border); }

.timeline__dot {
  position: absolute;
  top: 3px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  z-index: 1;
  transition: background 0.3s, border-color 0.3s;
}
.timeline li.done .timeline__dot {
  background: var(--red);
  border-color: var(--red);
}
.timeline li.current .timeline__dot {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 5px rgba(232, 64, 74, 0.2);
}

.timeline__label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
  padding: 0 6px;
  line-height: 1.4;
}
.timeline li.done .timeline__label { color: var(--text-muted); }
.timeline li.current .timeline__label {
  color: var(--red);
  font-weight: 700;
}

@media (max-width: 620px) {
  .timeline { grid-template-columns: 1fr; gap: 4px; }
  .timeline li { text-align: left; padding: 10px 0 10px 32px; }
  .timeline li::before {
    top: 0; bottom: 0; left: 7px; right: auto;
    width: 2px; height: auto;
  }
  .timeline li:first-child::before { top: 50%; left: 7px; }
  .timeline li:last-child::before  { bottom: 50%; right: auto; }
  .timeline__dot { top: 50%; left: 0; transform: translateY(-50%); }
  .timeline__label { padding: 0; }
}

/* ---------- Réponse de l'équipe à une demande ---------- */

.reply {
  margin-top: 16px;
  padding: 16px 18px;
  border-left: 3px solid var(--red);
  background: var(--bg-elevated);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.reply__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.reply__from {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red);
}
.reply p { color: var(--text); font-size: 0.94rem; line-height: 1.6; }

/* Rows / lists */
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); margin-bottom: 10px;
}
.row__main { min-width: 0; }
.row__title { font-weight: 600; font-size: 0.95rem; }
.row__meta { color: var(--text-dim); font-size: 0.82rem; margin-top: 3px; }

.kv { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.kv:last-child { border-bottom: 0; }
.kv__k { color: var(--text-muted); font-size: 0.9rem; }
.kv__v { font-weight: 600; font-size: 0.95rem; text-align: right; }

/* Tableau admin */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 780px; }
th {
  text-align: left; padding: 14px 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 700;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border);
}
td { padding: 15px 18px; border-bottom: 1px solid var(--border-soft); color: var(--text-muted); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255,255,255,0.015); }
td.strong { color: var(--text); font-weight: 600; }

/* ---------- Parcours de vente (admin) ---------- */

.steps { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.step {
  display: flex; align-items: center; gap: 9px;
  color: var(--text-muted); font-size: 0.92rem;
}
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--red-dim); border: 1px solid rgba(232, 64, 74, 0.4);
  color: var(--red); font-family: var(--mono); font-size: 11px; font-weight: 700;
}

/* Barre d'action d'un prospect : les libellés disent quoi faire. */
.lead-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.lead-actions__label {
  font-size: 0.82rem; color: var(--text-dim); font-weight: 600;
}
.lead-actions__sep {
  width: 1px; height: 22px; background: var(--border);
  margin: 0 6px;
}
@media (max-width: 700px) {
  .lead-actions__sep { display: none; }
  .lead-actions .btn { width: 100%; }
}

/* Stat tiles (admin) */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 34px; }
.tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.tile__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.tile__value { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
.tile__value.accent { color: var(--red); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .tiles { grid-template-columns: 1fr; } }

/* ---------- Tiroir (fiche client, éditeur d'article) ---------- */

.drawer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex; justify-content: flex-end;
}
.drawer__panel {
  width: 100%; max-width: 880px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  animation: drawer-in 0.28s ease;
}
@keyframes drawer-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer__head h2 { font-size: 1.5rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: 26px 28px 60px; }

/* ---------- Éditeur Markdown, source et aperçu côte à côte ---------- */

.md {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 420px;
}
.md__source {
  border: 0; border-radius: 0;
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.7;
  resize: vertical; min-height: 420px;
}
.md__source:focus { outline: none; }

.md__preview {
  background: var(--bg-card);
  padding: 20px 22px;
  overflow-y: auto; max-height: 620px;
  font-size: 0.92rem; line-height: 1.7;
  color: var(--text-muted);
}
.md__preview h1 { font-size: 1.5rem; color: var(--text); margin: 0 0 14px; }
.md__preview h2 { font-size: 1.2rem; color: var(--text); margin: 22px 0 10px; }
.md__preview h3 { font-size: 1.02rem; color: var(--text); margin: 18px 0 8px; }
.md__preview p  { margin-bottom: 12px; }
.md__preview ul { list-style: disc; padding-left: 20px; margin-bottom: 12px; }
.md__preview li { margin-bottom: 5px; }
.md__preview blockquote {
  border-left: 3px solid var(--red);
  padding-left: 14px; margin: 14px 0; color: var(--text);
}
.md__preview code {
  font-family: var(--mono); font-size: 0.85em;
  background: var(--bg-elevated); padding: 2px 5px; border-radius: 4px;
}
.md__preview pre {
  background: var(--bg-elevated); padding: 14px; border-radius: var(--radius-sm);
  overflow-x: auto; margin-bottom: 12px;
}
.md__preview pre code { background: none; padding: 0; }

@media (max-width: 900px) {
  .md { grid-template-columns: 1fr; }
  .md__source { min-height: 260px; }
}

/* ---------- Alertes de l'admin ---------- */

.alert-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.alert-row:hover { border-color: #3a3a3a; }
.alert-row--high { border-color: rgba(232, 64, 74, 0.5); background: var(--red-dim); }
.alert-row__label { flex: 1; font-size: 0.93rem; min-width: 200px; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px; max-width: 480px; width: 100%;
}
.modal h3 { margin-bottom: 12px; }
.modal p { color: var(--text-muted); font-size: 0.94rem; margin-bottom: 24px; }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Empty state */
.empty {
  text-align: center; padding: 56px 24px;
  border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--text-dim);
}

/* Loader */
.spinner {
  width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 0.7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Bandeau cookies ---------- */

.cookie {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  padding: 16px;
  animation: cookie-up 0.35s ease;
}
@keyframes cookie-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cookie__box {
  max-width: 1000px; margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

.cookie__title { font-size: 1.1rem; margin-bottom: 8px; }
.cookie__body  { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; }
.cookie__body a { text-decoration: underline; }

.cookie__details {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.cookie__row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.cookie__row:last-child { border-bottom: 0; }
.cookie__row strong { display: block; font-size: 0.94rem; margin-bottom: 3px; }
.cookie__row .dim { display: block; font-size: 0.85rem; line-height: 1.5; }

.cookie__always {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 11px;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em;
  padding-top: 2px;
}

/* Interrupteur */
.cookie__toggle {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; width: 44px; height: 25px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-elevated); cursor: pointer; position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.cookie__toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--text-dim); transition: transform 0.2s, background 0.2s;
}
.cookie__toggle:checked { background: var(--red); border-color: var(--red); }
.cookie__toggle:checked::after { transform: translateX(19px); background: #fff; }

.cookie__actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 22px; flex-wrap: wrap;
}

@media (max-width: 640px) {
  .cookie__actions { flex-direction: column-reverse; }
  .cookie__actions .btn { width: 100%; }
  .cookie__row { flex-direction: column; gap: 12px; }
}

/* Pages légales */
.legal { max-width: 780px; margin: 0 auto; padding: 80px 24px 120px; }
.legal h1 { font-size: 2.4rem; margin-bottom: 8px; }
.legal h2 { font-size: 1.3rem; margin: 44px 0 14px; }
.legal p, .legal li { color: var(--text-muted); margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal .updated { font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); margin-bottom: 40px; }
.legal table { width: 100%; border-collapse: collapse; margin: 20px 0 12px; font-size: 0.9rem; }
.legal th, .legal td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal th { color: var(--text); font-weight: 600; }
.legal td { color: var(--text-muted); }

/* ---------- Section Processus (4 étapes) ---------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  counter-reset: step;
}

.pstep {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}
.pstep:hover {
  border-color: rgba(232, 64, 74, 0.4);
  transform: translateY(-3px);
}

.pstep__icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--red-dim);
  border: 1px solid rgba(232, 64, 74, 0.3);
  color: var(--red);
  margin-bottom: 20px;
}
.pstep__icon svg { width: 22px; height: 22px; }

.pstep__n {
  position: absolute; top: 26px; right: 26px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.pstep h3 { font-size: 1.05rem; margin-bottom: 10px; }
.pstep p  { color: var(--text-muted); font-size: 0.92rem; line-height: 1.65; }

@media (max-width: 1000px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .steps-grid { grid-template-columns: 1fr; } }

/* ---------- Page FAQ dédiée ---------- */

.faq-entry {
  max-width: 860px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border-soft);
}
.faq-entry:first-of-type { padding-top: 0; }
.faq-entry:last-of-type  { border-bottom: 0; }
.faq-entry h2 {
  font-size: 1.35rem;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}
.faq-entry p {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.75;
}

/* ---------- Blog : liste des articles ---------- */

.post-list { display: grid; gap: 18px; max-width: 900px; }

.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s, transform 0.2s;
}
.post-card:hover { border-color: rgba(232, 64, 74, 0.4); transform: translateY(-2px); }
.post-card a { display: block; padding: 30px 32px; }
.post-card time { font-family: var(--mono); font-size: 12px; }
.post-card h2 {
  font-size: 1.35rem; margin: 12px 0 12px;
  letter-spacing: -0.02em; line-height: 1.3;
}
.post-card p { color: var(--text-muted); font-size: 0.96rem; line-height: 1.7; }
.post-card__more {
  display: inline-block; margin-top: 16px;
  font-size: 0.88rem; font-weight: 700;
}

/* ---------- Blog : article ---------- */

.post {
  max-width: 760px;
  margin: 0 auto;
  padding: 70px 24px 100px;
}
.post__head { margin-bottom: 36px; }
.post__head h1 {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  margin: 18px 0 16px;
  line-height: 1.15;
}
.post__meta { color: var(--text-dim); font-size: 0.9rem; }

/* La réponse directe. Visuellement mise en avant : c'est ce que le lecteur
   pressé lit, et c'est ce que les IA extraient. */
.post__answer {
  border-left: 3px solid var(--red);
  background: var(--bg-card);
  padding: 22px 26px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 44px;
}
.post__answer p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text);
  font-weight: 500;
}

.post__body { font-size: 1.06rem; line-height: 1.85; color: var(--text-muted); }
.post__body h2 {
  font-size: 1.55rem;
  color: var(--text);
  margin: 48px 0 18px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.post__body h3 { font-size: 1.15rem; color: var(--text); margin: 32px 0 12px; }
.post__body p { margin-bottom: 20px; }
.post__body strong { color: var(--text); font-weight: 700; }
.post__body ul { list-style: disc; padding-left: 24px; margin-bottom: 22px; }
.post__body li { margin-bottom: 9px; }
.post__body a { text-decoration: underline; }

.post__cta {
  margin-top: 64px;
  padding: 40px 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  text-align: center;
}
.post__cta h2 { font-size: 1.7rem; margin-bottom: 10px; }

/* ---------- Hero avec visuel ---------- */

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero__visual img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  /* Sur mobile, le visuel passe SOUS le texte : le message d'abord. */
  .hero__visual { order: 2; max-width: 560px; }
}

/* ---------- Visuels de la section Offre ---------- */

.offer-visuals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.offer-visuals figure { margin: 0; }
.offer-visuals img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.offer-visuals figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 760px) { .offer-visuals { grid-template-columns: 1fr; } }