/* ============================================================================
   apii-ds.css — DESIGN SYSTEM GLOBAL du site apii.app (V2)
   ----------------------------------------------------------------------------
   Source : page de référence « Offre Pro », classes namespacées « apii- »
            pour ne pas entrer en collision avec Webify Child / Elementor.
   Chemin B : cette feuille est chargée UNE FOIS (CSS additionnel ou thème
              enfant). Chaque page ne fournit que le corps HTML, sans <style>.
   Re-thémage : modifier les variables de :root ci-dessous (une ligne suffit).
   Polices : Jost + Figtree à charger globalement (voir mémo d'installation).
   IMPORTANT : tout le corps d'une page doit être enveloppé dans
               <div class="apii-page"> … </div>  (scope anti-collision).
   ============================================================================ */

/* 1. -------------------------------------------------------------- TOKENS    */
:root{
  --apii-ink:#0E2A3B;        /* texte principal              */
  --apii-muted:#5A6B78;      /* texte secondaire             */
  --apii-faint:#8A9BA8;      /* légendes, eyebrow            */
  --apii-line:#E7EEF4;       /* bordures                     */
  --apii-bg:#FFFFFF;
  --apii-tint:#F4F8FC;       /* fonds de section alternés    */

  --apii-blue:#2E8BFF;       /* primaire / liens             */
  --apii-teal:#18C5D6;       /* secondaire                   */
  --apii-amber:#F5A623;      /* boutons d'action (CTA)       */
  --apii-amber-dark:#E08600;
  --apii-green:#2EA45B;      /* validations / réassurance    */
  --apii-grad:linear-gradient(118deg,#4764A3 0%,#4F74A8 16%,#5D91B4 40%,#68A6BC 60%,#76C3C6 82%,#7ED4CC 100%);
  --apii-dots:
    radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.4px) 0 0 / 20px 20px,
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) 10px 10px / 20px 20px;

  --apii-shadow-sm:0 2px 8px rgba(14,42,59,.06);
  --apii-shadow:0 18px 50px rgba(14,42,59,.10);
  --apii-radius:20px;
  --apii-maxw:1180px;

  --apii-font-display:'Jost',system-ui,sans-serif;
  --apii-font-body:'Figtree',system-ui,sans-serif;
}

