:root{
    --purple: #4B2E83;
    --purple-deep: #37205F;
    --amber: #F2994A;
    --yellow: #FFC94A;
    --cream: #FBF7F0;
    --ink: #2B2438;
    --line: #E7DEF2;
  }
/*  *{box-sizing:border-box;}
  body{
    margin:0;
    background:#00AFF0;
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    padding:48px 6vw;
  }
*/  
/* @media (max-width:480px){
    body{ padding:32px 5vw; }
  }
*/  
  h1,h3{ font-family:'Baloo 2', sans-serif; }

  .page-title{
    text-align:center;
    margin:0 0 8px;
    font-size:clamp(1.8rem,3.4vw,2.6rem);
    color:gold;
    font-weight:800;
    letter-spacing:0.01em;
  }
  .page-sub{
    text-align:center;
    color:black;
    margin:0 0 20px;
    font-size:1.2rem;
  }


  /* --- Bande de fonctionnalités --- */
  .features{
    max-width:1180px;
    margin:40px auto;
  }
  .features-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    background:white;
    border:1px solid var(--line);
    border-radius:20px;
    padding:5px;
    box-shadow:0 16px 40px rgba(75,46,131,0.06);
  }
  .feature-item{
    display:flex; gap:10px; align-items:flex-start;
  }
  .feature-icon{
    width:42px; height:42px; border-radius:13px;
    background:var(--purple);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    color:#fff;
  }
  .feature-item:nth-child(2) .feature-icon{ background:var(--amber); }
  .feature-item:nth-child(3) .feature-icon{ background:var(--yellow); color:var(--purple-deep);}
  .feature-item:nth-child(4) .feature-icon{ background:var(--purple-deep); }
  .feature-item h6{
    margin:0 0 3px; font-size:0.94rem; color:var(--purple-deep); font-weight:700;
    white-space:nowrap;
  }
 
  .feature-item p{
    margin:0 !important;
    font-size:0.81rem !important;
    color:#726a83 !important;
    line-height:1.4 !important;
    letter-spacing:normal !important;
    word-spacing:normal !important;
    text-align:left !important;
}
  
  @media (max-width:860px){
    .features-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:480px){
    .features-grid{ grid-template-columns:1fr; padding:20px; }
  }

  /* --- Icônes des vignettes tarifaires --- */
  .tier-icon{
    width:34px; height:34px; border-radius:50%;
    background:var(--yellow);
    display:flex; align-items:center; justify-content:center;
    color:var(--purple-deep);
    flex-shrink:0;
  }

  /* --- Icônes des en-têtes du tableau de packs --- */
  .th-with-icon{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .th-with-icon svg{ flex-shrink:0; }

  .pricing-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
    max-width:1180px;
    margin:0 auto;
    align-items:stretch;
  }
  @media (max-width:860px){
    .pricing-grid{ grid-template-columns:1fr; }
    .panel{ height:auto !important; }
  }

  .panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 16px 40px rgba(75,46,131,0.07);
    display:flex;
    flex-direction:column;
  }
  .panel-head{
    padding:20px 26px;
    color:#fff;
  }
  .panel-head.head-amber{ background:linear-gradient(120deg, var(--amber), #F7B26A); }
  .panel-head.head-purple{ background:linear-gradient(120deg, var(--purple), var(--purple-deep)); }
  .panel-head h3{ margin:0 0 4px; font-size:1.1rem; }
  .panel-head p{ margin:0; font-size:0.8rem; opacity:0.9; }

  .panel-body{
    padding:5px 5px;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  /* --- Tarification mensuelle : grille 2 colonnes de vignettes --- */
  .tier-grid{
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
  }
  .tier-tile{
    background:#FAF7FF;
    border:1px solid var(--line);
    border-radius:14px;
    padding:5px 5px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .tier-tile.span-2{
    background:#FFF6E6;
    border-color:#FBE1B3;
  }
  .tier-top{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .tier-label{
    font-size:0.78rem;
    font-weight:700;
    
	text-transform:uppercase;
    letter-spacing:0.02em;
    color:var(--purple-deep);
    white-space:nowrap;
  }
  @media (max-width:480px){
    table.packs{ font-size:0.88rem; }
    table.packs td, table.packs th{ padding-left:0; padding-right:0; }
    .tier-tile{ padding:5px 5px; gap:10px; }
    .tier-label{ font-size:0.7rem; }
    .tier-price{ font-size:0.95rem; }
  }
  .tier-price{
    font-size:1.05rem;
    font-weight:700;
    color:var(--amber);
    white-space:nowrap;
    flex-shrink:0;
  }
  .tier-price small{ font-size:0.68rem; font-weight:600; color:#8b7fa3; }
  .tier-tag{
    font-size:0.65rem;
    color:#8b7fa3;
    font-weight:600;
    display:block;
  }

  /* --- Pack SMS : tableau --- */
  table.packs{
    width:100%;
    border-collapse:collapse;
    font-size:0.95rem;
    flex:1;
  }
  table.packs thead th{
    text-align:left;
    font-size:0.68rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#8b7fa3;
    padding:0 5px 10px;
    font-weight:700;
  }
  table.packs thead th:last-child{ text-align:right; }
  table.packs tbody td{
    padding:10px 5px;
    border-top:1px solid var(--line);
  }
  table.packs td.vol{ font-weight:700; color:var(--purple-deep); }
  table.packs td.cost{ font-weight:700; color:var(--amber); text-align:right; }

  .foot-note{
    margin-top:16px;
    background:#F3EFFA;
    border-radius:12px;
    padding:14px 16px;
    font-size:0.8rem;
    color:#584d6b;
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
  .foot-note svg{ flex-shrink:0; margin-top:2px; }

  /* --- Section basse : solution + contact --- */
  .bottom-section{
    max-width:1080px;
    margin:20px auto 0;
    display:grid;
    grid-template-columns: 0.85fr 1.15fr 1fr;
    gap:15px;
    align-items:stretch;
  }
  @media (max-width:600px){
    .bottom-section{ grid-template-columns:1fr; }
  }

.bottom-section > div:first-child .phone{
  height: auto !important;
}

  /* Téléphone */
  .phone-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:260px;
    padding:20px;
  }
  .phone{
    position:relative;
    z-index:1;
    width:150px;
    background:#241a35;
    border-radius:24px;
    padding:8px;
    box-shadow:0 20px 40px rgba(43,28,60,0.3);
  }
  .phone::after{
    content:"";
    position:absolute; top:14px; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:4px; background:#3a2a52;
  }
  .phone-screen{
    background:linear-gradient(180deg, #fff, #F6F1FB);
    border-radius:18px;
    padding:22px 10px 12px;
    height:230px;
    display:flex; flex-direction:column;
    position:relative;
  }
  .phone-app-bar{
    display:flex; align-items:center; gap:5px;
    font-size:0.5rem; font-weight:700; color:var(--purple-deep);
    margin-bottom:10px;
  }
  .phone-app-bar .dot{ width:14px; height:14px; border-radius:50%; background:var(--yellow); display:flex; align-items:center; justify-content:center;}
  .phone-app-bar .dot svg{ width:8px; height:8px; }
  .phone-bubble{
    background:var(--yellow);
    color:black;
    font-size:0.58rem;
    font-weight:600;
    line-height:1.4;
    padding:10px 12px;
    border-radius:12px;
    border-bottom-left-radius:2px;
    max-width:90%;
  }
  .phone-rocket{
    position:absolute;
    bottom:10px; right:10px;
    width:26px; height:26px;
    border-radius:50%;
    background:var(--yellow);
    display:flex; align-items:center; justify-content:center;
    color:var(--purple-deep);
  }

  /* Solution */
  .solution-block h6{
    font-size:1.5rem;
    color:var(--ink);
    margin:0 0 8px;
    line-height:1.25;
  }
  .solution-block h6 .accent{ color:var(--amber); }
  .solution-block ul{
    list-style:none; margin:0; padding:0;
    display:grid; gap:12px;
  }
  .solution-block li{
    display:flex; gap:9px; align-items:flex-start;
    font-size:0.88rem; color:var(--ink);
  }
  .solution-block li svg{ flex-shrink:0; margin-top:2px; }

  /* Bloc contact */
  .contact-block{
    background:white;
    border-radius:20px;
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .contact-top{ display:flex; gap:14px; align-items:flex-start; }
  .contact-icon{
    width:46px; height:46px; border-radius:50%;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    color:var(--purple);
    flex-shrink:0;
  }
  .contact-top ul{
    list-style:none; margin:0; padding:0;
    display:grid; gap:9px;
  }
  .contact-top li{
    display:flex; gap:8px; align-items:flex-start;
    font-size:0.86rem; color:var(--ink);
    font-weight:600;
  }
  .contact-top li svg{ flex-shrink:0; margin-top:2px; color:var(--purple); }
  .call-cta{
    margin-top:auto;
    background:var(--purple);
    color:#fff;
    border-radius:14px;
    padding:14px 18px;
    display:flex; align-items:center; gap:12px;
    text-decoration:none;
    font-weight:700;
  }
  .call-cta .call-icon{
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,0.15);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .call-cta div span{ display:block; }
  .call-cta .call-label{ font-size:0.68rem; opacity:0.85; letter-spacing:0.04em; text-transform:uppercase; }
  .call-cta .call-num{ font-size:1.05rem; }