/* ==========================================================================
   Infrastructure — redesign Claude Design porté en page Symfony
   Le châssis (header + bandeau bleu + footer) reste au site ; ce fichier
   ne stylise QUE le corps redessiné (.infra-redesign) + le bandeau bleu.
   ========================================================================== */

/* Bandeau bleu de titre (partagé avec les autres pages internes) */
@keyframes heroShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* LEDs des nœuds (pulsations) */
@keyframes luxLed {
    0%   { box-shadow: 0 0 0 0 rgba(45,157,197,.45); }
    70%  { box-shadow: 0 0 0 6px rgba(45,157,197,0); }
    100% { box-shadow: 0 0 0 0 rgba(45,157,197,0); }
}
@keyframes luxLedGreen {
    0%   { box-shadow: 0 0 0 0 rgba(30,122,82,.4); }
    70%  { box-shadow: 0 0 0 6px rgba(30,122,82,0); }
    100% { box-shadow: 0 0 0 0 rgba(30,122,82,0); }
}

/* Ancrage des liens internes sous le header collant */
html { scroll-padding-top: 88px; }

/* ---- Base du corps redessiné -------------------------------------------- */
.infra-redesign a { color: #1E3A5F; text-decoration: none; }
.infra-redesign a:hover { color: #2D9DC5; }
.infra-redesign ::selection { background: #1E3A5F; color: #FFFFFF; }

/* ---- Marques d'angle des cadres FIG.01–05 (ex style-before/style-after) -- */
.lux-frame::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 11px; height: 11px;
    border-top: 2px solid #142838;
    border-left: 2px solid #142838;
    z-index: 4;
}
.lux-frame::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 11px; height: 11px;
    border-bottom: 2px solid #142838;
    border-right: 2px solid #142838;
    z-index: 4;
}

/* ---- Survols portés depuis les style-hover ------------------------------ */
.infra-cta-primary:hover   { background: #2D9DC5; color: #FFFFFF; }
.infra-cta-secondary:hover { border-color: #1E3A5F; color: #1E3A5F; }
.infra-cta-light:hover     { background: #D5EDF6; color: #14273C; }
.infra-cta-ghost:hover     { border-color: #FFFFFF; color: #FFFFFF; }
.inf-model-row:hover       { background: #F7FBFD; }
.inf-hovcard:hover         { border-color: #7FB6CE; }
.inf-btn-calm:hover        { background: #1E3A5F; color: #FFFFFF; }
.inf-btn-outage:hover      { background: #A33F20; color: #FFFFFF; }

/* ---- Sélecteur de modèle (section #modeles) ----------------------------- */
/* Marque « actif » sur la ligne de gauche */
.inf-model-mark { display: none; }
.inf-model-row.is-active .inf-model-mark { display: block; }

/* Diagramme de droite : seule la variante active est visible */
.infra-redesign [data-model] { display: none; }
.infra-redesign [data-model].is-active { display: block; }

/* ---- Basculeur panne / normal (section #continuite) --------------------- */
/* État calme = défaut. Le JS ajoute .is-outage sur .infra-redesign. */
.infra-redesign .on-outage { display: none; }
.infra-redesign.is-outage .on-calm { display: none; }
.infra-redesign.is-outage .on-outage { display: revert; }

/* ---- Responsive : empilage des grilles à 2 colonnes --------------------- */
@media (max-width: 860px) {
    /* Filet de sécurité : les étiquettes décoratives en position:absolute (labels de
       schémas, en white-space:nowrap) peuvent dépasser leur boîte sur petit écran.
       On clippe ce débordement au conteneur pour garantir zéro scroll horizontal. */
    .infra-redesign {
        overflow-x: hidden;
    }

    /* Toutes les grilles multi-colonnes de la maquette se replient en une colonne
       sur mobile. L'attribut [style*=…] cible les grilles posées en style inline ;
       !important est nécessaire pour l'emporter sur ce style inline. */
    .infra-redesign [style*="grid-template-columns:1fr 1fr"],
    .infra-redesign [style*="grid-template-columns:repeat(4,1fr)"],
    .infra-redesign [style*="grid-template-columns:1fr minmax"],
    .infra-redesign [style*="grid-template-columns:minmax"] {
        grid-template-columns: 1fr !important;
    }
}