/* =============================================================================
 * rachat-hero.css - Modele "hero" de la page rachat (V0.13)
 * -----------------------------------------------------------------------------
 * Charge UNIQUEMENT quand le modele front = 'hero' (render-form.php).
 * Tout est scope sous `.rachat--hero` : le modele 'classic' (slug 'default'
 * valide en front) n'est jamais impacte.
 *
 * Direction : hero pleine largeur sur le jaune de marque evo8
 * (rgb(var(--bs-primary-rgb))), formulaire en avant. Le contraste est porte par
 * l'encre quasi-noire #1a1916 sur le jaune, et des cartes blanches surelevees.
 * Type : Poppins seule (contrainte projet), personnalite par le contraste de
 * graisses (800 display / 400-600 utilitaire), pas par une 2e fonte.
 * ============================================================================= */

/* Reset box-sizing sur le sous-arbre hero : le reset de base (rachat-form.css)
   est scope a .rachat__form-zone, le hero vit en dehors. Sans ca, padding +
   width:100% deborde de 40px (overflow horizontal sur mobile). */
.rachat--hero .rachat-hero,
.rachat--hero .rachat-hero * { box-sizing: border-box; }

.rachat--hero {
  --hero-yellow:   rgb(var(--bs-primary-rgb, 246, 200, 82));
  --hero-yellow-2: #f3bf3f;            /* jaune un cran plus profond (degrade) */
  --hero-ink:      #161615;            /* encre display, contraste max sur jaune (aligne --bo-brand / --rv-ink) */
  --hero-ink-soft: #3a3833;            /* corps de texte sur jaune */
  --hero-card:     #ffffff;
  --hero-border:   #e7e4dc;
  --hero-shadow:   0 18px 50px rgba(26, 25, 22, .16);
}

/* Le wrapper #rachat-content garde la classe bootstrap .container : on neutralise
   sa largeur (chargee APRES bootstrap, .rachat--hero.container l'emporte) pour
   que le hero occupe toute la largeur du contenu. On evite volontairement le
   truc `width:100vw + marges negatives` qui provoque un debordement horizontal
   sur mobile (100vw inclut la gouttiere de scrollbar). */
.rachat--hero.container { max-width: 100%; padding-left: 0; padding-right: 0; }

/* Le thème evo8 pose `#rachat-content{padding-top:40px}` et `{padding-bottom:20px}`
   (sélecteurs ID, 1-0-0) : en hero, le bandeau jaune doit toucher le header (pas
   de liseré blanc en haut), et on retire le rab du bas. On bat l'ID du thème avec
   un sélecteur ID+classe (1-1-0) réservé au hero -> aucun impact en classic. */
#rachat-content.rachat--hero { padding-top: 0; padding-bottom: 0; }

/* ---------------------------------------------------------------------------
 * HERO pleine largeur (occupe toute la largeur du conteneur, sans overflow)
 * ------------------------------------------------------------------------- */
.rachat--hero .rachat-hero {
  position: relative;
  width: 100%;
  padding: clamp(26px, 4vw, 52px) 20px clamp(30px, 4vw, 52px);
  background: linear-gradient(165deg, var(--hero-yellow) 0%, var(--hero-yellow-2) 100%);
  overflow: hidden;
  font-family: 'Poppins', -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--hero-ink);
}

/* Texture discrete facon circuit/grille - signature sobre, tres faible opacite */
.rachat--hero .rachat-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(26, 25, 22, .10) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 72%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 72%);
  pointer-events: none;
}

.rachat--hero .rachat-hero__inner {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.rachat--hero .rachat-hero__eyebrow {
  margin: 0 0 12px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hero-ink-soft);
}

.rachat--hero .rachat-hero__title {
  margin: 0 auto;
  max-width: 24ch;
  font-size: clamp(1.85rem, 4vw, 2.9rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--hero-ink);
  text-wrap: balance;
}

.rachat--hero .rachat-hero__lead {
  margin: 12px auto 0;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--hero-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Entree PAR / PRO : deux "lanes" pleine largeur (element signature)
 * ------------------------------------------------------------------------- */
.rachat--hero .rachat-hero__entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: clamp(20px, 3vw, 32px) auto 0;
  max-width: 880px;
  text-align: left;
}
@media (max-width: 720px) {
  .rachat--hero .rachat-hero__entry { grid-template-columns: 1fr; }
}

.rachat--hero .rachat-lane {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 22px 22px 24px;
  background: var(--hero-card);
  border: 1px solid rgba(26, 25, 22, .06);
  border-radius: 16px;
  box-shadow: var(--hero-shadow);
  color: var(--hero-ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.rachat--hero .rachat-lane:hover,
.rachat--hero .rachat-lane:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(26, 25, 22, .22);
  text-decoration: none;
}
.rachat--hero .rachat-lane:focus-visible {
  outline: 3px solid var(--hero-ink);
  outline-offset: 3px;
}

.rachat--hero .rachat-lane__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 13px;
  background: rgba(246, 200, 82, .22);
  line-height: 1;
}
.rachat--hero .rachat-lane__icon i {
  font-size: 1.55rem;
  line-height: 1;
  color: var(--hero-ink);
}

