/* =========================================================
   OFFIL_OFFRES_v1.css
   Scope : écrans OFFIL (S21+ / S22) — cartes “Offres payantes”
   Objectif : typo + alignements + CTA compacts + bullets “pills”
   Règle : patch isolé, ne touche pas au socle (header/progress/footer)
   ========================================================= */

/* ---------- 1) Typo (comme demandé) ---------- */
.offil-benefit-title{
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

.offil-benefit-desc{
  font-size: 16px;
  line-height: 1.55;
}

/* ---------- 2) Alignement texte (tout part au même axe) ---------- */
/* On neutralise les décalages internes et on garde une lecture propre */
.offil-benefit-text{
  padding-left: 0 !important;
}

.offil-benefit-text .offil-text-bloc{
  margin-left: 0 !important;
}

/* Harmonise les espacements des paragraphs dans les blocs d’offres */
.offil-benefit-text p{
  margin: 8px 0;
}

/* ---------- 3) CTA : 2 boutons sur une seule ligne (compact) ---------- */
.offil-cta-row{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 14px;
  flex-wrap: nowrap;
}

/* Réduction “soft” des boutons (sans casser le style OFFIL) */
.offil-cta-row .offil-btn{
  padding: 12px 14px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  border-radius: 12px !important;
  min-height: 44px; /* tap target */
  white-space: nowrap;
}

/* Pour éviter que le primaire prenne toute la largeur */
.offil-cta-row .offil-btn--primary{
  width: auto !important;
}

/* Le secondaire “ghost” reste compact */
.offil-cta-row .offil-btn--ghost{
  width: auto !important;
}

/* Responsive : si écran trop étroit, on autorise un passage en 2 lignes propre */
@media (max-width: 360px){
  .offil-cta-row{
    flex-wrap: wrap;
  }
}

/* ---------- 4) Remplacement des bullet “•” par des pills OFFIL ---------- */
.offil-pill-dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #eef2f7;
  color: #0a3a76;
  font-size: 12px;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
  transform: translateY(2px); /* aligne visuellement avec la baseline */
}

/* Ligne de livrable (structure simple) */
.offil-offre-item{
  display: flex;
  align-items: flex-start;
  margin-bottom: 6px;
}

.offil-offre-item:last-child{
  margin-bottom: 0;
}
/* ---------- Accordéons OFFIL (offres) ---------- */
.offil-accordion{
  border-top: 1px solid rgba(15,23,42,.08);
  padding-top: 12px;
  margin-top: 12px;
}

