/* Définit les variables globales du thème HebergComm. */
:root {
    /* Couleur de fond principale. */
    --bg: #07111f;
    /* Couleur de fond secondaire. */
    --bg-soft: #0d1b2e;
    /* Couleur des cartes. */
    --card: rgba(255, 255, 255, 0.08);
    /* Couleur des bordures translucides. */
    --border: rgba(255, 255, 255, 0.14);
    /* Couleur de texte principale. */
    --text: #eef6ff;
    /* Couleur de texte secondaire. */
    --muted: #a8b6c9;
    /* Couleur d’accent bleu. */
    --accent: #52a7ff;
    /* Couleur d’accent cyan. */
    --accent-2: #55f0d2;
    /* Ombre principale. */
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    /* Rayon d’arrondi standard. */
    --radius: 28px;
}

/* Applique un modèle de boîte prévisible à tous les éléments. */
* {
    /* Inclut bordures et paddings dans les dimensions. */
    box-sizing: border-box;
}

/* Configure le défilement fluide vers les ancres. */
html {
    /* Rend les liens d’ancre plus agréables. */
    scroll-behavior: smooth;
}

/* Définit le style général du document. */
body {
    /* Supprime les marges par défaut du navigateur. */
    margin: 0;
    /* Définit la police système moderne. */
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Définit la couleur du texte. */
    color: var(--text);
    /* Crée un fond sombre avec halo bleu et cyan. */
    background: radial-gradient(circle at top left, rgba(82, 167, 255, 0.25), transparent 34%), radial-gradient(circle at top right, rgba(85, 240, 210, 0.16), transparent 28%), var(--bg);
    /* Assure une hauteur minimale plein écran. */
    min-height: 100vh;
}

/* Style global des liens. */
a {
    /* Hérite la couleur du contexte. */
    color: inherit;
    /* Retire le soulignement par défaut. */
    text-decoration: none;
}

/* Conteneur de l’en-tête collant. */
.site-header {
    /* Rend l’en-tête collant en haut de page. */
    position: sticky;
    /* Fixe la position supérieure. */
    top: 0;
    /* Place l’en-tête au-dessus du contenu. */
    z-index: 20;
    /* Ajoute un fond flou compatible Caddy/static. */
    backdrop-filter: blur(18px);
    /* Ajoute une bordure inférieure discrète. */
    border-bottom: 1px solid var(--border);
    /* Teinte légèrement le fond de l’en-tête. */
    background: rgba(7, 17, 31, 0.78);
}

/* Structure interne de la navigation. */
.nav-shell {
    /* Limite la largeur du contenu. */
    max-width: 1180px;
    /* Centre horizontalement la barre. */
    margin: 0 auto;
    /* Ajoute de l’espace interne. */
    padding: 18px 24px;
    /* Dispose le logo et les liens sur une ligne. */
    display: flex;
    /* Centre verticalement les éléments. */
    align-items: center;
    /* Sépare le logo et les liens. */
    justify-content: space-between;
    /* Ajoute un espace entre les groupes. */
    gap: 20px;
}

/* Style du logo. */
.brand {
    /* Aligne l’icône et le texte. */
    display: inline-flex;
    /* Centre verticalement l’icône et le texte. */
    align-items: center;
    /* Ajoute un espace entre l’icône et le texte. */
    gap: 12px;
    /* Met le texte en gras. */
    font-weight: 800;
}

/* Monogramme du logo. */
.brand-mark {
    /* Définit une taille carrée. */
    width: 42px;
    /* Définit une hauteur carrée. */
    height: 42px;
    /* Centre le texte horizontalement et verticalement. */
    display: grid;
    /* Centre le contenu dans la grille. */
    place-items: center;
    /* Arrondit fortement le logo. */
    border-radius: 14px;
    /* Ajoute un dégradé réseau. */
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    /* Donne une couleur sombre au texte du logo. */
    color: #06101d;
    /* Ajoute une ombre lumineuse. */
    box-shadow: 0 12px 30px rgba(82, 167, 255, 0.28);
}

/* Groupe des liens de navigation. */
.nav-links {
    /* Affiche les liens côte à côte. */
    display: flex;
    /* Ajoute un espace régulier. */
    gap: 16px;
    /* Autorise le passage à la ligne sur petit écran. */
    flex-wrap: wrap;
}

/* Style de chaque lien de navigation. */
.nav-links a {
    /* Ajoute de l’espace cliquable. */
    padding: 10px 14px;
    /* Arrondit les liens. */
    border-radius: 999px;
    /* Donne une couleur secondaire. */
    color: var(--muted);
}

