/* /guía/assets/css/guide.css */
:root { --max: 920px; }
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
}
.container { max-width: var(--max); margin: 0 auto; padding: 16px; }

.topbar { border-bottom: 1px solid #eee; }
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:0;
}
/* Brand centrée */
.brand{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* Logo + sous-titre */
.brand__logo{
  height:40px;     /* un poil plus grand */
  width:auto;
  display:block;
  margin:0 auto;
}

.brand__sub{
  font-size:15px;  /* plus lisible */
  opacity:.8;
  letter-spacing:.1px;
}

.hero { padding: 18px 0 8px; }
.badge { display: inline-block; font-size: 13px; padding: 6px 10px; border: 1px solid #ddd; border-radius: 999px; margin-top: 20px;}
.hero__meta { margin-top: 8px; opacity: .85; }

.card {
  border: 1px solid #eee; border-radius: 14px; padding: 16px; margin: 14px 0;
  background: #fff;
}
.card--highlight { border-color: #ddd; background: #fafafa; }

.steps { padding-left: 18px; }
.muted { opacity: .75; font-size: 14px; }

.note, .callout {
  margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid #e6e6e6;
  background: #fff;
}

.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 60px; }
.btn {
  display: inline-block; padding: 10px 14px; border-radius: 12px; text-decoration: none;
  border: 1px solid #111; color: #fff; background: #111;
}
.btn--ghost { background: transparent; color: #111; }

.pager { display: flex; justify-content: space-between; margin: 18px 0 26px; }
.pager__link { text-decoration: none; }

.footer{
  border-top:1px solid #eee;
  margin-top:30px;
  padding:18px 0;
  background:#fafafa;
}

/* CHANGEMENT: on passe en grille pour centrer parfaitement le bloc du milieu */
.footer__inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:#222;
}

.footer__left,
.footer__center,
.footer__right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* on fixe les alignements gauche/centre/droite (sinon le centre peut “bouger”) */
.footer__left{ justify-self:start; }
.footer__center{ justify-self:center; text-align:center; }
.footer__right{ justify-self:end; }

.footer__link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}

.footer__link:hover{
  border-bottom-color:#111;
}

.footer__sep{
  opacity:.5;
}

/* Mobile : footer en colonne, bien centré */
@media (max-width: 620px){
  .footer__inner{
    grid-template-columns: 1fr;
    justify-items:center;
    text-align:center;
  }
  .footer__left,
  .footer__center,
  .footer__right{
    justify-self:center;
  }
}

.brand { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.brand__logo { height: 38px; width: auto; display: block; }
.brand__sub { font-size: 18px; opacity: .75; font-weight: 700; }

.coupon{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:stretch;
  border:1px dashed #bbb;
  border-radius:16px;
  padding:14px;
  background:#fff;
}
/* Coupon: colonne -30% plus visible */
.coupon__left{
  min-width: 190px;
  flex: 0 0 auto;
  padding: 14px;
  border-right: 1px dashed #ddd;

  /* NEW */
  background: #6F4E37;
  color: #fff;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.coupon__percent{
  font-size: 56px;   /* plus visible */
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.coupon__label{
  margin-top: 8px;
  font-size: 14px;
  opacity: .9;
}

/* Ajustement du conteneur coupon pour mieux “respirer” */
.coupon{
  border: 1px dashed #bbb;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

/* Mobile: colonne gauche en haut, toujours bien visible */
@media (max-width: 520px){
  .coupon__left{
    width: 100%;
    border-right: none;
    border-bottom: 1px dashed #ddd;
    border-radius: 14px;
  }
}

.is-hidden { display: none !important; }

.test-banner{
  border:1px solid #e6e6e6;
  background:#fff;
  border-radius:14px;
  padding:14px;
  margin:12px 0 16px;
}

.test-banner__title{
  font-size:16px;
  font-weight:800;
  margin:0 0 6px;
}

.test-banner__sub{
  font-size:14px;
  opacity:.85;
  margin:0 0 10px;
}

.test-banner__cta{
  text-align:center; /* option visuelle : bouton centré */
}