.rachat--hero .rachat-lane__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rachat--hero .rachat-lane__kicker {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9a7b16;
}
.rachat--hero .rachat-lane__title {
  margin-top: 2px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hero-ink);
}
.rachat--hero .rachat-lane__meta {
  margin-top: 5px;
  font-size: .85rem;
  font-weight: 400;
  color: #6f6c64;
}

.rachat--hero .rachat-lane__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--hero-ink);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
  transition: background .18s ease;
}
.rachat--hero .rachat-lane:hover .rachat-lane__go { background: #000; }
.rachat--hero .rachat-lane__arrow { transition: transform .18s ease; }
.rachat--hero .rachat-lane:hover .rachat-lane__arrow { transform: translateX(4px); }

@media (max-width: 420px) {
  .rachat--hero .rachat-lane { gap: 14px; padding: 18px; }
  .rachat--hero .rachat-lane__go-label { display: none; }     /* garde juste la fleche sur tres petit ecran */
  .rachat--hero .rachat-lane__go { padding: 11px 13px; }
}

/* Bandeau de reassurance sous les lanes */
.rachat--hero .rachat-hero__reassurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: clamp(16px, 2.5vw, 24px) auto 0;
  padding: 0;
  font-size: .92rem;
  font-weight: 500;
  color: var(--hero-ink-soft);
}
.rachat--hero .rachat-hero__reassurance span { display: inline-flex; align-items: center; gap: 7px; }
.rachat--hero .rachat-hero__reassurance i { font-size: 1.02em; color: var(--hero-ink); }

/* Bandeau sandbox/debug a l'interieur du hero */
.rachat--hero .rachat-hero__banner {
  margin: 22px auto 0;
  max-width: 720px;
  padding: 11px 16px;
  border: 1px solid rgba(26, 25, 22, .25);
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  font-size: .9rem;
  color: var(--hero-ink);
}
.rachat--hero .rachat-hero__banner code { background: #fff; padding: 1px 6px; border-radius: 4px; }

/* ---------------------------------------------------------------------------
 * Tunnel (profil choisi) : le hero se fait sobre, le form reprend la main.
 * ------------------------------------------------------------------------- */
/* Tunnel hero : wizard plus large en desktop. Le `.acr-card` à 820px est étriqué
   et empile le contenu pour rien (retour Brice) ; on l'élargit (les étapes en
   grille - marques/familles/produits, récap - respirent et gagnent en hauteur).
   Scopé hero : le modèle classic garde sa largeur validée (820/900px). Les
   max-width ne contraignent que le desktop ; en deçà, le contenu remplit l'espace. */
/* Panneau de surface autour de la demande (retour Brice). Fond lavande = variable
   du thème evo8 `--bs-gray` (#efeffd, déjà définie dans :root du theme.css), pas
   du jaune. Bandeau PLEINE LARGEUR (comme le hero jaune) : pas de max-width sur le
   form-zone (sinon le fond est plafonné à 1100px et coupé) ; c'est la CARTE du
   wizard qui reste centrée et lisible via son `max-width` + `margin:0 auto`. */
.rachat--hero .rachat__form-zone {
  margin: 0;
  padding: 4rem;
  background: var(--bs-gray, #efeffd);
}
.rachat--hero .acr-card { max-width: 1040px; }
.rachat--hero .acr-form-wrap { max-width: 1040px; }

/* Mobile uniquement (≤600px) :
   - footer wizard en grille 1fr|1fr : « Suivant → » à 1em + padding 24px débordait
     de sa demi-colonne et passait à la ligne (effet escalier, retour Brice) ;
   - le panneau de surface à 4rem mangerait l'écran -> padding réduit. */
@media (max-width: 600px) {
  .rachat--hero .acr-btn { font-size: 0.95em; padding-left: 16px; padding-right: 16px; }
  .rachat--hero .rachat__form-zone { padding: 1rem 1rem; }
}

/* ---------------------------------------------------------------------------
 * Contenu editorial reorganise SOUS le formulaire (video, etapes, tuto).
 * Rendu inchange dans son markup evo8 ; on lui redonne juste de l'air et un
 * conteneur centre puisque #rachat-content a perdu sa largeur de container.
 * ------------------------------------------------------------------------- */
.rachat--hero .rachat__pave-editorial--below {
  max-width: 1140px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding: 0 20px;
}
.rachat--hero .rachat__pave-editorial--below > .row:first-child { margin-top: 0; }

/* La rangee d'intro du contenu editorial (.rachat__title : titre + accroche +
   CTA "Comment en profiter" qui scrollait vers le tuto quand le form etait en
   bas) est deja reprise par le hero. On la masque sous le formulaire pour ne pas
   laisser un bouton orphelin ni un espace vide. Specifique au contenu 'default' ;
   sans cette classe (contenu reecrit), le retrait du H1 cote PHP suffit. */
.rachat--hero .rachat__pave-editorial--below .rachat__title { display: none; }

/* ---------------------------------------------------------------------------
 * Accessibilite : mouvement reduit
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rachat--hero .rachat-lane,
  .rachat--hero .rachat-lane__go,
  .rachat--hero .rachat-lane__arrow { transition: none; }
  .rachat--hero .rachat-lane:hover,
  .rachat--hero .rachat-lane:focus-visible { transform: none; }
}