/* =========================================================
   SNTS — offre.css
   Page template Offre (offre.php)
   Accent piloté par : --offre-accent
   ========================================================= */


  /* -----------------------------
     HERO
  ----------------------------- */
  .offre-hero{
    padding: clamp(54px, 7vw, 100px) 0;
    position: relative;
  }
  
  .offre-hero-grid{
    display:grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 22px;
    align-items: start;
  }
  
  @media (max-width: 960px){
    .offre-hero-grid{ grid-template-columns: 1fr; }
  }
  
  .offre-kicker{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 10px;
  }
  .offre-kicker::before{
    content:"";
    width: 14px; height: 14px;
    background: var(--offre-accent);
    border: var(--bd);
    border-radius: 999px;
    box-shadow: 3px 3px 0 rgba(11,11,15,.12);
  }
  
  .offre-title{
    margin: 0 0 10px;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    font-weight: 1000;
    line-height: 1.02;
    font-size: clamp(34px, 5vw, 64px);
  }
  
  .offre-lead{
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.65;
    max-width: 70ch;
  }
  
  /* -----------------------------
     Boutons offre : accent
  ----------------------------- */
  
  /* base (ton .btn du base.css existe déjà)
     ici on force l'accent spécifique offre */
  .offre-btn{
    background: var(--offre-accent);
  }
  
  /* secondaire : garde “white sticker” mais border/hover accent */
  .offre-btn.secondary{
    background: #fff;
  }
  .offre-btn.secondary:hover{
    filter: saturate(1.05);
  }
  
  /* bouton en full width “is-block” */
  .offre-btn.is-block{
    width: 100%;
    justify-content: center;
  }
  
  /* -----------------------------
     Price card (aside)
  ----------------------------- */
  .offre-price-card{
    background: var(--card);
    border: var(--bd);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
  }
  .offre-price-top{
    padding: 22px 18px 14px;
  }
  
  .offre-price-label{
    display:block;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: 12px;
    opacity: .85;
    margin-bottom: 10px;
  }
  
  .offre-price-tag{
    color: var(--offre-accent);
    margin: 0;
    display:flex;
    align-items: baseline;
    gap: 10px;
    font-weight: 1000;
    text-transform: uppercase;
  }
  
  .offre-price-tag .currency{
    font-size: 16px;
    opacity: .9;
  }
  .offre-price-tag .value{
    font-size: 46px;
    line-height: 1;
    letter-spacing: -0.03em;
  }
  .offre-price-tag .cycle{
    font-size: 13px;
    opacity: .85;
  }
  
  .offre-billing-note{
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.5;
  }
  
  /* Essentials */
  .offre-essentials{
    padding: 14px 18px 18px;
    display:grid;
    gap: 12px;
    border-top: var(--bd-soft);
  }
  
  .offre-essential{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 12px 12px;
    border-radius: 16px;
    border: var(--bd);
    background: #fff;
    box-shadow: 5px 5px 0 rgba(11,11,15,.10);
  }
  
  .offre-essential i{
    color: var(--offre-accent);
    margin-top: 2px;
    font-size: 18px;
  }
  
  .offre-essential h3{
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 1000;
    letter-spacing: -.01em;
    text-transform: uppercase;
  }
  .offre-essential p{
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    font-size: 14px;
  }
  
  /* -----------------------------
     Sections
  ----------------------------- */
  .offre-section{
    padding: clamp(54px, 8vw, 100px) 0;
  }
  
  .offre-section-head{
    margin-bottom: 18px;
  }
  
  .offre-section-title{
    margin: 0 0 8px;
    letter-spacing: -0.03em;
    font-weight: 1000;
    text-transform: uppercase;
    font-size: clamp(28px, 4vw, 48px);
  }
  
  .offre-section-subtitle{
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
    max-width: 75ch;
  }
  
  /* -----------------------------
     Détails : liste features + checks accent
  ----------------------------- */
  .offre-details-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 22px;
    align-items: start;
  }
  @media (max-width: 960px){
    .offre-details-grid{ grid-template-columns: 1fr; }
  }
  
  .offre-features{
    list-style:none;
    padding: 0;
    margin: 0;
    display:grid;
    gap: 12px;
  }
  
  .offre-features li{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 14px 14px;
    border-radius: 18px;
    border: var(--bd);
    background: #fff;
    box-shadow: 6px 6px 0 rgba(11,11,15,.12);
  }
  
  .offre-features i{
    color: var(--offre-accent);
    margin-top: 2px;
    font-size: 16px;
  }
  
  /* Colonne droite : on “colle” un peu la zone CTA */
  .offre-details-right .cta-row{
    margin-top: 0 !important;
  }
  
  /* -----------------------------
     WHY : cards 3 colonnes
  ----------------------------- */
  .offre-grid-3{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 22px;
  }
  
  @media (max-width: 960px){
    .offre-grid-3{ grid-template-columns: 1fr; }
  }
  
  .offre-card{
    background: var(--card);
    border: var(--bd);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 18px;
    overflow: hidden;
    position: relative;
  }
  
 
  .offre-card-icon{
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: var(--bd);
    background: #fff;
    box-shadow: 6px 6px 0 rgba(11,11,15,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 12px;
  }
  
  .offre-card-icon i{
    color: var(--offre-accent);
    font-size: 18px;
  }
  
  .offre-card h3{
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: -.02em;
  }
  
  .offre-card p{
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
  }
  
  /* -----------------------------
     Comparatif
  ----------------------------- */

  .offre-section.is-compare .offre-price{
    --cmp-accent: var(--offre-accent);
  }

  .offre-section.is-compare{
    background: color-mix(in srgb, var(--bg) 90%, #fff 10%);
    border-top: var(--bd-soft);
  }
  
  .offre-price{
    position: relative;
  }
  
  .offre-price-head{
    padding: 18px 18px 10px;
  }
  .offre-price-head h3{
    margin: 8px 0 0;
    font-size: 20px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: -.02em;
  }
  .offre-desc{
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.6;
  }
  
  .offre-price .offre-kicker{
    margin: 0;
  }
  
  /* tag prix */
  .offre-price .offre-price-tag{
    padding: 0 18px 12px;
    margin: 0;
  }
  
  /* footer price */
  .offre-price-foot{
    padding: 12px 18px 18px;
    border-top: var(--bd-soft);
  }
  
  /* Featured : accent fort */
  .offre-price.is-featured{
    border-color: var(--cmp-accent);
    box-shadow: var(--shadow-strong);
  }
  
  .offre-price.is-featured::before{
    content:"★";
    position:absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 12px;
    border: var(--bd);
    background: var(--cmp-accent);
    box-shadow: 5px 5px 0 rgba(11,11,15,.14);
    font-weight: 1000;
  }
  
  /* Accent aussi sur le bouton dans la carte */
  .offre-price .offre-btn{
    background: var(--cmp-accent);
  }
  
  /* -----------------------------
     Responsive : CTA row
  ----------------------------- */
  @media (max-width: 960px){
    .offre-hero .cta-row,
    .offre-details-right .cta-row{
      width: 100%;
    }
    .offre-hero .cta-row .btn,
    .offre-details-right .cta-row .btn{
      width: 100%;
      justify-content: center;
    }
  }
  

  .offre-page #contact .wpcf7 input[type="submit"]{
    background: var(--page-accent);
  }