/* ── REPRISE (IA + humain) ── bloo-header ──
 * FICHIER : assets/css/www/www-reseau-independant.css
 * ROLE : Styles propres à la page « Indépendants » (/reseau-independant). Complète bloo-www-2026.css
 *        (tokens, .wrap, .sec, .sec-head, .card, .grid-2/3, .tiers/.tier, .faq, .cta-band, .btn*).
 *        Aucune couleur violette d'interface ; bleu nuit #100848 via var(--brand). Mobile d'abord.
 * DEPEND : chargée par www/www-reseau-independant.html ($PAGE['head'], ?v= = empreinte SHA-256).
 * MAJ :
 *   - 2026-10-14 · rel3025 · création
 * ── fin REPRISE ── */

.bloo-www-ri .ri-i{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.15em}

/* Fil d'Ariane */
.ri-crumbs{max-width:var(--maxw);margin:0 auto;padding:16px var(--gutter) 0;font-size:.86rem;color:var(--ink-3)}
.ri-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ri-crumbs li{display:flex;align-items:center;gap:8px}
.ri-crumbs li+li::before{content:"›";color:var(--ink-3)}
.ri-crumbs a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.ri-crumbs a:hover{color:var(--brand-deep)}

/* Hero */
.ri-hero .ri-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.ri-hero .btn{min-height:44px}
.ri-trust{margin-top:18px;font-size:13.5px;color:var(--ink-3)}

/* En bref (speakable) */
.ri-tldr-sec{padding-top:10px}
.ri-tldr{max-width:760px;margin:0 auto;background:var(--surf-2);border:1px solid var(--line-2);border-radius:var(--r);padding:22px 26px}
.ri-tldr-h{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin:0 0 8px}
.ri-tldr p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.7}

/* Listes à puces titrées (blooCRM) */
.ri-list{list-style:none;padding:0;margin:0 auto;max-width:840px;display:flex;flex-direction:column;gap:12px}
.ri-list li{position:relative;padding-left:30px;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.ri-list li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;
  background:rgba(16,8,72,.10);border:1px solid rgba(16,8,72,.22)}
.ri-list strong{display:block;color:var(--ink)}

/* Texte secondaire sous un bloc */
.ri-fine{max-width:840px;margin:20px auto 0;font-size:13.5px;color:var(--ink-3);line-height:1.6;text-align:center}
.ri-fine a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Boucle : schéma + liste ordonnée */
.ri-cycle{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:28px 36px;align-items:center;max-width:1000px;margin:0 auto}
.ri-cycle-svg{width:100%;height:auto;color:var(--brand)}
.ri-ring{stroke:var(--line-2)}
.ri-arrows{stroke:var(--brand);color:var(--brand)}
.ri-nodes circle{fill:var(--surf);stroke:var(--brand);stroke-width:2}
.ri-nodes text{fill:var(--brand);font-family:var(--display);font-weight:800;font-size:28px;text-anchor:middle;dominant-baseline:central}
.ri-steps{counter-reset:ri;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.ri-steps li{position:relative;padding-left:46px;color:var(--ink-2);font-size:15.5px;line-height:1.6;min-height:34px}
.ri-steps li::before{counter-increment:ri;content:counter(ri);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  background:var(--brand);color:#fff;font-family:var(--display);font-weight:800;font-size:16px;display:grid;place-items:center}
.ri-steps strong{display:block;color:var(--ink)}
.ri-steps-plain{max-width:840px;margin:0 auto}
/* Flèches entre étapes : mobile seulement (le schéma remplace sur grand écran) */
.ri-steps li+li::after{content:none}

/* Encadré de valeur */
.ri-note-box{max-width:840px;margin:28px auto 0;background:var(--surf-glass);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;box-shadow:var(--shadow)}
.ri-note-box h3{font-size:16px;color:var(--brand-deep,var(--brand));margin:0 0 8px}
.ri-note-box p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.65}

/* Tableau « Ce qui se fait sans vous » */
.ri-tbl-wrap{max-width:840px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ri-tbl{width:100%;border-collapse:collapse;font-size:15px}
.ri-tbl th,.ri-tbl td{text-align:left;padding:14px 18px;vertical-align:top;border-bottom:1px solid var(--line)}
.ri-tbl thead th{background:var(--surf-2);color:var(--ink);font-weight:700;font-size:13px;letter-spacing:.02em}
.ri-tbl td:first-child{color:var(--ink)}
.ri-tbl td:last-child,.ri-tbl th:last-child{border-left:1px solid var(--line);color:var(--ink-2)}
.ri-tbl tbody tr:last-child td{border-bottom:0}
.ri-tbl tbody tr:nth-child(even){background:var(--surf-glass)}

/* Informations : deux colonnes */
.ri-cols .ri-col h3{font-size:17px;margin:0 0 12px;color:var(--ink)}
.ri-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.ri-col li{position:relative;padding-left:26px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.ri-col li::before{content:"";position:absolute;left:4px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--brand)}

/* Exemple */
.ri-illus{max-width:840px;margin:0 auto 18px;font-style:italic;font-size:13.5px;color:var(--ink-3)}

/* Formules */
.ri-tiers{max-width:960px}
.ri-tiers .ri-tag-muted{visibility:hidden}

/* Pour aller plus loin + date */
.ri-more{padding-top:10px}
.ri-more-h{font-size:18px;text-align:center;color:var(--ink);margin:0 0 14px}
.ri-more-links{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;max-width:840px;margin:0 auto}
.ri-more-links a{color:var(--brand);font-weight:600;font-size:14.5px;text-decoration:underline;text-underline-offset:3px}
.ri-more-links a:hover{color:var(--brand-deep,var(--brand))}
.ri-updated{text-align:center;margin:26px 0 0;font-size:13px;color:var(--ink-3)}

/* Focus visible (WCAG AA) */
.bloo-www-ri a:focus-visible,.bloo-www-ri .btn:focus-visible,.bloo-www-ri summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}

/* Mobile : pas de schéma circulaire, liste verticale avec flèches */
@media(max-width:760px){
  .ri-cycle{grid-template-columns:1fr}
  .ri-cycle-svg{display:none}
  .ri-steps li:not(:last-child)::after{content:"";position:absolute;left:16px;top:38px;bottom:-14px;width:2px;background:var(--line-2)}
}
@media(max-width:560px){
  .ri-tbl th,.ri-tbl td{padding:12px 14px;font-size:14px}
  .ri-fine{text-align:left}
}

/* Thème sombre : lisibilité des pastilles d'étape et du tableau */
:root[data-theme="dark"] .bloo-www-ri .ri-list li::before{background:rgba(142,166,255,.16);border-color:rgba(142,166,255,.32)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .bloo-www-ri .ri-list li::before{background:rgba(142,166,255,.16);border-color:rgba(142,166,255,.32)}}

@media(prefers-reduced-motion:reduce){
  .bloo-www-ri *{animation:none!important;transition:none!important}
}