/* ============================================================
   components.css — Boutons, hero, cards, forms, badges, etc.
   ============================================================ */

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:600;font-size:.97rem;line-height:1;
  padding:.85rem 1.4rem;border-radius:var(--radius-pill);
  border:1.5px solid transparent;cursor:pointer;text-align:center;
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition),color var(--transition);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:.6rem 1rem;font-size:.9rem}
.btn--lg{padding:1rem 1.8rem;font-size:1.05rem}
.btn--block{width:100%}

.btn--primary{background:var(--cta-primary-bg);color:var(--cta-primary-fg);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--c-accent-700);color:#fff;box-shadow:0 12px 24px -10px rgba(229,50,43,.55)}
.btn--secondary{background:var(--cta-secondary-bg);color:var(--cta-secondary-fg)}
.btn--secondary:hover{background:var(--c-primary-700);color:#fff}
.btn--accent{background:var(--c-ink);color:#fff}
.btn--accent:hover{background:#06203b;color:#fff}
.btn--ghost{background:transparent;border-color:var(--c-border);color:var(--c-text)}
.btn--ghost:hover{border-color:var(--c-primary);color:var(--c-primary-700);background:var(--c-primary-50)}
.btn--light{background:#fff;color:var(--c-ink)}
.btn--light:hover{background:var(--c-primary-50);color:var(--c-primary-700)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,5vw,4rem)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(900px 500px at 88% -8%,rgba(229,50,43,.12),transparent 60%),
    radial-gradient(700px 500px at 5% 10%,rgba(35,72,200,.12),transparent 55%),
    linear-gradient(180deg,#fff,var(--c-bg));
}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero__title{font-size:var(--step-6);margin-block:.4rem .9rem}
.hero__lead{font-size:var(--step-1);color:var(--c-text-2);max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-block:var(--sp-8) var(--sp-6)}
.hero__points{display:grid;gap:.4rem;color:var(--c-text-2);font-weight:500}
.hero__points li{font-size:.98rem}

.hero__card{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--shadow-lg);
}
.hero__card-title{font-size:var(--step-1)}
.hero__card-sub{color:var(--c-text-2);margin-block:.35rem var(--sp-5);font-size:.95rem}

.hero__trust{display:flex;align-items:center;gap:var(--sp-5);margin-top:clamp(2rem,5vw,3.5rem);flex-wrap:wrap}
.hero__trust p{color:var(--c-text-2);font-size:.92rem;max-width:48ch}

/* ---------- Hero bannière (photo plein écran, esprit éditorial) ---------- */
.hero-banner{position:relative;display:flex;align-items:center;overflow:hidden;min-height:clamp(440px,72vh,660px)}
.hero-banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;z-index:0}
.hero-banner__overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(16,26,77,.94) 0%,rgba(16,26,77,.74) 40%,rgba(16,26,77,.32) 68%,rgba(16,26,77,.05) 100%)}
.hero-banner__content{position:relative;z-index:2;color:#fff;max-width:660px;padding-block:var(--sp-12)}
.hero-banner__eyebrow{color:rgba(255,255,255,.82)}
.hero-banner__title{color:#fff;margin-block:.4rem .9rem}
.hero-banner__lead{color:rgba(255,255,255,.94);max-width:46ch}
.section--trust{padding-block:var(--sp-10)}
.section--trust .hero__trust{margin-top:0}
@media (max-width:680px){
  .hero-banner{min-height:auto}
  .hero-banner__bg{object-position:68% center}
  .hero-banner__overlay{background:linear-gradient(180deg,rgba(16,26,77,.74),rgba(16,26,77,.92))}
  .hero-banner__content{padding-block:var(--sp-16)}
}

/* ---------- Macaron Qualiopi (placeholder typographique) ---------- */
.qualiopi-badge{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;background:#fff;border:2px solid var(--c-primary);color:var(--c-primary-700);
  border-radius:var(--radius);padding:.5rem .9rem;line-height:1.1;box-shadow:var(--shadow-sm);
}
.qualiopi-badge strong{font-family:var(--font-title);font-size:1.05rem;letter-spacing:.02em}
.qualiopi-badge small{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-2)}
.qualiopi-badge--lg{padding:.8rem 1.3rem}
.qualiopi-badge--lg strong{font-size:1.35rem}

/* ---------- Cards ---------- */
.card{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:var(--sp-8);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.card__icon{
  display:grid;place-items:center;width:54px;height:54px;border-radius:14px;
  background:var(--c-accent-50);color:var(--c-accent-700);font-size:1.5rem;margin-bottom:var(--sp-4);
}
.card__title{margin-bottom:var(--sp-2)}
.card p{color:var(--c-text-2)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);text-align:center;align-items:end}
.stat__num{display:block;font-family:var(--font-title);font-weight:800;font-size:var(--step-3);color:var(--c-primary-700)}
.stat__num--sm{font-size:var(--step-2)}
.stat__num span{color:var(--c-accent);font-size:.6em}
.stat__label{color:var(--c-text-2);font-size:.95rem;font-weight:500}

/* ---------- Split double CTA ---------- */
.split__panel{border-radius:var(--radius-lg);padding:clamp(1.75rem,4vw,2.75rem);color:#fff}
.split__panel h2{color:#fff;font-size:var(--step-2)}
.split__panel p{margin-block:var(--sp-3) var(--sp-6);opacity:.92;max-width:38ch}
.split__panel--candidat{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-700))}
.split__panel--entreprise{background:linear-gradient(135deg,#0d3a64,var(--c-ink))}

/* ---------- Formulaires ---------- */
.form{display:grid;gap:var(--sp-4)}
.field{display:grid;gap:.35rem}
.field label{font-weight:600;font-size:.9rem;color:var(--c-ink)}
.field input,.field textarea,.field select{
  width:100%;padding:.8rem 1rem;border:1.5px solid var(--c-border);border-radius:var(--radius-sm);
  background:#fff;transition:border-color var(--transition),box-shadow var(--transition);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--c-primary);box-shadow:0 0 0 4px var(--c-primary-50);
}
.form__note{font-size:.8rem;color:var(--c-text-2);line-height:1.5}
/* Honeypot anti-spam (champ caché aux humains) */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Cookie banner ---------- */
.cookie-banner{position:fixed;inset:auto 1rem 1rem 1rem;z-index:200;display:none;justify-content:center}
.cookie-banner.is-open{display:flex}
.cookie-banner__inner{
  display:flex;align-items:center;gap:var(--sp-5);max-width:760px;width:100%;
  background:var(--c-ink);color:#e7eef7;padding:var(--sp-5) var(--sp-6);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);flex-wrap:wrap;
}
.cookie-banner__text{font-size:.9rem;flex:1;min-width:240px}
.cookie-banner__text a{color:var(--c-accent)}
.cookie-banner__actions{display:flex;gap:var(--sp-3)}
.cookie-banner .btn--ghost{border-color:rgba(255,255,255,.3);color:#e7eef7}

/* ---------- Barre CTA mobile ---------- */
.cta-bar{display:none}
@media (max-width:680px){
  .cta-bar{
    position:fixed;inset:auto 0 0 0;z-index:150;display:flex;gap:.6rem;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
    border-top:1px solid var(--c-border);box-shadow:0 -8px 24px -12px rgba(11,42,74,.2);
  }
  body{padding-bottom:72px}
}

/* ---------- Animation au scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity var(--transition-slow),transform var(--transition-slow)}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
}

@media (max-width:820px){.hero__grid{grid-template-columns:1fr}}
@media (max-width:680px){.stats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  /* Hero mobile : titre mesuré + actions empilées pleine largeur */
  .hero__title{font-size:var(--step-4)}
  .hero__actions{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .hero__actions .btn{width:100%}
}