/* ============================================================
   PROST — Couche « finition » du site public
   Chargée APRÈS style.css et prost-theme.css.
   1. Correctifs de mise en page / responsive
   2. Élégance (typographie, cartes, formulaires, pied de page)
   3. Animations (toutes désactivées si l'utilisateur préfère « moins d'animations »)
   Aucune fonctionnalité n'est modifiée : uniquement l'apparence.
   ============================================================ */
:root {
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --grad-brand: linear-gradient(135deg, #0033cc 0%, #0033cc 55%, #0033cc 100%);
}

/* ============================================================
   1. CORRECTIFS DE MISE EN PAGE
   ============================================================ */

/* Les enfants d'une grille ne doivent pas déborder (tableaux, champs longs…) */
.account-layout > *, .two-col > *, .two-col-even > *, .two-col-checkout > *, .two-col-admin > *,
.hero-grid > *, .service-cols > *, .vm-grid > *, .product-grid > *, .value-grid > * { min-width: 0; }

/* Fiche produit : la grande image n'héritait d'aucun style (.thumb n'était défini que dans .product-card) */
#main-product-image {
    background-color: var(--bg-soft);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-400);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    width: 100%;
}

/* Grilles de 3 statistiques (espace client) : auparavant figées en 3 colonnes même sur mobile */
.stat-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .stat-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .stat-grid-3 { grid-template-columns: 1fr; } }

/* Tableaux : défilement horizontal plutôt que débordement de la page */
.table-responsive { border-radius: 12px; }
.table-responsive > table.table { min-width: 520px; }
.form-card .table-responsive > table.table { min-width: 460px; }

/* Rangées d'icônes de confiance, pagination, formulaires en ligne : retour à la ligne automatique */
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.pagination-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; }
.inline-form > .form-control { flex: 1 1 160px; min-width: 0; }

/* Menu déroulant « PROST » : même taille de texte que les autres liens, police cohérente */
.nav-dropdown-toggle { font-size: 15px; color: var(--ink-600); }
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.active { color: var(--navy-800); }

/* Boutons d'authentification dupliqués dans le menu mobile (la barre du haut débordait sur petit écran) */
.nav-auth-mobile { display: none; }

/* Menu mobile : ancré sous la barre (et non plus à 72 px fixes, faux quand le bandeau d'annonce est visible) */
@media (max-width: 1240px) {
    .nav-links {
        position: absolute; top: 100%;
        max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px);
        border-radius: 0 0 16px 16px;
    }
    .nav-links > a.active, .nav-dropdown-toggle.active { color: var(--blue-accent); }
}
@media (max-width: 700px) {
    .nav-actions > .btn { display: none; }
    .nav-auth-mobile {
        display: flex; flex-direction: column; gap: 10px; padding: 14px 6px 4px; margin-top: 6px;
        border-top: 1px solid var(--border-soft);
    }
    .nav-auth-mobile a { display: flex; align-items: center; justify-content: center; border-radius: 10px; padding: 13px 16px; font-size: 16px; font-weight: 700; border: 1px solid var(--border-soft); color: var(--navy-800); }
    .nav-auth-mobile a.btn-primary { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
    .navbar .container { height: 64px; }
    .brand-logo { height: 30px; }
}

/* Espace client : menu latéral collant sur ordinateur, bandeau horizontal défilant sur mobile
   (la liste verticale de 9 liens occupait tout l'écran avant le contenu). */
@media (min-width: 861px) {
    .account-layout > .form-card:first-child { position: sticky; top: 96px; }
}
@media (max-width: 860px) {
    .account-layout > .form-card:first-child { padding: 8px !important; }
    .account-layout > .form-card:first-child ul {
        flex-direction: row !important; gap: 6px !important; overflow-x: auto; scrollbar-width: none;
        -webkit-overflow-scrolling: touch; padding-bottom: 2px;
    }
    .account-layout > .form-card:first-child ul::-webkit-scrollbar { display: none; }
    .account-layout > .form-card:first-child li { flex: 0 0 auto; }
    .account-layout > .form-card:first-child .btn-block { width: auto; white-space: nowrap; padding: 10px 14px; }
}

/* Pied de page : la ligne du bas passe à la ligne au lieu de se comprimer */
footer.site-footer .bottom { flex-wrap: wrap; gap: 8px 20px; }
footer.site-footer .cols > div { min-width: 0; overflow-wrap: anywhere; }

/* Étapes « Notre méthode » : adaptation fluide */
.steps { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

/* Bouton fantôme sur fond sombre (hero) : lisible au survol */
.hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .45); }
.hero .btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }

