/*
Theme Name: Thom Cut Barber
Author: Thom Cut Barber
Description: Thème vitrine du salon Thom Cut Barber.
Version: 1.0.1
Text Domain: thomcut
*/

/* =========================================
   1. FONDATIONS & VARIABLES
   (alignées sur la charte déjà utilisée dans le contenu
   de la page d'accueil : Panchang + noir-charbon/rouge-électrique)
========================================= */
@import url('https://api.fontshare.com/v2/css?f[]=panchang@200,300,400,500,600,700,800&display=swap');

:root {
    /* Charte graphique Thom Cut — gris acier / blanc dominant, le rouge
       n'intervient plus qu'en toute petite touche de finition (survol de
       liens, focus de champ, liseré du footer, bouton WhatsApp). */
    --color-black: #0b0b0c;
    --color-near-black: #141416;
    --color-steel-dark: #23262a;
    --color-surface: #141416;
    --color-white: #ffffff;
    --color-off-white: #f3f3f1;

    --color-accent: #e10613;
    --color-accent-hover: #c8050f;

    --color-text: #0b0b0c;
    --color-muted: #8a8d91;
    --color-border: #e5e5e7;
    --color-border-dark: rgba(255, 255, 255, 0.12);

    /* Typographie */
    --font-display: 'Panchang', Arial, sans-serif;
    --font-body: 'Panchang', Arial, sans-serif;

    /* Ombres & Transitions */
    --shadow-soft: 0 10px 30px rgba(11, 11, 12, 0.08);
    --shadow-hover: 0 15px 40px rgba(11, 11, 12, 0.16);
    --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 0.5em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.container {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 4px;
    border: 2px solid var(--color-white);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-accent {
    background: var(--color-black);
    border-color: var(--color-black);
}

.btn-accent:hover {
    background: var(--color-steel-dark);
    border-color: var(--color-steel-dark);
}

.btn-outline {
    background: transparent;
}

.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-black);
}

/* =========================================
   2. HEADER DYNAMIQUE
========================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: var(--transition-smooth);
}

/* Etat "scrolled" : appliqué en JS (voir theme.js) dès que la page défile,
   ou en permanence sur les pages sans hero (voir .site-header--solid). */
.site-header.is-scrolled,
.site-header--solid {
    background: rgba(13, 14, 16, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border-dark);
    box-shadow: var(--shadow-soft);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 84px;
    transition: min-height 0.3s ease;
}

.site-header.is-scrolled .site-header__inner {
    min-height: 68px;
}

/* --- LOGO --- */
.site-header__brand {
    display: flex;
    align-items: center;
}

.site-header__brand a {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: var(--color-white);
}

.site-header__brand img,
.custom-logo-link img {
    max-height: 52px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: var(--transition-smooth);
}

.site-header.is-scrolled .site-header__brand img,
.site-header.is-scrolled .custom-logo-link img {
    max-height: 42px;
}

/* --- NAVIGATION --- */
.site-header__nav {
    display: flex;
    align-items: center;
}

.site-header__menu {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
}

.site-header__menu a {
    position: relative;
    display: block;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 0.92rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 8px 0;
}

.site-header__menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header__menu a:hover,
.site-header__menu .current-menu-item > a {
    color: var(--color-white);
}

.site-header__menu a:hover::after,
.site-header__menu .current-menu-item > a::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Le lien "Espace Franchisé" partage le même menu WP entre le header et
   le footer : le traitement bouton plein ne doit s'appliquer que dans le
   header (nav horizontale). Dans le footer (liste verticale de liens
   sobres), il garde le style des autres liens du menu. */
.site-header__menu .menu-item-espace-franchise a {
    background: var(--color-white);
    color: var(--color-black) !important;
    padding: 8px 16px !important;
    border-radius: 4px;
}

.site-header__menu .menu-item-espace-franchise a::after {
    display: none;
}

.site-header__menu .menu-item-espace-franchise a:hover {
    background: var(--color-off-white);
    color: var(--color-black) !important;
}

.tc-footer-menu .menu-item-espace-franchise a {
    color: var(--color-white);
    font-weight: 600;
}

.tc-footer-menu .menu-item-espace-franchise a:hover {
    color: var(--color-accent);
    opacity: 1;
}

/* --- BOUTON MENU MOBILE --- */
.site-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.site-header__toggle span {
    display: block;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: var(--transition-smooth);
}

.site-header.nav-open .site-header__toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header.nav-open .site-header__toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.nav-open .site-header__toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Ancres du hero ("Réserver" -> Nos salons, "Rejoindre la franchise"
   -> bloc franchise) : compense le header fixe pour ne pas arriver
   avec le titre caché dessous. */
#reservation,
#franchise {
    scroll-margin-top: 100px;
}

/* =========================================
   3. CONTENU PRINCIPAL
========================================= */
.site-main {
    padding: 80px 0;
}

.site-main__content {
    max-width: 850px;
    margin: 0 auto;
}

.site-main__content h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
    margin-bottom: 20px;
}

/* Pages sans hero : on pousse le contenu sous le header fixe.
   La page d'accueil gère déjà son propre espacement (le hero réserve
   sa place sous le header transparent), donc pas de padding ici. */
.page-content {
    padding-top: 140px;
}

/* =========================================
   4. FOOTER
========================================= */
.tc-site-footer {
    background: linear-gradient(135deg, var(--color-black) 0%, var(--color-steel-dark) 100%);
    color: rgba(255, 255, 255, 0.85);
    padding: 90px 0 30px 0;
    border-top: 3px solid var(--color-accent);
}

.tc-footer-nav {
    margin-bottom: 20px;
}

.tc-footer-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tc-footer-menu a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.tc-footer-menu a:hover {
    color: var(--color-white);
}

.tc-footer-social {
    list-style: none;
    display: flex;
    gap: 14px;
}

.tc-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--color-white);
    transition: var(--transition-smooth);
}

.tc-footer-social a:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-black);
}

.tc-footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 70px;
}

.tc-footer-widget-area h2.widget-title,
.tc-footer-widget-area h3.widget-title {
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 24px;
}

.tc-footer-logo {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 1px;
    color: var(--color-white);
    margin-bottom: 16px;
    display: inline-block;
}

.tc-footer-brand__logo {
    display: inline-block;
    margin-bottom: 16px;
}

