.reseau { position: relative; margin-top: clamp(16px, 2vw, 40px); }
.reseau__dessin { width: 100%; height: auto; aspect-ratio: 1440 / 640; mask-image: linear-gradient(to bottom, transparent, var(--fond) 12%, var(--fond) 86%, transparent); }
/* Une route : un trait gris large, recouvert d'un trait du fond un peu moins large. Il ne reste que ses deux bords,
   et les croisements se fondent (tous les bords sont dessinés avant toutes les voies). */
.reseau__bord, .reseau__voie, .reseau__flux { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.reseau__bord { stroke: color-mix(in srgb, var(--texte) 22%, var(--fond)); stroke-width: 30; }
.reseau__voie { stroke: var(--fond); stroke-width: 27; }
/* La lumière qui court sur les routes des logiciels : vers le hub (une information), ou vers le logiciel (une action préparée). */
.reseau__flux { stroke: var(--accent); stroke-width: 4; stroke-dasharray: 0.07 2; stroke-dashoffset: 0.07; opacity: 0; }
/* La tige qui descend de la tuile vers les deux cartes : hors du dessin, pour échapper à son fondu. La tuile, au coin arrondi, finit à 456 sur 640. */
.reseau__plan { position: relative; }
/* Ligne verticale sous la tuile retirée (erreur visuelle derrière Courriel, 2026-11-09). */
/* .reseau__plan::after { content: ""; position: absolute; left: 50%; top: calc(456 / 640 * 100%); bottom: 0; width: 1.5px; translate: -50% 0; background: color-mix(in srgb, var(--texte) 34%, transparent); } */
.reseau__tuile-dessus { fill: var(--accent-2); }
.reseau__tuile-cotes { fill: color-mix(in srgb, var(--accent-2) 58%, var(--fond)); }
.reseau__h-dessus { fill: color-mix(in srgb, var(--fond) 84%, var(--accent-2)); }
.reseau__h-cotes { fill: var(--fond); }
.reseau__ombre { fill: color-mix(in srgb, var(--fond) 32%, transparent); }
.reseau__connecteurs { margin: 0; padding: 0; list-style: none; }
.reseau__connecteurs li { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--surface); border: var(--trame) solid var(--bordure); color: var(--texte); font-family: var(--police-interface); font-weight: var(--graisse-interface); font-size: var(--t-s); line-height: 1.2; }
.reseau__connecteurs .sans-coupure { white-space: nowrap; }
.reseau__icone { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: var(--sur-accent); }
.reseau__icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reseau__bas { display: flex; justify-content: center; margin-top: var(--e-4); }
.reseau__bas .sol-pause { background: var(--fond); } /* la lumière ne passe pas derrière le libellé */
@media (min-width: 1100px) {
  .reseau__connecteurs li { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; white-space: nowrap; }
  .reseau__bas { position: absolute; left: var(--gouttiere); top: var(--e-2); margin: 0; }
}
/* Sous 1 100 px, le dessin se recadre sur la tuile et les logiciels passent dessous, en pastilles. */
@media (max-width: 1099px) {
  .reseau__dessin { aspect-ratio: 4 / 3; }
  .reseau__connecteurs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-4); padding-inline: var(--gouttiere); }
}
/* Les deux cartes, reliées à la tuile par deux branches */
.sol-garanties-bloc { display: grid; justify-items: center; }
.sol-garanties__liens { width: min(100%, 920px); height: 72px; }
.sol-garanties__liens path { fill: none; stroke: color-mix(in srgb, var(--texte) 34%, transparent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sol-garanties { width: min(100%, 920px); margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-6); }
@media (min-width: 760px) { .sol-garanties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sous 1 100 px, les logiciels passent sous le dessin : la tige et ses branches ne mèneraient plus aux cartes. */
@media (max-width: 1099px) { .reseau__plan::after, .sol-garanties__liens { display: none; } .sol-garanties { margin-top: var(--e-8); } }
.sol-garanties > li { display: grid; align-content: start; gap: var(--e-4); padding: clamp(20px, 2.4vw, 32px); background: var(--surface); border: var(--trame) solid var(--bordure); border-radius: var(--rayon); }
.sol-garanties__picto { width: 40px; height: 40px; }
.sol-garanties__picto rect { fill: var(--texte); }
.sol-garanties__picto .vif { fill: var(--accent); }
.sol-garanties ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-3); }
.sol-garanties ul li { position: relative; padding-left: 28px; font-size: var(--t-m); line-height: 1.4; color: var(--texte-doux); }
.sol-garanties ul li::before { content: ""; position: absolute; left: 3px; top: 0.3em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); rotate: -45deg; }
.sol-droits { display: grid; justify-items: center; gap: var(--e-6); margin-top: clamp(40px, 5vw, 72px); }
.sol-droits .t-sous { max-width: 34ch; }

