/* =====================================================
   CLINIQUE COACHING - MAIN STYLESHEET
   Design: Modern, Professional, Warm
   Colors: Bordeaux Classique + Copper Gold
   Fonts: Cormorant Garamond (display) + Source Sans 3 (body)
   ===================================================== */

/* =====================================================
   CSS VARIABLES
   ===================================================== */
:root {
    /* Colors — Palette Bordeaux Classique */
    --color-primary: #6B2D42;
    --color-primary-light: #8B3A52;
    --color-primary-dark: #3D1A2A;
    --color-primary-50: #F3E8EC;
    --color-primary-100: #E0C5CE;
    
    --color-secondary: #D4A574;
    --color-secondary-light: #E0BB92;
    --color-secondary-dark: #C9956B;
    
    --color-accent: #8B6F5C;
    --color-dark: #3D1A2A;
    --color-light: #F8F6F3;
    /* La barre de navigation était en blanc à 96 %, sur un corps de page blanc :
       seule une ligne d'un pixel les séparait. Ce beige un cran plus soutenu que
       --color-light la détache sans l'assombrir. */
    --navbar-bg: rgba(245, 242, 237, 0.94);
    --color-white: #FFFFFF;
    --color-text: #2C2C2C;
    --color-text-light: #6B6B6B;
    --color-text-muted: #999999;
    --color-border: #E5E1DC;
    --color-border-light: #F0ECE7;
    
    --color-success: #4A7C59;
    --color-warning: #D4A843;
    --color-error: #C75050;
    --color-info: #4A7C9B;
    
    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Source Sans 3', -apple-system, sans-serif;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
    
    /* Borders */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
    --shadow-xl: 0 16px 50px rgba(0,0,0,0.12);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    
    /* Layout */
    --container-max: 1200px;
    --navbar-height: 72px;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-light); }

/* =====================================================
   TYPOGRAPHY
   ===================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-dark);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
h4 { font-size: 1.25rem; font-family: var(--font-body); font-weight: 600; }

p { margin-bottom: var(--space-md); }
.lead { font-size: 1.15rem; color: var(--color-text-light); line-height: 1.7; }

/* =====================================================
   LAYOUT
   ===================================================== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.section {
    padding: var(--space-5xl) 0;
}

.section-sm { padding: var(--space-3xl) 0; }
.section-header { text-align: center; margin-bottom: var(--space-3xl); }
.section-header h2 { margin-bottom: var(--space-md); }
.section-header .lead { max-width: 600px; margin: 0 auto; }
.section-alt { background-color: var(--color-light); }
.section-dark { background-color: var(--color-dark); color: var(--color-white); }
.section-dark h2, .section-dark h3 { color: var(--color-white); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* =====================================================
   NAVBAR
   ===================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    background: var(--navbar-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    transition: box-shadow var(--transition-base);
}

.navbar.scrolled { box-shadow: var(--shadow-md); }

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--color-dark);
}

.brand-icon {
    font-size: 1.5rem;
    color: var(--color-primary);
    line-height: 1;
}

.brand-icon-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* La marque « guillemets » est large (96 × 40), pas carrée : le conteneur
       de 42 × 42 la comprimait. Elle donne sa taille elle-même. */
    width: auto;
    height: auto;
    margin-right: 4px;
    flex-shrink: 0;
}

.star-main {
    font-size: 1.1rem;
    color: #D4A574;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.star-sm {
    color: #D4A574;
    position: absolute;
    z-index: 1;
}

.star-sm-1 {
    font-size: 0.5rem;
    top: 5px;
    right: 5px;
}

.star-sm-2 {
    font-size: 0.38rem;
    bottom: 8px;
    left: 7px;
}

.brand-text {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.brand-text strong {
    font-size: 1.25rem;
    color: var(--color-primary);
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    padding: var(--space-xs) 0;
    position: relative;
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.nav-link:hover { color: var(--color-primary); }
.nav-link:hover::after { width: 100%; }

.navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.navbar-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 24px;
    position: relative;
}

.navbar-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-dark);
    position: absolute;
    left: 0;
    transition: all var(--transition-base);
}

.navbar-toggle span:nth-child(1) { top: 0; }
.navbar-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.navbar-toggle span:nth-child(3) { bottom: 0; }

@media (max-width: 960px) {
    .navbar-toggle { display: block; }
    .navbar-menu {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-white);
        flex-direction: column;
        padding: var(--space-xl);
        gap: var(--space-xl);
        transform: translateX(100%);
        transition: transform var(--transition-slow);
    }
    .navbar-menu.active { transform: translateX(0); }
    .navbar-links { flex-direction: column; gap: var(--space-md); }
    .nav-link { font-size: 1.1rem; }
    .navbar-actions { flex-direction: column; width: 100%; }
    .navbar-actions .btn { width: 100%; text-align: center; }
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}
.btn-secondary:hover {
    background: var(--color-secondary-light);
    border-color: var(--color-secondary-light);
    color: var(--color-white);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-text {
    background: transparent;
    color: var(--color-text-light);
    border: none;
    padding: 0.5rem 0.75rem;
}
.btn-text:hover { color: var(--color-primary); }

.btn-white {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
}
.btn-white:hover {
    background: var(--color-primary-50);
    transform: translateY(-1px);
}

/* =====================================================
   FORMS
   ===================================================== */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.form-textarea { resize: vertical; min-height: 100px; }
.form-error { color: var(--color-error); font-size: 0.85rem; margin-top: var(--space-xs); }
.form-hint { color: var(--color-text-muted); font-size: 0.85rem; margin-top: var(--space-xs); }

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-primary);
}

/* =====================================================
   CARDS
   ===================================================== */