.tc-footer-brand__logo img {
    max-height: 64px;
    width: auto;
    display: block;
    object-fit: contain;
}

.tc-footer-logo .brand-accent {
    color: var(--color-muted);
}

.tc-footer-widget-area p {
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.65);
}

.tc-footer-widget-area ul {
    list-style: none;
}

.tc-footer-widget-area ul li {
    margin-bottom: 14px;
}

.tc-footer-widget-area a {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.tc-footer-widget-area a:hover {
    color: var(--color-white);
}

.tc-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 24px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
}

.tc-footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
}

.tc-footer-legal a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.tc-footer-legal a:hover {
    color: var(--color-white);
}

/* =========================================
   5. CANDIDATURE FRANCHISE
========================================= */
.tc-candidature {
    padding: 20px 0 100px;
    scroll-margin-top: 120px;
}

.tc-candidature__inner {
    max-width: 760px;
}

.tc-candidature__intro {
    text-align: center;
    margin-bottom: 50px;
}

.tc-eyebrow {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 12px;
}

.tc-candidature__intro h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 16px;
}

.tc-candidature__lead {
    color: var(--color-muted);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto;
}

.tc-candidature__form {
    background: var(--color-off-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.tc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.tc-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tc-form-field label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.tc-form-field input,
.tc-form-field select,
.tc-form-field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-text);
}

.tc-form-field input:focus,
.tc-form-field select:focus,
.tc-form-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.tc-candidature__submit {
    justify-content: center;
    border-color: var(--color-accent);
    width: 100%;
    order: 3;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.tc-candidature__submit-ico {
    flex-shrink: 0;
}

/* --- Wizard (une question à la fois) --- */
.tc-wizard__progress {
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}

.tc-wizard__progress-bar {
    height: 100%;
    width: 11%;
    background: var(--color-accent);
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tc-wizard__counter {
    font-size: 0.85rem;
    color: var(--color-muted);
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.tc-step {
    display: none;
}

.tc-step.is-active {
    display: block;
    animation: tc-step-in 0.25s ease;
}

@keyframes tc-step-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tc-step .tc-form-field label {
    font-size: 1.1rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 4px;
}

.tc-wizard__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
}

.tc-wizard__nav .tc-step-next,
.tc-wizard__nav .tc-candidature__submit {
    margin-left: auto;
}

.tc-wizard__nav .btn-outline {
    border-color: var(--color-text);
    color: var(--color-text);
}

.tc-wizard__nav .btn-outline:hover {
    background: var(--color-text);
    color: var(--color-white);
}

/* --- Pages légales (mentions légales, CGV, CGU, confidentialité, cookies) --- */
.legal-content {
    max-width: 800px;
    padding: 20px 0 100px;
}

.legal-content h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 8px;
}

.legal-content .legal-updated {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin-bottom: 2.5rem;
}

.legal-content h2 {
    font-size: 1.3rem;
    margin-top: 2.5rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-border);
}

.legal-content h3 {
    font-size: 1.05rem;
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
}

.legal-content p {
    color: var(--color-steel-text, #424a50);
    line-height: 1.75;
    margin-bottom: 1rem;
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 1.2rem 1.3rem;
    color: var(--color-steel-text, #424a50);
    line-height: 1.75;
}

.legal-content li {
    margin-bottom: 0.4rem;
}

.legal-content a {
    color: var(--color-black);
    text-decoration: underline;
}

.legal-content a:hover {
    color: var(--color-accent);
}

.legal-content strong {
    color: var(--color-black);
}

.legal-content mark {
    background: var(--color-off-white);
    color: var(--color-black);
    padding: 0.05em 0.35em;
    border-radius: 3px;
    font-weight: 600;
}

/* =========================================
   6. RESPONSIVE
========================================= */
@media (max-width: 992px) {
    .tc-footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 1100px) {
    .site-header__toggle {
        display: flex;
    }

    .site-header__nav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(320px, 80vw);
        background: var(--color-black);
        flex-direction: column;
        align-items: flex-start;
        padding: 110px 32px 32px;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .site-header.nav-open .site-header__nav {
        transform: translateX(0);
    }

    .site-header__menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .page-content {
        padding-top: 110px;
    }

    .tc-footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .tc-footer-social {
        justify-content: center;
    }

    .tc-form-row {
        grid-template-columns: 1fr;
    }

    .tc-candidature__form {
        padding: 28px 22px;
    }
}

/* =========================================================
   Bouton flottant WhatsApp (plugin JoinChat) : recolore le vert
   WhatsApp par defaut aux couleurs de la marque pour rester uniforme
   avec le reste du site. On ne touche pas aux fichiers du plugin
   (ecrases a chaque mise a jour) - tout passe par ces variables CSS
   que JoinChat expose deja, plus un fallback en dur pour la version
   sans icone personnalisee.
   ========================================================= */
.joinchat {
    --ch: 356;
    --cs: 95%;
    --cl: 45%;
}

.joinchat__button {
    background-color: var(--color-accent) !important;
    box-shadow: 1px 6px 24px 0 rgba(225, 6, 19, 0.24) !important;
}

/* =========================================================
   Page Formations : catalogue lu en direct depuis le CRM (Supabase) +
   formulaire de demande d'inscription. Reprend les memes tokens que le
   formulaire de candidature (meme fond, meme rayon de bordure, meme
   ombre) pour rester uniforme avec le reste du site.
   ========================================================= */
.tc-formations__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    color: var(--color-muted);
    padding: 40px 0;
}

.tc-formations__section-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    text-align: center;
    color: var(--color-black);
    margin-bottom: 28px;
}

.tc-formations__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
    justify-content: center;
    gap: 22px;
    margin-bottom: 48px;
}

.tc-formations__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-off-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 28px;
    box-shadow: var(--shadow-soft);
}

.tc-formations__card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-black);
}

.tc-formations__card-date {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-muted);
}