/* Widgets flottants : jamais cachés par la barre de navigation du téléphone */
#chat-widget { right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); }
#chat-panel { max-height: min(70vh, 560px); }
@media (max-width: 560px) {
    #chat-panel { width: calc(100vw - 28px); right: -6px; }
}

/* Très grands écrans : un peu plus d'air */
@media (min-width: 1500px) { .container { max-width: 1280px; } }

/* Petits écrans : sections et titres mieux proportionnés */
@media (max-width: 640px) {
    .section { padding: 48px 0; }
    .section-head { margin-bottom: 32px; }
    .form-card { padding: 24px 18px; }
    .hero-stats { gap: 16px 24px; }
    .hero-stats div strong { font-size: 20px; }
    table.table th, table.table td { padding: 11px 12px; }
}

/* ============================================================
   2. ÉLÉGANCE
   ============================================================ */
body { letter-spacing: -.003em; }
h1, h2, h3 { text-wrap: balance; }
main { animation: ui-fade .5s var(--ease-out) both; }

/* Barre de navigation */
.navbar { border-bottom-color: rgba(7, 18, 51, .06); }
@media (min-width: 1241px) { .nav-links > a { padding: 6px 0; } }
.nav-links > a::before, .nav-dropdown-toggle::before {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; border-radius: 2px;
    background: var(--blue-accent); transition: right .28s var(--ease-out);
}
.nav-links > a:hover::before, .nav-dropdown-toggle:hover::before { right: 0; }
.nav-dropdown-menu { animation: ui-pop .2s var(--ease-out) both; transform-origin: top center; }
@media (max-width: 1240px) {
    .nav-links > a::before, .nav-dropdown-toggle::before { display: none; }
    .nav-links.open { animation: ui-drop .25s var(--ease-out) both; }
}
.brand-logo { transition: transform .35s var(--ease-out); }
.brand:hover .brand-logo { transform: scale(1.04); }

/* Boutons : reflet au survol */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-accent::after, .btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-20deg); transition: left .6s var(--ease-out);
}
.btn-accent:hover::after, .btn-primary:hover::after { left: 130%; }
.btn-accent { background: var(--grad-brand); background-size: 140% 100%; background-position: 0 0; transition: background-position .4s, transform .15s var(--ease-out), box-shadow .2s; }
.btn-accent:hover { background: var(--grad-brand); background-size: 140% 100%; background-position: 100% 0; filter: brightness(.94); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* En-têtes de section */
.section-head .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
}
.section-head .eyebrow::before, .section-head .eyebrow::after {
    content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: .45;
}
.section-head h2::after {
    content: ""; display: block; width: 54px; height: 4px; border-radius: 4px; margin: 16px auto 0;
    background: var(--grad-brand);
}

