/* =============================================
   TRUST.CSS - Bandeau « garanties » (réassurance)
   Composant autonome, chargé par toutes les pages :
   pages de contenu (page.css) + accueil, /ia, /digital.
   Variables locales avec repli : fonctionne quel que soit le thème.

   <section class="guarantees" aria-label="Mes engagements">
     <ul>
       <li><svg class="g-ico">…</svg><b>Titre</b><span>Détail</span></li> × 5
     </ul>
   </section>
   ============================================= */

.guarantees {
  --g-ink: var(--ink, #14101a);
  --g-accent: var(--bord, #8B1538);
  --g-muted: var(--muted, #625d6b);
  --g-hair: rgba(20, 16, 26, .12);
  --g-title: var(--display, 'Inter Tight', 'Nunito', system-ui, sans-serif);
  --g-ease: cubic-bezier(.2, .8, .2, 1);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
.guarantees ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--g-hair);
  border-bottom: 1px solid var(--g-hair);
}
.guarantees li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px 26px;
}
.guarantees li:first-child { padding-left: 0; }
.guarantees li:last-child { padding-right: 0; }
.guarantees li + li { border-left: 1px solid var(--g-hair); }
/* Filet bordeaux qui se trace au survol (desktop) */
.guarantees li::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--g-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--g-ease);
}
.guarantees li:hover::before { transform: scaleX(1); }
.g-ico {
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  color: var(--g-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.guarantees b {
  display: block;
  font-family: var(--g-title);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--g-ink);
}
.guarantees li > span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--g-muted);
  text-wrap: pretty;
}

/* Tracé des pictos à l'apparition (activé par page.js : .is-anim) */
.guarantees.is-anim .g-ico * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--g-ease) var(--d, 0s);
}
.guarantees.is-anim li.is-in .g-ico * { stroke-dashoffset: 0; }

/* Variante sur fond sombre (non utilisée par défaut) */
.guarantees--dark { --g-ink: #fff; --g-muted: rgba(255, 255, 255, .62); --g-hair: rgba(255, 255, 255, .14); --g-accent: #ff9fbf; }

@media (max-width: 1080px) {
  .guarantees ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guarantees li { padding: 22px 22px 22px 0; }
  .guarantees li + li { border-left: 0; }
  .guarantees li:nth-child(even) { padding-left: 22px; padding-right: 0; border-left: 1px solid var(--g-hair); }
  .guarantees li:nth-child(n+3) { border-top: 1px solid var(--g-hair); }
  .guarantees li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .guarantees { padding: 0 20px; }
  .guarantees ul { grid-template-columns: minmax(0, 1fr); }
  .guarantees li,
  .guarantees li:nth-child(even) {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 2px;
    padding: 17px 0;
    border-left: 0;
  }
  .guarantees li + li { border-top: 1px solid var(--g-hair); }
  .g-ico { grid-row: span 2; width: 24px; height: 24px; margin: 1px 0 0; }
  .guarantees b { font-size: 15px; }
  .guarantees li > span { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .guarantees li::before { transition: none; }
  .guarantees.is-anim .g-ico * { stroke-dashoffset: 0; transition: none; }
}

/* ── Pages vitrines (accueil, /ia, /digital) ── */
.guarantees--flow { margin-top: 8px; margin-bottom: clamp(48px, 6vw, 88px); }
.guarantees--home {
  --g-title: 'Nunito', system-ui, sans-serif;
  --g-ink: #1a1a2e;
  --g-muted: #5f6370;
  max-width: none;
  margin: 0;
  padding: 28px 6vw clamp(56px, 6vw, 84px);
  background: var(--bg, #fff);
}
.guarantees--home b { font-weight: 800; font-size: 15px; letter-spacing: 0; }
.guarantees--home li > span { font-size: 14px; }
.hero-kicker { animation: g-rise .9s cubic-bezier(.2, .8, .2, 1) .15s both; }
@keyframes g-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .guarantees--home { padding: 8px 5vw 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kicker { animation: none; }
}