/* =============================================================================
   MON IP — feuille de style « terminal sci-fi »
   -----------------------------------------------------------------------------
   Fichier : assets/css/style.css
   Approche : mobile-first, variables CSS pour les jetons de design (couleurs,
   espacements, typographie), aucune dépendance externe (pas de police distante,
   pas de framework). Compatible Firefox / Safari / Chrome, desktop et mobile.

   Sommaire
     1.  Jetons de design (variables)
     2.  Réinitialisation & base
     3.  Décors de fond (grille, balayage, pluie de code)
     4.  Fenêtre « terminal »
     5.  Invite de commande
     6.  Résultat principal (adresse IP)
     7.  Fiches de détails & chaîne de proxys
     8.  Blocs repliables (aide)
     9.  Boutons & actions
     10. Utilitaires & accessibilité
     11. Points de rupture responsives
     12. Impression
   ========================================================================== */


/* =============================================================================
   1. JETONS DE DESIGN
   ========================================================================== */
:root {
    /* --- Couleurs : nuit profonde + néon vert/cyan ------------------------ */
    --fond-0:        #04070a;   /* arrière-plan de la page                   */
    --fond-1:        #070d13;   /* fenêtre terminal                          */
    --fond-2:        #0b141c;   /* cartes internes                           */
    --fond-3:        #101c26;   /* survol / éléments actifs                  */

    --trait:         #16303c;   /* bordures discrètes                        */
    --trait-vif:     #1f4f5e;   /* bordures accentuées                       */

    --texte:         #d7f5ea;   /* texte principal                           */
    --texte-doux:    #7d9aa4;   /* texte secondaire, libellés                */
    --texte-faible:  #4d6771;   /* texte très discret                        */

    --neon:          #00ffa3;   /* vert néon : accent principal              */
    --neon-cyan:     #35e0ff;   /* cyan : accent secondaire                  */
    --neon-ambre:    #ffc857;   /* ambre : avertissement                     */
    --neon-rouge:    #ff5f6d;   /* rouge : erreur                            */

    --lueur:         0 0 12px rgba(0, 255, 163, .45);
    --lueur-forte:   0 0 28px rgba(0, 255, 163, .30);

    /* --- Typographie : polices système uniquement (aucun téléchargement) -- */
    --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
            Menlo, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Échelle fluide : s'adapte à la largeur du viewport sans media query. */
    --t-xs:  clamp(.68rem, .62rem + .2vw,  .78rem);
    --t-sm:  clamp(.78rem, .72rem + .25vw, .90rem);
    --t-md:  clamp(.90rem, .84rem + .3vw,  1.02rem);
    --t-lg:  clamp(1.05rem, .95rem + .5vw, 1.30rem);
    --t-ip:  clamp(1.45rem, .60rem + 5.6vw, 3.60rem); /* l'adresse IP        */

    /* --- Espacements ----------------------------------------------------- */
    --e-1: .35rem;
    --e-2: .7rem;
    --e-3: 1.1rem;
    --e-4: 1.6rem;
    --e-5: 2.4rem;

    --rayon:    14px;
    --rayon-sm: 8px;

    --transition: 180ms cubic-bezier(.4, 0, .2, 1);
}


/* =============================================================================
   2. RÉINITIALISATION & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100svh;                 /* svh : évite le saut d'UI sur iOS */
    padding: clamp(.6rem, 3vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: var(--mono);
    font-size: var(--t-md);
    line-height: 1.6;
    color: var(--texte);
    background: var(--fond-0);

    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, p, dl, dd, ol, pre { margin: 0; }
ol { padding: 0; list-style: none; }

::selection { background: var(--neon); color: #02150e; }

:focus-visible {
    outline: 2px solid var(--neon-cyan);
    outline-offset: 3px;
    border-radius: 4px;
}


/* =============================================================================
   3. DÉCORS DE FOND
   ========================================================================== */

/* Pluie de caractères, dessinée en JavaScript sur un canvas plein écran. */
#fond-matrice {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .30;
    pointer-events: none;
}

/* Grille de perspective, purement CSS. */
.grille-fond {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 255, 163, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 163, .055) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 45%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 45%, #000 20%, transparent 78%);
}

