/* ==========================================================================
   Homepage — [acc-home]
   Full-screen dark background, avatar with glow, animated title, buttons.
   ========================================================================== */

/* Modèle de boîte : la largeur inclut marges intérieures et bordure.
   Sans cela, un bouton en width:100% avec 28 px de marge intérieure de chaque
   côté et 1 px de bordure mesure en réalité 58 px de plus que son parent, et
   dépasse par la droite - ce qui décalait toute la page d'accueil sur mobile.
   Constaté sur Android le 30/08/2026. Ni le thème ni le plugin ne posaient
   box-sizing nulle part. */
.acc-home,
.acc-home *,
.acc-home *::before,
.acc-home *::after {
    box-sizing: border-box;
}

/* Le thème rend le titre de la page ("Accueil") au-dessus du contenu, avec un
   espaceur : 144 px ajoutés devant une page déjà prévue pour tenir en un
   écran. D'où le défilement signalé sur iPad. Le titre n'a pas d'utilité ici,
   la page d'accueil portant déjà le nom en grand. Masqué sur elle seulement :
   ailleurs il sert. */
body.home .wp-site-blocks > main > .wp-block-group:first-child {
    display: none;
}

.acc-home {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* Sur iPad et iPhone, 100vh vaut la hauteur de l'écran barre d'adresse
       RÉTRACTÉE. Tant qu'elle est visible, le bloc dépasse et il faut faire
       défiler pour voir le bas de la page. 100dvh suit la hauteur réellement
       disponible, barres comprises. La première ligne reste le repli pour les
       navigateurs qui ignorent dvh. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #000000 0%, #1a0000 50%, #000000 100%);
    overflow: hidden;
}

/* Particles effect */
.acc-home-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(2px 2px at 60px 70px, rgba(255, 255, 255, 0.15), transparent),
        radial-gradient(1px 1px at 50px 50px, rgba(255, 255, 255, 0.1), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.1), transparent),
        radial-gradient(2px 2px at 90px 10px, rgba(255, 255, 255, 0.15), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
    animation: acc-stars 60s linear infinite;
    pointer-events: none;
}

@keyframes acc-stars {
    from { transform: translateY(0); }
    to { transform: translateY(200px); }
}

/* Content */
.acc-home-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px;
    max-width: 700px;
    /* Centrage explicite plutôt que par le seul flex du parent : si quoi que
       ce soit perturbe le contexte flex (zoom du navigateur, largeur de
       fenêtre inattendue), les marges automatiques tiennent quand même. */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    animation: acc-fadeIn 1.5s ease-in;
}

@keyframes acc-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Avatar */
.acc-home-avatar {
    margin-bottom: 40px;
}

.acc-avatar {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 50, 50, 0.5);
    box-shadow:
        0 0 30px rgba(255, 50, 50, 0.4),
        0 0 60px rgba(255, 50, 50, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.3);
    animation: acc-pulse 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.acc-avatar:hover {
    transform: scale(1.05);
}

@keyframes acc-pulse {
    0%, 100% {
        box-shadow:
            0 0 30px rgba(255, 50, 50, 0.4),
            0 0 60px rgba(255, 50, 50, 0.2),
            inset 0 0 30px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow:
            0 0 40px rgba(255, 50, 50, 0.6),
            0 0 80px rgba(255, 50, 50, 0.3),
            inset 0 0 30px rgba(0, 0, 0, 0.3);
    }
}

/* Title */
.acc-home-title {
    font-size: 2.5rem;
    margin-bottom: 30px;
    background: linear-gradient(45deg, #ff3333, #ff6666, #ff3333);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: acc-gradient 3s ease infinite;
    letter-spacing: 2px;
    font-weight: 700;
}

.acc-home-aka {
    font-weight: 400;
    font-size: 0.7em;
}

@keyframes acc-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Buttons grid */
.acc-home-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    width: 100%;
}

.acc-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: rgba(255, 50, 50, 0.1);
    border: 1px solid rgba(255, 50, 50, 0.4);
    border-radius: 50px;
    color: #f0f0f0;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.acc-home-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 50, 50, 0.3), transparent);
    transition: left 0.5s ease;
}

.acc-home-btn:hover::before {
    left: 100%;
}

.acc-home-btn:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: rgba(255, 50, 50, 0.8);
    box-shadow: 0 0 20px rgba(255, 50, 50, 0.4);
    transform: translateY(-2px);
    color: #ffffff;
}

/* External buttons */
.acc-home-external {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.acc-home-ext-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: #cccccc;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
}

.acc-home-ext-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.acc-home-ext-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

/* Responsive

   Les règles ci-dessous réagissent à la largeur. Sur une tablette en paysage
   la largeur est confortable mais la hauteur ne l'est pas : l'avatar de 250 px
   restait entier alors que la place manquait. D'où les règles sur la hauteur,
   qui viennent en premier. */

@media (max-height: 800px) {
    .acc-home-avatar { margin-bottom: 26px; }
    .acc-avatar { width: 200px; height: 200px; }
    .acc-home-title { font-size: 2.1rem; margin-bottom: 20px; }
}

@media (max-height: 620px) {
    .acc-home-content { padding: 12px; }
    .acc-home-avatar { margin-bottom: 16px; }
    .acc-avatar { width: 140px; height: 140px; }
    .acc-home-title { font-size: 1.6rem; margin-bottom: 14px; }
    .acc-home-btn { padding: 8px 18px; font-size: 0.85rem; }
}

@media (max-width: 768px) {
    .acc-avatar {
        width: 200px;
        height: 200px;
    }

    .acc-home-title {
        font-size: 2rem;
    }

    .acc-home-btn {
        padding: 10px 22px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .acc-avatar {
        width: 180px;
        height: 180px;
    }

    .acc-home-title {
        font-size: 1.5rem;
    }

    .acc-home-buttons {
        flex-direction: column;
        /* En colonne, c'est align-items qui gouverne l'axe horizontal :
           justify-content ne fait plus que le vertical. */
        align-items: stretch;
        gap: 10px;
    }

    .acc-home-btn {
        width: 100%;
    }

    .acc-home-external {
        flex-direction: column;
        gap: 10px;
    }

    .acc-home-ext-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Hide theme header/footer/title on homepage */
body.home .acc-footer,
body.page-template-default.home .acc-footer {
    display: none;
}

body.home .wp-site-blocks > header,
body.home .wp-block-template-part,
body.home .wp-block-post-title,
body.home .entry-title,
body.home .wp-block-group:first-child:has(.wp-block-site-title),
body.home header.wp-block-template-part {
    display: none !important;
}

/* Remove default WP spacing on homepage */
body.home .wp-site-blocks {
    padding: 0 !important;
    margin: 0 !important;
}

body.home .wp-site-blocks > main,
body.home .wp-site-blocks > .wp-block-group,
body.home .entry-content,
body.home .wp-block-post-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}