/* ============================================================
   TEAMSIDE — Feuille de style principale
   Refonte "Design Handoff" (Claude Design) — mobile-first, BEM
   ============================================================ */


/* ============================================================
   1. CUSTOM PROPERTIES
   ============================================================ */
:root {
    /* Couleurs de marque */
    --color-primary:      #70E2BA; /* teal exact du logo vectoriel (charte: #4de2ba) */
    --color-violet:       #B226FF;
    --color-pink:         #E31F73;
    --color-black:        #000000;
    --color-ink:          #0F0F0F; /* noir d'usage */
    --color-white:        #FFFFFF;

    --color-bg:           #FBFBF9;
    --color-surface:      #F0EEEA; /* surface claire */
    --color-surface-dark: #171A1A; /* surface sombre (carte formulaire) */
    --color-border:       #E3E3DE;
    --color-text:         var(--color-ink);
    --color-text-muted:   #6B6B64;
    --color-text-soft:    #3C3C38;
    --color-text-softer:  #4A4A44;
    --color-error:        var(--color-pink);

    /* Typographie — substituts Google Fonts de Mont / Macklin Slab */
    --font-display:   'Poppins', system-ui, sans-serif;

    --fs-2xs: 0.75rem;   /* 12 */
    --fs-xs:  0.8125rem; /* 13 */
    --fs-sm:  0.9375rem; /* 15 */
    --fs-base:1rem;      /* 16 */
    --fs-md:  1.0625rem; /* 17 */
    --fs-lg:  1.1875rem; /* 19 */
    --fs-xl:  1.3125rem; /* 21 */
    --fs-2xl: 1.375rem;  /* 22 */
    --fs-3xl: 1.875rem;  /* 30 */
    --fs-4xl: 2.625rem;  /* 42 */
    --fs-5xl: 3rem;      /* 48 */
    --fs-6xl: 3.5rem;    /* 56 */
    --fs-hero: clamp(3.5rem, 13vw, 8.25rem); /* 56 → 132 */

    /* Espacement (échelle du handoff) */
    --sp-2:  0.125rem;
    --sp-8:  0.5rem;
    --sp-12: 0.75rem;
    --sp-14: 0.875rem;
    --sp-16: 1rem;
    --sp-18: 1.125rem;
    --sp-20: 1.25rem;
    --sp-24: 1.5rem;
    --sp-26: 1.625rem;
    --sp-32: 2rem;
    --sp-36: 2.25rem;
    --sp-40: 2.5rem;
    --sp-44: 2.75rem;
    --sp-48: 3rem;
    --sp-56: 3.5rem;
    --sp-64: 4rem;
    --sp-72: 4.5rem;
    --sp-96: 6rem;

    --section-pad-x: var(--sp-24);
    --container-max: 1320px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-pill: 999px;

    --transition-base: 180ms ease-out;
}

@media (min-width: 640px) {
    :root { --section-pad-x: var(--sp-56); }
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background-color: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul, ol { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }


/* ============================================================
   3. UTILITAIRES
   ============================================================ */
.wrap {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--section-pad-x);
}

.eyebrow {
    display: inline-block;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }


/* ============================================================
   4. BOUTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    font-family: var(--font-display);
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--transition-base), filter var(--transition-base), border-color var(--transition-base), color var(--transition-base);
    min-height: 44px;
}

.btn--pill {
    padding: 18px 34px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-md);
}
.btn--rect {
    padding: 18px 28px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-ink);
}
.btn--primary:hover { filter: brightness(0.92); }

.btn--dark {
    background: var(--color-ink);
    color: var(--color-white);
}
.btn--dark:hover { filter: brightness(1.3); }

.btn--outline {
    background: transparent;
    color: var(--color-ink);
    border: 1px solid var(--color-ink);
    font-weight: 600;
}
.btn--outline:hover { background: var(--color-ink); color: var(--color-white); }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: color var(--transition-base);
}
.link-arrow:hover { color: var(--color-violet); }


/* ============================================================
   5. HEADER / NAVIGATION
   ============================================================ */
.header {
    position: relative;
    z-index: 100;
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--sp-24);
}

.logo__img { height: 43px; width: auto; flex-shrink: 0; }
@media (min-width: 640px) {
    .logo__img { height: 68px; }
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: var(--sp-32);
}
.nav__link {
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: color var(--transition-base);
}
.nav__link:hover { color: var(--color-violet); }