/* État survol des liens. */
.nav-links a:hover {
    /* Ajoute un fond translucide au survol. */
    background: rgba(255, 255, 255, 0.08);
    /* Rend le texte plus visible au survol. */
    color: var(--text);
}

/* Mise en page du contenu principal. */
main {
    /* Limite la largeur du contenu principal. */
    max-width: 1180px;
    /* Centre le contenu principal. */
    margin: 0 auto;
    /* Ajoute les marges internes de page. */
    padding: 70px 24px 90px;
}

/* Section héro principale. */
.hero {
    /* Dispose texte et décor sur une grille. */
    display: grid;
    /* Réserve plus d’espace au texte. */
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
    /* Ajoute de l’espace entre les colonnes. */
    gap: 38px;
    /* Centre verticalement les éléments. */
    align-items: center;
    /* Ajoute de l’espace bas. */
    margin-bottom: 58px;
}

/* Conteneur du texte héro. */
.hero-content {
    /* Place le contenu au-dessus des fonds. */
    position: relative;
}

/* Petite étiquette de section. */
.eyebrow {
    /* Supprime la marge haute. */
    margin: 0 0 12px;
    /* Met le texte en majuscules. */
    text-transform: uppercase;
    /* Espace les lettres. */
    letter-spacing: 0.16em;
    /* Réduit la taille. */
    font-size: 0.78rem;
    /* Applique la couleur cyan. */
    color: var(--accent-2);
    /* Met le texte en gras. */
    font-weight: 800;
}

/* Titre principal. */
h1 {
    /* Supprime la marge haute. */
    margin: 0;
    /* Définit une taille responsive. */
    font-size: clamp(2.45rem, 6vw, 5.5rem);
    /* Resserre la hauteur de ligne. */
    line-height: 0.96;
    /* Limite la largeur pour une bonne lecture. */
    max-width: 920px;
}

/* Texte de présentation. */
.hero-text {
    /* Définit la couleur secondaire. */
    color: var(--muted);
    /* Définit une taille confortable. */
    font-size: 1.12rem;
    /* Augmente l’interligne. */
    line-height: 1.8;
    /* Limite la largeur du paragraphe. */
    max-width: 760px;
}

/* Groupe des boutons héro. */
.hero-actions {
    /* Affiche les boutons côte à côte. */
    display: flex;
    /* Ajoute l’espace entre boutons. */
    gap: 14px;
    /* Autorise le retour à la ligne. */
    flex-wrap: wrap;
    /* Ajoute une marge supérieure. */
    margin-top: 28px;
}

