:root{
  --s4-bg: #000;
  --s4-card-bg:#fff;
  --s4-title:#27406f;      
  --s4-text:#333;
  --s4-radius:26px;  
  --s4-shadow:0 12px 28px rgba(0,0,0,.12);
  --s4-num:#e9eef6;       
}

/* fond */
.hf-section4{
  background:var(--s4-bg);
  padding:clamp(44px,6vw,90px) 0;
}

/* grille 3 colonnes + gaps réguliers */
.hf-s4-grid{
  width:min(1200px,92vw);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,32px);
}
@media (max-width: 1024px){
  .hf-s4-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  .hf-s4-grid{ grid-template-columns:1fr; }
}

/* carte */
.hf-s4-card{
  position:relative;
  background:var(--s4-card-bg);
  border-radius:var(--s4-radius);
  box-shadow:var(--s4-shadow);
  padding:clamp(26px,3.4vw,34px) clamp(22px,2.6vw,28px) clamp(30px,3.6vw,40px);
  display:grid;
  grid-template-rows:auto auto 1fr auto; 
  justify-items:center;                  
  text-align:center;
  overflow:hidden;
}

/* CHIFFRE en arrière-plan, aligné à gauche du titre */
.hf-s4-num{
  position:absolute;
  top: clamp(18px, 2.4vw, 26px);
  left: clamp(18px, 2.2vw, 26px);    
  font-weight:800;
  font-size:clamp(68px, 7vw, 96px);  
  line-height:1;
  color:var(--s4-num);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.04));
  z-index:0;
  pointer-events:none;
}

/* Titre plus fort, compact, “décollé” du chiffre */
.hf-s4-card h3{
  position:relative;
  z-index:1;
  color:var(--s4-title);
  font-weight:800;
  font-size:clamp(20px,1.6vw,28px);
  line-height:1.25;
  margin: 6px 0 10px;
  padding-left: clamp(30px, 3vw, 44px);
}

/* Paragraphe */
.hf-s4-card p{
  position:relative;
  z-index:1;
  color:var(--s4-text);
  font-size:clamp(14px,1vw,16px);
  line-height:1.55;
  margin: 6px 0 22px;
  max-width: 36ch; /* largeur de lecture confortable */
}

/* Bouton */
.hf-s4-btn{
  position:relative;
  z-index:1;
  display:inline-block;
  padding: 12px 22px;
  border-radius:12px;
  background:var(--s4-title);
  color:#fff;
  font-weight:800;
  text-decoration:none;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
  margin-top: 2px;
}
.hf-s4-btn:hover{ transform: translateY(-1px); }
.hf-s4-btn:active{
  transform: translateY(0);
  box-shadow: inset 0 2px 0 rgba(0,0,0,.14);
}

/* Petits raffinements : espacements et rayon visuels */
.hf-s4-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--s4-radius);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
  pointer-events:none;
}


/* ===== Boutons unifiés – S4 (anti-écrasement thème) ===== */
.hf-section4 .hf-s4-card .hf-s4-btn,
.hf-section4 .hf-s4-card a.hf-btn,
.hf-section4 .hf-s4-card a.hf-btn.hf-btn--primary{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:none !important;
  text-decoration:none !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  background:var(--s4-title) !important;
  color:#fff !important;

  padding:12px 22px !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.3 !important;
  text-transform:none !important;

  border-radius:12px !important;
  min-width:150px !important;
  height:auto !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12) !important;

  transition: transform .12s ease, box-shadow .2s ease, background .2s ease !important;
}

.hf-section4 .hf-s4-card .hf-s4-btn:hover,
.hf-section4 .hf-s4-card a.hf-btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(39,64,111,.28) !important;
}

.hf-section4 .hf-s4-card .hf-s4-btn:active,
.hf-section4 .hf-s4-card a.hf-btn:active{
  transform: translateY(0) !important;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.16) !important;
}

.hf-section4 .hf-s4-card .hf-s4-btn:focus-visible,
.hf-section4 .hf-s4-card a.hf-btn:focus-visible{
  outline: 3px solid rgba(39,64,111,.35) !important;
  outline-offset: 2px !important;
}