.offil-accordion-summary{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.offil-accordion-summary::-webkit-details-marker{
  display: none;
}

.offil-accordion-icon{
  font-size: 18px;
  line-height: 1;
}

.offil-accordion-content{
  margin-top: 8px;
  padding-left: 28px; /* aligné après icône */
}

/* ---------- Items livrables avec icônes ---------- */
.offil-offre-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

/* Icône livrable */
.offil-offre-icon{
  width: 20px;
  flex-shrink: 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.2;
  color: #0a3a76;
}

/* Décalage du contenu des accordéons vers la gauche */
.offil-accordion-content{
  padding-left: 20px; /* réduit le retrait */
}

/* Supprime les bullets natives */
.offil-accordion-content ul{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Icône dans le titre d’accordéon */
.offil-acc-ico{
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

/* Summary aligné + flèche à droite */
.offil-accordion-summary{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Contenu moins décalé vers la droite (plus “aligné”) */
.offil-accordion-content{
  padding-left: 22px;
}

.offil-compare-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.offil-compare-col{
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
  line-height: 1.4;
}

.offil-compare-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.4;
}

.offil-compare-table th,
.offil-compare-table td{
  padding:10px;
  border-bottom:1px solid #e5e7eb;
  vertical-align:top;
}

.offil-compare-table thead th{
  font-weight:600;
  text-align:left;
  background:#f8fafc;
}

.offil-compare-table tbody tr:last-child td{
  border-bottom:none;
}

/* Mobile : scroll horizontal propre si besoin */
.offil-compare-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Wrapper scroll horizontal */
.offil-compare-wrapper{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table largeur minimale */
.offil-compare-table{
  min-width: 720px; /* clé du problème */
  width:100%;
  border-collapse: collapse;
  font-size:15px;
  line-height:1.4;
}

/* Cellules */
.offil-compare-table th,
.offil-compare-table td{
  padding:10px;
  border-bottom:1px solid #e5e7eb;
  vertical-align: top;
  background:#fff;
}

/* En-tête */
.offil-compare-table thead th{
  font-weight:600;
  background:#f8fafc;
}

/* Colonne sticky (fonction / usage) */
.offil-sticky-col{
  position: sticky;
  left: 0;
  background:#fff;
  z-index: 2;
  min-width: 160px;
}

/* Header sticky */
.offil-compare-table thead .offil-sticky-col{
  z-index: 3;
  background:#f8fafc;
}
.offil-offer-price {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  margin: 6px 0 4px;
  color: var(--offil-primary);
}

.offil-offer-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.offil-offer-select input {
  transform: scale(0.9);
}
.offil-footer-spacer {
  height: 96px; /* = hauteur du footer + marge confort */
  flex-shrink: 0;
}
.compare-container {
  scrollbar-width: none;        /* Firefox */
}

.compare-container::-webkit-scrollbar {
  display: none;                /* Chrome / Safari */
}

/* =========================================================
   OFFIL — PATCH MOBILE SAFARI (iOS) + liens (no underline)
   STATUT : ACTIF (plugin) — non-canon, overrides only
   Objectifs :
   - empêcher le soulignement des CTA (liens <a>)
   - neutraliser le style natif iOS des <select>/<input> (couleurs iOS)
   - préserver la charte OFFIL (bleu/rouge) et la typo
   ========================================================= */

.offil-app a,
.offil-app a:visited,
.offil-app a:hover,
.offil-app a:active,
.offil-app a:focus{
  text-decoration: none !important;
  color: inherit;
}

/* Evite le “flash” bleu iOS au tap */
.offil-app *{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Neutralise l’auto-style iOS sur contrôles */
.offil-app input,
.offil-app select,
.offil-app textarea,
.offil-app button{
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* IMPORTANT : iOS force souvent un style natif sur <select>.
   On le neutralise et on restyle comme un champ OFFIL */
.offil-select{
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  padding: 12px 44px 12px 14px; /* place pour l’icône */
  line-height: 1.2;
  color: var(--offil-blue); /* empêche le bleu iOS */
}

/* Flèche custom (SVG inline) */
.offil-select{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%230a3a76' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* Cache la flèche IE/Edge legacy (sans effet sur iOS) */
.offil-select::-ms-expand{ display:none; }

/* Correction “bleu iOS” sur placeholders */
.offil-app input::placeholder,
.offil-app textarea::placeholder{
  color: #9aa6b2;
  opacity: 1;
}

/* CTA : certains écrans utilisent <a> avec classes bouton.
   On force l’absence de soulignement même si WP injecte des styles. */
.offil-btn,
.offil-btn *{
  text-decoration: none !important;
}

/* Optionnel : si un thème WP applique un style global sur a{...} */
.offil-app a.offil-btn{
  text-decoration: none !important;
}

/* OFFIL — FIX FOOTER FIN DE TUNNEL (S22 ONLY) */
.offil-s22 .offil-main {
  padding-bottom: 100px;
}


/* ======================================================
   OFFIL — FIX GLOBAL FOOTER CTA (CANONIQUE)
   Empêche tout écrasement visuel du bouton primaire
   ====================================================== */

.offil-footer .offil-btn--primary {
  background-color: #0a3a76;
  color: #ffffff;
  opacity: 1;
}

/* Sécurité : même si un disabled existe par erreur */
.offil-footer .offil-btn--primary[disabled],
.offil-footer .offil-btn--primary.is-disabled {
  background-color: #0a3a76;
  color: #ffffff;
  opacity: 1;
}
/* ======================================================
   OFFIL — FIX GLOBAL CTA RETOUR (GHOST)
   Assure lisibilité et contraste en footer
   ====================================================== */

.offil-footer .offil-btn--ghost {
  color: #0a3a76;
  opacity: 1;
}

/* Sécurité : aucun état ne doit l'affadir */
.offil-footer .offil-btn--ghost[disabled],
.offil-footer .offil-btn--ghost.is-disabled {
  color: #0a3a76;
  opacity: 1;
}

/* ======================================================
   OFFIL — FIX ROBUSTE CTA RETOUR (GHOST) — FOOTER
   Objectif : empêcher tout gris/opacity/filter en S21+
   ====================================================== */

/* 1) Force la couleur sur le bouton et tous ses enfants */
.offil-footer .offil-footer-actions .offil-btn--ghost,
.offil-footer .offil-footer-actions .offil-btn--ghost * {
  color: #0a3a76 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* 2) Si une icône SVG est utilisée (stroke/fill) */
.offil-footer .offil-footer-actions .offil-btn--ghost svg,
.offil-footer .offil-footer-actions .offil-btn--ghost svg * {
  fill: #0a3a76 !important;
  stroke: #0a3a76 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* 3) Neutralise un éventuel "disabled look" global (même si le bouton n'est pas disabled) */
.offil-footer .offil-footer-actions .offil-btn--ghost[disabled],
.offil-footer .offil-footer-actions .offil-btn--ghost.is-disabled {
  color: #0a3a76 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* 4) Cas fréquent : un parent applique une opacité */
.offil-footer,
.offil-footer .offil-footer-actions {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* ======================================================
   OFFIL — FIX TYPOGRAPHIE CTA FOOTER (CANONIQUE)
   Empêche tout écrasement de police par les scopes Sxx
   ====================================================== */

.offil-footer .offil-btn {
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}


/* S22 uniquement */
body[data-step="S22"] .offil-footer-actions{
  flex-direction: column;
  gap: 12px;
}