/* 2. ---------------------------------------------- BASE (scopée .apii-page)  */
.apii-page{font-family:var(--apii-font-body);color:var(--apii-ink);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
.apii-page *{box-sizing:border-box}
.apii-page h1,.apii-page h2,.apii-page h3{font-family:var(--apii-font-display);line-height:1.1;margin:0;color:var(--apii-ink)}
.apii-page p{margin:0}
.apii-page a{color:var(--apii-blue);text-decoration:none}
.apii-page a:hover{text-decoration:underline}
.apii-wrap{max-width:var(--apii-maxw);margin:0 auto;padding:0 24px}
.apii-section{padding:88px 0}
.apii-section--alt{background:var(--apii-tint)}

/* 3. ---------------------------------------------- EYEBROW (sur-titre)       */
.apii-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--apii-font-body);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--apii-faint);margin-bottom:18px}
.apii-eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--apii-blue)}
.apii-eyebrow--red::before{background:#E5484D}
.apii-eyebrow--orange::before{background:#FF9F1C}
.apii-eyebrow--green::before{background:var(--apii-green)}
.apii-eyebrow--purple::before{background:#6366F1}
.apii-eyebrow--teal::before{background:var(--apii-teal)}
.apii-eyebrow--amber::before{background:var(--apii-amber)}
.apii-eyebrow--blue::before{background:var(--apii-blue)}

/* 4. ---------------------------------------------- BOUTONS                   */
.apii-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--apii-font-body);font-weight:600;font-size:1rem;padding:14px 26px;border-radius:999px;cursor:pointer;border:2px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.apii-btn:hover{text-decoration:none}
.apii-btn--primary{background:var(--apii-amber);color:var(--apii-ink);box-shadow:0 8px 20px rgba(245,166,35,.32)}
.apii-btn--primary:hover{background:var(--apii-amber-dark);color:#fff;transform:translateY(-2px)}
.apii-btn--ghost{background:transparent;color:var(--apii-ink);border-color:var(--apii-line)}
.apii-btn--ghost:hover{border-color:var(--apii-blue);color:var(--apii-blue);transform:translateY(-2px)}
.apii-btn--light{background:#fff;color:var(--apii-ink)}
.apii-btn--light:hover{transform:translateY(-2px);box-shadow:var(--apii-shadow-sm)}

/* 5. ---------------------------------------------- HERO                      */
.apii-hero{position:relative;padding:72px 0 40px;overflow:hidden}
.apii-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 12% 0%,rgba(46,139,255,.10),transparent 60%),radial-gradient(50% 60% at 100% 10%,rgba(24,197,214,.12),transparent 55%);z-index:0}
.apii-hero>*{position:relative;z-index:1}
.apii-hero__head{max-width:760px}
.apii-hero h1{font-size:clamp(2.1rem,5vw,3.45rem);font-weight:700;letter-spacing:-.02em}
.apii-hero h1 .apii-accent{background:var(--apii-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.apii-hero__sub{margin-top:20px;font-size:1.18rem;color:var(--apii-muted);max-width:620px}
.apii-hero__actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.apii-hero__media{margin-top:48px;border-radius:24px;overflow:hidden;box-shadow:var(--apii-shadow)}
.apii-hero__media svg{display:block;width:100%;height:auto}

/* 6. ---------------------------------------------- BARRE DE CONFIANCE        */
.apii-trust{padding:22px 0;border-top:1px solid var(--apii-line);border-bottom:1px solid var(--apii-line);background:var(--apii-tint)}
.apii-trust__row{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;justify-content:center;font-size:.95rem;color:var(--apii-muted);font-weight:500}
.apii-trust__row b{color:var(--apii-ink);font-weight:700}
.apii-dot{width:7px;height:7px;border-radius:50%;background:var(--apii-green);display:inline-block;margin-right:8px;vertical-align:middle}

/* 7. ---------------------------------------------- EN-TÊTE DE SECTION        */
.apii-section-head{max-width:680px;margin-bottom:48px}
.apii-section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.apii-section-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:600;letter-spacing:-.01em}
.apii-section-head p{margin-top:14px;color:var(--apii-muted);font-size:1.1rem}

/* 8. ---------------------------------------------- GRILLE DE CARTES          */
.apii-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.apii-grid--4{grid-template-columns:repeat(4,1fr)}
.apii-card{background:#fff;border:1px solid var(--apii-line);border-radius:var(--apii-radius);padding:30px;transition:transform .2s ease,box-shadow .2s ease}
.apii-card:hover{transform:translateY(-4px);box-shadow:var(--apii-shadow)}
.apii-card__icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.apii-card h3{font-size:1.18rem;font-weight:600;margin-bottom:10px}
.apii-card p{color:var(--apii-muted);font-size:.98rem}

/* 9. ---------------------------------------------- FEATURES ALTERNÉES        */
.apii-feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.apii-feature+.apii-feature{margin-top:96px}
.apii-feature:nth-child(even) .apii-feature__text{order:2}
.apii-feature__text h2{font-size:clamp(1.6rem,2.8vw,2.05rem);font-weight:600;letter-spacing:-.01em}
.apii-feature__text p{margin-top:16px;color:var(--apii-muted)}
.apii-feature__media{border-radius:var(--apii-radius);overflow:hidden;box-shadow:var(--apii-shadow);background:#fff;border:1px solid var(--apii-line)}
.apii-feature__media svg{display:block;width:100%;height:auto}

/* 10. --------------------------------------------- LISTE À COCHES            */
.apii-caplist{list-style:none;padding:0;margin:20px 0 0}
.apii-caplist li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--apii-ink)}
.apii-caplist li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:#E4F6E9}
.apii-caplist li::after{content:"";position:absolute;left:6px;top:8px;width:6px;height:3px;border-left:2px solid var(--apii-green);border-bottom:2px solid var(--apii-green);transform:rotate(-45deg)}

/* 11. --------------------------------------------- CAPCARDS (détail offre)   */
.apii-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.apii-capcard{background:#fff;border:1px solid var(--apii-line);border-radius:var(--apii-radius);padding:28px}
.apii-capcard h3{font-size:1.12rem;font-weight:600;margin-bottom:6px}
.apii-capcard .apii-caplist{margin-top:14px}
.apii-capcard .apii-caplist li{font-size:.96rem;color:var(--apii-muted);margin-bottom:9px}
.apii-capcard .apii-caplist li::before{background:#EAF4FF}
.apii-capcard .apii-caplist li::after{border-color:var(--apii-blue)}

/* 12. --------------------------------------------- BANDEAU DÉGRADÉ           */
.apii-band{background:var(--apii-grad);color:#fff;border-radius:28px;padding:56px;text-align:center;margin:0 auto;box-shadow:var(--apii-shadow)}
.apii-band h2{color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600}
.apii-band p{margin-top:12px;color:rgba(255,255,255,.9);font-size:1.12rem}
.apii-band .apii-btn{margin-top:26px}

/* 13. --------------------------------------------- FAQ (balises <details>)   */
.apii-faq{max-width:820px;margin:0 auto}
.apii-faq details{border:1px solid var(--apii-line);border-radius:16px;padding:4px 24px;margin-bottom:14px;background:#fff;transition:box-shadow .2s ease}
.apii-faq details[open]{box-shadow:var(--apii-shadow-sm)}
.apii-faq summary{font-family:var(--apii-font-display);font-weight:600;font-size:1.12rem;padding:20px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.apii-faq summary::-webkit-details-marker{display:none}
.apii-faq summary::after{content:"+";font-size:1.5rem;color:var(--apii-blue);font-weight:400;transition:transform .2s ease}
.apii-faq details[open] summary::after{transform:rotate(45deg)}
.apii-faq p{color:var(--apii-muted);padding:0 0 22px}

/* 14. --------------------------------------------- CTA FINAL                 */
.apii-cta-final{text-align:center;padding:90px 0}
.apii-cta-final h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.01em}
.apii-cta-final p{margin:14px auto 0;color:var(--apii-muted);max-width:560px;font-size:1.1rem}
.apii-cta-final .apii-btn{margin-top:28px}

/* 15. --------------------------------------------- PIED DE PAGE (si en HTML) */
/* Recommandation : construire l'en-tête et le pied de page comme MODÈLES
   globaux Elementor (Theme Builder), pas dans le HTML de chaque page.
   Ces classes ne servent que si tu intègres le footer en HTML brut.          */
.apii-footer{background:var(--apii-grad);color:#fff;padding:60px 0 36px}
.apii-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px}
.apii-foot__brand{max-width:320px}
.apii-foot__logo{font-family:var(--apii-font-display);font-weight:700;font-size:1.5rem;letter-spacing:.04em}
.apii-foot__tag{margin-top:10px;color:rgba(255,255,255,.85)}
.apii-foot__cols{display:flex;gap:56px;flex-wrap:wrap}
.apii-foot__col h4{font-family:var(--apii-font-body);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:0 0 14px;font-weight:600}
.apii-foot__col a{display:block;color:#fff;opacity:.92;margin-bottom:9px;font-size:.98rem}
.apii-foot__col a:hover{opacity:1;text-decoration:underline}
.apii-foot__bottom{margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.22);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.9rem;color:rgba(255,255,255,.8)}
.apii-logodots{display:inline-grid;grid-template-columns:repeat(3,7px);gap:4px;vertical-align:middle;margin-right:12px}
.apii-logodots span{width:7px;height:7px;border-radius:50%}

/* 16. --------------------------------------------- MARQUEUR ÉDITORIAL        */
.apii-todo{background:#FFE4E4;color:#B42318;font-size:.82em;padding:1px 7px;border-radius:6px;font-weight:600}

/* 17. --------------------------------------------- ANIMATIONS / FOCUS        */
@media (prefers-reduced-motion:no-preference){
  .apii-reveal{opacity:0;transform:translateY(16px);animation:apii-rise .7s ease forwards}
  .apii-hero__media{animation:apii-rise .9s .15s ease both}
  @keyframes apii-rise{to{opacity:1;transform:none}}
}
.apii-page a:focus-visible,.apii-btn:focus-visible{outline:3px solid var(--apii-blue);outline-offset:3px;border-radius:6px}

/* 18. --------------------------------------------- RESPONSIVE                */
@media (max-width:980px){.apii-grid--4{grid-template-columns:repeat(2,1fr)}.apii-caps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:880px){
  .apii-grid{grid-template-columns:1fr}.apii-grid--4{grid-template-columns:1fr}.apii-caps{grid-template-columns:1fr}
  .apii-feature{grid-template-columns:1fr;gap:28px}
  .apii-feature:nth-child(even) .apii-feature__text{order:0}
  .apii-band{padding:40px 24px}.apii-section{padding:60px 0}
}


/* =================================================================
   COMPOSANTS V2 (validés page Accueil)
   ================================================================= */

/* 5b. HERO — VARIANTE MARQUE (dégradé + points fins + hauteur +15%) */
.apii-hero--brand{
  background:var(--apii-dots), var(--apii-grad);
  overflow:hidden;
  padding-top:88px;        /* +15% d'espace vs hero standard */
  padding-bottom:72px;
}
.apii-hero--brand::before{display:none}
.apii-hero--brand .apii-eyebrow{color:rgba(255,255,255,.85)}
.apii-hero--brand .apii-eyebrow::before{background:#fff}
.apii-hero--brand h1{color:#fff}
.apii-hero--brand h1 .apii-accent{background:none;-webkit-text-fill-color:#fff;color:#fff}
.apii-hero--brand .apii-hero__sub{color:rgba(255,255,255,.92)}
.apii-hero--brand .apii-btn--ghost{border-color:rgba(255,255,255,.65);color:#fff}
.apii-hero--brand .apii-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
@media (min-width:881px){
  .apii-hero--brand .apii-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .apii-hero--brand .apii-hero__head{max-width:none}
  .apii-hero--brand .apii-hero__media{margin-top:0}
}

/* Carrousel clients (marquee auto) */
.apii-carousel{overflow:hidden;margin-top:8px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.apii-carousel__track{display:flex;gap:24px;width:max-content;animation:apii-marquee 30s linear infinite}
.apii-carousel:hover .apii-carousel__track{animation-play-state:paused}
.apii-carousel__slide{flex:0 0 auto;width:230px;height:120px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--apii-line);border-radius:18px;
  color:var(--apii-faint);font-family:var(--apii-font-display);font-weight:600;font-size:1.05rem;text-align:center;padding:16px}
@keyframes apii-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Média illustratif dans une carte (visuels métiers) */
.apii-card__media{display:block;border-radius:14px;overflow:hidden;margin-bottom:16px;background:#F7FAFD}
.apii-card__media svg{display:block;width:100%;height:auto}

/* Étoiles avis */
.apii-stars{margin-top:6px}
.apii-stars svg{height:38px;width:auto}

/* Contact support — fond de marque */
.apii-cta-final--brand{background:var(--apii-dots), var(--apii-grad);color:#fff}
.apii-cta-final--brand h2{color:#fff}
.apii-cta-final--brand p{color:rgba(255,255,255,.92)}

@media (prefers-reduced-motion:reduce){.apii-carousel__track{animation:none}}


/* =================================================================
   GABARIT 2 — PILIER ÉDITORIAL (validé sur Intégrations)
   ================================================================= */
.apii-wrap--narrow{max-width:880px;margin:0 auto;padding:0 24px}

/* Hero pilier : bandeau dégradé + points, visuel centré, titre en dessous */
.apii-hero--pillar{background:var(--apii-dots),var(--apii-grad);padding:56px 0;overflow:hidden}
.apii-hero--pillar::before{display:none}
.apii-hero--pillar .apii-hero__media{margin:0 auto;max-width:900px}

.apii-pillar-head h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:700;letter-spacing:-.02em}
.apii-lead{font-size:1.2rem;line-height:1.6;color:var(--apii-ink);margin-top:22px}
.apii-lead b{font-weight:700}

/* Corps rédactionnel : H2/H3 + paragraphes + liens dans le texte */
.apii-prose{color:var(--apii-ink);font-size:1.05rem}
.apii-prose h2{font-size:clamp(1.5rem,2.7vw,2.05rem);font-weight:600;letter-spacing:-.01em;margin:52px 0 0}
.apii-prose h3{font-size:1.3rem;font-weight:600;margin:34px 0 0}
.apii-prose p{margin:14px 0 0;color:var(--apii-muted)}
.apii-prose p b,.apii-prose p strong{color:var(--apii-ink);font-weight:700}
.apii-prose a{color:var(--apii-blue);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.apii-prose a:hover{color:#1f6fe0}
.apii-prose .apii-link-arrow{display:inline-block;margin-top:4px}