/* ==========================================================================
   AICKO IPTV — couleurs d'accent et animations
   --------------------------------------------------------------------------
   Charge apres site.css, qu'il complete sans le remplacer.

   Le rouge AICKO reste la couleur de marque : il porte les boutons, les liens
   et les etats actifs. Les teintes definies ici ne servent qu'a differencier
   les cartes entre elles, pour qu'une grille de douze fonctionnalites ne soit
   pas un mur uniforme.
   ========================================================================== */

/* ---- Une teinte par carte, cyclee sur huit ------------------------------- */
.grid .card {
    --hue: 0;
    --tint: hsl(var(--hue) 84% 62%);
    --tint-soft: hsl(var(--hue) 84% 62% / .13);
    --tint-border: hsl(var(--hue) 84% 62% / .34);
}
.grid .card:nth-child(8n + 1) { --hue: 0; }    /* rouge    */
.grid .card:nth-child(8n + 2) { --hue: 24; }   /* orange   */
.grid .card:nth-child(8n + 3) { --hue: 43; }   /* ambre    */
.grid .card:nth-child(8n + 4) { --hue: 160; }  /* emeraude */
.grid .card:nth-child(8n + 5) { --hue: 190; }  /* cyan     */
.grid .card:nth-child(8n + 6) { --hue: 217; }  /* bleu     */
.grid .card:nth-child(8n + 7) { --hue: 265; }  /* violet   */
.grid .card:nth-child(8n + 8) { --hue: 325; }  /* rose     */

.grid .card .card-icon {
    border-color: var(--tint-border);
    background: var(--tint-soft);
    color: var(--tint);
}
.grid .card::before {
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
                hsl(var(--hue) 84% 62% / .17), transparent 45%);
}
.grid .card:hover { border-color: var(--tint-border); }
.grid .card .card-link { color: var(--tint); }

/* Liseré superieur qui se deploie au survol : un seul repere colore, plus
   lisible qu'une bordure entierement teintee. */
.grid .card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tint), transparent);
    transform: scaleX(0);
    transition: transform .45s var(--ease);
}
.grid .card:hover::after { transform: scaleX(1); }

/* ---- Inclinaison au survol ----------------------------------------------- */
/* Les angles viennent du JS (--rx / --ry). Sans JS, la carte conserve son
   simple relevement : rien ne casse. */
@media (hover: hover) and (pointer: fine) {
    .grid .card {
        transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
        transform-style: preserve-3d;
        will-change: transform;
    }
    .grid .card:hover {
        transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px);
    }
}

/* ---- Orbes de l'en-tete -------------------------------------------------- */
.orbs {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(58px);
    opacity: .5;
    animation: orb-float 19s var(--ease) infinite alternate;
}
.orb-1 {
    width: 340px; height: 340px;
    top: -90px; left: -70px;
    background: radial-gradient(circle, #ef4444, transparent 70%);
}
.orb-2 {
    width: 300px; height: 300px;
    top: 30px; right: -80px;
    background: radial-gradient(circle, #f59e0b, transparent 70%);
    animation-delay: -6s;
    animation-duration: 23s;
}
.orb-3 {
    width: 260px; height: 260px;
    bottom: -110px; left: 42%;
    background: radial-gradient(circle, #8b5cf6, transparent 70%);
    animation-delay: -12s;
    animation-duration: 27s;
}
@keyframes orb-float {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(38px, -30px, 0) scale(1.16); }
}

/* Trame lumineuse discrete, pour donner une texture au fond de l'en-tete.
   Le masque evite une grille qui s'arreterait net en bas du bloc. */
.grid-lines {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 42%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 42%, transparent 100%);
}

/* ---- Chiffres cles ------------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 16px;
    margin-top: 34px;
}
.stat {
    padding: 22px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    text-align: center;
    transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.stat:hover { transform: translateY(-4px); border-color: var(--primary-border); }
.stat-num {
    display: block;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1px;
    background: linear-gradient(120deg, var(--primary), #fb923c 55%, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat-label {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 13.4px;
    font-weight: 500;
}

/* ---- Etapes numerotees : trait de liaison -------------------------------- */
@media (min-width: 900px) {
    .steps { position: relative; }
    .steps::before {
        content: "";
        position: absolute;
        top: 47px;
        left: 12%;
        right: 12%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--primary-border), var(--primary-border), transparent);
        z-index: 0;
    }
    .step { position: relative; z-index: 1; }
}

/* ---- Titres de section : soulignement anime ------------------------------ */
/* Le h2 est en inline-block pour que son soulignement epouse la largeur du
   texte. L'intitule qui le precede doit donc etre force en bloc, sinon les
   deux se retrouvent cote a cote sur la meme ligne. */
.section-header .section-eyebrow { display: block; }
.section-header h2 { position: relative; display: inline-block; }
.section-header h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 0;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: translateX(-50%);
    transition: width .7s var(--ease) .15s;
}
section.reveal.in .section-header h2::after { width: 62px; }