/* Cartes */
.cat-card, .product-card, .value-card, .sector-card, .tile, .service-col, .vm-card, .identity-card {
    border-color: #e6ebf4;
}
.cat-card .ico, .value-card .ico, .sector-card .ico { transition: transform .3s var(--ease-spring), background .25s, color .25s; }
.cat-card:hover .ico { background: var(--blue-accent); color: #fff; transform: rotate(-6deg) scale(1.08); }
.value-card:hover .ico, .sector-card:hover .ico { background: var(--blue-accent); color: #fff; transform: scale(1.08); }
.value-card, .sector-card, .service-col { position: relative; overflow: hidden; }
.value-card::after, .sector-card::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.value-card:hover::after, .sector-card:hover::after { transform: scaleX(1); }
.service-col { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.service-col:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.product-card { position: relative; }
.product-card .thumb { transition: transform .6s var(--ease-out); }
.product-card { overflow: hidden; }
.product-card:hover .thumb { transform: scale(1.05); }
.product-card .thumb { overflow: hidden; }
.product-card .body { background: #fff; position: relative; }
.product-card h3 { line-height: 1.3; }
.product-card .desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .price-row .btn { pointer-events: none; }
.product-card:hover .price-row .btn { background: var(--navy-800); color: #fff; }
.product-card .badge-featured { box-shadow: 0 4px 12px rgba(0,51,204, .35); }

/* Formulaires */
.form-card { border-color: #e6ebf4; box-shadow: 0 1px 2px rgba(7, 18, 51, .04), 0 16px 40px rgba(7, 18, 51, .06); }
.form-control { border-radius: 10px; border-color: #dbe2ee; transition: border-color .15s, box-shadow .2s, background .15s; }
.form-control:hover { border-color: #c4cfe3; }
.form-group label { letter-spacing: .005em; }
.alert { border-radius: 12px; animation: ui-rise .4s var(--ease-out) both; }
.status-pill { letter-spacing: .01em; }

/* Tableaux */
table.table { border-radius: 12px; overflow: hidden; }
table.table tbody tr { transition: background .15s; }
table.table tbody tr:hover { background: #f6f9ff; }
table.table tbody tr:last-child td { border-bottom: none; }

/* Bandeaux sombres et CTA */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
    content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%); animation: ui-float 9s ease-in-out infinite;
}
.cta-band > * { position: relative; }
.section-dark { position: relative; overflow: hidden; }

/* Pied de page */
footer.site-footer { position: relative; margin-top: 90px; }
footer.site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-brand);
}
footer.site-footer li a { display: inline-block; transition: color .15s, transform .2s var(--ease-out); }
footer.site-footer li a:hover { transform: translateX(4px); }
.social-row a { transition: background .2s, transform .25s var(--ease-spring), color .2s; }
.social-row a:hover { background: var(--blue-accent); color: #fff; transform: translateY(-3px); }

/* Boutons flottants */
#chat-toggle { box-shadow: 0 10px 28px rgba(0, 51, 204, .35); position: relative; }
#chat-toggle::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue-accent);
    animation: ui-ring 2.8s ease-out infinite; pointer-events: none;
}
#chat-panel.open { animation: ui-pop .25s var(--ease-out) both; transform-origin: bottom right; }
#back-top { transition: opacity .25s, transform .25s var(--ease-out), background .2s; }
#back-top:hover { background: var(--blue-accent); transform: translateY(-3px); }
.chat-bubble { animation: ui-rise .3s var(--ease-out) both; }

/* Bandeau d'annonce : pause au survol */
.announcement-bar:hover .track { animation-play-state: paused; }

/* Barre de progression de lecture (créée par main.js) */
#scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 400; pointer-events: none;
    background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .1s linear;
}

/* ---------- Accueil / héros ---------- */
.hero .container { z-index: 1; }
.hero .container::before, .hero .container::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px); z-index: -1;
}
.hero .container::before { width: 420px; height: 420px; right: -80px; top: -40px; background: rgba(0,51,204, .32); animation: ui-float 11s ease-in-out infinite; }
.hero .container::after  { width: 320px; height: 320px; left: -100px; bottom: -80px; background: rgba(201, 162, 75, .18); animation: ui-float 14s ease-in-out infinite reverse; }
.hero-eyebrow { animation: ui-rise .7s var(--ease-out) .05s both; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero h1 { animation: ui-rise .8s var(--ease-out) .15s both; }
.hero h1 span { background-size: 200% 100%; animation: ui-shimmer 6s ease-in-out infinite; }
.hero p.lead { animation: ui-rise .8s var(--ease-out) .28s both; }
.hero-actions, .btn-row { animation: ui-rise .8s var(--ease-out) .4s both; }
.hero-stats { animation: ui-rise .8s var(--ease-out) .52s both; }
.pillars { animation: ui-rise .8s var(--ease-out) .5s both; }
.hero-panel { animation: ui-rise .9s var(--ease-out) .3s both, ui-bob 7s ease-in-out 1.2s infinite; }
.hero-panel .row { transition: transform .25s var(--ease-out), background .25s; border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.hero-panel .row:hover { transform: translateX(6px); background: rgba(255, 255, 255, .05); }
.hero-panel .row .ico { transition: transform .3s var(--ease-spring), background .25s; }
.hero-panel .row:hover .ico { transform: scale(1.12) rotate(-5deg); background: rgba(0,51,204, .35); }


/* FAQ : les réponses longues étaient tronquées à 400 px ; lecture clavier + animation plus douce */
.faq-item.open .faq-a { max-height: 1600px; }
.faq-a { transition: max-height .4s var(--ease-out); }
.faq-item { transition: box-shadow .25s var(--ease-out), border-color .25s; }
.faq-item.open { border-color: #c8d5f5; box-shadow: var(--shadow-md); }
.faq-q:hover { color: var(--blue-accent); }
.faq-q:focus-visible { outline-offset: -3px; }

/* ---------- Apparition au défilement (classes posées par main.js) ---------- */
.js .rv { opacity: 0; }
.js .rv.in { opacity: 1; animation: ui-rise .75s var(--ease-out) backwards; animation-delay: var(--d, 0s); }

/* ---------- Mots-clés d'animation ---------- */
@keyframes ui-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-rise   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ui-drop   { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes ui-pop    { from { opacity: 0; transform: scale(.95) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ui-float  { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 26px, 0); } }
@keyframes ui-bob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ui-shimmer{ 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes ui-ring   { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.55); opacity: 0; } }

/* ---------- Accessibilité : moins d'animations ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .js .rv { opacity: 1; }
    #chat-toggle::after { display: none; }
}

/* Impression */
@media print {
    .js .rv { opacity: 1 !important; animation: none !important; }
    #scroll-progress { display: none; }
    main { animation: none; }
}