.tc-formations__card-desc {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.tc-formations__card-meta {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.tc-formations__card-cta {
    margin-top: auto;
    align-self: flex-start;
}

.tc-formations__form-wrap {
    max-width: 640px;
    margin: 0 auto;
}

.tc-formations__form-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 24px;
    color: var(--color-black);
}

.tc-form-message {
    border-radius: 4px;
    padding: 14px 18px;
    font-size: 0.95rem;
    margin-bottom: 20px;
    text-align: center;
}

.tc-form-message--success {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.tc-form-message--error {
    background: rgba(225, 6, 19, 0.08);
    color: var(--color-accent);
}

@media (max-width: 640px) {
    .tc-formations__grid {
        grid-template-columns: 1fr;
    }
}

.joinchat__button:hover,
.joinchat__button:active {
    background-color: var(--color-accent-hover) !important;
}

/* =========================================================
   Page Formations — video, chiffres cles et methode. Memes tokens
   que le reste du site (--color-*, --font-display, --shadow-soft).
   ========================================================= */
.tc-formations-video {
    padding: 0 0 80px;
}

.tc-formations-video__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.tc-formations-video__player {
    width: 100%;
    max-width: 720px;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    background: var(--color-black);
}

.tc-formations-video__cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.tc-formations-video__cta p {
    color: var(--color-muted);
    font-size: 0.95rem;
}

.tc-formations-stats {
    background: linear-gradient(135deg, var(--color-black) 0%, var(--color-steel-dark) 100%);
    padding: 56px 0;
}

.tc-formations-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    text-align: center;
}

.tc-formations-stats__number {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: 8px;
}

.tc-formations-stats__label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}

.tc-formations-methode {
    padding: 80px 0;
    text-align: center;
}

.tc-formations-methode__eyebrow {
    justify-content: center;
}

.tc-formations-methode__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--color-black);
    max-width: 620px;
    margin: 0 auto 48px;
}

.tc-formations-methode__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
    text-align: left;
}

.tc-formations-methode__item {
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
}

.tc-formations-methode__num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: 10px;
}

.tc-formations-methode__item h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--color-black);
    margin-bottom: 10px;
}

.tc-formations-methode__item p {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* =========================================
   9. ESPACE FRANCHISÉ — PAGE PORTAIL
========================================= */
.tc-portal-page {
    padding-top: 0;
}

.tc-portal {
    min-height: 100vh;
}

.tc-portal__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: 100vh;
}

.tc-portal__hero {
    background: linear-gradient(150deg, var(--color-black) 0%, var(--color-steel-dark) 100%);
    color: rgba(255, 255, 255, 0.92);
    padding: 160px 64px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tc-portal__eyebrow {
    color: rgba(255, 255, 255, 0.55);
}

.tc-portal__hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height: 1.15;
    color: var(--color-white);
    margin-bottom: 18px;
    max-width: 480px;
}

.tc-portal__lead {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 460px;
    margin-bottom: 44px;
}

.tc-portal__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: 460px;
    margin-bottom: 48px;
}

.tc-portal__features li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.tc-portal__features-num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    padding-top: 3px;
    flex-shrink: 0;
}

.tc-portal__features h3 {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--color-white);
    margin-bottom: 6px;
}

.tc-portal__features p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    line-height: 1.5;
}

.tc-portal__hero-link {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-decoration: underline;
    text-underline-offset: 4px;
    width: fit-content;
}

.tc-portal__hero-link:hover {
    color: var(--color-white);
}

.tc-portal__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 160px 40px 64px;
    background: var(--color-off-white);
}

.tc-portal__card {
    width: 100%;
    max-width: 380px;
    background: var(--color-white);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 50px rgba(11, 11, 12, 0.08);
    padding: 40px 34px;
}

.tc-portal__card-eyebrow {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 8px;
}

.tc-portal__card h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-black);
    margin-bottom: 8px;
}

.tc-portal__card-sub {
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 28px;
}

.tc-portal__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
}

.tc-portal__submit {
    width: 100%;
    justify-content: center;
    border-radius: 4px;
}

.tc-portal__card-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

