/* ==========================================================
   PAGES D'ACCUEIL - FENÊTRE DE PRÉSENTATION « 3D LOGO PRO »
   Créé le 26/09/2026 (demande du user) : fenêtre insérée entre le logo
   animé et le titre « Adelio Lab ». Contenu repris des pages 3D Logo Pro
   (titre bleu, texte rose, bouton jaune) avec les mêmes tailles et couleurs,
   dans un ordre différent. Styles volontairement indépendants de ceux des
   pages 3D Logo Pro (aucune classe partagée) : modifier l'une ne change pas l'autre.
   ========================================================== */

/* Logo animé remonté de 50 px (-30 px d'origine dans .media-wrapper -> -80 px).
   La marge supérieure de la page étant calculée d'après la hauteur réelle du
   header (1 ou 2 lignes), l'écart avec le bas du header reste identique dans
   les deux cas. */
.page-accueil .logo3d-accueil-wrapper {
    margin-top: -80px;
}

/* --- La fenêtre ---
   Largeur : 500 px ; en dessous de ~540 px d'écran, largeur disponible
   (écran moins les 20 px de marge de chaque côté déjà prévus par la page). */
.home-3dlogo-card {
    box-sizing: border-box;
    width: min(500px, 100%);
    flex-shrink: 0;
    position: relative;          /* la fenêtre chevauche de 10 px la zone (transparente) du logo animé : */
    z-index: 1;                  /* elle passe devant pour que survol et clic fonctionnent sur toute sa surface. */
    margin: -30px auto 100px;   /* 26/09/2026 (user) : fenêtre remontée de 30 px vers le logo ;
                                   espace sous la fenêtre +70 px (30 -> 100 px) avant « Adelio Lab ». */
    padding: 28px 22px 32px;
    border: 3px solid rgba(255, 120, 0, 0.7);       /* orange #ff7800 à 70 % au repos */
    border-radius: 18px;                             /* même arrondi que les cartes du carrousel */
    background: #383838;                             /* gris légèrement plus clair que le fond du site (#2e2e2e) */
    box-shadow: 0 0 10px rgba(255, 120, 0, 0.18);   /* halo très léger au repos */
    transition: border-color 250ms ease, box-shadow 250ms ease;
}

.home-3dlogo-card:hover,
.home-3dlogo-card:focus-within {
    border-color: rgba(255, 120, 0, 1);              /* orange plus vif au survol */
    box-shadow: 0 0 26px rgba(255, 120, 0, 0.45);   /* halo plus marqué au survol */
}

/* --- Titre : mêmes réglages que « 3D Logo Pro » des pages 3D Logo Pro --- */
.home-3dlogo-card-title {
    margin: 0;
    font-family: var(--s2-title-font);
    font-size: var(--s2-title-size);
    font-weight: var(--s2-title-weight);
    color: var(--s2-title-color);
    line-height: var(--s2-title-lh);
    text-align: center;
}

/* Sous-titre « Générateur » / « Generator », plus petit, même bleu. */
.home-3dlogo-card-subtitle {
    display: block;
    font-size: 0.68em;
    line-height: 1.2;
}

/* --- Texte rose : mêmes réglages que le texte rose des pages 3D Logo Pro,
   avec réduction progressive sur les très petits écrans. --- */
.home-3dlogo-card-text {
    width: 100%;
    margin: 22px 0 0;
    font-family: var(--s2-text-font);
    font-size: clamp(0.85rem, 3.6vw, 1rem);
    font-weight: var(--s2-text-weight);
    line-height: var(--s2-text-lh);
    color: #FF3CAC;
    text-align: center;
}

/* --- Bouton : copie indépendante du bouton « Créer mon logo 3D » des pages
   3D Logo Pro (mêmes couleurs, bordure, halo et survol orange), avec un texte
   qui rétrécit si nécessaire pour ne jamais déborder de la fenêtre. --- */
.home-3dlogo-card-actions {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.home-3dlogo-card-button {
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(320px, 100%);
    max-width: 100%;
    padding: 13px 22px;
    border: 3px solid rgba(255, 222, 0, 0.48);
    border-radius: 999px;
    background: rgba(255, 222, 0, 0.08);
    color: #ffde00;
    font-family: var(--font-family-consulting);
    font-size: clamp(1.05rem, 5.2vw, 1.425rem);
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 34px rgba(255, 222, 0, 0.38);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.home-3dlogo-card-button:hover,
.home-3dlogo-card-button:focus-visible,
.home-3dlogo-card-button:active {
    transform: translateY(-1px);
    border-color: rgba(255, 120, 0, 0.62);
    background: rgba(255, 120, 0, 0.14);
    color: #ff7800;
    box-shadow: 0 0 48px rgba(255, 120, 0, 0.55);
}