/* Fines lignes horizontales évoquant un écran cathodique. */
.lignes-balayage {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, .16) 0 1px,
        transparent 1px 3px
    );
    opacity: .55;
    mix-blend-mode: multiply;
}


/* =============================================================================
   4. FENÊTRE « TERMINAL »
   ========================================================================== */
.terminal {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 62rem;

    background: linear-gradient(160deg, rgba(9, 18, 26, .96), rgba(5, 10, 14, .97));
    border: 1px solid var(--trait-vif);
    border-radius: var(--rayon);
    box-shadow:
        0 0 0 1px rgba(0, 255, 163, .06),
        0 30px 80px -20px rgba(0, 0, 0, .9),
        var(--lueur-forte);
    overflow: hidden;
    animation: apparition .5s ease both;
}

@keyframes apparition {
    from { opacity: 0; transform: translateY(14px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

/* --- Barre de titre ------------------------------------------------------ */
.terminal__barre {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: .6rem var(--e-3);
    background: rgba(0, 255, 163, .04);
    border-bottom: 1px solid var(--trait);
    font-size: var(--t-xs);
}

.pastilles { display: flex; gap: .38rem; flex: none; }
.pastille  { width: 11px; height: 11px; border-radius: 50%; display: block; }
.pastille--rouge { background: #ff5f57; }
.pastille--jaune { background: #febc2e; }
.pastille--verte { background: #28c840; }

.terminal__titre {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-inline: auto;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--neon);
    text-shadow: var(--lueur);
    white-space: nowrap;
}

.logo { width: 18px; height: 18px; flex: none; }

/* Le chemin est masqué sur très petit écran pour éviter la troncature. */
.terminal__chemin {
    color: var(--texte-faible);
    letter-spacing: .05em;
    text-transform: none;
    text-shadow: none;
}

.statut {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: none;
    color: var(--texte-doux);
    letter-spacing: .1em;
}

.statut__point {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--neon);
    box-shadow: var(--lueur);
    animation: pulsation 2s ease-in-out infinite;
}

@keyframes pulsation {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

/* --- Corps --------------------------------------------------------------- */
.terminal__corps {
    padding: clamp(1rem, 4vw, 2.2rem);
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
}

/* --- Pied ---------------------------------------------------------------- */
.terminal__pied {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1) var(--e-3);
    justify-content: space-between;
    padding: .6rem var(--e-3);
    border-top: 1px solid var(--trait);
    background: rgba(0, 0, 0, .35);
    font-size: var(--t-xs);
    color: var(--texte-faible);
}


/* =============================================================================
   5. INVITE DE COMMANDE
   ========================================================================== */
.invite {
    font-size: var(--t-sm);
    color: var(--texte-doux);
    word-break: break-word;
}

.invite__utilisateur { color: var(--neon-cyan); }
.invite__chemin      { color: var(--texte-doux); }
.invite__commande    { color: var(--texte); }

.curseur {
    display: inline-block;
    width: .55em;
    height: 1.05em;
    margin-left: .12em;
    vertical-align: text-bottom;
    background: var(--neon);
    box-shadow: var(--lueur);
    animation: clignotement 1.05s step-end infinite;
}

@keyframes clignotement {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}


/* =============================================================================
   6. RÉSULTAT PRINCIPAL
   ========================================================================== */
.resultat {
    padding: clamp(1rem, 3.5vw, 1.8rem);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(0, 255, 163, .07), transparent 60%),
        var(--fond-2);
    border: 1px solid var(--trait-vif);
    border-radius: var(--rayon);
}

.resultat__libelle {
    margin-bottom: var(--e-2);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.resultat__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3);
}

.resultat__ip {
    flex: 1 1 12ch;
    min-width: 0;
    font-size: var(--t-ip);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--neon);
    text-shadow: 0 0 18px rgba(0, 255, 163, .5);

    /* Une IPv6 est longue : on autorise la coupure pour éviter tout
       débordement horizontal, y compris sur un écran de 320 px. */
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* Effet de scintillement discret à l'apparition / après actualisation. */
.resultat__ip.scintille { animation: scintillement .55s steps(2) 2; }

@keyframes scintillement {
    0%   { opacity: 1;   transform: none; }
    30%  { opacity: .55; transform: translateX(-2px); }
    60%  { opacity: 1;   transform: translateX(2px); }
    100% { opacity: 1;   transform: none; }
}

.resultat__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1) .5rem;
    margin-top: var(--e-3);
}