.nav__burger {
    position: relative;
    z-index: 210;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
}
.nav__burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-ink);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav__burger.is-active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav__burger.is-active span:nth-child(2) { opacity: 0; }
.nav__burger.is-active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 899px) {
    .nav__menu {
        position: fixed;
        inset: 0;
        z-index: 200;
        flex-direction: column;
        justify-content: center;
        background: var(--color-bg);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-12px);
        transition: opacity var(--transition-base), transform var(--transition-base);
    }
    .nav__menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .nav__menu .nav__link { font-size: var(--fs-3xl); font-weight: 700; }
    .nav__menu .btn { font-size: var(--fs-lg); }
}
@media (min-width: 900px) {
    .nav__burger { display: none; }
}


/* ============================================================
   6. HERO
   ============================================================ */
.hero {
    padding: var(--sp-72) var(--section-pad-x) 0;
}
.hero__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-40);
}
.hero h1 {
    font-size: var(--fs-hero);
    line-height: 0.86;
}
.hero h1 .accent { color: var(--color-primary); }

.hero__meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-32);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--sp-56);
}
.hero__lead {
    font-size: var(--fs-xl);
    line-height: 1.5;
    max-width: 30em;
}
.hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
}

@media (min-width: 900px) {
    .hero__meta { grid-template-columns: repeat(3, 1fr); align-items: start; }
    .hero__lead { grid-column: span 2; }
}


/* ============================================================
   7. AVIS GOOGLE
   ============================================================ */
.avis__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-40);
    margin-bottom: var(--sp-32);
}
.avis__head h2 { font-size: var(--fs-5xl); margin-bottom: var(--sp-12); }
.avis__head p {
    font-size: 1.25rem;
    color: var(--color-text-softer);
    max-width: 30em;
}
.avis__score {
    display: flex;
    align-items: center;
    gap: var(--sp-20);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px 26px;
    flex-shrink: 0;
}
.avis__score strong { font-size: 2.875rem; font-weight: 800; letter-spacing: -0.03em; }
.avis__score .stars { font-size: var(--fs-sm); letter-spacing: 0.06em; display: block; }
.avis__score span.count { font-size: var(--fs-xs); color: var(--color-text-muted); }

.avis__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.avis-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-24) 24px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-18);
    transition: border-color var(--transition-base);
}
.avis-card:hover { border-color: var(--color-ink); }
.avis-card--featured { background: var(--color-primary); border-color: var(--color-primary); }
.avis-card .stars { font-size: var(--fs-sm); letter-spacing: 0.06em; }
.avis-card__quote { font-size: var(--fs-sm); line-height: 1.6; }
.avis-card__quote--placeholder {
    font-family: monospace;
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: #8A8A82;
}
.avis-card__name { font-size: var(--fs-sm); font-weight: 700; }
.avis-card__role { font-size: var(--fs-xs); color: var(--color-text-muted); }
.avis-card--featured .avis-card__role { color: rgba(15,15,15,.65); }

.avis__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-24);
    margin-top: var(--sp-24);
}
.avis__foot-note { font-size: var(--fs-xs); color: var(--color-text-muted); }

@media (min-width: 700px) {
    .avis__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .avis__grid { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================
   8. DOUBLE PORTE — CANDIDATS / ENTREPRISES
   ============================================================ */
.portes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-20);
    padding-top: 0;
    padding-bottom: var(--sp-96);
}
.porte {
    border-radius: var(--radius-md);
    padding: var(--sp-40) var(--sp-32);
    display: flex;
    flex-direction: column;
    gap: var(--sp-18);
}
.porte--candidats { background: var(--color-primary); }
.porte--candidats .eyebrow { color: var(--color-ink); }
.porte--entreprises { background: var(--color-surface); }
.porte--entreprises .eyebrow { color: var(--color-pink); }
.porte h2 { font-size: var(--fs-4xl); }
.porte p { font-size: var(--fs-md); line-height: 1.6; }
.porte--entreprises p { color: var(--color-text-soft); }
.porte--entreprises .link-arrow { color: var(--color-pink); }
.porte--entreprises .link-arrow:hover { color: var(--color-violet); }