.tc-portal__card-links a {
    font-size: 0.85rem;
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tc-portal__card-links a:hover {
    color: var(--color-accent);
}

@media (max-width: 960px) {
    .tc-portal__grid {
        grid-template-columns: 1fr;
    }

    .tc-portal__hero {
        padding: 150px 32px 56px;
    }

    .tc-portal__panel {
        padding: 56px 24px 90px;
    }
}

@media (max-width: 640px) {
    .tc-formations-video__cta {
        flex-direction: column;
    }
}


/* ==================================================
   TM13 — SYSTEME "ACIER / GRAPHITE"
   Page Formations — hero, expertise, fondateur, parcours, CTA finale
================================================== */

@import url("https://api.fontshare.com/v2/css?f[]=panchang@300,400,500,600,700&display=swap");


/* ==================================================
   BASE
================================================== */

.tm13-page {
  --font: "Panchang", Arial, sans-serif;

  /* GRAPHITE */
  --graphite-0: #050708;
  --graphite-1: #0b0f11;
  --graphite-2: #151b1e;
  --graphite-3: #252d31;

  /* ACIER */
  --steel-0: #d7dde0;
  --steel-1: #bcc5ca;
  --steel-2: #9da8ae;
  --steel-3: #7d8990;
  --steel-4: #657178;

  --black: #111517;
  --white: #f6f7f7;

  --text-dark: #1a2023;
  --text-dark-soft: #4d585e;

  --text-light: rgb(246 248 249 / 88%);
  --text-light-soft: rgb(239 243 245 / 57%);

  --red: #d34c54;
  --red-soft: #df777e;

  --logo-black:
    url("../../uploads/2026/08/ChatGPT-Image-5-aout-2026-12_05_49.png");

  --logo-white:
    url("../../uploads/2026/08/ChatGPT-Image-5-aout-2026-12_20_48.png");

  width: 100vw;
  max-width: none;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow: hidden;

  background: var(--graphite-0);

  font-family: var(--font);
}


.tm13-page,
.tm13-page *,
.tm13-page *::before,
.tm13-page *::after {
  box-sizing: border-box;
}


.tm13-page h1,
.tm13-page h2,
.tm13-page h3,
.tm13-page p,
.tm13-page figure,
.tm13-page blockquote,
.tm13-page ol {
  margin: 0;
}


.tm13-page img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.tm13-page a {
  font-family: inherit;
}


.tm13-section {
  position: relative;
  isolation: isolate;

  overflow: hidden;
}


.tm13-shell {
  position: relative;
  z-index: 3;

  width: min(1420px, calc(100% - 48px));

  margin-inline: auto;
}


/* ==================================================
   ACCENTS — PLUS DE ROUGE PLEIN
================================================== */

.tm13-accent,
.tm13-page em {
  display: inline-block;

  color: transparent !important;

  font: inherit;
  font-style: normal;

  background:
    linear-gradient(
      135deg,
      currentColor 0%,
      currentColor 32%,
      #a88487 69%,
      #d45b63 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* accent sur fond acier */

.tm13-light .tm13-accent,
.tm13-light em {
  background:
    linear-gradient(
      135deg,
      #151a1d 0%,
      #30383d 37%,
      #8c7477 72%,
      #c94b53 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* accent sur graphite */

.tm13-dark .tm13-accent,
.tm13-dark em {
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ffffff 40%,
      #f5dfe1 68%,
      #e59ca2 85%,
      #d24d55 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* ==================================================
   GRIS ACIER
================================================== */

.tm13-light {
  color: var(--text-dark);

  background:
    radial-gradient(
      ellipse at 8% 4%,
      rgb(255 255 255 / 66%) 0%,
      rgb(255 255 255 / 17%) 27%,
      transparent 47%
    ),
    radial-gradient(
      ellipse at 92% 86%,
      rgb(255 255 255 / 25%) 0%,
      transparent 38%
    ),
    linear-gradient(
      122deg,
      #d3d9dc 0%,
      #b4bdc2 24%,
      #929da3 49%,
      #b9c2c6 71%,
      #838f96 100%
    );

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 55%),
    inset 0 -1px 0 rgb(11 14 15 / 16%);
}


/* reflet métallique */

.tm13-light::after {
  content: "";

  position: absolute;

  top: -40%;
  bottom: -40%;
  left: -42%;

  z-index: 0;

  width: 27%;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgb(255 255 255 / 3%) 27%,
      rgb(255 255 255 / 20%) 42%,
      rgb(255 255 255 / 62%) 50%,
      rgb(255 255 255 / 16%) 59%,
      transparent 77%
    );

  filter: blur(2px);

  mix-blend-mode: screen;

  transform: skewX(-18deg);

  animation:
    tm13-steel-shine
    11s
    ease-in-out
    infinite;

  pointer-events: none;
}


.tm13-expertise::after {
  animation-delay: -3.5s;
}


.tm13-final::after {
  animation-delay: -7s;
}


/* ==================================================
   NOIR GRAPHITE
================================================== */

.tm13-dark {
  color: var(--white);

  background:
    radial-gradient(
      ellipse at 82% 7%,
      rgb(154 166 173 / 12%) 0%,
      rgb(91 104 111 / 4%) 28%,
      transparent 46%
    ),
    radial-gradient(
      ellipse at 8% 90%,
      rgb(113 125 132 / 7%) 0%,
      transparent 38%
    ),
    linear-gradient(
      125deg,
      #050708 0%,
      #0b0f11 25%,
      #151b1e 51%,
      #252d31 73%,
      #0c1012 100%
    );

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 5%),
    inset 0 -1px 0 rgb(0 0 0 / 48%);
}


.tm13-dark::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgb(255 255 255 / 1%) 37%,
      rgb(255 255 255 / 4%) 49%,
      transparent 65%
    );

  pointer-events: none;
}


/* ==================================================
   LOGOS FILIGRANE
================================================== */

.tm13-mark::before {
  content: "";

  position: absolute;
  top: 50%;
  z-index: 1;

  width: clamp(340px, 38vw, 650px);

  aspect-ratio: 1;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  transform: translateY(-50%);

  pointer-events: none;
}


.tm13-mark--left::before {
  left: clamp(-190px, -9vw, -80px);
}


.tm13-mark--right::before {
  right: clamp(-190px, -9vw, -80px);
}


.tm13-mark--black::before {
  background-image: var(--logo-black);

  opacity: 0.075;

  filter:
    grayscale(1)
    contrast(1.2);

  mix-blend-mode: multiply;
}


.tm13-mark--white::before {
  background-image: var(--logo-white);

  opacity: 0.032;

  filter:
    grayscale(1)
    contrast(1.05);

  mix-blend-mode: screen;
}


/* ==================================================
   MEDIA
================================================== */

.tm13-media {
  position: relative;

  background:
    linear-gradient(
      145deg,
      #303a40,
      #111618
    );
}


.tm13-media > img {
  position: absolute;
  inset: 0;
  z-index: 0;

  filter:
    saturate(0.9)
    contrast(1.04);

  transition:
    transform 700ms cubic-bezier(.2, .8, .2, 1),
    filter 350ms ease;
}


/* ==================================================
   KICKERS
================================================== */

.tm13-kicker {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 18px !important;

  color:
    rgb(245 247 248 / 51%) !important;

  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  letter-spacing: 0.17em !important;

  text-transform: uppercase !important;
}


/* fini le gros trait rouge */

.tm13-kicker > span {
  width: 30px;
  height: 1px;

  flex: 0 0 auto;

  background:
    linear-gradient(
      90deg,
      #758188,
      #e3e8ea
    );
}


.tm13-kicker--dark {
  color:
    #465157 !important;
}


.tm13-kicker--dark > span {
  background:
    linear-gradient(
      90deg,
      #4f5a60,
      #20272b
    );
}


/* ==================================================
   BOUTONS
================================================== */

.tm13-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 22px;

  min-height: 50px;

  padding:
    14px
    21px;

  border-radius: 999px;

  font-size: 10px !important;
  font-weight: 600 !important;

  letter-spacing:
    0.08em !important;

  text-decoration:
    none !important;

  text-transform:
    uppercase !important;

  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}


.tm13-button b {
  color: var(--red-soft);

  font:
    500
    17px/1
    Arial,
    sans-serif;

  transition:
    transform 180ms ease;
}


.tm13-button:hover b {
  transform:
    translate(3px, -3px);
}


.tm13-button--dark {
  border:
    1px solid
    #171c1f;

  background:
    linear-gradient(
      135deg,
      #111517,
      #313b40
    );

  color:
    var(--white) !important;

  box-shadow:
    0 12px 28px rgb(15 18 20 / 17%),
    inset 0 1px 0 rgb(255 255 255 / 7%);
}


.tm13-button--dark:hover {
  border-color:
    #39444a;

  background:
    linear-gradient(
      135deg,
      #21292d,
      #414d53
    );

  transform:
    translateY(-2px);
}