.card {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card-flat { border: none; background: var(--color-light); }
.card-flat:hover { transform: none; box-shadow: none; }

.card-header { margin-bottom: var(--space-lg); }
.card-header h3 { margin-bottom: var(--space-xs); }

/* =====================================================
   HERO SECTION
   ===================================================== */
.hero {
    padding-top: calc(var(--navbar-height) + var(--space-5xl));
    padding-bottom: var(--space-5xl);
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-white) 50%, #FFF8F0 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(107,45,66,0.06) 0%, transparent 70%);
    border-radius: 50%;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212,165,116,0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.hero .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

.hero-content h1 {
    margin-bottom: var(--space-lg);
    color: var(--color-dark);
}

.hero-content h1 em {
    font-style: italic;
    color: var(--color-primary);
}

.hero-content .lead {
    margin-bottom: var(--space-2xl);
    font-size: 1.15rem;
}

.hero-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.hero-visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
}

/* ---- Le coach du jour ----------------------------------------------------
   Remplace la grande forme bordeaux du héros. Le portrait garde la découpe
   organique de la marque — c'est elle qui fait le lien visuel — mais en plus
   petit, et c'est un visage qui est dedans plutôt qu'un logo. */
.coach-jour {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 380px;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    text-align: center;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
/* Le fondu au changement de coach : sans lui, le visage est remplacé d'un coup
   et l'œil ne sait pas ce qui vient de se passer. */
.coach-jour.change { opacity: 0.25; }
.coach-jour { transition: opacity 0.16s ease-out; }

.coach-jour-surtitre {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-secondary-dark);
    margin-bottom: var(--space-md);
}

.coach-jour-portrait {
    display: block;
    width: 168px;
    height: 168px;
    margin: 0 auto var(--space-md);
    padding: 3px;
    background: linear-gradient(145deg, #4E1B23 0%, #3D1520 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morph 8s ease-in-out infinite;
    box-shadow: var(--shadow-md);
}
.coach-jour-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.coach-jour-nom {
    display: block;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    line-height: 1.2;
}
.coach-jour-nom:hover { color: var(--color-primary); }

/* Titre et biographie sont bornés en nombre de lignes. Sans cela la carte
   change de hauteur d'un coach à l'autre — certains titres font trois lignes —
   et toute la page sautait à chaque « Un autre ». */
.coach-jour-titre {
    margin: 4px 0 var(--space-md);
    font-size: 0.9rem;
    color: var(--color-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.coach-jour-bio {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--color-text-light);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(4 * 1.65em);
}

/* « Un autre › » : une invitation, pas une commande. D'où le trait discret et
   la place en bas à droite, hors du chemin de lecture. */
.coach-jour-suivant {
    position: absolute;
    right: var(--space-md);
    bottom: var(--space-sm);
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 6px 4px;
    transition: color var(--transition-fast);
}
.coach-jour-suivant:hover { color: var(--color-primary); }
.coach-jour-suivant:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.coach-jour-suivant span { font-size: 1.1rem; line-height: 1; }

.coach-jour-invite {
    max-width: 380px;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    text-align: center;
    color: var(--color-text-light);
}
.coach-jour-invite a { color: var(--color-primary); }
.coach-jour-invite span { display: block; }

@media (prefers-reduced-motion: reduce) {
    .coach-jour-portrait { animation: none; }
    .provider-portrait { animation: none; }
    .coach-jour { transition: none; }
}
@media (max-width: 900px) {
    .coach-jour { max-width: 340px; }
    .coach-jour-portrait { width: 140px; height: 140px; }
}

.hero-illustration {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1;
    background: linear-gradient(145deg, #4E1B23 0%, #3D1520 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.15);
    font-size: 8rem;
    animation: morph 8s ease-in-out infinite;
    box-shadow: var(--shadow-xl);
}

.hero-stars {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.star-hero-main {
    font-size: 7rem;
    color: var(--color-secondary);
    line-height: 1;
}

.star-hero-sm {
    color: var(--color-secondary);
    position: absolute;
}

.star-hero-sm-1 {
    font-size: 2rem;
    top: 18%;
    right: 15%;
}

.star-hero-sm-2 {
    font-size: 1.3rem;
    bottom: 22%;
    left: 18%;
}

@keyframes morph {
    0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
    50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
    75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
}

@media (max-width: 768px) {
    .hero .container { grid-template-columns: 1fr; text-align: center; }
    .hero-actions { justify-content: center; }
    .hero-visual { order: -1; }
    .hero-illustration { max-width: 280px; font-size: 5rem; }
}

/* =====================================================
   FEATURES / HOW IT WORKS
   ===================================================== */
.feature-card {
    text-align: center;
    padding: var(--space-2xl);
}

.feature-icon {
    width: 64px;
    height: 64px;
    background: var(--color-primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
    font-size: 1.5rem;
    color: var(--color-primary);
}

.feature-card h3 {
    margin-bottom: var(--space-sm);
    font-size: 1.3rem;
}

.feature-card p {
    color: var(--color-text-light);
    font-size: 0.95rem;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
}

/* =====================================================
   PRICING
   ===================================================== */
.pricing-card {
    text-align: center;
    padding: var(--space-3xl) var(--space-2xl);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    position: relative;
    background: var(--color-white);
}

.pricing-card.featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.pricing-card.featured::before {
    content: 'Populaire';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-white);
    padding: 4px 16px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
}

.pricing-amount {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: var(--space-xl) 0;
    letter-spacing: -0.02em;
}

.pricing-amount span {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-text-light);
}

.pricing-features {
    list-style: none;
    margin: var(--space-xl) 0;
    text-align: left;
}

.pricing-features li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.pricing-features li::before {
    content: '✓';
    color: var(--color-success);
    font-weight: 700;
}

/* =====================================================
   CURRENCY TOGGLE
   ===================================================== */
.currency-toggle {
    display: inline-flex;
    background: var(--color-primary-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 4px;
    gap: 4px;
}
.currency-toggle button {
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-light);
    font-weight: 500;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: var(--font-body);
    transition: all 0.25s ease;
    letter-spacing: 0.01em;
}
.currency-toggle button.active {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 2px 10px rgba(107, 45, 66, 0.3);
    font-weight: 600;
}
.currency-toggle button:hover:not(.active) {
    background: var(--color-primary-100);
    color: var(--color-primary);
}

/* =====================================================
   LEGAL PAGES
   ===================================================== */
.legal-content h2 {
    margin-top: 3rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E0DDD8;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-primary);
}
.legal-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    font-size: 1.15rem;
    color: var(--color-text);
}
.legal-content p {
    margin-bottom: 1rem;
    line-height: 1.85;
}
.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}
.legal-content table th {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 2px solid var(--color-primary);
    font-weight: 600;
}
.legal-content table td {
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}
.legal-content table tr:hover td {
    background: var(--color-primary-50);
}