.badge {
    padding: .18rem .55rem;
    font-size: var(--t-xs);
    letter-spacing: .06em;
    color: var(--texte-doux);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--trait);
    border-radius: 999px;
}

.badge--accent {
    color: var(--neon-cyan);
    border-color: rgba(53, 224, 255, .45);
    background: rgba(53, 224, 255, .08);
}

.badge--alerte {
    color: var(--neon-ambre);
    border-color: rgba(255, 200, 87, .4);
    background: rgba(255, 200, 87, .08);
}


/* =============================================================================
   7. FICHES DE DÉTAILS & CHAÎNE DE PROXYS
   ========================================================================== */
.fiche__titre {
    margin-bottom: var(--e-2);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--texte-faible);
}

/* Grille auto-adaptative : 1 colonne sur mobile, 2 ou 3 ensuite,
   sans aucune media query. */
.fiche__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1px;
    background: var(--trait);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-sm);
    overflow: hidden;
}

.fiche__item {
    padding: .7rem .9rem;
    background: var(--fond-1);
    transition: background var(--transition);
}

.fiche__item:hover { background: var(--fond-3); }

.fiche__item dt {
    font-size: var(--t-xs);
    letter-spacing: .08em;
    color: var(--texte-faible);
}

.fiche__item dd {
    font-size: var(--t-sm);
    color: var(--texte);
    overflow-wrap: anywhere;
}

.vide { color: var(--texte-faible); font-style: italic; }

/* --- Chaîne des équipements traversés ------------------------------------ */
.chaine {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.chaine__saut {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .7rem;
    background: var(--fond-1);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-sm);
    font-size: var(--t-sm);
    overflow-wrap: anywhere;
}

.chaine__saut--vous {
    border-color: rgba(0, 255, 163, .45);
    background: rgba(0, 255, 163, .06);
}

.chaine__rang {
    flex: none;
    width: 1.5rem; height: 1.5rem;
    display: grid; place-items: center;
    font-size: var(--t-xs);
    color: var(--texte-faible);
    border: 1px solid var(--trait);
    border-radius: 50%;
}

.chaine__saut em {
    margin-left: auto;
    flex: none;              /* l'étiquette « vous » ne doit jamais se couper */
    white-space: nowrap;
    font-style: normal;
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--neon);
}

.note {
    margin-top: var(--e-2);
    font-size: var(--t-xs);
    color: var(--texte-faible);
    line-height: 1.5;
}


/* =============================================================================
   8. BLOCS REPLIABLES (aide)
   ========================================================================== */
.repli {
    border: 1px solid var(--trait);
    border-radius: var(--rayon-sm);
    background: var(--fond-1);
}

.repli > summary {
    padding: .6rem .9rem;
    cursor: pointer;
    font-size: var(--t-sm);
    color: var(--texte-doux);
    list-style: none;
    transition: color var(--transition);
}

.repli > summary::-webkit-details-marker { display: none; }

.repli > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: .5rem;
    color: var(--neon);
    transition: transform var(--transition);
}

.repli[open] > summary::before { transform: rotate(90deg); }
.repli > summary:hover { color: var(--neon); }