.tm13-button--light {
  border:
    1px solid
    rgb(255 255 255 / 80%);

  background:
    linear-gradient(
      135deg,
      #f4f6f6,
      #dbe1e3
    );

  color:
    #101416 !important;
}


.tm13-button--light:hover {
  background: #ffffff;

  color:
    #080a0b !important;

  transform:
    translateY(-2px);
}


/* ==================================================
   HERO — ACIER
================================================== */

.tm13-hero {
  min-height: 94svh;

  padding:
    112px 0 76px;
}


.tm13-hero__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(350px, 0.72fr);

  align-items: center;

  min-height: 72svh;

  gap:
    clamp(45px, 7vw, 110px);
}


.tm13-hero__content {
  min-width: 0;
  max-width: 860px;
}


.tm13-page
.tm13-hero h1 {
  color:
    #111517 !important;

  font-size:
    clamp(47px, 5.25vw, 92px) !important;

  font-weight:
    700 !important;

  line-height:
    0.95 !important;

  letter-spacing:
    -0.075em !important;
}


.tm13-hero h1 > span {
  display: block;

  width: max-content;
  max-width: 100%;
}


.tm13-hero__lead {
  max-width: 560px;

  margin:
    25px 0 27px !important;

  color:
    #424d53 !important;

  font-size:
    clamp(13px, 1vw, 16px) !important;

  font-weight:
    300 !important;

  line-height:
    1.7 !important;
}


.tm13-hero__visual {
  min-height:
    min(66svh, 690px);

  overflow: hidden;

  border:
    1px solid
    rgb(255 255 255 / 42%);

  border-radius: 22px;

  box-shadow:
    0 35px 85px rgb(25 31 35 / 29%),
    inset 0 1px 0 rgb(255 255 255 / 35%);
}


.tm13-hero__visual:hover > img {
  filter:
    saturate(1)
    contrast(1.05);

  transform:
    scale(1.025);
}


.tm13-hero__visual::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgb(4 6 7 / 86%) 100%
    );

  pointer-events: none;
}


.tm13-hero__visual figcaption {
  position: absolute;

  right: 22px;
  bottom: 22px;
  left: 22px;

  z-index: 2;
}


.tm13-hero__visual figcaption strong,
.tm13-hero__visual figcaption span {
  display: block;
}


.tm13-hero__visual figcaption strong {
  color: var(--white);

  font-size: 13px;
  font-weight: 600;
}


.tm13-hero__visual figcaption span {
  margin-top: 5px;

  color:
    rgb(255 255 255 / 49%);

  font-size: 9px;

  text-transform:
    uppercase;
}


/* ==================================================
   FONDATEUR — GRAPHITE
================================================== */

.tm13-founder {
  padding:
    clamp(74px, 8vw, 120px)
    0;
}


.tm13-founder__grid {
  display: grid;

  grid-template-columns:
    minmax(330px, 0.78fr)
    minmax(0, 1fr);

  align-items: center;

  gap:
    clamp(50px, 8vw, 120px);
}


.tm13-founder__visual {
  min-height:
    clamp(510px, 53vw, 700px);

  overflow: hidden;

  border:
    1px solid
    rgb(255 255 255 / 11%);

  border-radius: 22px;

  box-shadow:
    0 34px 85px rgb(0 0 0 / 37%),
    inset 0 1px 0 rgb(255 255 255 / 5%);
}


.tm13-founder__visual:hover > img {
  transform:
    scale(1.025);
}


.tm13-page
.tm13-founder h2 {
  margin-bottom:
    22px !important;

  color:
    var(--white) !important;

  font-size:
    clamp(38px, 4.25vw, 74px) !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  letter-spacing:
    -0.07em !important;
}


.tm13-founder h2 > span {
  display: block;
}


.tm13-founder__lead {
  margin-bottom:
    14px !important;

  color:
    var(--white) !important;

  font-size:
    clamp(16px, 1.15vw, 20px) !important;

  font-weight:
    500 !important;

  line-height:
    1.55 !important;
}


.tm13-founder__content
> p:not(.tm13-kicker):not(.tm13-founder__lead) {
  max-width: 650px;

  margin-bottom:
    11px !important;

  color:
    rgb(245 247 248 / 54%) !important;

  font-size:
    11px !important;

  font-weight:
    300 !important;

  line-height:
    1.72 !important;
}


/* ==================================================
   STAT
================================================== */

.tm13-founder__stat {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: center;

  gap: 24px;

  margin-top: 29px;

  padding-top: 24px;

  border-top:
    1px solid
    rgb(255 255 255 / 12%);
}


.tm13-founder__number {
  display: flex;
  align-items: flex-start;
}


.tm13-founder__number strong {
  color:
    transparent;

  font-size:
    clamp(68px, 8vw, 130px);

  font-weight: 700;
  line-height: 0.75;

  letter-spacing:
    -0.09em;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #c6cdd0 61%,
      #dc777d
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;
}


.tm13-founder__number span {
  color:
    #dc7077;

  font-size:
    clamp(40px, 4vw, 68px);

  font-weight:
    700;

  line-height:
    0.75;
}