/* =====================================================
   PROVIDER CARDS — fiche horizontale, trois colonnes
   -----------------------------------------------------
   Jusqu'au 9 septembre 2026 : quatre colonnes de fiches
   hautes de 730 px, dont la photo en portrait occupait
   les deux tiers. Sur un écran de 1440 × 900, quatre
   coachs sur vingt étaient visibles sans défiler.
   La photo fait désormais 76 px — la hauteur exacte des
   trois lignes qu'elle accompagne, donc plus de vide à
   combler — et la fiche tient en 110 px.
   ===================================================== */
.providers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.provider-card {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 13px;
    align-items: center;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.provider-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

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

/* Les portraits des listes reprennent la forme organique du reste du site
   plutôt qu'un carré aux angles arrondis. Les quatre variantes ne sont pas
   inventées : ce sont les quatre étapes de l'animation `morph`, figées. Elles
   restent donc de la même famille que le blob qui bouge sur la page d'accueil
   et sur la fiche du coach.

   La variante est tirée du slug du coach, donc stable : il garde sa forme
   d'une visite à l'autre, et la grille ne se remet pas à danser à chaque
   rechargement. Ici on parcourt — rien ne doit bouger. */
.provider-card-avatar {
    width: 76px;
    height: 76px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    object-fit: cover;
    background: var(--color-primary-50);
    /* Un filet d'un pixel, en bordeaux très dilué : il détache la photo du
       fond blanc de la fiche et redessine la silhouette quand l'image est
       claire sur ses bords. Assez franc pour tenir le contour, assez discret
       pour ne pas cercler chaque visage. box-sizing: border-box vaut pour
       tout le site : les 76 px restent 76 px. */
    border: 1px solid rgba(107, 45, 66, 0.28);
}
.provider-card-avatar.forme-2 { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
.provider-card-avatar.forme-3 { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
.provider-card-avatar.forme-4 { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }

/* Les quatre mêmes silhouettes, hors des listes publiques — l'admin, où l'on
   regarde les mêmes visages. Un rond y avait l'air d'un autre site. La taille
   reste posée sur place (36 px dans un tableau, 80 px en en-tête de fiche) :
   seule la forme est commune, et elle se règle ici. */
.avatar-forme {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    object-fit: cover;
    background: var(--color-primary-50);
}
.avatar-forme.forme-2 { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
.avatar-forme.forme-3 { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
.avatar-forme.forme-4 { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }

/* Une illustration dans le fil d'un article, à la forme du site.

   `shape-outside` reprend EXACTEMENT le rayon de la bordure : sans lui, le
   texte s'arrêterait au rectangle invisible de l'image et la forme organique
   ne servirait à rien. La fonction inset() accepte une composante `round`,
   c'est ce qui permet de décrire un blob et non une simple ellipse.

   Sous 720 px, la colonne restante serait trop étroite pour qu'un texte
   habillé reste lisible — cinq ou six mots par ligne. L'image reprend alors
   toute la largeur et le texte passe dessous. */
.article-illustration {
    float: right;
    width: 300px;
    max-width: 100%;
    margin: 0.3rem 0 1.1rem 1.8rem;
    /* La forme de l'habillage n'est PAS celle de l'image, et c'est voulu. En
       bas, elle reste carrée : c'est là que vit la légende, et un contour qui
       s'y referme laisse le texte descendre dans le vide ainsi ouvert et écrire
       par-dessus elle. En haut, elle épouse la courbe, là où il n'y a rien à
       protéger. L'œil voit le blob, le texte contourne un galet. */
    shape-outside: inset(0 round 30% 70% 10% 10% / 30% 30% 10% 10%);
    shape-margin: 0.9rem;
}
.article-illustration img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    border: 1px solid rgba(107, 45, 66, 0.28);
}
.article-illustration figcaption {
    margin-top: 0.75rem;
    padding-inline: 0.6rem;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
    color: var(--color-text-muted);
}
/* La variante gauche : le texte respire mieux quand le fil alterne d'un côté
   à l'autre au long d'un article.

   L'image porte une forme distincte de celle de droite ; l'habillage, lui, est
   le miroir du sien — bas carré compris, pour la même raison. */
.article-illustration--gauche {
    float: left;
    margin: 0.3rem 1.8rem 1.1rem 0;
    shape-outside: inset(0 round 70% 30% 10% 10% / 30% 30% 10% 10%);
}
.article-illustration--gauche img {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
}

@media (max-width: 720px) {
    .article-illustration,
    .article-illustration--gauche {
        float: none;
        width: 100%;
        margin: var(--space-xl) 0;
        shape-outside: none;
    }
    .article-illustration img { max-width: 420px; margin: 0 auto; }
}

/* Le portrait de la fiche publique : même traitement que le coach du jour, en
   plus grand, et le blob bouge. C'est une page où l'on s'arrête. */
.provider-portrait {
    display: block;
    width: 200px;
    height: 200px;
    padding: 3px;
    background: linear-gradient(145deg, #4E1B23 0%, #3D1520 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morph 8s ease-in-out infinite;
    box-shadow: var(--shadow-md);
}
.provider-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
@media (max-width: 768px) {
    .provider-portrait { width: 168px; height: 168px; margin: 0 auto; }
}

.provider-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 0;
}

/* Dans un conteneur flex, les marges par défaut de h3 et p ne fusionnent pas :
   elles s'ajoutent au gap et creusaient vingt pixels de vide sous chaque nom. */
.provider-card-body h3,
.provider-card-body p {
    margin: 0;
}

.provider-card-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.provider-card-body h3 {
    font-size: 1.16rem;
    line-height: 1.14;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.provider-card-price {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.95rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.provider-card-headline {
    color: var(--color-text-light);
    font-size: 0.78rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.provider-card-pied {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.provider-card-pied .tag {
    font-size: 0.69rem;
    padding: 2px 7px;
}

.provider-card-duree {
    font-size: 0.71rem;
    font-weight: 400;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Le compteur de spécialités restantes appartient au groupe d'étiquettes, pas
   aux modalités : sans cela il se retrouvait collé à « Visio » et se lisait
   comme s'il les comptait, elles. */
.provider-card-pied .tag.is-reste {
    background: transparent;
    color: var(--color-text-muted);
    padding-inline: 2px;
}

/* Visio et la ville sont ce qui décide un client : gris clair sur bord clair,
   ils disparaissaient. Chaque modalité porte maintenant sa couleur pleine. */
.provider-card-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.71rem;
    font-weight: 600;
    line-height: 1.65;
    padding: 2px 8px;
    border-radius: 6px;
    background: #E7F0F7;
    color: #1F6390;
    white-space: nowrap;
}

.provider-card-mode.is-ville {
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.provider-card-mode.is-recu {
    background: #E3F0E8;
    color: #256B3C;
}

.provider-card-rating {
    color: var(--color-secondary);
    font-size: 0.71rem;
    font-weight: 600;
    white-space: nowrap;
}

.provider-card-specialties {
    display: contents;
}

/* Deux colonnes dès que la fiche descendrait sous ~330 px, une seule ensuite. */
@media (max-width: 1080px) {
    .providers-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .providers-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .provider-card { grid-template-columns: 64px 1fr; gap: 11px; }
    .provider-card-avatar { width: 64px; height: 64px; }
    .provider-card-body h3 { font-size: 1.05rem; }
}

.tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: 0.75rem;
    background: var(--color-primary-50);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-weight: 500;
}

/* =====================================================
   ALERTS
   ===================================================== */
.alert {
    padding: var(--space-md) 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.alert-success { background: #E8F5E9; color: var(--color-success); }
.alert-error { background: #FFEBEE; color: var(--color-error); }
.alert-warning { background: #FFF8E1; color: var(--color-warning); }
.alert-info { background: #E3F2FD; color: var(--color-info); }

/* =====================================================
   DASHBOARD
   ===================================================== */
.dashboard {
    padding-top: calc(var(--navbar-height) + var(--space-2xl));
    padding-bottom: var(--space-4xl);
    min-height: 100vh;
    background: var(--color-light);
}

.dashboard-header {
    margin-bottom: var(--space-2xl);
}

.dashboard-header h1 {
    font-size: 1.8rem;
    margin-bottom: var(--space-xs);
}

.dashboard-header p {
    color: var(--color-text-light);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.stat-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--color-border-light);
}

.stat-card-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.stat-card-label {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: var(--space-xs);
}

.dashboard-section {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    border: 1px solid var(--color-border-light);
}

.dashboard-section h2 {
    font-size: 1.3rem;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
}

/* Status badges */
.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge-success { background: #E8F5E9; color: var(--color-success); }
.badge-warning { background: #FFF8E1; color: #B8860B; }
.badge-danger { background: #FFEBEE; color: var(--color-error); }
.badge-info { background: #E3F2FD; color: var(--color-info); }
.badge-secondary { background: var(--color-light); color: var(--color-text-light); }
.badge-primary { background: var(--color-primary-50); color: var(--color-primary); }

/* =====================================================
   AUTH PAGES
   ===================================================== */
.auth-page {
    padding-top: calc(var(--navbar-height) + var(--space-4xl));
    padding-bottom: var(--space-4xl);
    min-height: 100vh;
    background: var(--color-light);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl);
    box-shadow: var(--shadow-lg);
}

.auth-card h1 {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: var(--space-xs);
}

.auth-card .subtitle {
    text-align: center;
    color: var(--color-text-light);
    margin-bottom: var(--space-2xl);
}

.auth-divider {
    text-align: center;
    margin: var(--space-xl) 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.auth-footer {
    text-align: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border-light);
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
    background: var(--color-dark);
    color: rgba(255,255,255,0.7);
    padding: var(--space-4xl) 0 var(--space-xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.footer-logo .brand-icon-group {
    /* No background needed — SVG handles its own colors */
}

.footer-tagline {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.footer-company {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
}

.footer-col h4 {
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-col a {
    display: block;
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    padding: var(--space-xs) 0;
    transition: color var(--transition-fast);
}

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

.footer-bottom {
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
}

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   UTILITIES
   ===================================================== */
.inline { display: inline; }
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mt-xl { margin-top: var(--space-xl); }

/* Table */
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--space-md); text-align: left; border-bottom: 1px solid var(--color-border-light); font-size: 0.9rem; }
.table th { font-weight: 600; color: var(--color-text-light); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.table tbody tr:hover { background: var(--color-light); }

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--space-3xl);
    color: var(--color-text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
    opacity: 0.4;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.animate-in:nth-child(1) { animation-delay: 0.1s; }
.animate-in:nth-child(2) { animation-delay: 0.2s; }
.animate-in:nth-child(3) { animation-delay: 0.3s; }
.animate-in:nth-child(4) { animation-delay: 0.4s; }

/* =====================================================
   PAGE NOS COACHS — en-tête
   -----------------------------------------------------
   Le titre, les onze spécialités sur deux rangées, les
   trois listes et la bannière de carte occupaient près
   de 500 px avant la première fiche. Tout tient en 250.
   ===================================================== */
.coachs-section {
    padding-top: calc(var(--navbar-height) + var(--space-md));
    padding-bottom: var(--space-2xl);
}

.coachs-entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.coachs-entete h1 {
    font-size: 2.1rem;
    line-height: 1.1;
    margin: 0;
}

.coachs-entete .lead {
    margin: 3px 0 0;
    font-size: 0.95rem;
    color: var(--color-text-light);
}

.coachs-filtres {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--space-lg);
}

/* Les étiquettes disent « Vie », « Carrière », « Exécutif » : toutes les
   spécialités commencent par « Coaching », que le titre de la page a déjà dit.
   Débarrassées de ce préfixe, les onze tiennent sur une seule rangée. */
.coachs-specialites {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.coachs-specialites .btn {
    padding: 5px 13px;
    font-size: 0.83rem;
}

.coachs-selects {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.coachs-selects .form-select {
    width: auto;
    padding: 0.35rem 0.7rem;
    font-size: 0.83rem;
}

.coachs-carte {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 8px;
    text-decoration: none;
    background: var(--color-primary-50);
    border: 1px solid rgba(107, 45, 66, 0.12);
    color: var(--color-primary);
    font-size: 0.83rem;
    font-weight: 600;
    white-space: nowrap;
}

.coachs-carte:hover {
    box-shadow: 0 3px 10px rgba(107, 45, 66, 0.12);
}

.coachs-carte b {
    font-weight: 400;
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .coachs-entete { align-items: flex-start; }
    .coachs-entete h1 { font-size: 1.75rem; }
    .coachs-carte { margin-left: 0; }
}

/* =====================================================
   BARRE DE NAVIGATION SOMBRE
   -----------------------------------------------------
   Le même bordeaux que le pied de page. La page s'ouvre
   et se ferme sur la même couleur, et la marque y est
   blanche des deux bouts.
   Tout est cantonné à .navbar : les boutons gardent leur
   apparence partout ailleurs sur le site.
   ===================================================== */
:root { --navbar-bg: var(--color-dark); }

.navbar {
    background: var(--color-dark);
    border-bottom-color: rgba(255, 255, 255, 0.09);
}

.navbar.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); }

.navbar .navbar-brand { color: #FFFFFF; }
.navbar .brand-text { color: rgba(255, 255, 255, 0.72); }
.navbar .brand-text strong { color: #FFFFFF; }

.navbar .nav-link { color: rgba(255, 255, 255, 0.82); }
.navbar .nav-link:hover { color: #FFFFFF; }
/* Le soulignement était bordeaux : invisible sur du bordeaux. */
.navbar .nav-link::after { background: var(--color-secondary); }

.navbar .btn-text { color: rgba(255, 255, 255, 0.66); }
.navbar .btn-text:hover { color: #FFFFFF; }

/* Même raison pour le bouton d'appel : l'or du pied de page prend le relais,
   et il ressort mieux qu'avant sur son fond clair. */
.navbar .btn-primary {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-dark);
}
.navbar .btn-primary:hover {
    background: #E2BC8F;
    border-color: #E2BC8F;
    color: var(--color-dark);
}

.navbar .btn-outline { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); }
.navbar .btn-outline:hover { background: #FFFFFF; color: var(--color-dark); border-color: #FFFFFF; }

.navbar-toggle span { background: #FFFFFF; }

@media (max-width: 960px) {
    .navbar-menu { background: var(--color-dark); }
}


/* ============================================
   BOUTON SUPPRIMER (LISTES ADMIN)
   Même gabarit que « Voir », en rouge.
   ============================================ */
.btn-supprimer-client {
    color: var(--color-error);
    border-color: var(--color-error);
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.btn-supprimer-client:hover,
.btn-supprimer-client:focus-visible {
    background: var(--color-error);
    border-color: var(--color-error);
    color: #fff;
}


/* ============================================
   HÉROS — MENTION DE PREUVE
   Le nombre de coachs, visible dès le premier écran.
   ============================================ */
.hero-preuve {
    margin: var(--space-xl) 0 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.hero-preuve a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(107, 45, 66, 0.3);
    padding-bottom: 1px;
    transition: border-color 0.2s ease;
}
.hero-preuve a:hover { border-bottom-color: var(--color-primary); }
.hero-preuve strong { font-weight: 700; }
.hero-preuve span {
    color: var(--color-text-light);
}
.hero-preuve span::before {
    content: '·';
    margin-right: 0.6rem;
    color: var(--color-secondary);
    font-weight: 700;
}

/* Sur mobile la ligne passe sur deux lignes : le point séparateur
   se retrouverait seul en tête de la seconde. On l'enlève. */
@media (max-width: 480px) {
    .hero-preuve { display: block; }
    .hero-preuve span { display: block; margin-top: 0.2rem; }
    .hero-preuve span::before { content: none; }
}

/* ============================================
   ESPACE COACH — TUILES COMPACTES
   Les quatre chiffres tenaient sur un pavé aussi haut que la carte
   « Complétez votre profil ». Ils repoussaient tout le reste sous
   la ligne de flottaison pour dire quatre nombres.
   ============================================ */
.stat-grid--mince {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.stat-grid--mince .stat-card {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.stat-grid--mince .stat-card-value {
    font-size: 1.45rem;
    line-height: 1.1;
}
.stat-grid--mince .stat-card-label {
    font-size: 0.82rem;
    margin: 0;
}

/* ============================================
   ESPACE COACH — SERVICES PARTENAIRES
   ============================================ */
/* La bande occupait le bas d'une page ; d'où le trait et l'air qui la
   séparaient de ce qui précédait. Elle est devenue le contenu d'un onglet :
   il n'y a plus rien au-dessus dont il faille la détacher. */
.services-coach {
    margin: 0 0 var(--space-2xl);
}
.services-coach h2 {
    margin-bottom: var(--space-xs);
}
.services-coach-intro {
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
    /* Pas de max-width : la phrase tient sur une ligne à la largeur du
       conteneur, et se replie d'elle-même sur mobile. */
}
/* Quatre cartes : deux colonnes plutôt que trois, sinon la quatrième
   se retrouve seule sur une deuxième ligne. */
.services-coach-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}
@media (min-width: 820px) {
    .services-coach-grille { grid-template-columns: repeat(2, 1fr); }
}

/* La carte entière est le lien : une seule cible, rien à cliquer « à côté ». */
.service-carte {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-lg);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.service-carte:hover,
.service-carte:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(107, 45, 66, 0.12);
    border-color: var(--color-secondary);
    text-decoration: none;
    color: inherit;
}
.service-carte:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.service-logo {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-light);
    border-radius: var(--radius-md);
}
.service-logo img {
    width: 60px;
    height: 60px;
    display: block;
    object-fit: contain;
}

/* Le corps s'étire pour que les trois appels à l'action s'alignent
   en bas, quelle que soit la longueur du texte au-dessus. */
.service-corps {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.service-surtitre,
.service-titre,
.service-texte,
.service-aller,
.service-note { display: block; }

.service-surtitre {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: #A2703A;   /* or assombri : #C9956B ne passe pas le contraste en petit corps */
    margin-bottom: 0.4rem;
}
.service-titre {
    font-family: var(--font-display);
    font-size: 1.12rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.55rem;
}
.service-texte {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}
.service-carte { height: 100%; }
.service-aller {
    margin-top: auto;
    padding-top: var(--space-xs);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--color-primary);
}
.service-aller::after {
    content: ' →';
    transition: margin-left 0.18s ease;
}
.service-carte:hover .service-aller { text-decoration: underline; }
.service-carte:hover .service-aller::after { margin-left: 0.2rem; }
.service-note {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ============================================
   ESPACE COACH — RAPPEL DES SERVICES EN EN-TÊTE
   Quatre pastilles et un lien vers les pavés du bas de page.
   ============================================ */
.dashboard-header--services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}
.dashboard-header-titre { flex: 1 1 260px; }
.dashboard-header-titre p { margin-bottom: 0; }
/* L'alerte de validation garde toute la largeur sous la ligne. */
.dashboard-header-alerte { flex-basis: 100%; }

.services-rappel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-md);
    transition: background 0.18s ease;
}
.services-rappel:hover,
.services-rappel:focus-visible {
    background: var(--color-white);
    text-decoration: none;
    color: inherit;
}
.services-rappel:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.services-rappel-logos {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.services-rappel-logos img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    opacity: 0.82;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.services-rappel:hover .services-rappel-logos img {
    opacity: 1;
    transform: translateY(-2px);
}
.services-rappel-texte {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-primary);
}
.services-rappel-texte::after {
    content: ' ↓';
    color: #A2703A;
}
.services-rappel:hover .services-rappel-texte { text-decoration: underline; }

/* Sous 700 px, le rappel passe sous le titre et s'aligne à gauche. */
@media (max-width: 700px) {
    .dashboard-header--services { align-items: flex-start; }
    .services-rappel {
        align-items: flex-start;
        padding-left: 0;
    }
}

/* Le lien d'ancre saute sous la barre de navigation fixe si on ne
   réserve pas la hauteur. */
#services-coachs { scroll-margin-top: calc(var(--navbar-height) + var(--space-lg)); }

/* ============================================
   ESPACE COACH — PAVÉ PLEINE LARGEUR (COACHING QUÉBEC)
   L'école dont tout le reste découle : elle occupe les deux
   colonnes, logo au-dessus du texte plutôt qu'à côté.
   ============================================ */
.service-carte--large {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
}
@media (min-width: 820px) {
    .service-carte--large { grid-column: 1 / -1; }
}
.service-carte--large .service-corps {
    align-items: center;
    max-width: 68ch;
}
.service-logo--grand {
    width: 96px;
    height: 96px;
    background: transparent;
}
.service-logo--grand img {
    width: 76px;
    height: 76px;
}
.service-carte--large .service-aller {
    margin-top: var(--space-xs);
}

/* ============================================
   PAGE DE SPÉCIALITÉ — TEXTE ÉDITORIAL
   Sous la liste des coachs : la page cesse d'être une simple
   liste pour qui arrive d'une recherche.
   ============================================ */
.specialite-texte {
    margin: var(--space-3xl) 0 0;
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--color-border-light);
    line-height: 1.8;
}
/* La largeur de la page est occupée par la grille ; la mesure de lecture est
   tenue par la colonne. 300 px au minimum : à 1200 px de conteneur cela fait
   trois colonnes d'environ 375 px — une cinquantaine de caractères par ligne —
   et la grille repasse d'elle-même à deux puis à une seule en rétrécissant. */
.specialite-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl) var(--space-2xl);
    align-items: start;
}
.specialite-preambule {
    max-width: 68ch;
    margin-bottom: var(--space-xl);
}
.specialite-colonne > :first-child { margin-top: 0; }
.specialite-colonne > :last-child  { margin-bottom: 0; }
.specialite-texte h2 {
    font-family: var(--font-display);
    color: var(--color-primary);
    font-size: 1.35rem;
    margin: var(--space-2xl) 0 var(--space-md);
}
.specialite-texte h2:first-child { margin-top: 0; }
.specialite-texte p {
    margin-bottom: var(--space-md);
    color: var(--color-text-light);
}
.specialite-texte a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ══════════ JUSTIFICATIFS ══════════
   Pièces déposées par les coachs : attestations d'adhésion, diplômes. Les
   fichiers eux-mêmes vivent hors de la racine servie ; ce qui suit n'habille
   que les champs de dépôt et l'état de vérification. */

.mention-justificatif {
    background: var(--color-primary-50);
    border-left: 3px solid var(--color-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-light);
}
.mention-justificatif strong { color: var(--color-text); }

/* ---- Champ de dépôt d'un justificatif -------------------------------------
   L'input natif est invisible mais toujours là : c'est lui qui porte le
   fichier, et il reste atteignable au clavier (d'où le clip plutôt qu'un
   display:none, qui le sortirait de l'ordre de tabulation). Le bouton visible
   est le <span> qui le suit ; la ligne d'état en dessous reçoit le nom du
   fichier choisi. Voir lib/depot.php pour le balisage. */
.depot { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.depot-declencheur { position: relative; display: inline-flex; cursor: pointer; max-width: 100%; }
.depot-input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: 0;
    opacity: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
}
.depot-bouton {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    font-size: 0.8rem; font-weight: 600; line-height: 1.2;
    color: var(--color-primary);
    background: var(--color-white);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.depot-icone { font-size: 0.95rem; line-height: 1; }
.depot-declencheur:hover .depot-bouton { border-color: var(--color-primary); background: var(--color-primary-50); }
.depot-input:focus-visible + .depot-bouton { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Une seule ligne, toujours, même vide : sans hauteur réservée, la ligne du
   formulaire grandirait au moment où l'on choisit un fichier et les champs
   voisins se décaleraient d'une rangée à l'autre. Le message entier reste
   lisible en infobulle. */
.depot-nom {
    max-width: 100%;
    min-height: 1.15em;
    font-size: 0.75rem;
    line-height: 1.15;
    color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Fichier choisi : le bouton cesse d'être en pointillé — quelque chose est
   dedans — et le nom passe au vert. */
.depot.est-choisi .depot-bouton {
    border-style: solid;
    border-color: #1F7A4D; color: #1F7A4D;
    background: #E3F3EA;
}
.depot.est-choisi .depot-nom { color: #1F7A4D; font-weight: 600; }
/* Refusé sur place : trop lourd, ou pas un PDF/JPG/PNG. Le message tient sur
   plusieurs lignes, il vaut mieux le lire en entier que le voir tronqué. */
.depot.est-refuse .depot-bouton { border-style: solid; border-color: var(--color-error); color: var(--color-error); }
.depot.est-refuse .depot-nom { color: var(--color-error); font-weight: 600; }


.justif-etat {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
/* #1F7A4D plutôt que la variable de succès : sur le fond pâle des cartes,
   celle-ci tombe sous 4,5:1 en petit corps gras. */
.justif-verifie { background: #E3F3EA; color: #1F7A4D; }
.justif-recu    { background: var(--color-light); color: var(--color-text-light); }

.assoc-ligne {
    padding: var(--space-md);
    background: var(--color-light);
    border-radius: var(--radius-md);
}
.assoc-champs {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-left: 26px;   /* aligné sous le libellé, pas sous la case à cocher */
}
.form-label-mini {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}
@media (max-width: 640px) {
    .assoc-champs { grid-template-columns: 1fr; padding-left: 0; }
}

/* ---- Association proposée par un coach -----------------------------------
   Aucune liste ne contient toutes les associations et tous les ordres. Le
   coach peut en ajouter une ; elle part alors en attente de vérification et
   n'apparaît pas sur son profil public tant que nous ne l'avons pas activée. */
.assoc-autre {
    border: 1px dashed var(--color-border);
    background: var(--color-white);
}
.assoc-nouvelle {
    border-left: 3px solid var(--color-secondary);
    position: relative;
}
.assoc-identite {
    display: grid;
    grid-template-columns: 2fr 90px 1.6fr;
    gap: var(--space-sm);
}
.assoc-nouvelle .assoc-champs { padding-left: 0; }
.assoc-retirer {
    position: absolute;
    top: var(--space-sm); right: var(--space-sm);
    border: 0; background: none; cursor: pointer;
    color: var(--color-error); font-size: 0.9rem; line-height: 1;
    padding: 4px 6px;
}
@media (max-width: 640px) {
    .assoc-identite { grid-template-columns: 1fr; }
}

/* ---- Navigation de second niveau (onglets dans une page) -----------------
   Des pastilles dans un rail, et non un trait souligné : la barre de section
   de l'espace coach (.nav-coach) utilise déjà le trait, et deux barres
   soulignées l'une au-dessus de l'autre se lisent comme deux navigations
   concurrentes. La forme dit le rang. Sert aux onglets de la fiche coach et à
   ceux des ressources. */
.onglets {
    display: inline-flex;
    gap: 2px;
    max-width: 100%;
    margin-bottom: var(--space-xl);
    padding: 4px;
    background: var(--color-light);
    border-radius: var(--radius-full);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.onglets::-webkit-scrollbar { display: none; }

.onglet {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;          /* l'icône ne colle pas au libellé */
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: none;
    padding: 9px var(--space-md);
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.onglet:hover { color: var(--color-primary); background: rgba(107, 45, 66, 0.07); }
.onglet:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.onglet.est-actif {
    color: var(--color-white);
    background: var(--color-primary);
}
.onglet.est-actif:hover { background: var(--color-primary); }


@media (max-width: 720px) {
    .onglets { display: flex; border-radius: var(--radius-lg); }
    .onglet { font-size: 0.82rem; padding: 9px var(--space-sm); }
}

/* ---- Barre de sections de l'espace coach ---------------------------------
   Collante sous la barre du site : où qu'on soit dans une page longue, les
   autres sections restent à un clic. Elle porte le décalage de la barre fixe
   (margin-top), ce qui évite à chaque page de le faire — d'où la règle
   d'adjacence plus bas, qui l'ôte au .dashboard qui la suit.

   Rang visuel : trait souligné, pleine largeur, sur fond blanc contre le gris
   du tableau de bord. Les navigations internes à une page sont des pastilles
   (.onglets), jamais un trait : deux barres soulignées se liraient comme deux
   navigations de même rang. */
/* UNE SEULE LARGEUR pour tout l'espace coach. Les pages fixaient chacune la
   leur en style en ligne — 900 px pour le profil, les disponibilités et les
   revenus, 700 px pour l'aide, 1200 px par défaut ailleurs — si bien que le
   contenu changeait de laisse d'une section à l'autre, et ne s'alignait pas
   avec la barre de navigation qui les surmonte toutes.

   1040 px : assez large pour les sept colonnes du calendrier et les trois
   d'une grille de vidéos, assez étroit pour qu'un champ de formulaire ne
   traverse pas l'écran. La barre s'y aligne, ce qui est le point. */
:root { --container-espace: 1040px; }
.nav-coach .container,
.nav-coach + .dashboard .container { max-width: var(--container-espace); }

.nav-coach {
    position: sticky;
    top: var(--navbar-height);
    z-index: 900;
    margin-top: var(--navbar-height);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}
.nav-coach .container {
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.nav-coach .container::-webkit-scrollbar { display: none; }

.nav-coach-lien {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 15px 10px 13px;   /* dix entrées doivent tenir dans 1040 px */
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;   /* le trait actif recouvre celui de la barre */
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.nav-coach-lien:hover { color: var(--color-primary); background: var(--color-light); }
.nav-coach-lien:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.nav-coach-lien.est-actif { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Le point ambre : il manque quelque chose de ce côté. */
.nav-coach-point {
    flex: 0 0 auto;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-warning);
    box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.22);
}

/* La barre porte désormais le décalage de la barre fixe du site : la page qui
   la suit ne doit pas l'ajouter une seconde fois. */
.nav-coach + .dashboard { padding-top: var(--space-xl); }

@media (max-width: 720px) {
    .nav-coach-lien { font-size: 0.85rem; padding: 13px 9px 11px; }
}

/* ---- Bandeau de confirmation --------------------------------------------
   Il était rendu tout en haut du document, c'est-à-dire ENTIÈREMENT sous la
   barre de navigation fixe : personne ne l'a jamais vu. Vérifié le 18
   septembre 2026 — « Profil enregistré avec succès ! » occupait les 55
   premiers pixels de la page, la barre du site en fait 72.

   Il passe donc en surimpression, juste sous la barre, au-dessus de tout le
   reste. Rien ne se déplace, aucune page n'a son décalage à revoir. Le
   message de succès s'efface seul ; celui d'erreur attend qu'on le ferme. */
.alert-flash {
    position: fixed;
    top: var(--navbar-height);
    left: 0; right: 0;
    z-index: 1200;
    padding: var(--space-md) 0;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    animation: cc-flash-entre 0.28s ease-out;
}
@keyframes cc-flash-entre {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.alert-flash.s-efface { transform: translateY(-12px); opacity: 0; transition: transform 0.3s ease-in, opacity 0.3s ease-in; }
.alert-flash .container { display: flex; align-items: center; gap: var(--space-md); }
.alert-flash-texte { flex: 1; }
.alert-flash-fermer {
    flex: 0 0 auto;
    appearance: none; border: 0; background: none; cursor: pointer;
    font-size: 1.1rem; line-height: 1; padding: 4px 6px;
    color: inherit; opacity: 0.65;
}
.alert-flash-fermer:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .alert-flash { animation: none; }
    .alert-flash.s-efface { transition: none; }
}

/* Le bloc « Changer le mot de passe » suit le bouton d'enregistrement du
   profil : il lui faut de l'air pour qu'on ne les confonde pas. L'attribut
   remplace un style en ligne devenu impossible à cumuler avec le masquage
   des sections. */
[data-marge-haute] { margin-top: var(--space-2xl); }


/* ==========================================================================
   MARQUES DE CONFIANCE
   ==========================================================================
   Deux objets distincts, volontairement d'un poids visuel tres different.

   Le badge « vérifié » ne dit pas que le coach est bon : il dit qu'un tiers a
   regardé la pièce. C'est une information, pas une décoration — d'où sa
   petite taille et sa couleur unique.

   Le sceau de l'école, lui, a le droit d'être vu : il est rare (15 coachs sur
   24) et il porte une marque déposée. */

.badge-verifie {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 9px 2px 7px;
    border-radius: 20px;
    background: #e8f8f5;
    color: #1e8449;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: 2px;
}

.badge-verifie svg { width: 11px; height: 11px; flex: none; }

.sceau-cq {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-lg);
    text-align: center;
}

.sceau-cq img { display: block; width: 88px; height: 88px; }

/* 88 px n'est pas un chiffre rond par hasard : en dessous de 80, le mot
   « COACHING QUÉBEC » gravé sur le pourtour cesse d'être lisible et le sceau
   n'est plus qu'une pastille dorée. */
.sceau-cq span {
    max-width: 160px;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   RÉSEAUX SOCIAUX DU COACH
   --------------------------------------------------------------------------
   Glyphes monochromes qui prennent la couleur du texte. Les logos officiels
   sont en couleurs ; six pastilles bleu, rose, rouge et noir au milieu d'une
   page bordeaux et or feraient tache, et le lien se reconnaît très bien à sa
   forme seule. */

.reseaux-coach {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: var(--space-md);
}

.reseaux-coach a {
    display: inline-flex;
    color: var(--color-text-muted);
    transition: color 0.15s ease, transform 0.15s ease;
}

.reseaux-coach a:hover,
.reseaux-coach a:focus-visible { color: var(--color-primary); transform: translateY(-1px); }

.reseaux-coach svg { display: block; width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
    .reseaux-coach a { transition: color 0.15s ease; }
    .reseaux-coach a:hover, .reseaux-coach a:focus-visible { transform: none; }
}