.repli__contenu {
    display: block;
    padding: 0 .9rem .9rem;
    font-size: var(--t-sm);
    color: var(--texte-doux);
    overflow-wrap: anywhere;
}

.repli__contenu--texte p { margin-bottom: .7rem; }
.repli__contenu--texte strong { color: var(--texte); font-weight: 600; }

.repli__contenu pre {
    padding: .6rem .8rem;
    background: #04090d;
    border: 1px solid var(--trait);
    border-radius: var(--rayon-sm);
    color: var(--neon-cyan);
    font-size: var(--t-xs);
    overflow-x: auto;
}

kbd {
    padding: .05rem .35rem;
    font: inherit;
    font-size: .85em;
    color: var(--texte);
    background: var(--fond-3);
    border: 1px solid var(--trait-vif);
    border-bottom-width: 2px;
    border-radius: 4px;
}


/* =============================================================================
   9. BOUTONS & ACTIONS
   ========================================================================== */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;

    /* 44 px de haut minimum : confort tactile sur mobile. */
    min-height: 44px;
    padding: .55rem 1.1rem;

    font: inherit;
    font-size: var(--t-sm);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--neon);

    background: rgba(0, 255, 163, .07);
    border: 1px solid rgba(0, 255, 163, .38);
    border-radius: var(--rayon-sm);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), transform var(--transition);
}

.bouton:hover {
    background: rgba(0, 255, 163, .16);
    border-color: var(--neon);
    box-shadow: var(--lueur);
}

.bouton:active { transform: translateY(1px); }

.bouton svg {
    width: 17px; height: 17px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bouton--discret {
    color: var(--texte-doux);
    background: transparent;
    border-color: var(--trait);
}

.bouton--discret:hover {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
    background: rgba(53, 224, 255, .08);
    box-shadow: none;
}

/* État « copié » : retour visuel immédiat après la copie. */
.bouton--succes,
.bouton--succes:hover {
    color: #04150e;
    background: var(--neon);
    border-color: var(--neon);
}

/* État « échec » : le presse-papiers n'est pas accessible (HTTP non sécurisé,
   permissions refusées). */
.bouton--echec,
.bouton--echec:hover {
    color: var(--neon-rouge);
    background: rgba(255, 95, 109, .12);
    border-color: var(--neon-rouge);
    box-shadow: none;
}

/* Rotation de l'icône pendant l'actualisation. */
.bouton--charge svg { animation: rotation .9s linear infinite; }

@keyframes rotation {
    to { transform: rotate(360deg); }
}


/* =============================================================================
   10. UTILITAIRES & ACCESSIBILITÉ
   ========================================================================== */

/* Contenu réservé aux lecteurs d'écran. */
.visuellement-cache {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    #fond-matrice, .lignes-balayage { display: none; }
}


/* =============================================================================
   11. POINTS DE RUPTURE RESPONSIVES
   ========================================================================== */

/* Très petits écrans (< 480 px) : on allège la barre de titre et on passe
   les boutons en pleine largeur pour rester confortable au pouce. */
@media (max-width: 30rem) {
    .terminal__chemin { display: none; }
    .statut__texte    { display: none; }

    .actions .bouton { flex: 1 1 100%; }

    .resultat__ligne { gap: var(--e-2); }
    .bouton--copier  { flex: 1 1 100%; }
}

/* Écrans larges : la fenêtre respire davantage. */
@media (min-width: 64rem) {
    .terminal__corps { gap: var(--e-5); }
}


/* =============================================================================
   12. IMPRESSION
   ========================================================================== */
@media print {
    body { background: #fff; color: #000; display: block; padding: 0; }
    #fond-matrice, .grille-fond, .lignes-balayage,
    .actions, .repli, .terminal__barre { display: none !important; }
    .terminal { border: 1px solid #000; box-shadow: none; max-width: none; }
    .resultat__ip { color: #000; text-shadow: none; }
    .fiche__item { background: #fff; }
    dt, dd, .badge { color: #000; }
}