.tm13-founder__stat-copy > strong {
  display: block;

  color:
    var(--white);

  font-size: 10px;
  font-weight: 600;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.tm13-founder__stat-copy p {
  max-width: 240px;

  margin-top:
    7px !important;

  color:
    rgb(245 247 248 / 42%) !important;

  font-size:
    10px !important;

  line-height:
    1.55 !important;
}


/* ==================================================
   CITATION — ACIER SUR GRAPHITE
================================================== */

.tm13-founder__quote {
  position: relative;

  max-width: 740px;

  margin-top:
    clamp(34px, 4vw, 54px);

  padding:
    clamp(32px, 3.5vw, 46px)
    clamp(24px, 4vw, 46px)
    clamp(26px, 3.5vw, 38px);

  overflow: hidden;

  border:
    1px solid
    rgb(255 255 255 / 37%);

  border-radius:
    18px;

  background:
    radial-gradient(
      ellipse at 0% 0%,
      rgb(255 255 255 / 55%),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #d6dcdf,
      #bac3c8 49%,
      #96a1a7
    );

  box-shadow:
    0 25px 60px rgb(0 0 0 / 27%),
    inset 0 1px 0 rgb(255 255 255 / 58%);
}


.tm13-founder__quote::before {
  content: "\201C";

  position: absolute;

  top: -21px;
  left: 12px;

  color:
    #b94c53;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(95px, 9vw, 140px);

  font-weight:
    700;

  line-height:
    1;
}


.tm13-founder__quote::after {
  content: "\201D";

  position: absolute;

  right: 15px;
  bottom: -65px;

  color:
    rgb(12 16 18 / 10%);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(95px, 9vw, 140px);

  font-weight:
    700;
}


.tm13-founder__quote blockquote {
  position: relative;
  z-index: 1;

  max-width: 22ch;

  margin-left:
    clamp(23px, 4vw, 58px);

  color:
    #13181b;

  font-size:
    clamp(22px, 2vw, 35px);

  font-weight:
    600;

  line-height:
    1.23;

  letter-spacing:
    -0.055em;
}


.tm13-founder__quote cite {
  position: relative;
  z-index: 1;

  display: block;

  margin-top: 18px;

  margin-left:
    clamp(23px, 4vw, 58px);

  color:
    #4d585e;

  font-size: 8px;

  font-style:
    normal;

  font-weight:
    600;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


/* ==================================================
   EXPERTISE — ACIER
================================================== */

.tm13-expertise {
  padding:
    clamp(75px, 8vw, 125px)
    0;
}


.tm13-heading {
  max-width: 900px;

  margin-bottom:
    clamp(45px, 6vw, 75px);
}


.tm13-page
.tm13-heading h2 {
  color:
    #111517 !important;

  font-size:
    clamp(40px, 4.55vw, 80px) !important;

  font-weight:
    700 !important;

  line-height:
    0.99 !important;

  letter-spacing:
    -0.07em !important;
}


.tm13-heading
> p:not(.tm13-kicker) {
  max-width: 610px;

  margin-top:
    17px !important;

  color:
    #465157 !important;

  font-size:
    11px !important;

  line-height:
    1.7 !important;
}


.tm13-expertise__grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    16px;
}


.tm13-expertise-card {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: flex-end;

  min-height:
    clamp(470px, 43vw, 640px);

  overflow: hidden;

  border:
    1px solid
    rgb(255 255 255 / 29%);

  border-radius:
    20px;

  box-shadow:
    0 26px 58px rgb(25 31 35 / 22%),
    inset 0 1px 0 rgb(255 255 255 / 24%);

  transition:
    transform 260ms ease,
    box-shadow 260ms ease;
}


.tm13-expertise-card:hover {
  box-shadow:
    0 38px 76px rgb(25 31 35 / 30%);

  transform:
    translateY(-6px);
}


.tm13-expertise-card:hover > img {
  filter:
    saturate(1)
    contrast(1.05);

  transform:
    scale(1.04);
}


.tm13-expertise-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgb(3 5 6 / 25%) 0%,
      rgb(3 5 6 / 5%) 37%,
      rgb(3 5 6 / 32%) 57%,
      rgb(3 5 6 / 96%) 100%
    );
}


.tm13-expertise-card__label {
  position: absolute;

  top:
    clamp(25px, 2.5vw, 38px);

  left:
    clamp(24px, 2.7vw, 40px);

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 12px;

  color:
    var(--white) !important;

  font-size:
    clamp(11px, 0.8vw, 13px) !important;

  font-weight:
    600 !important;

  letter-spacing:
    0.13em !important;

  text-transform:
    uppercase !important;
}


.tm13-expertise-card__label::before {
  content: "";

  width: 25px;
  height: 1px;

  flex:
    0 0 auto;

  background:
    linear-gradient(
      90deg,
      rgb(255 255 255 / 45%),
      #ffffff
    );
}


.tm13-expertise-card__content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  width: 100%;
  min-height: 290px;

  padding:
    90px
    clamp(24px, 2.7vw, 40px)
    clamp(24px, 2.7vw, 40px);
}


.tm13-page
.tm13-expertise-card h3 {
  color:
    var(--white) !important;

  font-size:
    clamp(22px, 1.85vw, 33px) !important;

  font-weight:
    600 !important;

  line-height:
    1.16 !important;

  letter-spacing:
    -0.055em !important;
}


.tm13-expertise-card__content p {
  max-width: 34ch;

  margin-top:
    14px !important;

  color:
    rgb(255 255 255 / 48%) !important;

  font-size:
    10px !important;

  font-weight:
    300 !important;

  line-height:
    1.65 !important;
}


/* ==================================================
   TIMELINE — GRAPHITE
================================================== */

.tm13-timeline {
  padding:
    clamp(80px, 9vw, 145px)
    0;
}


.tm13-timeline .tm13-shell {
  width:
    min(1280px, calc(100% - 48px));
}


.tm13-timeline__header {
  max-width: 980px;

  margin:
    0 auto
    clamp(75px, 9vw, 135px);

  text-align:
    center;
}


.tm13-timeline__header
.tm13-kicker {
  justify-content:
    center;
}


.tm13-page
.tm13-timeline__header h2 {
  color:
    var(--white) !important;

  font-size:
    clamp(42px, 5vw, 86px) !important;

  font-weight:
    700 !important;

  line-height:
    0.98 !important;

  letter-spacing:
    -0.07em !important;
}


.tm13-timeline__phrase {
  display: block;
}


.tm13-timeline__white {
  color:
    var(--white) !important;
}


/* ==================================================
   LIGNE TIMELINE
================================================== */

.tm13-timeline__list {
  --timeline-gap:
    clamp(90px, 11vw, 165px);

  position: relative;

  display: flex;
  flex-direction: column;

  gap:
    var(--timeline-gap);

  width: 100%;
  max-width: 1180px;

  margin-inline:
    auto;

  padding: 0;

  list-style:
    none;
}


.tm13-timeline__list::before,
.tm13-timeline__list::after {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  z-index: 0;

  width: 2px;

  transform:
    translateX(-50%);
}


.tm13-timeline__list::before {
  bottom: 0;

  background:
    repeating-linear-gradient(
      to bottom,
      rgb(229 235 238 / 20%) 0 6px,
      transparent 6px 16px
    );
}


.tm13-timeline__list::after {
  height:
    var(--timeline-progress, 0%);

  background:
    repeating-linear-gradient(
      to bottom,
      #d05b63 0 6px,
      transparent 6px 17px
    );

  filter:
    drop-shadow(
      0 0 5px
      rgb(208 91 99 / 25%)
    );

  transition:
    height 180ms linear;
}