/* Style de base des boutons. */
.button {
    /* Affiche le bouton comme un élément flexible. */
    display: inline-flex;
    /* Centre le contenu verticalement. */
    align-items: center;
    /* Centre le contenu horizontalement. */
    justify-content: center;
    /* Ajoute de l’espace intérieur. */
    padding: 13px 18px;
    /* Arrondit fortement le bouton. */
    border-radius: 999px;
    /* Supprime la bordure navigateur par défaut. */
    border: 1px solid transparent;
    /* Met le texte en gras. */
    font-weight: 800;
    /* Change le curseur au survol. */
    cursor: pointer;
    /* Anime les changements visuels. */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Style du bouton principal. */
.button-primary {
    /* Définit le dégradé principal. */
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    /* Donne une couleur sombre au texte. */
    color: #06101d;
    /* Ajoute une ombre lumineuse. */
    box-shadow: 0 16px 38px rgba(82, 167, 255, 0.26);
}

/* Style du bouton secondaire. */
.button-secondary {
    /* Définit un fond translucide. */
    background: rgba(255, 255, 255, 0.08);
    /* Ajoute une bordure discrète. */
    border-color: var(--border);
}

/* Effet survol des boutons. */
.button:hover {
    /* Remonte légèrement le bouton. */
    transform: translateY(-2px);
}

/* État désactivé des boutons. */
.button:disabled {
    /* Réduit l’opacité en chargement. */
    opacity: 0.65;
    /* Retire l’interaction pendant le chargement. */
    cursor: wait;
}

/* Décor orbital de la page. */
.hero-orb {
    /* Définit une zone carrée responsive. */
    aspect-ratio: 1;
    /* Arrondit la forme principale. */
    border-radius: 40px;
    /* Ajoute un fond en verre. */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    /* Ajoute une bordure translucide. */
    border: 1px solid var(--border);
    /* Positionne les points internes. */
    position: relative;
    /* Cache les débordements décoratifs. */
    overflow: hidden;
    /* Ajoute une ombre globale. */
    box-shadow: var(--shadow);
}

/* Points décoratifs dans l’orbe. */
.hero-orb span {
    /* Positionne chaque point librement. */
    position: absolute;
    /* Définit une taille commune. */
    width: 18px;
    /* Définit une hauteur commune. */
    height: 18px;
    /* Arrondit les points. */
    border-radius: 50%;
    /* Applique le dégradé réseau. */
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    /* Ajoute une ombre lumineuse. */
    box-shadow: 0 0 32px rgba(85, 240, 210, 0.6);
}

/* Premier point décoratif. */
.hero-orb span:nth-child(1) {
    /* Position horizontale du premier point. */
    left: 22%;
    /* Position verticale du premier point. */
    top: 26%;
}

/* Deuxième point décoratif. */
.hero-orb span:nth-child(2) {
    /* Position horizontale du deuxième point. */
    right: 20%;
    /* Position verticale du deuxième point. */
    top: 45%;
}

/* Troisième point décoratif. */
.hero-orb span:nth-child(3) {
    /* Position horizontale du troisième point. */
    left: 44%;
    /* Position verticale du troisième point. */
    bottom: 20%;
}

/* Grille des cartes réseau. */
.network-grid {
    /* Affiche deux colonnes quand l’écran le permet. */
    display: grid;
    /* Crée des colonnes responsives. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Ajoute l’espace entre les cartes. */
    gap: 24px;
}

/* Carte réseau individuelle. */
.network-card {
    /* Ajoute le fond translucide. */
    background: var(--card);
    /* Ajoute la bordure. */
    border: 1px solid var(--border);
    /* Arrondit la carte. */
    border-radius: var(--radius);
    /* Ajoute l’espace intérieur. */
    padding: 26px;
    /* Ajoute une ombre. */
    box-shadow: var(--shadow);
}

/* En-tête d’une carte réseau. */
.card-head {
    /* Affiche le texte et le bouton sur une ligne responsive. */
    display: flex;
    /* Sépare les éléments. */
    justify-content: space-between;
    /* Aligne les éléments en haut. */
    align-items: flex-start;
    /* Ajoute un espace entre texte et bouton. */
    gap: 18px;
    /* Autorise le retour à la ligne. */
    flex-wrap: wrap;
}

/* Titres des cartes. */
h2, h3 {
    /* Supprime la marge haute. */
    margin-top: 0;
}

/* Paragraphes des cartes. */
.network-card p, .feature-grid p, .map-card p {
    /* Applique la couleur secondaire. */
    color: var(--muted);
    /* Augmente l’interligne. */
    line-height: 1.7;
}

/* Bloc contenant les résultats. */
.result-card {
    /* Ajoute une marge supérieure. */
    margin-top: 24px;
    /* Ajoute un fond plus foncé. */
    background: rgba(0, 0, 0, 0.18);
    /* Ajoute une bordure. */
    border: 1px solid var(--border);
    /* Arrondit le bloc. */
    border-radius: 22px;
    /* Ajoute l’espace intérieur. */
    padding: 20px;
}

/* Petit libellé de résultat. */
.label {
    /* Affiche sur une ligne propre. */
    display: block;
    /* Applique la couleur secondaire. */
    color: var(--muted);
    /* Réduit la taille. */
    font-size: 0.88rem;
    /* Ajoute une marge basse. */
    margin-bottom: 8px;
}

/* Adresse IP détectée. */
.js-ip {
    /* Autorise le retour à la ligne des IPv6 longues. */
    word-break: break-all;
    /* Définit une taille lisible. */
    font-size: 1.05rem;
}

/* Liste des détails réseau. */
.details {
    /* Affiche la liste en grille. */
    display: grid;
    /* Ajoute un espace vertical. */
    gap: 12px;
    /* Ajoute une marge supérieure. */
    margin: 20px 0 0;
}

/* Ligne de détail. */
.details div {
    /* Affiche libellé et valeur sur deux colonnes. */
    display: grid;
    /* Définit la largeur de la colonne libellé. */
    grid-template-columns: 150px 1fr;
    /* Ajoute un espace horizontal. */
    gap: 12px;
}

/* Libellés des détails. */
dt {
    /* Applique la couleur secondaire. */
    color: var(--muted);
}

/* Valeurs des détails. */
dd {
    /* Supprime les marges par défaut. */
    margin: 0;
    /* Autorise les retours sur IPv6/hostname longs. */
    word-break: break-word;
}

/* Bloc de visualisation SVG. */
.map-card {
    /* Ajoute une marge supérieure. */
    margin-top: 22px;
}

/* Carte SVG locale. */
.mini-map {
    /* Définit la largeur complète. */
    width: 100%;
    /* Définit une hauteur automatique. */
    height: auto;
    /* Ajoute une marge supérieure. */
    margin-top: 12px;
}

/* Fond du SVG. */
.mini-map rect {
    /* Applique un remplissage sombre. */
    fill: rgba(255, 255, 255, 0.05);
    /* Applique une bordure SVG. */
    stroke: rgba(255, 255, 255, 0.15);
}

/* Trajet SVG. */
.mini-map path {
    /* Retire le remplissage. */
    fill: none;
    /* Applique une couleur d’accent. */
    stroke: var(--accent);
    /* Définit l’épaisseur du trait. */
    stroke-width: 4;
    /* Arrondit les extrémités. */
    stroke-linecap: round;
    /* Rend le trait légèrement transparent. */
    opacity: 0.75;
}

/* Point SVG de localisation. */
.mini-map circle {
    /* Applique le remplissage cyan. */
    fill: var(--accent-2);
    /* Ajoute une bordure sombre au point. */
    stroke: #06101d;
    /* Définit l’épaisseur de bordure. */
    stroke-width: 5;
}

/* Métadonnées sous la carte. */
.map-meta {
    /* Affiche les métadonnées en grille. */
    display: grid;
    /* Crée des colonnes responsives. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Ajoute un espace. */
    gap: 12px;
    /* Ajoute une marge supérieure. */
    margin-top: 14px;
    /* Applique la couleur secondaire. */
    color: var(--muted);
}

/* Grille des cartes éditoriales. */
.feature-grid {
    /* Affiche trois cartes responsives. */
    display: grid;
    /* Crée les colonnes de cartes. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Ajoute l’espace entre cartes. */
    gap: 18px;
    /* Ajoute une marge supérieure. */
    margin-top: 32px;
}

/* Cartes éditoriales. */
.feature-grid article {
    /* Ajoute un fond translucide. */
    background: rgba(255, 255, 255, 0.06);
    /* Ajoute une bordure. */
    border: 1px solid var(--border);
    /* Arrondit les cartes. */
    border-radius: 22px;
    /* Ajoute l’espace intérieur. */
    padding: 22px;
}

/* Pied de page. */
.site-footer {
    /* Ajoute une bordure supérieure. */
    border-top: 1px solid var(--border);
    /* Applique un fond transparent sombre. */
    background: rgba(7, 17, 31, 0.72);
}

/* Contenu du pied de page. */
.footer-shell {
    /* Limite la largeur. */
    max-width: 1180px;
    /* Centre le contenu. */
    margin: 0 auto;
    /* Ajoute l’espace intérieur. */
    padding: 24px;
    /* Centre le texte. */
    text-align: center;
    /* Applique la couleur secondaire. */
    color: var(--muted);
}

/* Texte secondaire du pied de page. */
.footer-small {
    /* Réduit la taille. */
    font-size: 0.9rem;
}

/* Adaptation tablette et mobile. */
@media (max-width: 900px) {
    /* Passe la section héro en une colonne. */
    .hero {
        /* Définit une seule colonne. */
        grid-template-columns: 1fr;
    }
    /* Passe les cartes réseau en une colonne. */
    .network-grid {
        /* Définit une seule colonne. */
        grid-template-columns: 1fr;
    }
    /* Passe les cartes éditoriales en une colonne. */
    .feature-grid {
        /* Définit une seule colonne. */
        grid-template-columns: 1fr;
    }
}

/* Adaptation petits mobiles. */
@media (max-width: 620px) {
    /* Empile les éléments de navigation. */
    .nav-shell {
        /* Aligne les éléments à gauche. */
        align-items: flex-start;
        /* Passe en colonne. */
        flex-direction: column;
    }
    /* Réduit le padding principal. */
    main {
        /* Ajuste les marges mobiles. */
        padding: 42px 16px 64px;
    }
    /* Réduit le padding des cartes. */
    .network-card {
        /* Ajuste l’espace interne mobile. */
        padding: 20px;
    }
    /* Passe les lignes de détails en colonne. */
    .details div {
        /* Utilise une seule colonne. */
        grid-template-columns: 1fr;
    }
    /* Passe les métadonnées carte en colonne. */
    .map-meta {
        /* Utilise une seule colonne. */
        grid-template-columns: 1fr;
    }
}