/* PROVIA — système de design "Lagune" */

:root {
    /* Palette */
    --provia-lagune: #0B4F6C;
    --provia-lagune-rgb: 11, 79, 108;
    --provia-lagune-dark: #082F3F;
    --provia-marigold: #F2A93C;
    --provia-marigold-rgb: 242, 169, 60;
    --provia-corail: #E85D4C;
    --provia-corail-rgb: 232, 93, 76;
    --provia-ecume: #F4F7F6;
    --provia-encre: #1B2A2E;
    --provia-encre-soft: #4A5B5F;
    --provia-ligne: #DCE4E3;

    /* Typographie */
    --provia-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --provia-font-body: 'Work Sans', system-ui, sans-serif;
    --provia-font-data: 'Space Mono', ui-monospace, monospace;

    /* Overrides Bootstrap 5.3 (variables CSS natives — se propagent à tous les composants existants) */
    --bs-primary: var(--provia-lagune);
    --bs-primary-rgb: var(--provia-lagune-rgb);
    --bs-body-bg: var(--provia-ecume);
    --bs-body-color: var(--provia-encre);
    --bs-body-font-family: var(--provia-font-body);
    --bs-link-color: var(--provia-lagune);
    --bs-link-color-rgb: var(--provia-lagune-rgb);
    --bs-link-hover-color: var(--provia-corail);
    --bs-border-color: var(--provia-ligne);
    --bs-border-radius: 0.75rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-sm: 0.5rem;
}

body {
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--provia-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--provia-encre);
}

.navbar-brand {
    font-family: var(--provia-font-display);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
}

.navbar-brand__mark {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.btn {
    font-weight: 600;
    border-radius: var(--bs-border-radius);
}

/*
 * Bootstrap 5.3 bakes its theme color into each COMPONENT's own scoped
 * custom properties at Sass build time (e.g. .btn-primary sets its own
 * --bs-btn-bg literal hex) rather than reading the root --bs-primary
 * variable live. Overriding --bs-primary at :root only reaches utility
 * classes (.bg-primary, .text-primary, .link-primary), not components —
 * so components need their own explicit overrides here, one per
 * component actually used in this project.
 */
.btn-primary {
    --bs-btn-bg: var(--provia-lagune);
    --bs-btn-border-color: var(--provia-lagune);
    --bs-btn-hover-bg: var(--provia-lagune-dark);
    --bs-btn-hover-border-color: var(--provia-lagune-dark);
    --bs-btn-active-bg: var(--provia-lagune-dark);
    --bs-btn-active-border-color: var(--provia-lagune-dark);
    --bs-btn-disabled-bg: var(--provia-lagune);
    --bs-btn-disabled-border-color: var(--provia-lagune);
    --bs-btn-focus-shadow-rgb: var(--provia-lagune-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--provia-lagune);
    --bs-btn-border-color: var(--provia-lagune);
    --bs-btn-hover-bg: var(--provia-lagune);
    --bs-btn-hover-border-color: var(--provia-lagune);
    --bs-btn-active-bg: var(--provia-lagune);
    --bs-btn-active-border-color: var(--provia-lagune);
    --bs-btn-disabled-color: var(--provia-lagune);
    --bs-btn-disabled-border-color: var(--provia-lagune);
    --bs-btn-focus-shadow-rgb: var(--provia-lagune-rgb);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--provia-lagune);
    box-shadow: 0 0 0 0.25rem rgba(var(--provia-lagune-rgb), 0.25);
}

.btn-marigold {
    background-color: var(--provia-marigold);
    border-color: var(--provia-marigold);
    color: var(--provia-encre);
}

.btn-marigold:hover,
.btn-marigold:focus {
    background-color: #d9931f;
    border-color: #d9931f;
    color: var(--provia-encre);
}

.site-footer {
    background-color: #ffffff;
    color: var(--provia-encre-soft);
    border-top: 1px solid var(--provia-ligne);
    font-size: 0.9rem;
}

/* Accessibilité : focus clavier visible partout, y compris sur les composants Bootstrap */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--provia-marigold);
    outline-offset: 2px;
}

/* --- Hero page d'accueil --- */