@media (min-width: 900px) {
    .portes { grid-template-columns: repeat(2, 1fr); }
    .porte { padding: var(--sp-48); }
}


/* ============================================================
   9. NOS MÉTIERS
   ============================================================ */
.metiers { padding-bottom: var(--sp-96); }
.metiers__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-18);
    margin-bottom: var(--sp-36);
}
.metiers__head h2 { font-size: var(--fs-5xl); }
.metiers__head span { font-size: var(--fs-base); color: var(--color-text-muted); }

.metiers__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-12);
}
.pill {
    padding: 20px 30px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--fs-2xl);
    letter-spacing: -0.01em;
    border: 1px solid var(--color-ink);
    background: transparent;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.pill:hover { background: var(--color-ink); color: var(--color-white); }
.pill--violet { background: var(--color-violet); color: var(--color-white); border-color: var(--color-violet); }
.pill--violet:hover { filter: brightness(1.1); }
.pill--pink { background: var(--color-pink); color: var(--color-white); border-color: var(--color-pink); }
.pill--pink:hover { filter: brightness(1.1); }
.pill--cta { background: var(--color-primary); color: var(--color-ink); border-color: var(--color-primary); }
.pill--cta:hover { filter: brightness(0.92); }


/* ============================================================
   10. CONTACT
   ============================================================ */
.contact-wrap { padding-bottom: var(--sp-56); }
.contact {
    background: var(--color-ink);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--sp-48) var(--sp-24);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-40);
}
.contact__info h2 {
    font-size: var(--fs-6xl);
    color: var(--color-white);
    margin-bottom: var(--sp-20);
}
.contact__info p {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: rgba(255,255,255,.72);
    margin-bottom: var(--sp-24);
    max-width: 28em;
}
.contact__address { font-size: var(--fs-sm); color: rgba(255,255,255,.6); }

.contact-form {
    background: var(--color-surface-dark);
    border-radius: var(--radius-md);
    padding: var(--sp-36) var(--sp-24);
    display: flex;
    flex-direction: column;
    gap: var(--sp-24);
}

.audience-toggle { display: flex; gap: var(--sp-8); }
.audience-toggle__label {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: var(--sp-8);
}
.audience-pill {
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.25);
    background: transparent;
    color: var(--color-white);
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.audience-pill.is-active {
    background: var(--color-primary);
    color: var(--color-ink);
    border-color: var(--color-primary);
    font-weight: 700;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-16);
}
.field { display: flex; flex-direction: column; gap: var(--sp-8); }
.field label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: rgba(255,255,255,.6);
}
.field input,
.field select,
.field textarea {
    background: var(--color-ink);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    color: var(--color-white);
    font-size: var(--fs-base);
    outline: none;
    transition: border-color var(--transition-base);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.35); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-primary); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--color-error); }
.field__error { font-size: var(--fs-xs); color: var(--color-error); display: none; }
.field.is-invalid .field__error { display: block; }
.field textarea { resize: vertical; min-height: 96px; }

.cv-drop {
    border: 1px dashed rgba(255,255,255,.22);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
    flex-wrap: wrap;
    font-size: var(--fs-sm);
}
.cv-drop__label { color: var(--color-primary); font-weight: 700; cursor: pointer; }
.cv-drop__hint { color: rgba(255,255,255,.45); font-size: var(--fs-xs); }
.cv-drop input[type="file"] { display: none; }
.cv-drop[hidden] { display: none; }

.contact-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-16);
}
.contact-form__rgpd { font-size: var(--fs-2xs); color: rgba(255,255,255,.45); max-width: 26em; }

.form-status {
    font-size: var(--fs-sm);
    font-weight: 600;
    display: none;
}
.form-status.is-success { display: block; color: var(--color-primary); }
.form-status.is-error { display: block; color: var(--color-error); }

@media (min-width: 900px) {
    .contact { grid-template-columns: 0.85fr 1.15fr; padding: var(--sp-72) var(--sp-56); }
    .form-grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   11. FOOTER
   ============================================================ */
.footer {
    padding: 0 var(--section-pad-x) var(--sp-48);
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.footer__nav { display: flex; gap: var(--sp-24); flex-wrap: wrap; }
.footer__nav a:hover { color: var(--color-violet); }

@media (min-width: 640px) {
    .footer { flex-direction: row; justify-content: space-between; align-items: center; }
}