/* =============================================================================
   GRAND CHAPITRE — Cnaturel — offrir.css
   Rôle : styles UNIQUEMENT pour la page "Offrir / Bons cadeaux"
   Compatible mobile / tablette / PC
   SEO friendly (structure intacte)
   ============================================================================= */


/* =============================================================================
   GRAND CHAPITRE 1 — BASE PAGE
   ============================================================================= */

.offrir-page-body{
  background: #ffffff;
  color: var(--ink, #2e2e2e);
}


/* =============================================================================
   GRAND CHAPITRE 2 — CONTENEUR PRINCIPAL
   ============================================================================= */

.offrir-page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 16px 70px;
}

@media (max-width: 700px){
  .offrir-page{
    padding: 22px 14px 54px;
  }
}


/* =============================================================================
   GRAND CHAPITRE 3 — HERO
   ============================================================================= */

.offrir-hero{
  margin: 10px 0 22px;
}

.offrir-hero h1{
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 3.6vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.offrir-lead{
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--muted, #555555);
  max-width: 78ch;
}


/* =============================================================================
   GRAND CHAPITRE 4 — LAYOUT
   ============================================================================= */

.offrir-layout{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px){
  .offrir-layout{
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   GRAND CHAPITRE 5 — ASIDE
   ============================================================================= */

.aside-box{
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 16px;
  padding: 16px;
  background: #fafafa;
}

.aside-figure img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}


/* =============================================================================
   GRAND CHAPITRE 6 — GROUPES
   ============================================================================= */

.offrir-main h2{
  margin: 0 0 12px;
  font-size: 1.45rem;
  line-height: 1.2;
}

.gift-sep{
  height: 1px;
  background: #eeeeee;
  margin: 18px 0;
}


/* =============================================================================
   GRAND CHAPITRE 7 — GRILLE CARTES
   ============================================================================= */

.gift-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

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


/* =============================================================================
   GRAND CHAPITRE 8 — CARTES OFFRES
   ============================================================================= */

/* Carte principale */
.gift-card{
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 16px;
  overflow: hidden;

  /* IMAGE DE FOND PRINCIPALE */
  background-image: url("../graphisme/fond-acheter.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow: 0 10px 22px rgba(0,0,0,.45);
}


/* Bandeau titre + prix */
.gift-card-head{
  background: rgba(185, 214, 193, 0.35);   /* Vert naturel léger */
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}

.gift-card-title{
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.25;
}

.gift-card-price{
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}


/* Corps + actions avec voile blanc translucide */
.gift-card-body,
.gift-card-actions{
  background: rgba(255,255,255,.50);
}

.gift-card-body{
  padding: 12px 14px;
  color: var(--muted, #555555);
  line-height: 1.6;
}

.gift-card-actions{
  padding: 0 14px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}


/* Bouton acheter */
/* =============================================================================
   BOUTON ACHAT — VERSION PREMIUM (plus blanc + hover moderne)
   ============================================================================= */

/* =============================================================================
   BOUTON OFFRIR — VERSION SOBRE & MODERNE (fade couleur uniquement)
   ============================================================================= */

.gift-buy{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 11px 18px;
  border-radius: 14px;

  background: #1f1f1f;               /* Gris foncé élégant */
  border: 1px solid #1f1f1f;

  color: #ffffff !important;         /* Forcé blanc pur */
  text-decoration: none !important;  /* Supprime soulignement */
  font-weight: 700;
  letter-spacing: .02em;

  transition: background-color .25s ease,
              border-color .25s ease;  /* Fade uniquement */
}

/* Hover : gris plus doux, sans mouvement */
.gift-buy:hover{
  background: #666666;               /* Gris plus clair */
  border-color: #3a3a3a;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Focus clavier propre */
.gift-buy:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.20);
}




/* =============================================================================
   GRAND CHAPITRE 9 — BLOC SUR MESURE
   ============================================================================= */

.offrir-custom{
  margin-top: 20px;
  border: 1px solid #eeeeee;
  border-radius: 16px;
  padding: 14px;
  background: #ffffff;
}