/* ==========================================================================
   PAGES SECTEUR (Restaurants, Cabinets médicaux, Immobilier)
   Même langage que l'accueil : accroche en texte au lieu des pastilles,
   titre très grand, bouton blanc, chiffres dans des tuiles pleines,
   fonctionnalités dans des tuiles. Chargé après style.css.
   ========================================================================== */

/* ---------------------------------------------------------------- EN-TÊTE */
.uc-hero-section { min-height: 680px; }
.uc-hero-section .container { padding-top: 140px; padding-bottom: 120px; }
.uc-hero-content { max-width: 620px; }
.uc-hero-badge {
    display: block;
    padding: 0;
    margin-bottom: 14px;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #93C5FD;
}
.uc-hero-content h2 {
    font-size: clamp(3rem, 6.4vw, 5.6rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.05em;
    margin-bottom: 24px;
    color: #FFFFFF;
    text-wrap: balance;
}
.uc-hero-subtitle { font-size: 1.3rem; line-height: 1.45; color: #EAF0F8; font-weight: 500; margin-bottom: 14px; letter-spacing: -0.01em; }
.uc-hero-desc { font-size: 1.02rem; line-height: 1.6; color: rgba(234, 240, 248, 0.7); margin-bottom: 32px; }
.uc-hero-cta .btn-primary {
    background: #FFFFFF;
    color: #0B1829;
    border: 0;
    border-radius: 999px;
    padding: 15px 28px;
    font-weight: 700;
    box-shadow: none;
    animation: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.uc-hero-cta .btn-primary::before,
.uc-hero-cta .btn-primary::after { display: none; }
.uc-hero-cta .btn-primary:hover { background: #E8EEF7; transform: translateY(-1px); box-shadow: none; opacity: 1; }

/* Chiffres : fini la gélule en verre qui brille, trois tuiles pleines. */
.uc-hero-metrics {
    top: auto;
    bottom: 72px;
    right: max(40px, calc((100vw - 1200px) / 2));
    gap: 10px;
    padding: 0;
    max-width: none;
    background: none;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow: visible;
    filter: none;
    transform: none;
    /* Visibles par défaut : l'ancien style partait de opacity: 0 et comptait
       sur l'animation, donc sans animation les chiffres restaient cachés. */
    opacity: 1;
    animation: secteurChiffres 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
.uc-hero-metrics::after { display: none; }
@keyframes secteurChiffres { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.uc-hero-metric {
    flex: 0 0 auto;
    min-width: 150px;
    padding: 20px 22px;
    gap: 6px;
    align-items: flex-start;
    text-align: left;
    border-radius: 22px;
    background: rgba(11, 22, 41, 0.9);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
    opacity: 1;
    animation: none;
}
.uc-hero-metric:hover { transform: none; }
.uc-hero-metric + .uc-hero-metric::before { display: none; }
.uc-hero-metric .uc-metric-val {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, #FFFFFF 25%, #7FB2FB 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: none;
}
.uc-hero-metric .uc-metric-label {
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
    color: #8E9BB0;
}

/* ---------------------------------------------------------------- FONCTIONNALITÉS
   Chaque fonctionnalité devient une tuile : l'illustration dans un panneau
   teinté de sa couleur, puis le titre et le texte alignés à gauche.
   Les anneaux, la pastille « FONCTIONNALITÉ » et le trait sous le titre
   disparaissent : c'étaient des ornements, pas de l'information. */
.uc-details-grid { gap: 14px; max-width: 1140px; }
@media (min-width: 760px) { .uc-details-grid { gap: 14px; } }
.uc-detail-card {
    align-items: stretch;
    text-align: left;
    gap: 0;
    padding: 14px 14px 30px;
    border-radius: 28px;
    background: #111F34;
}
.uc-detail-icon {
    width: 100%;
    height: 230px;
    border-radius: 20px;
    margin: 0 0 26px;
    background:
        radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--accent-c) 26%, transparent) 0%, transparent 62%),
        #0B1629;
}
@media (min-width: 880px) { .uc-detail-icon { width: 100%; height: 250px; } }
.uc-detail-icon::before,
.uc-detail-icon::after { display: none; }
.uc-detail-icon svg { width: auto; height: 72%; aspect-ratio: 1; }
.uc-detail-card:hover .uc-detail-icon { transform: none; filter: none; }
.uc-detail-card h3 {
    margin: 0 16px 10px;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #F5F7FA;
}
@media (min-width: 880px) { .uc-detail-card h3 { font-size: 1.55rem; } }
.uc-detail-card h3::before,
.uc-detail-card h3::after { display: none; }
.uc-detail-card p {
    margin: 0 16px;
    max-width: none;
    font-size: 1rem;
    line-height: 1.55;
    color: #8E9BB0;
}

/* ---------------------------------------------------------------- TÉLÉPHONE */
@media (max-width: 900px) {
    .uc-hero-section .container { padding-bottom: 36px; }
    .uc-hero-metrics {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 0 20px 40px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        z-index: 3;
    }
    .uc-hero-metric { min-width: 0; padding: 16px 14px; border-radius: 18px; }
    .uc-hero-metric .uc-metric-val { font-size: 1.5rem; }
    .uc-hero-section { flex-direction: column; align-items: stretch; }
}
@media (max-width: 620px) {
    .uc-detail-card { border-radius: 24px; }
    .uc-detail-icon { height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
    .uc-hero-metrics { animation: none; }
}