/* V8 accueil : réseau du hero, méthode en 4 temps, animations au défilement.
   Chargé après styles.css, ne touche à rien d'autre. */

/* Hero : le réseau prend la place de l'insert */
@media (min-width: 1061px) { .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); } }
.net { justify-self: end; width: min(100%, 34rem); display: grid; gap: .5rem; padding: 1.1rem 1.1rem 1rem; border-radius: var(--r-l); background: var(--glass-bg); box-shadow: inset 0 0 0 1px var(--on-dark-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--on-dark-2); }
.net__stage { position: relative; aspect-ratio: 560 / 500; }
.net__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net__orbit { fill: none; stroke: rgb(255 255 255 / .16); stroke-width: 1; stroke-dasharray: 2 7; }
.net__link { fill: none; stroke: rgb(255 255 255 / .3); stroke-width: 1.2; transition: stroke .5s var(--ease), stroke-width .5s var(--ease); }
.net__link.is-hot { stroke: rgb(164 220 181 / .95); stroke-width: 1.8; }
.net__link.is-ko { stroke: rgb(244 184 96 / .95); stroke-width: 1.8; }
.net__chord { fill: none; stroke: rgb(164 220 181 / .26); stroke-width: 1; stroke-dasharray: 3 5; transition: stroke .5s var(--ease); }
.net__chord.is-hot { stroke: rgb(164 220 181 / .9); }
.net__ring { fill: none; stroke: var(--mint); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 5 9; }
.net__scan { fill: none; stroke: var(--mint); stroke-width: 1.2; opacity: 0; }
.net__fx .pk { fill: var(--mint); }
.net__fx .pk__halo { fill: var(--mint); opacity: .28; }
.net__fx .tail { fill: var(--mint); }
.net__fx .amb { fill: var(--mint); opacity: .55; }
.net__fx .pk--ko .pk, .net__fx .pk--ko .pk__halo, .net__fx .tail--ko { fill: var(--amber); }
.net__fx .trail { stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 3 5; opacity: .8; }
.net__fx .burst { fill: none; stroke: var(--amber); stroke-width: 2; }
.net__hub { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 15.5%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--mint); color: var(--forest-deep); box-shadow: 0 0 0 .55rem rgb(164 220 181 / .12), 0 0 2.5rem rgb(164 220 181 / .35); transition: background-color var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.net__hub svg { width: 44%; height: auto; aspect-ratio: 39.68 / 41.67; fill: currentColor; }
.net[data-s="ko"] .net__hub { background: var(--amber); box-shadow: 0 0 0 .55rem rgb(244 184 96 / .16), 0 0 2.5rem rgb(244 184 96 / .4); }
.net__node { position: absolute; left: var(--x); top: var(--y); z-index: 1; translate: -50% -50%; padding: .38rem .75rem; border-radius: 999px; white-space: nowrap; font-size: .8125rem; font-weight: 500; line-height: 1.2; color: var(--on-dark); background: #1d3a35; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.net__node[data-s="ok"] { background: var(--mint); color: var(--ink); box-shadow: 0 0 0 4px rgb(164 220 181 / .18); }
.net__node[data-s="ko"] { background: #4a3d24; color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber), 0 0 0 4px rgb(244 184 96 / .16); }
.net__foot { display: grid; gap: .6rem; }
.net__live { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 1.5rem; font-size: .8438rem; font-weight: 500; text-align: center; }
.net__live i { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgb(164 220 181 / .6); animation: net-live 2.4s var(--ease) infinite; }
.net[data-s="ko"] .net__live i { background: var(--amber); }
.net__count { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; font-size: .8438rem; font-weight: 500; }
.net__count[hidden] { display: none; }
.net__count div { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .6rem .9rem; border-radius: var(--r-s); background: rgb(255 255 255 / .1); }
.net__count dd { margin: 0; font-family: var(--display); font-size: 1.5rem; font-weight: 560; letter-spacing: -.02em; line-height: 1; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.net__count div:last-child dd { color: var(--amber); }
@keyframes net-live { 0% { box-shadow: 0 0 0 0 rgb(164 220 181 / .55); } 70%, 100% { box-shadow: 0 0 0 .55rem rgb(164 220 181 / 0); } }

@media (max-width: 1060px) {
  .net { justify-self: start; }
}
@media (max-width: 720px) {
  .net { padding: .8rem .8rem .9rem; }
  .net__node { padding: .3rem .55rem; font-size: .6875rem; }
  .net__count { font-size: .75rem; }
  .net__count div { padding: .5rem .7rem; }
  .net__count dd { font-size: 1.25rem; }
}

/* Cybersécurité : un trait relie les quatre étapes et se remplit avec elles */
.flow { position: relative; }
.flow::before, .flow::after { content: ""; position: absolute; left: calc(1.25rem + .575rem - 1px); top: 1.5rem; bottom: 1.5rem; width: 2px; border-radius: 2px; }
.flow::before { background: rgb(6 73 63 / .2); }
.flow::after { background: var(--mint-strong); transform-origin: 50% 0; transition: transform .9s var(--ease); }
.flow__step { position: relative; z-index: 1; }
[data-playing] .flow::after { transform: scaleY(0); }
[data-playing][data-n~="2"] .flow::after { transform: scaleY(.333); }
[data-playing][data-n~="3"] .flow::after { transform: scaleY(.666); }
[data-playing][data-n~="4"] .flow::after { transform: scaleY(1); }

/* Méthode en 3 temps, sur un seul écran : les cartes jouent l'une après l'autre (20/10 : tout centré, la ligne passe au centre des numéros) */
.m2 { display: grid; gap: clamp(2rem, 4vw, 3.25rem); padding-block: calc(var(--section) / 2); }
.m2__head { display: grid; justify-items: center; gap: 1.25rem; text-align: center; }
.m2__head .lead { max-width: 38rem; }
.m2__intro { display: grid; gap: 1.25rem; justify-items: center; }
.m2__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.m2__step { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; justify-items: center; gap: .5rem; text-align: center; z-index: 1; }
.m2__card { justify-self: stretch; }
/* centre des numéros : carte + sa marge + l'écart de la grille + la moitié du rond ; d'un centre de colonne à l'autre */
.m2__steps::before, .m2__steps::after { content: ""; position: absolute; top: calc(var(--card-h) + .75rem + .5rem + 1.125rem - 1px); left: calc((100% - 2 * var(--gap)) / 6); right: calc((100% - 2 * var(--gap)) / 6); z-index: 0; height: 2px; border-radius: 2px; }
.m2__steps { --card-h: 19rem; }
.m2__steps::before { background: var(--line-strong); }
.m2__steps::after { background: var(--forest); transform: scaleX(var(--p, 1)); transform-origin: 0 50%; transition: transform .9s var(--ease); }
.m2__card { display: grid; align-content: center; justify-items: center; gap: 1rem; height: var(--card-h); margin-bottom: .75rem; padding: 1.25rem; border-radius: var(--r-xl); background: var(--mint-softer) radial-gradient(rgb(6 73 63 / .13) 1px, transparent 1.3px) 0 0 / 14px 14px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .5s var(--ease), background-color .5s var(--ease); }
.m2__n { position: relative; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: .5rem; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--forest); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--forest); transition: background-color var(--base) var(--ease), color var(--base) var(--ease), transform var(--base) var(--ease); }
.m2__step h3 { font-family: var(--display); font-weight: 560; font-size: clamp(1.375rem, 1.1rem + .7vw, 1.75rem); text-wrap: balance; letter-spacing: -.025em; line-height: 1.1; }
.m2__step > p { max-width: 24rem; line-height: 1.45; }

.m2c { width: min(100%, 16.5rem); padding: .85rem; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-float); }
.m2c__week, .m2c__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.m2c__week { margin-bottom: .45rem; font-size: .6875rem; font-weight: 600; text-align: center; color: var(--ink-3); }
.m2c__days i { aspect-ratio: 1; border-radius: 6px; background: var(--sunken); transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.m2c__days i[data-today] { box-shadow: inset 0 0 0 2px var(--forest); }
.m2c__days i.is-pass { background: var(--mint-soft); }
.m2c__days i[data-rdv].is-set, .m2:not(.is-live) .m2c__days i[data-rdv] { background: var(--forest); }
.m2__switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sunken); font-size: .875rem; font-weight: 600; color: var(--ink-3); }
.m2__switch span { padding: .4rem .9rem; border-radius: 999px; transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.m2__switch [data-on] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgb(6 38 33 / .1); }

