/* ===== Solutions complètes (section carte centrée, sans background) ===== */
:root{
  --sol-card-bg:#f6f7ff;
  --sol-text:#0f172a;
  --sol-muted:#334155;
  --sol-primary:#2b4c87;          /* bleu bouton plein */
  --sol-primary-contrast:#ffffff;
  --sol-outline:#0f172a;
  --sol-shadow:0 16px 40px rgba(15,23,42,.14);
  --sol-radius:28px;
}

.hf-solutions{
  position: relative;
  padding: clamp(48px,6vw,96px) 0;
  display:flex; 
  align-items:center; 
  justify-content:center;
  overflow: hidden;
}

/* carte */
.hf-solutions__card{
  position: relative;
  width:min(980px,92vw);
  margin-inline:auto;
  background:var(--sol-card-bg);
  color:var(--sol-text);
  border-radius: calc(var(--sol-radius) + 8px);
  box-shadow:var(--sol-shadow);
  text-align:center;
  padding: clamp(28px,4.5vw,44px) clamp(18px,3vw,28px);
}

.hf-solutions__icon{
  display:block; width:44px; height:44px;
  margin: 6px auto 12px;
}

.hf-solutions__title{
  font-size: clamp(22px, 2.6vw, 28px);
  line-height:1.25;
  margin: 0 0 14px;
  font-weight: 800;
  color:#111827;
}

.hf-solutions__text{
  margin: 0 auto clamp(18px,3.2vw,26px);
  max-width: 78ch;
  color: var(--sol-muted);
  font-weight: 400;
}

/* boutons */
:where(body) .hf-btn{
  all:unset;
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  gap:10px;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 15px; 
  line-height:1; 
  font-weight:700;
  cursor:pointer; 
  user-select:none;
  min-width: 170px;
  text-align:center;
  transition: transform .15s ease, 
              box-shadow .15s ease, 
              background-color .15s ease, 
              color .15s ease, 
              border-color .15s ease;
}

.hf-solutions__actions{
  display:flex; 
  align-items:center; 
  justify-content:center;
  gap: 14px; 
  flex-wrap:wrap;
}

:where(body) .hf-btn--primary{
  background: var(--sol-primary);
  color: var(--sol-primary-contrast);
  box-shadow: 0 6px 16px rgba(43,76,135,.25);
}
:where(body) .hf-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(43,76,135,.32);
}

:where(body) .hf-btn--outline{
  background: transparent;
  color: var(--sol-outline);
  border: 2px solid var(--sol-outline);
}
:where(body) .hf-btn--outline:hover{
  transform: translateY(-1px);
  background: rgba(15,23,42,.06);
}

/* Accessibilité (titre masqué) */
.sr-only{
  position:absolute!important; 
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Responsive */
@media (max-width:768px){
  .hf-solutions__card{ border-radius:24px; padding:22px 16px; }
  .hf-solutions__text{ font-size:clamp(14px,4vw,16px); }
  .hf-btn{ min-width:140px; padding:10px 16px; font-size:14px; border-radius:12px; }
}
@media (max-width:360px){
  .hf-solutions__card{ padding:18px 12px; }
  .hf-btn{ min-width:130px; padding:9px 14px; font-size:13.5px; }
}



/* ===== Section 2 : Team / Co-founders (symétrique à la section 1) ===== */
:root{
  --team-card-bg:#ffffff;
  --team-text:#2a3997;
  --team-shadow:0 8px 24px rgba(0,0,0,.06);
  --team-radius:18px;

  --team-photo: 220px;
  --team-gap: 28px;
  --team-pad-y: 28px;
  --team-pad-x: 32px;
}

.hf-team{
  padding: clamp(36px,6vw,72px) 0;
  display:grid;
  gap: clamp(20px,3vw,28px);
}

.hf-team__item{
  display:grid;
  grid-template-columns: var(--team-photo) 1fr; 
  column-gap: var(--team-gap);
  align-items: center;
  background: var(--team-card-bg);
  border-radius: var(--team-radius);
  box-shadow: var(--team-shadow);
  padding: var(--team-pad-y) var(--team-pad-x);
  min-height: calc(var(--team-photo) + var(--team-pad-y) * 2);
}

.hf-team__item--reverse{
  grid-template-columns: 1fr var(--team-photo); 
  column-gap: var(--team-gap);
}
.hf-team__item--reverse .hf-team__media{
  order:2;
  justify-content:flex-end;                 
}
.hf-team__item--reverse .hf-team__content{
  order:1;
  width:100%;                            
  max-width:none;                            
  text-align:left;                           
  align-items:flex-start;
}

.hf-team__item--reverse .hf-team__name,
.hf-team__item--reverse .hf-team__role{
  width:100%;
  text-align:right;
}

.hf-team__media{ display:flex; justify-content:center; }
.hf-team__photo{
  width: var(--team-photo); height: var(--team-photo);
  border-radius: 50%;
  object-fit: cover;
  display:block;
}

.hf-team__content{
  color:var(--team-text);
  display:flex; flex-direction:column;
  gap: 8px;
}
.hf-team__name{
  margin:0;
  font-size: clamp(20px,2.2vw,26px);
  font-weight:800;
  color:var(--team-text);
}
.hf-team__role{
  margin:0;
  font-weight:600;
  color:var(--team-text);
}
.hf-team__text{
  margin:0;
  color: var(--team-text);
  font-size: clamp(15px,1.1vw,16px);
  line-height:1.6;
}

.hf-team__text--quote{ font-style: italic; text-align:left; }


@media (max-width: 768px){
  .hf-team__item,
  .hf-team__item--reverse{
    grid-template-columns: 1fr;
    min-height: initial;
    text-align:center;
  }
  .hf-team__media{ justify-content:center; }
  .hf-team__content{
    align-items:center;
    text-align:center;
  }

  .hf-team__item--reverse .hf-team__name,
  .hf-team__item--reverse .hf-team__role{
    text-align:center;
  }
  .hf-team__photo{ width:160px; height:160px; }
}


@media (min-width: 769px){
  .hf-team__item--reverse .hf-team__content{
    align-items: flex-end;            
  }
  .hf-team__item--reverse .hf-team__text,
  .hf-team__item--reverse .hf-team__text--quote{
    width: 100%;
    text-align: right !important;      
  }
}


@media (max-width: 1024px){
  .hf-team__item--reverse .hf-team__media{
    justify-content: center !important;
  }
}


@media (max-width: 768px){
  .hf-team__item--reverse .hf-team__media{
    order: 2;
    justify-content: center !important;
  }

  .hf-team__item--reverse .hf-team__photo{ margin-left:auto; margin-right:auto; }
}


@media (max-width: 1024px){
  .hf-team__item--reverse .hf-team__media{
    margin-top: clamp(12px, 2.5vw, 24px); 
    justify-content: center !important;   
  }
  .hf-team__item--reverse .hf-team__photo{
    display: block;
    margin-left: auto;
    margin-right: auto;          
  }
}

@media (max-width: 480px){
  .hf-team__item--reverse .hf-team__media{
    margin-top: clamp(16px, 5vw, 28px);
  }
}

.hf-team__heading{
  margin: 0 0 clamp(16px, 3vw, 28px);
  color: #000;              
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.2;
}

@media (max-width: 480px){
  .hf-team__heading{ font-size: clamp(20px, 5vw, 20px); }
}