/* ==================================================
   TIMELINE ITEMS
================================================== */

.tm13-timeline__item {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    70px
    minmax(0, 1fr);

  align-items: center;

  gap:
    clamp(24px, 4vw, 56px);

  width: 100%;

  opacity: 0.30;

  transform:
    translateY(10px);

  transition:
    opacity 450ms ease,
    transform 450ms ease;
}


.tm13-timeline__item.is-active {
  opacity: 1;

  transform:
    translateY(0);
}


.tm13-timeline__item:not(:last-child)::after {
  content: "";

  position: absolute;

  bottom:
    calc(var(--timeline-gap) * -0.5);

  left: 50%;

  z-index: 5;

  width: 10px;
  height: 10px;

  border-right:
    1px solid
    rgb(255 255 255 / 27%);

  border-bottom:
    1px solid
    rgb(255 255 255 / 27%);

  transform:
    translate(-50%, 25%)
    rotate(45deg);
}


.tm13-timeline__item.is-active:not(:last-child)::after {
  border-color:
    #d06b72;
}


.tm13-timeline__copy,
.tm13-timeline__photo {
  width: 100%;
}


.tm13-timeline__copy {
  max-width: 460px;
}


.tm13-timeline__item:nth-child(odd)
.tm13-timeline__copy {
  justify-self: end;

  text-align: right;
}


.tm13-timeline__item:nth-child(even)
.tm13-timeline__copy {
  grid-column: 3;
  grid-row: 1;

  justify-self: start;

  text-align: left;
}


.tm13-timeline__item:nth-child(even)
.tm13-timeline__dot {
  grid-column: 2;
  grid-row: 1;
}


.tm13-timeline__item:nth-child(even)
.tm13-timeline__photo {
  grid-column: 1;
  grid-row: 1;

  justify-self: end;
}


.tm13-timeline__item:nth-child(odd)
.tm13-timeline__photo {
  justify-self: start;
}


.tm13-timeline__number {
  display: block;

  margin-bottom:
    14px;

  color:
    rgb(247 249 250 / 92%);

  font-size:
    clamp(36px, 3.5vw, 62px);

  font-weight:
    700;
}


.tm13-timeline__copy small {
  display: block;

  margin-bottom:
    9px;

  color:
    rgb(245 247 248 / 54%);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.tm13-page
.tm13-timeline__copy h3 {
  color:
    var(--white) !important;

  font-size:
    clamp(24px, 2.3vw, 41px) !important;

  font-weight:
    600 !important;

  line-height:
    1.1 !important;

  letter-spacing:
    -0.055em !important;
}


.tm13-timeline__copy p {
  margin-top:
    13px !important;

  color:
    rgb(244 247 248 / 47%) !important;

  font-size:
    11px !important;

  font-weight:
    300 !important;

  line-height:
    1.7 !important;
}


.tm13-timeline__dot {
  position: relative;
  z-index: 4;

  display: block;

  width: 18px;
  height: 18px;

  justify-self:
    center;

  border:
    5px solid
    #101416;

  border-radius:
    50%;

  background:
    #657178;

  box-shadow:
    0 0 0 1px
    rgb(255 255 255 / 15%);

  transition:
    background 300ms ease,
    box-shadow 300ms ease,
    transform 300ms ease;
}


.tm13-timeline__item.is-active
.tm13-timeline__dot {
  background:
    #d06168;

  box-shadow:
    0 0 0 1px
    #d06168,
    0 0 0 8px
    rgb(208 97 104 / 9%);

  transform:
    scale(1.07);
}


.tm13-timeline__photo {
  max-width: 370px;

  min-height:
    clamp(315px, 35vw, 490px);

  overflow: hidden;

  border:
    1px solid
    rgb(255 255 255 / 11%);

  border-radius:
    19px;

  box-shadow:
    0 26px 60px
    rgb(0 0 0 / 27%);
}


/* ==================================================
   CTA FINAL — ACIER
================================================== */

.tm13-final {
  padding:
    clamp(70px, 8vw, 120px)
    0;
}


.tm13-final__panel {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 70svh;

  padding:
    clamp(55px, 8vw, 110px)
    30px;

  overflow: hidden;

  border:
    1px solid
    rgb(255 255 255 / 36%);

  border-radius:
    26px;

  background:
    linear-gradient(
      145deg,
      #20272b,
      #090c0d
    );

  text-align: center;

  box-shadow:
    0 35px 90px
    rgb(25 31 35 / 31%),
    inset 0 1px 0
    rgb(255 255 255 / 9%);
}


.tm13-final__panel:hover > img {
  transform:
    scale(1.025);
}


.tm13-final__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    radial-gradient(
      ellipse at 50% 15%,
      rgb(130 143 150 / 10%),
      transparent 45%
    ),
    linear-gradient(
      90deg,
      rgb(3 5 6 / 92%),
      rgb(17 22 24 / 62%),
      rgb(3 5 6 / 92%)
    ),
    linear-gradient(
      180deg,
      rgb(0 0 0 / 18%),
      rgb(0 0 0 / 84%)
    );
}


.tm13-final__content {
  position: relative;
  z-index: 2;

  width:
    min(900px, 100%);
}


.tm13-final
.tm13-kicker {
  justify-content:
    center;
}


.tm13-page
.tm13-final h2 {
  color:
    var(--white) !important;

  font-size:
    clamp(43px, 5.3vw, 92px) !important;

  font-weight:
    700 !important;

  line-height:
    0.97 !important;

  letter-spacing:
    -0.075em !important;
}


.tm13-final__content
> p:not(.tm13-kicker) {
  max-width: 580px;

  margin:
    20px auto 27px !important;

  color:
    rgb(245 247 248 / 56%) !important;

  font-size:
    11px !important;

  line-height:
    1.7 !important;
}


/* ==================================================
   REVEAL
================================================== */

.tm13-reveal-ready {
  opacity: 0;

  transform:
    translateY(24px)
    scale(0.995);

  transition:
    opacity 680ms ease,
    transform 720ms cubic-bezier(.2, .75, .25, 1);

  transition-delay:
    var(--tm13-reveal-delay, 0ms);
}