.hero {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.hero-eyebrow {
    font-family: var(--provia-font-data);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--provia-lagune);
}

.hero-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.05;
}

.hero-lead {
    font-size: 1.15rem;
    color: var(--provia-encre-soft);
    max-width: 42ch;
}

/* --- Cartes d'offre --- */

.offer-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid var(--provia-ligne);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.offer-card:hover,
.offer-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--provia-lagune);
    box-shadow: 0 12px 24px -16px rgba(var(--provia-lagune-rgb), 0.35);
    color: inherit;
}

.offer-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.offer-card__title {
    font-family: var(--provia-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}

.offer-card__company {
    color: var(--provia-encre-soft);
    font-size: 0.95rem;
}

.offer-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--provia-encre-soft);
}

.offer-card__meta span {
    background: var(--provia-ecume);
    border: 1px solid var(--provia-ligne);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
}

/* --- Anneau de compatibilité (élément signature) ---
   Phase actuelle : état neutre, aucun pourcentage réel n'existe encore
   (le matching IA arrive en phase 5). La structure SVG est prête à
   recevoir une vraie valeur plus tard sans changer le balisage. */

.match-ring {
    --match-ring-size: 56px;
    position: relative;
    width: var(--match-ring-size);
    height: var(--match-ring-size);
    flex-shrink: 0;
}

.match-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.match-ring__track {
    fill: none;
    stroke: var(--provia-ligne);
    stroke-width: 4;
}

.match-ring__value {
    fill: none;
    stroke: var(--provia-ligne);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 4 6;
}

.match-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--provia-font-data);
    font-size: 0.6rem;
    color: var(--provia-encre-soft);
    text-align: center;
    line-height: 1.1;
}

/* --- Étapes numérotées (parcours réel : inscription → profil → matching → candidature) --- */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.step__number {
    font-family: var(--provia-font-data);
    font-size: 1.5rem;
    color: var(--provia-marigold);
}

.step__title {
    font-family: var(--provia-font-display);
    font-weight: 700;
    margin: 0.25rem 0;
}

.step__text {
    color: var(--provia-encre-soft);
    font-size: 0.95rem;
}

/* --- État vide --- */

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--provia-encre-soft);
}

.empty-state__icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* --- Cartes fantômes (accueil, tant qu'aucune offre réelle n'existe) ---
   Silhouettes honnêtes de la forme d'une carte d'offre — jamais présentées
   comme de vraies offres. */

.ghost-card {
    background: #ffffff;
    border: 1px solid var(--provia-ligne);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ghost-card__line {
    height: 0.75rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--provia-ligne) 25%, #eef2f1 50%, var(--provia-ligne) 75%);
    background-size: 200% 100%;
    animation: ghost-shimmer 1.8s ease-in-out infinite;
}

.ghost-card__line--title {
    width: 65%;
    height: 1rem;
}

.ghost-card__line--short {
    width: 40%;
}

@keyframes ghost-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* --- Cartes d'action (tableau de bord) --- */

.action-card {
    background: #ffffff;
    border: 1px solid var(--provia-ligne);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem;
    height: 100%;
}

.action-card__title {
    font-family: var(--provia-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.action-card__text {
    color: var(--provia-encre-soft);
    font-size: 0.9rem;
}

.progress {
    height: 0.5rem;
    background-color: var(--provia-ecume);
}

.progress-bar {
    background-color: var(--provia-marigold);
}

/* --- Apparition au chargement (un seul geste, orchestré) --- */

.offer-card,
.action-card,
.ghost-card {
    animation: fade-slide-in 0.4s ease both;
}

.offer-card:nth-child(2),
.action-card:nth-child(2),
.ghost-card:nth-child(2) {
    animation-delay: 0.06s;
}

.offer-card:nth-child(3),
.action-card:nth-child(3),
.ghost-card:nth-child(3) {
    animation-delay: 0.12s;
}

@keyframes fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respecte la préférence de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .offer-card {
        transition: none;
    }

    .offer-card:hover,
    .offer-card:focus-visible {
        transform: none;
    }

    .offer-card,
    .action-card,
    .ghost-card {
        animation: none;
    }

    .ghost-card__line {
        animation: none;
        background: var(--provia-ligne);
    }
}