.m2r { display: block; width: min(100%, 25rem); overflow: visible; }
.m2r__grid polygon { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.m2r__grid line { stroke: var(--line-strong); stroke-width: 1; }
.m2r__shape { fill: rgb(108 196 140 / .38); stroke: var(--forest); stroke-width: 2; stroke-linejoin: round; }
.m2r__pt { fill: var(--forest); }
.m2r__pt:nth-of-type(4) { fill: #d4472a; }
.m2r__labels text { font-family: var(--font); font-size: 15px; font-weight: 500; fill: var(--ink-2); }

.m2d { display: grid; gap: .8rem; width: min(100%, 18.5rem); padding: 1rem 1.1rem; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-float); }
.m2d__title { font-family: var(--display); font-size: 1rem; font-weight: 560; letter-spacing: -.02em; color: var(--ink); }
.m2d__rows { display: grid; gap: .55rem; }
.m2d__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 5rem; align-items: center; gap: .6rem; font-size: .8125rem; color: var(--ink-2); }
.m2d__rows b { position: relative; height: .45rem; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.m2d__rows b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--forest); transform: scaleX(var(--g, 1)); transform-origin: 0 50%; }
.m2d__rows [data-t="mid"] b::after { background: var(--amber); }
.m2d__rows [data-t="ko"] b::after { background: #d4472a; }
.m2d__prio { display: flex; align-items: center; gap: .55rem; padding-top: .75rem; border-top: 1px solid var(--line); font-size: .875rem; font-weight: 600; color: var(--ink); }
.m2d__prio span { padding: .25rem .65rem; border-radius: 999px; background: #fde4dc; color: #8f2b16; font-size: .75rem; }

.m2__next { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: .5rem; padding: 1.25rem 1.5rem; border-radius: var(--r-xl); background: var(--mint-softer); box-shadow: inset 0 0 0 1px var(--line); }
.m2__faces { display: flex; flex: none; }
.m2__faces img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--mint-softer); }
.m2__faces img + img { margin-left: -.6rem; }
.m2__next-text { font-size: 1.125rem; line-height: 1.45; color: var(--ink-2); }
.m2__next-text b { font-weight: 600; color: var(--ink); }
.m2__next-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* Avec le script : l'étape en cours ressort par sa carte et son numéro */
.m2.is-live .m2__step.is-now .m2__card { box-shadow: inset 0 0 0 2px var(--mint-strong); }
.m2.is-live .m2__step.is-on .m2__n { background: var(--forest); color: var(--on-dark); }
.m2.is-live .m2__step.is-now .m2__n { transform: scale(1.12); }

@media (max-width: 960px) {
  .m2__steps { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; --card-h: 17rem; }
  .m2__steps::before, .m2__steps::after { display: none; }
}