.tm13-reveal-ready.tm13-is-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* ==================================================
   ANIMATION REFLET ACIER
================================================== */

@keyframes tm13-steel-shine {

  0%,
  20% {
    opacity: 0;

    transform:
      translateX(0)
      skewX(-18deg);
  }

  29% {
    opacity: 0.48;
  }

  58% {
    opacity: 0.2;

    transform:
      translateX(590%)
      skewX(-18deg);
  }

  68%,
  100% {
    opacity: 0;

    transform:
      translateX(590%)
      skewX(-18deg);
  }
}


/* ==================================================
   TABLETTE
================================================== */

@media (max-width: 980px) {

  .tm13-hero__grid,
  .tm13-founder__grid {
    grid-template-columns:
      1fr;
  }


  .tm13-hero__visual,
  .tm13-founder__visual {
    width:
      min(100%, 680px);

    min-height:
      600px;
  }


  .tm13-expertise__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .tm13-expertise-card:last-child {
    grid-column:
      1 / -1;

    min-height:
      520px;
  }


  .tm13-timeline__list::before,
  .tm13-timeline__list::after {
    left:
      18px;
  }


  .tm13-timeline__item,
  .tm13-timeline__item:nth-child(even) {
    grid-template-columns:
      38px
      minmax(0, 1fr);

    gap:
      22px;
  }


  .tm13-timeline__item
  .tm13-timeline__dot,
  .tm13-timeline__item:nth-child(even)
  .tm13-timeline__dot {
    grid-column: 1;
    grid-row: 1 / span 2;
  }


  .tm13-timeline__item
  .tm13-timeline__copy,
  .tm13-timeline__item:nth-child(even)
  .tm13-timeline__copy {
    grid-column: 2;
    grid-row: 1;

    max-width: none;

    justify-self:
      stretch;

    text-align:
      left;
  }


  .tm13-timeline__item
  .tm13-timeline__photo,
  .tm13-timeline__item:nth-child(even)
  .tm13-timeline__photo {
    grid-column: 2;
    grid-row: 2;

    max-width: none;

    justify-self:
      stretch;
  }


  .tm13-timeline__item:not(:last-child)::after {
    left:
      18px;
  }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {

  .tm13-shell,
  .tm13-timeline
  .tm13-shell {
    width:
      min(1420px, calc(100% - 28px));
  }


  .tm13-mark::before {
    width: 430px;
  }


  .tm13-mark--left::before {
    left: -230px;
  }


  .tm13-mark--right::before {
    right: -230px;
  }


  .tm13-mark--black::before {
    opacity:
      0.045;
  }


  .tm13-mark--white::before {
    opacity:
      0.022;
  }


  .tm13-light {
    background:
      radial-gradient(
        ellipse at 8% 3%,
        rgb(255 255 255 / 57%),
        transparent 37%
      ),
      linear-gradient(
        145deg,
        #cbd2d6 0%,
        #a7b1b6 48%,
        #7e8a91 100%
      );
  }


  .tm13-light::after {
    width: 43%;

    animation-duration:
      13s;
  }


  .tm13-dark {
    background:
      radial-gradient(
        ellipse at 90% 5%,
        rgb(147 160 167 / 10%),
        transparent 37%
      ),
      linear-gradient(
        145deg,
        #050708 0%,
        #101416 43%,
        #242c30 70%,
        #090c0d 100%
      );
  }


  .tm13-hero {
    min-height:
      auto;

    padding:
      92px 0 62px;
  }


  .tm13-hero__grid {
    grid-template-columns:
      minmax(0, 1fr);

    min-height:
      auto;

    gap:
      40px;
  }


  .tm13-page
  .tm13-hero h1 {
    font-size:
      clamp(34px, 10.4vw, 53px) !important;
  }


  .tm13-hero h1 > span {
    width:
      auto;
  }


  .tm13-hero__lead {
    max-width:
      100%;

    font-size:
      12px !important;
  }


  .tm13-hero__visual,
  .tm13-founder__visual {
    width: 100%;

    min-height:
      460px;
  }


  .tm13-founder,
  .tm13-expertise,
  .tm13-timeline,
  .tm13-final {
    padding:
      66px 0;
  }


  .tm13-page
  .tm13-founder h2 {
    font-size:
      clamp(36px, 10.8vw, 56px) !important;
  }


  .tm13-founder__stat {
    grid-template-columns:
      1fr;
  }


  .tm13-founder__quote {
    margin-top:
      32px;

    padding:
      34px 18px 27px;
  }


  .tm13-founder__quote blockquote,
  .tm13-founder__quote cite {
    margin-left:
      32px;
  }


  .tm13-expertise__grid {
    grid-template-columns:
      1fr;
  }


  .tm13-expertise-card,
  .tm13-expertise-card:last-child {
    grid-column:
      auto;

    min-height:
      510px;
  }


  .tm13-timeline__header {
    margin-bottom:
      70px;
  }


  .tm13-page
  .tm13-timeline__header h2 {
    font-size:
      clamp(38px, 11vw, 57px) !important;
  }


  .tm13-timeline__list {
    --timeline-gap:
      86px;
  }


  .tm13-timeline__photo {
    min-height:
      320px;
  }


  .tm13-final__panel {
    min-height:
      66svh;

    padding:
      52px 20px;

    border-radius:
      20px;
  }


  .tm13-page
  .tm13-final h2 {
    font-size:
      clamp(38px, 11vw, 57px) !important;
  }


  .tm13-button {
    width: 100%;
  }
}


@media (max-width: 400px) {

  .tm13-page
  .tm13-hero h1 {
    font-size:
      clamp(32px, 10vw, 40px) !important;
  }
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

  .tm13-reveal-ready,
  .tm13-reveal-ready.tm13-is-visible {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .tm13-light::after {
    animation: none;

    opacity: 0.12;
  }


  .tm13-button,
  .tm13-page img,
  .tm13-expertise-card,
  .tm13-timeline__dot,
  .tm13-timeline__item {
    transition: none;
  }
}
@media (max-width: 1100px) {
  .site-header__toggle {
    align-items: center;
    padding: 0 10px;
    background: rgba(11, 11, 12, 0.55);
    border-radius: 999px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  }
  .site-header__toggle span {
    width: 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }
  .site-header.nav-open .site-header__toggle {
    background: transparent;
    box-shadow: none;
  }
}