/* ---- Pastille de l'en-tete ----------------------------------------------- */
.eyebrow {
    background: linear-gradient(110deg,
        rgba(239, 68, 68, .16), rgba(245, 158, 11, .16), rgba(239, 68, 68, .16));
    background-size: 220% auto;
    animation: shimmer 9s linear infinite;
}

/* ---- Tuiles de telechargement : teintes distinctes ----------------------- */
.dl-platforms .dl-tile:nth-child(1) svg { color: #22c55e; }
.dl-platforms .dl-tile:nth-child(2) svg { color: #38bdf8; }
.dl-platforms .dl-tile:nth-child(3) svg { color: #a78bfa; }
.dl-platforms .dl-tile:nth-child(1):hover { border-color: #22c55e; }
.dl-platforms .dl-tile:nth-child(2):hover { border-color: #38bdf8; }
.dl-platforms .dl-tile:nth-child(3):hover { border-color: #a78bfa; }

/* ---- Colonne laterale : survol colore ------------------------------------ */
.sidebar-nav li:nth-child(8n + 1) a:hover { color: hsl(0   84% 72%); }
.sidebar-nav li:nth-child(8n + 2) a:hover { color: hsl(24  84% 72%); }
.sidebar-nav li:nth-child(8n + 3) a:hover { color: hsl(43  84% 72%); }
.sidebar-nav li:nth-child(8n + 4) a:hover { color: hsl(160 74% 68%); }
.sidebar-nav li:nth-child(8n + 5) a:hover { color: hsl(190 84% 70%); }
.sidebar-nav li:nth-child(8n + 6) a:hover { color: hsl(217 90% 74%); }
.sidebar-nav li:nth-child(8n + 7) a:hover { color: hsl(265 84% 76%); }
.sidebar-nav li:nth-child(8n + 8) a:hover { color: hsl(325 84% 74%); }

/* ---- FAQ : alternance d'accents ------------------------------------------ */
.faq-item:nth-child(even) summary::after { border-color: var(--accent); }
.faq-item[open]:nth-child(even) { border-color: rgba(245, 158, 11, .3); }

@media (prefers-reduced-motion: reduce) {
    .orb { animation: none; }
    .grid .card { transform: none !important; }
    .section-header h2::after { transition: none; width: 62px; }
}

/* ---- Fil d'Ariane -------------------------------------------------------- */
.fil { margin-bottom: 18px; }
.fil ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    font-size: 13.4px;
    color: var(--text-faint);
}
.fil li { display: flex; align-items: center; gap: 8px; }
/* Le chevron est purement decoratif : il est dessine en CSS pour ne pas
   polluer le texte lu par les lecteurs d'ecran ni le contenu copie. */
.fil li + li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 1.5px solid var(--text-faint);
    border-right: 1.5px solid var(--text-faint);
    transform: rotate(45deg);
    opacity: .7;
}
.fil a { color: var(--text-muted); }
.fil a:hover { color: var(--primary); }
.fil [aria-current="page"] { color: var(--text-secondary); }

/* ---- Bloc de liens connexes ---------------------------------------------- */
.connexes {
    margin-top: 12px;
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}
.connexes h2 {
    margin-bottom: 14px;
    font-size: 15px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-faint);
}
.connexes ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px 26px;
    list-style: none;
    padding: 0;
}
.connexes a {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.6px;
    color: var(--text-secondary);
}
.connexes a:hover { color: var(--primary); }
.connexes .ico { font-size: 16px; line-height: 1; }

/* ==========================================================================
   Emplacements publicitaires
   --------------------------------------------------------------------------
   Chaque bloc reserve sa hauteur AVANT que l'annonce n'arrive. Sans cette
   reserve, l'insertion decale le texte deja lu : mauvaise experience, et
   penalite au CLS, l'un des signaux Core Web Vitals pris en compte par Google.
   ========================================================================== */
.pub {
    display: block;
    margin: 30px 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(17, 23, 38, .55);
    text-align: center;
    /* La mention et la marge occupent 30 px ; le reste est la place de
       l'annonce elle-meme. */
    min-height: 280px;
    overflow: hidden;
}
.pub-mention {
    display: block;
    margin-bottom: 8px;
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.pub ins { max-width: 100%; }

.pub-rect { min-height: 300px; }

/* Le carre flotte a gauche du texte sur grand ecran seulement : dans une
   colonne de telephone, il ne laisserait qu'une gouttiere illisible. */
.pub-carre {
    max-width: 366px;
    min-height: 310px;
}
@media (min-width: 900px) {
    .pub-carre {
        float: left;
        margin: 8px 26px 18px 0;
    }
}
@media (max-width: 899px) {
    .pub-carre { margin-left: auto; margin-right: auto; }
    .pub-carre ins { width: 100% !important; max-width: 336px; }
}

.pub-sidebar {
    margin: 22px 0 0;
    min-height: 260px;
}

/* Le flottement du carre ne doit pas deborder sur la section suivante. */
.prose::after { content: ''; display: block; clear: both; }