/* Le mouvement du réseau, seulement quand les animations sont permises : les routes se tracent, la tuile se pose,
   les logiciels apparaissent l'un après l'autre, puis la lumière court. Le bouton de pause et la pause générale l'arrêtent. */
.js-mouvement .reseau__bord, .js-mouvement .reseau__voie { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1800ms var(--courbe-sortie); transition-delay: calc(150ms + var(--i, 0) * 70ms); }
.js-mouvement .reseau.est-visible .reseau__bord, .js-mouvement .reseau.est-visible .reseau__voie { stroke-dashoffset: 0; }
.js-mouvement .reseau__tuile { opacity: 0; translate: 0 36px; transition: opacity 700ms var(--courbe-sortie) 300ms, translate 1100ms var(--courbe-sortie) 300ms; }
.js-mouvement .reseau.est-visible .reseau__tuile { opacity: 1; translate: 0 0; }
.js-mouvement .reseau__connecteurs li { opacity: 0; scale: 0.6; transition: opacity 500ms var(--courbe-sortie), scale 700ms var(--courbe-sortie); transition-delay: calc(900ms + var(--i, 0) * 140ms); }
.js-mouvement .reseau.est-visible .reseau__connecteurs li { opacity: 1; scale: 1; }
.js-mouvement .reseau.est-visible .reseau__flux { opacity: 1; animation: reseau-flux 6s linear infinite; animation-delay: calc(2200ms + var(--i, 0) * 800ms); }
.js-mouvement .reseau.est-visible .reseau__flux--sort { animation-direction: reverse; }
@keyframes reseau-flux { from { stroke-dashoffset: 0.07; } to { stroke-dashoffset: -1; } }
html:not(.js-mouvement) .reseau__bas { display: none; }
.sol-pause { display: none; align-items: center; gap: var(--e-2); min-height: var(--cible); padding: 0 var(--e-4); background: transparent; color: var(--texte-doux); border: var(--trame) solid var(--bordure); border-radius: var(--rayon-action); font-family: var(--police-donnees); font-size: 0.75rem; cursor: pointer; transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe); }
.sol-pause:hover { color: var(--texte); border-color: var(--texte); }
.sol-pause svg { width: 11px; height: 11px; flex: none; }
.sol-pause__lire { display: none; }
.sol-pause.est-en-pause .sol-pause__pause { display: none; }
.sol-pause.est-en-pause .sol-pause__lire { display: block; }
.js-mouvement .sol-pause { display: inline-flex; }
/* Ajouts du mix : en-tête et pause, propres à la section Connect de l'accueil */
.sol-logiciels__tete { display: grid; justify-items: center; gap: var(--e-6); text-align: center; }
.sol-logiciels__tete h2 { font-size: min(var(--t-enorme), max(6vw, 2.25rem)); }
.sol-logiciels__tete .t-intro { max-width: 46ch; }
.connect__meta { margin: 0; max-width: 42ch; font-family: var(--police-interface); font-weight: var(--graisse-interface); color: var(--texte-doux); display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.35em 0.45em; }
.connect__meta::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #BDEE63); translate: 0 -0.12em; flex: none; }
.connect__chiffre { font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.15; color: var(--accent, #BDEE63); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; white-space: nowrap; }
.connect__suite { font-size: var(--t-s, 0.9375rem); line-height: 1.35; color: var(--texte-doux); }

.connect .pastille-tag { margin: 0; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bordure); font-size: var(--t-s, 0.875rem); }
.connect-en-pause .reseau__flux { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .reseau__flux { display: none; } }
.connect .sol-pause { font: inherit; font-size: var(--t-s, 0.875rem); }