/* =========================================================
   LAUSADENT – Styles principaux
   Identité : dentaire / professionnel / moderne
   Thème : Bleu cristal dentaire
   Police : Oxanium (Google Fonts)
   ========================================================= */

/* =========================================================
   Maintenance Banner
   ========================================================= */
.maintenance-banner {
    position: fixed;
    top: auto;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(110px);
    z-index: 9999;
    background: rgba(185, 28, 28, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    padding: 16px 20px 10px;
    max-width: 520px;
    width: calc(100% - 32px);
    box-shadow: 0 10px 40px rgba(185, 28, 28, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.maintenance-banner.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.maintenance-banner.hiding {
    transform: translateX(-50%) translateY(110px);
    opacity: 0;
    pointer-events: none;
}

.maintenance-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.maintenance-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0;
    color: white;
}

.maintenance-text {
    flex: 1;
}

.maintenance-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.maintenance-message {
    display: block;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

.maintenance-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    margin-top: -2px;
}

.maintenance-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.maintenance-progress {
    margin-top: 10px;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0;
    overflow: hidden;
}

.maintenance-progress-fill {
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0;
    transition: width 0.1s linear;
}

@media (max-width: 480px) {
    .maintenance-banner {
        top: auto;
        bottom: 14px;
        padding: 14px 16px 8px;
        border-radius: 0;
    }

    .maintenance-icon {
        display: none;
    }

    .maintenance-title {
        font-size: 0.78rem;
    }

    .maintenance-message {
        font-size: 0.78rem;
    }
}

/* Reset + police globale Oxanium */
*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: 'Oxanium', sans-serif;
}

html {
    scroll-behavior: smooth;
    background: #0e7490;
}

body {
    margin: 0;
    background-color: #f8fbfd;
    color: #334155;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Palette cristal dentaire */
:root {
    --color-bg: #f8fbfd;
    --color-bg-pure: #ffffff;
    --color-surface: #ffffff;
    --color-surface-soft: #f0f7fa;
    --color-border: #b8c9d4;
    --color-border-light: #cdd8df;
    --color-primary: #0891b2;           /* cyan cristal */
    --color-primary-dark: #0e7490;      /* cyan foncé */
    --color-primary-light: #22d3ee;     /* cyan clair */
    --color-primary-soft: #67e8f9;      /* cyan très clair */
    --color-accent: #06b6d4;            /* turquoise */
    --color-accent-light: #a5f3fc;      /* turquoise clair */
    --color-text-dark: #0f172a;
    --color-text-main: #334155;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    --color-success: #10b981;
    --color-danger: #ef4444;
    --radius-lg: 0;
    --radius-md: 0;
    --radius-sm: 0;
    --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.18);
    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.12);
    --transition-fast: 180ms ease-out;
    --transition-base: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Liens */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

/* Layout de base */
.page-main {
    padding-top: 80px;
    flex: 1 0 auto;
}

.section {
    padding: 72px 24px;
}

.section-header {
    max-width: 980px;
    margin: 0 auto 40px auto;
}

.section-header h1,
.section-header h2 {
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 600;
}

.section-header p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Grilles */
.cards-grid {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.focus-grid {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* =========================================================
   Header / Navigation
   ========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    backdrop-filter: blur(16px);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(248, 251, 253, 0.95));
    border-bottom: 1px solid var(--color-border-light);
    z-index: 10003;
    box-shadow: 0 1px 8px rgba(8, 145, 178, 0.04);
}

.header-inner {
    width: 100%;
    padding: 14px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Titre de site (pas de logo graphique) */
.site-brand {
    display: flex;
    align-items: center;
}

.site-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.site-logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 50px;
    width: auto;
    transition: opacity var(--transition-base);
}

.site-logo:hover .logo-img {
    opacity: 1;
}

.site-title {
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: var(--color-primary-dark);
    padding: 6px 14px;
    border-radius: 0;
    border: 1px solid var(--color-border);
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);
    transition: all var(--transition-base);
}

.site-title:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.1);
}

.site-slogan {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding-left: 14px;
    font-weight: 500;
}

/* Menu */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
}

.nav-link {
    position: relative;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 6px 0;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-primary);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 0;
    transition: width var(--transition-base);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active {
    color: var(--color-primary);
    font-weight: 600;
}

.nav-link.active::after {
    width: 100%;
}

/* =========================================================
   Préchargeur : dent 3D usinée avec fraise et copeaux
   ========================================================= */

.preloader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(145deg, #0891b2 0%, #0e7490 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 520ms ease-out, transform 520ms ease-out;
    perspective: 1000px;
    overflow: hidden;
    display: none !important;
}

.preloader-hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.preloader-logo {
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 10;
}

.preloader-logo-img {
    height: 50px;
    width: auto;
}

.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* =========================================================
   Scène CNC 5 axes - Usinage Zircone Ultra-Réaliste
   ========================================================= */

.cnc-viewport {
    position: relative;
    width: 340px;
    height: 340px;
    transform-style: preserve-3d;
    perspective: 500px;
    transform: scale(1.4);
    overflow: visible;
}

/* ============ SUPPORT CNC CHROME BRILLANT ============ */
.cnc-chuck {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%) rotateX(62deg) rotateY(-5deg);
    width: 220px;
    height: 220px;
    transform-style: preserve-3d;
    animation: chuckMove 6s ease-in-out infinite;
}

/* Corps du support */
.chuck-body {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Base profonde du mandrin */
.chuck-base {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg,
        #2a2a2a 0%,
        #4a4a4a 20%,
        #3a3a3a 50%,
        #1a1a1a 100%);
    transform: translateZ(-45px);
    box-shadow: 
        inset 0 0 40px rgba(0, 0, 0, 0.6),
        0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Anneau extérieur chrome brillant */
.chuck-outer-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 120deg,
        #4a4a4a 0deg,
        #888888 20deg,
        #c0c0c0 40deg,
        #ffffff 50deg,
        #e8e8e8 60deg,
        #c0c0c0 80deg,
        #909090 100deg,
        #5a5a5a 120deg,
        #3a3a3a 150deg,
        #5a5a5a 180deg,
        #909090 200deg,
        #c8c8c8 220deg,
        #f0f0f0 240deg,
        #ffffff 250deg,
        #d8d8d8 260deg,
        #a0a0a0 280deg,
        #6a6a6a 300deg,
        #4a4a4a 330deg,
        #4a4a4a 360deg
    );
    transform: translateZ(-35px);
    box-shadow: 
        inset 0 8px 20px rgba(255, 255, 255, 0.4),
        inset 0 -8px 20px rgba(0, 0, 0, 0.3);
}

/* Corps cylindrique principal chrome miroir */
.chuck-cylinder {
    position: absolute;
    top: 4%;
    left: 4%;
    width: 92%;
    height: 92%;
    border-radius: 50%;
    background: conic-gradient(
        from 90deg,
        #505050 0deg,
        #909090 15deg,
        #d0d0d0 30deg,
        #f5f5f5 45deg,
        #ffffff 55deg,
        #f0f0f0 65deg,
        #c8c8c8 80deg,
        #a0a0a0 100deg,
        #707070 120deg,
        #505050 140deg,
        #404040 160deg,
        #505050 180deg,
        #808080 200deg,
        #b8b8b8 220deg,
        #e0e0e0 240deg,
        #f8f8f8 255deg,
        #ffffff 265deg,
        #e8e8e8 280deg,
        #b0b0b0 300deg,
        #787878 320deg,
        #505050 340deg,
        #505050 360deg
    );
    transform: translateZ(-25px);
    box-shadow: 
        inset 0 10px 25px rgba(255, 255, 255, 0.5),
        inset 0 -10px 25px rgba(0, 0, 0, 0.25);
}

/* Anneau intermédiaire - détail chrome */
.chuck-mid-ring {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: conic-gradient(
        from 60deg,
        #606060 0deg,
        #a8a8a8 25deg,
        #e0e0e0 50deg,
        #ffffff 70deg,
        #f0f0f0 90deg,
        #b8b8b8 115deg,
        #787878 140deg,
        #484848 165deg,
        #585858 190deg,
        #909090 215deg,
        #c8c8c8 240deg,
        #f0f0f0 265deg,
        #ffffff 285deg,
        #d8d8d8 310deg,
        #909090 335deg,
        #606060 360deg
    );
    transform: translateZ(-15px);
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow: 
        inset 0 6px 18px rgba(255, 255, 255, 0.45),
        inset 0 -6px 18px rgba(0, 0, 0, 0.2),
        0 0 0 3px rgba(80, 80, 80, 0.3);
}

/* Surface supérieure chrome miroir */
.chuck-top-surface {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 25% 25%,
        #ffffff 0%,
        #f0f0f0 8%,
        #d8d8d8 18%,
        #b8b8b8 30%,
        #989898 45%,
        #808080 60%,
        #686868 75%,
        #505050 90%,
        #404040 100%);
    transform: translateZ(-5px);
    box-shadow: 
        inset 5px 5px 20px rgba(255, 255, 255, 0.6),
        inset -3px -3px 15px rgba(0, 0, 0, 0.15);
}

/* Rainures décoratives concentriques */
.chuck-grooves {
    position: absolute;
    top: 18%;
    left: 18%;
    width: 64%;
    height: 64%;
    border-radius: 50%;
    background: transparent;
    transform: translateZ(-4px);
    box-shadow:
        inset 0 0 0 4px rgba(120, 120, 120, 0.15),
        inset 0 0 0 10px rgba(100, 100, 100, 0.1),
        inset 0 0 0 16px rgba(120, 120, 120, 0.12),
        inset 0 0 0 22px rgba(100, 100, 100, 0.08),
        inset 0 0 0 28px rgba(120, 120, 120, 0.1);
}

/* Rebord intérieur brillant */
.chuck-inner-rim {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(-2px);
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        #e0e0e0 0%,
        #c0c0c0 25%,
        #909090 50%,
        #707070 75%,
        #585858 100%);
    box-shadow:
        inset 3px 3px 12px rgba(255, 255, 255, 0.5),
        inset -2px -2px 10px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(180, 180, 180, 0.4);
}

/* Rebord intérieur - détail central */
.chuck-inner-rim::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 165px;
    height: 165px;
    border-radius: 50%;
    border: 2px solid rgba(200, 200, 200, 0.5);
    box-shadow: 
        inset 0 0 8px rgba(255, 255, 255, 0.3),
        0 0 5px rgba(0, 0, 0, 0.1);
}

/* Point central du mandrin */
.chuck-inner-rim::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffffff 0%,
        #d0d0d0 30%,
        #909090 60%,
        #606060 100%);
    box-shadow: 
        inset 1px 1px 4px rgba(255, 255, 255, 0.7),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Reflet principal brillant */
.chuck-highlight {
    position: absolute;
    top: 12%;
    left: 15%;
    width: 45%;
    height: 35%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 40% 40%,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.5) 25%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 70%);
    transform: translateZ(1px) rotate(-15deg);
    pointer-events: none;
}

/* Reflet secondaire */
.chuck-highlight-secondary {
    position: absolute;
    bottom: 18%;
    right: 12%;
    width: 30%;
    height: 20%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.15) 40%,
        transparent 70%);
    transform: translateZ(1px) rotate(25deg);
    pointer-events: none;
}

/* ============ DISQUE FLOTTANT (MAINTENU PAR AIMANT INVISIBLE) ============ */
.floating-disc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(62deg) rotateY(-5deg);
    width: 220px;
    height: 220px;
    transform-style: preserve-3d;
    animation: chuckMove 6s ease-in-out infinite;
}

/* ============ DISQUE DE ZIRCONE 98mm ============ */
/* ============ DISQUE DE ZIRCONE BLANCHE 98mm x 18mm ============ */
.zr-disc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 175px;
    height: 175px;
    transform-style: preserve-3d;
}

/* Surface du disque - ZIRCONE BLANCHE COMPLÈTE */
.disc-top {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: 
        radial-gradient(ellipse at 30% 25%,
            rgba(255, 255, 255, 1) 0%,
            transparent 40%),
        radial-gradient(ellipse at 70% 70%,
            rgba(250, 250, 255, 0.6) 0%,
            transparent 35%),
        radial-gradient(ellipse at 50% 50%,
            #ffffff 0%,
            #fefefe 15%,
            #fcfcfc 30%,
            #f9f9f9 50%,
            #f5f5f5 70%,
            #f0f0f0 85%,
            #ebebeb 100%);
    transform: translateZ(18px);
    box-shadow:
        inset 0 0 60px rgba(255, 255, 255, 1),
        inset 0 0 30px rgba(250, 250, 255, 0.9),
        0 3px 10px rgba(0, 0, 0, 0.15);
}

/* Texture pré-frittée de la zircone */
.disc-texture {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translateZ(18.5px);
    background: 
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0px,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 2px
        );
    pointer-events: none;
}

/* Épaisseur du disque (18mm) - Tranche extérieure avec bas bleu */
.disc-edge {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg,
        #f4f4f4 0%,
        #eaeaea 12%,
        #e0e0e0 28%,
        #d5d5d5 45%,
        #a8c8e8 65%,
        #7ab3d9 80%,
        #5a9fcf 92%,
        #4a90c2 100%);
    transform: translateZ(9px);
    box-shadow:
        inset 0 -10px 25px rgba(50, 120, 180, 0.25),
        inset 0 10px 20px rgba(255, 255, 255, 0.75),
        inset 6px 0 12px rgba(255, 255, 255, 0.5),
        inset -6px 0 12px rgba(100, 150, 200, 0.35),
        0 12px 35px rgba(0, 0, 0, 0.22),
        0 6px 18px rgba(50, 100, 150, 0.15);
}

/* Rebord périphérique 3D (épaulement) avec bas bleu */
.disc-rim-3d {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid;
    border-color: #e8e8e8 #b8d4e8 #4a90c2 #b8d4e8;
    transform: translateZ(0px);
    box-sizing: border-box;
    box-shadow:
        inset 0 0 8px rgba(0, 0, 0, 0.1),
        0 3px 10px rgba(50, 100, 150, 0.2);
}

/* ============ ZONE D'USINAGE - CREUX CIRCULAIRE 70mm ============ */
.milling-cavity {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(19px);
    width: 125px;
    height: 125px;
    border-radius: 50%;
    overflow: visible;
}

/* Fond du creux - OMBRE CIRCULAIRE 70mm */
.cavity-floor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%,
        #e5e5e5 0%,
        #dcdcdc 30%,
        #d0d0d0 60%,
        #c5c5c5 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 10px 30px rgba(0, 0, 0, 0.28),
        inset 0 -8px 20px rgba(255, 255, 255, 0.35),
        inset 8px 0 20px rgba(0, 0, 0, 0.18),
        inset -8px 0 20px rgba(0, 0, 0, 0.18);
}

/* Rebord usiné du creux - contour circulaire */
.cavity-shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 2px solid rgba(190, 190, 195, 0.6);
    box-shadow:
        inset 0 5px 15px rgba(255, 255, 255, 0.5),
        inset 0 -5px 18px rgba(0, 0, 0, 0.3),
        inset 5px 0 12px rgba(255, 255, 255, 0.2),
        inset -5px 0 12px rgba(0, 0, 0, 0.2),
        0 2px 10px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Reflet intérieur du rebord supérieur */
.cavity-shadow::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 15%;
    right: 15%;
    height: 12px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%);
    border-radius: 50%;
}

/* ============ DENTS USINÉES DANS LE CREUX ============ */
/* Arcade dentaire - 8 dents centrées dans le cercle 70mm */
.dental-arch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 80px;
}

/* Style de base des dents - Zircone usinée polie */
.crown {
    position: absolute;
    transform-style: preserve-3d;
}

/* Corps de la dent - ZIRCONE BLANCHE avec relief */
.crown-body {
    width: 100%;
    height: 100%;
    background: linear-gradient(165deg,
        #ffffff 0%,
        #fefefe 20%,
        #fafafa 45%,
        #f5f5f5 70%,
        #f0f0f0 100%);
    border-radius: 40% 40% 48% 48% / 30% 30% 68% 68%;
    box-shadow:
        /* Lumière interne - relief de la dent */
        inset 0 6px 18px rgba(255, 255, 255, 1),
        inset 0 -6px 15px rgba(180, 180, 185, 0.4),
        inset 4px 0 10px rgba(255, 255, 255, 0.9),
        inset -4px 0 10px rgba(160, 160, 165, 0.3),
        /* Ombres portées pour montrer la profondeur */
        0 3px 8px rgba(0, 0, 0, 0.35),
        0 6px 15px rgba(0, 0, 0, 0.25),
        2px 3px 6px rgba(0, 0, 0, 0.2),
        -1px 2px 4px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Reflet brillant sur la dent */
.crown-highlight {
    position: absolute;
    top: 2px;
    left: 8%;
    width: 55%;
    height: 50%;
    background: 
        linear-gradient(135deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.8) 25%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%);
    border-radius: 50% 50% 55% 45%;
}

/* Sillon occlusal (détail anatomique) - plus visible */
.crown::after {
    content: '';
    position: absolute;
    top: 38%;
    left: 15%;
    width: 70%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(160, 160, 165, 0.4) 12%,
        rgba(140, 140, 145, 0.55) 50%,
        rgba(160, 160, 165, 0.4) 88%,
        transparent 100%);
    border-radius: 50%;
}

/* ============ ATTACHES DE MAINTIEN (sprues) ============ */
/* Attache supérieure - vers le haut du disque */
.crown-attach-top {
    position: absolute;
    width: 3px;
    height: 15px;
    background: linear-gradient(180deg,
        #f5f5f5 0%,
        #ededed 30%,
        #e0e0e0 70%,
        #d5d5d5 100%);
    border-radius: 0;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow:
        inset 1px 0 2px rgba(255, 255, 255, 0.7),
        inset -1px 0 2px rgba(150, 150, 150, 0.3),
        1px 2px 4px rgba(0, 0, 0, 0.25);
}

/* Attache latérale - vers le côté du disque */
.crown-attach-side {
    position: absolute;
    width: 15px;
    height: 2.5px;
    background: linear-gradient(90deg,
        #d5d5d5 0%,
        #e0e0e0 30%,
        #ededed 70%,
        #f5f5f5 100%);
    border-radius: 0;
    top: 35%;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(150, 150, 150, 0.3),
        2px 1px 4px rgba(0, 0, 0, 0.25);
}

/* Attaches orientées vers la gauche (dents gauches) */
.crown-attach-side.left {
    right: 100%;
    margin-right: -2px;
    background: linear-gradient(90deg,
        #f5f5f5 0%,
        #ededed 30%,
        #e0e0e0 70%,
        #d5d5d5 100%);
}

/* Attaches orientées vers la droite (dents droites) */
.crown-attach-side.right {
    left: 100%;
    margin-left: -2px;
}

/* ============ 8 DENTS SUPÉRIEURES USINÉES ============ */

/* Incisive centrale gauche (11) */
.crown.c1 {
    left: 42px;
    top: 12px;
    width: 12px;
    height: 22px;
    transform: rotate(-2deg);
}

/* Incisive centrale droite (21) */
.crown.c2 {
    left: 56px;
    top: 12px;
    width: 12px;
    height: 22px;
    transform: rotate(2deg);
}

/* Incisive latérale gauche (12) */
.crown.c3 {
    left: 28px;
    top: 16px;
    width: 11px;
    height: 19px;
    transform: rotate(-8deg);
}

/* Incisive latérale droite (22) */
.crown.c4 {
    left: 71px;
    top: 16px;
    width: 11px;
    height: 19px;
    transform: rotate(8deg);
}

/* Canine gauche (13) */
.crown.c5 {
    left: 14px;
    top: 24px;
    width: 11px;
    height: 21px;
    transform: rotate(-15deg);
}

.crown.c5 .crown-body {
    border-radius: 38% 38% 42% 58% / 28% 28% 72% 72%;
}

/* Canine droite (23) */
.crown.c6 {
    left: 85px;
    top: 24px;
    width: 11px;
    height: 21px;
    transform: rotate(15deg);
}

.crown.c6 .crown-body {
    border-radius: 38% 38% 58% 42% / 28% 28% 72% 72%;
}

/* Première prémolaire gauche (14) */
.crown.c7 {
    left: 4px;
    top: 40px;
    width: 10px;
    height: 16px;
    transform: rotate(-24deg);
}

.crown.c7 .crown-body {
    border-radius: 42% 42% 45% 45% / 32% 32% 52% 52%;
}

/* Première prémolaire droite (24) */
.crown.c8 {
    left: 96px;
    top: 40px;
    width: 10px;
    height: 16px;
    transform: rotate(24deg);
}

.crown.c8 .crown-body {
    border-radius: 42% 42% 45% 45% / 32% 32% 52% 52%;
}

/* ============ ORIENTATIONS DES ATTACHES PAR DENT ============ */

/* Attaches pour incisives centrales - vers le haut */
.crown.c1 .crown-attach-top,
.crown.c2 .crown-attach-top {
    height: 18px;
    top: -16px;
}

/* Attaches pour incisives latérales */
.crown.c3 .crown-attach-top { height: 20px; top: -18px; transform: translateX(-50%) rotate(8deg); }
.crown.c4 .crown-attach-top { height: 20px; top: -18px; transform: translateX(-50%) rotate(-8deg); }

/* Attaches pour canines */
.crown.c5 .crown-attach-top { height: 22px; top: -20px; transform: translateX(-50%) rotate(15deg); }
.crown.c6 .crown-attach-top { height: 22px; top: -20px; transform: translateX(-50%) rotate(-15deg); }

/* Attaches pour prémolaires */
.crown.c7 .crown-attach-top { height: 20px; top: -18px; transform: translateX(-50%) rotate(25deg); }
.crown.c8 .crown-attach-top { height: 20px; top: -18px; transform: translateX(-50%) rotate(-25deg); }

/* Attaches latérales pour dents gauches */
.crown.c3 .crown-attach-side.left,
.crown.c5 .crown-attach-side.left,
.crown.c7 .crown-attach-side.left {
    width: 15px;
}

/* Attaches latérales pour dents droites */
.crown.c4 .crown-attach-side.right,
.crown.c6 .crown-attach-side.right,
.crown.c8 .crown-attach-side.right {
    width: 15px;
}

/* Zone d'usinage en cours (effet lumineux sur la dent active) */
.crown.cutting .crown-body {
    box-shadow:
        inset 0 6px 18px rgba(255, 255, 255, 1),
        inset 0 -6px 14px rgba(150, 150, 155, 0.4),
        0 0 15px rgba(200, 220, 255, 0.65),
        0 0 8px rgba(255, 255, 255, 0.85),
        0 4px 10px rgba(0, 0, 0, 0.7),
        0 8px 20px rgba(0, 0, 0, 0.5);
}

.cutting-glow {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: 30%;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(200, 230, 255, 0.6) 0%,
        rgba(150, 200, 255, 0.3) 50%,
        transparent 100%);
    border-radius: 50%;
    animation: cuttingPulse 0.3s ease-in-out infinite;
}

/* Copeaux dans le creux */
.cavity-chips {
    position: absolute;
    top: 60%;
    left: 20%;
    width: 60%;
    height: 30%;
    pointer-events: none;
}

.cavity-chips span {
    position: absolute;
    display: block;
    width: 2px;
    height: 1.5px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.85;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

.cavity-chips span:nth-child(1) { left: 10%; top: 20%; }
.cavity-chips span:nth-child(2) { left: 30%; top: 40%; }
.cavity-chips span:nth-child(3) { left: 50%; top: 15%; }
.cavity-chips span:nth-child(4) { left: 70%; top: 35%; }
.cavity-chips span:nth-child(5) { left: 25%; top: 60%; }
.cavity-chips span:nth-child(6) { left: 60%; top: 55%; }
.cavity-chips span:nth-child(7) { left: 40%; top: 30%; }
.cavity-chips span:nth-child(8) { left: 80%; top: 50%; }
.cavity-chips span:nth-child(9) { left: 15%; top: 45%; }

@keyframes cuttingPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

/* ============ ZONE DE COUPE CENTRÉE ============ */
.cut-zone {
    position: absolute;
    top: 42%;
    left: 38%;
    width: 18px;
    height: 18px;
    transform: translateZ(22px);
}

.cut-glow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(220, 240, 255, 0.95) 25%,
        rgba(180, 220, 255, 0.7) 50%,
        rgba(140, 190, 255, 0.3) 75%,
        transparent 100%);
    border-radius: 50%;
    animation: cutGlow 0.25s ease-in-out infinite;
    box-shadow: 
        0 0 20px rgba(150, 200, 255, 0.9),
        0 0 40px rgba(120, 180, 255, 0.5);
}

.cut-spark {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 3px;
    height: 3px;
    background: #ffffff;
    border-radius: 50%;
    animation: sparkle 0.35s ease-out infinite;
    box-shadow: 0 0 6px #ffffff;
}

.cut-spark.s2 {
    top: 2px;
    left: 10px;
    animation-delay: 0.12s;
}

.cut-spark.s3 {
    top: 10px;
    left: 3px;
    animation-delay: 0.24s;
}

/* ============ TÊTE DE FRAISAGE CENTRÉE ET SYNCHRONISÉE ============ */
.mill-head {
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
    transform-style: preserve-3d;
    transform-origin: bottom center;
    animation: millSync 6s ease-in-out infinite;
    z-index: 20;
}

/* Corps de la broche */
.spindle-body {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 45px;
    background: linear-gradient(90deg,
        #1a1a1a 0%,
        #2d2d2d 15%,
        #3d3d3d 30%,
        #4a4a4a 50%,
        #3d3d3d 70%,
        #2d2d2d 85%,
        #1a1a1a 100%);
    border-radius: 0;
}

/* LED indicateur */
.spindle-body::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88, 0 0 20px rgba(0, 255, 136, 0.6);
    animation: ledPulse 0.8s ease-in-out infinite;
}

/* Ventilation */
.spindle-body::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 5px;
    right: 5px;
    height: 15px;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.5) 2px,
        rgba(0, 0, 0, 0.5) 3.5px
    );
}

/* Nez de broche */
.spindle-nose {
    position: absolute;
    top: 43px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 12px;
    background: linear-gradient(90deg,
        #2a2a2a 0%,
        #4a4a4a 25%,
        #5a5a5a 50%,
        #4a4a4a 75%,
        #2a2a2a 100%);
    border-radius: 0;
}

/* Porte-outil */
.tool-holder {
    position: absolute;
    top: 53px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 16px;
    background: linear-gradient(90deg,
        #404040 0%,
        #606060 25%,
        #757575 50%,
        #606060 75%,
        #404040 100%);
    border-radius: 0;
}

/* Fraise 2.5mm complète */
.end-mill {
    position: absolute;
    top: 67px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 65px;
}

/* Tige */
.mill-shank {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 18px;
    background: linear-gradient(90deg,
        #707070 0%,
        #a0a0a0 30%,
        #c0c0c0 50%,
        #a0a0a0 70%,
        #707070 100%);
    border-radius: 0;
}

/* Partie coupante avec goujures */
.mill-flutes {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 42px;
    background: linear-gradient(90deg,
        #3a4a55 0%,
        #556575 15%,
        #7a8a95 40%,
        #8a9aa8 50%,
        #7a8a95 60%,
        #556575 85%,
        #3a4a55 100%);
    border-radius: 0;
    box-shadow:
        0 0 15px rgba(100, 170, 230, 0.6),
        0 0 30px rgba(80, 150, 210, 0.3);
}

/* Hélices de coupe */
.mill-flutes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -30deg,
        transparent 0px,
        transparent 2px,
        rgba(20, 35, 50, 0.5) 2px,
        rgba(20, 35, 50, 0.5) 3px
    );
    border-radius: 0;
}

/* Reflet métallique */
.mill-flutes::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%);
    border-radius: 0;
}

/* Pointe */
.mill-tip {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: radial-gradient(circle,
        #a0b5c5 0%,
        #708595 50%,
        #506575 100%);
    border-radius: 30% 30% 50% 50%;
    box-shadow:
        0 0 15px rgba(140, 200, 255, 1),
        0 0 30px rgba(100, 170, 240, 0.6),
        0 3px 5px rgba(0, 0, 0, 0.5);
}

/* Effet de rotation */
.spin-effect {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 47px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(160, 190, 220, 0.15) 25%,
        rgba(160, 190, 220, 0.25) 50%,
        rgba(160, 190, 220, 0.15) 75%,
        transparent 100%);
    border-radius: 0;
    animation: spinBlur 0.03s linear infinite;
}

/* ============ STATUT DE CHARGEMENT ============ */
.preloader-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 280px;
}

.preloader-text {
    font-size: 0.85rem;
    color: #ffffff;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    margin-bottom: 12px;
}

/* Barre de chargement */
.loading-bar {
    width: 100%;
    height: 4px;
    background: rgba(8, 145, 178, 0.15);
    border-radius: 0;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.loading-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, 
        var(--color-primary) 0%, 
        var(--color-primary-light) 50%,
        var(--color-primary) 100%);
    border-radius: 0;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 8px rgba(8, 145, 178, 0.4);
}

/* ============ COPEAUX DE ZIRCONE (FRITTAGE BLANC) ============ */
.chips {
    position: absolute;
    top: 42%;
    left: 52%;
    width: 120px;
    height: 280px;
    pointer-events: none;
}

.chips span {
    position: absolute;
    display: block;
    background: linear-gradient(135deg, 
        #ffffff 0%, 
        #fafafa 30%,
        #f2f2f2 100%);
    border-radius: 25% 75% 60% 40%;
    opacity: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chips span:nth-child(1) { width: 4px; height: 2px; animation: chipDrop1 2.8s ease-out infinite 0s; }
.chips span:nth-child(2) { width: 3px; height: 2px; animation: chipDrop2 3.0s ease-out infinite 0.1s; }
.chips span:nth-child(3) { width: 5px; height: 3px; animation: chipDrop3 2.7s ease-out infinite 0.2s; }
.chips span:nth-child(4) { width: 3px; height: 2px; animation: chipDrop4 2.9s ease-out infinite 0.3s; }
.chips span:nth-child(5) { width: 4px; height: 2px; animation: chipDrop5 2.8s ease-out infinite 0.4s; }
.chips span:nth-child(6) { width: 3px; height: 2px; animation: chipDrop6 3.1s ease-out infinite 0.5s; }
.chips span:nth-child(7) { width: 5px; height: 2px; animation: chipDrop7 2.75s ease-out infinite 0.6s; }
.chips span:nth-child(8) { width: 4px; height: 3px; animation: chipDrop8 2.9s ease-out infinite 0.7s; }
.chips span:nth-child(9) { width: 3px; height: 2px; animation: chipDrop9 2.8s ease-out infinite 0.8s; }
.chips span:nth-child(10) { width: 4px; height: 2px; animation: chipDrop10 3.0s ease-out infinite 0.9s; }
.chips span:nth-child(11) { width: 3px; height: 2px; animation: chipDrop11 2.7s ease-out infinite 1.0s; }
.chips span:nth-child(12) { width: 5px; height: 2px; animation: chipDrop12 2.85s ease-out infinite 1.1s; }
.chips span:nth-child(13) { width: 4px; height: 2px; animation: chipDrop1 2.9s ease-out infinite 1.2s; }
.chips span:nth-child(14) { width: 3px; height: 3px; animation: chipDrop3 3.0s ease-out infinite 1.3s; }
.chips span:nth-child(15) { width: 5px; height: 2px; animation: chipDrop5 2.75s ease-out infinite 1.4s; }
.chips span:nth-child(16) { width: 4px; height: 2px; animation: chipDrop7 2.9s ease-out infinite 1.5s; }
.chips span:nth-child(17) { width: 3px; height: 2px; animation: chipDrop9 2.8s ease-out infinite 1.6s; }
.chips span:nth-child(18) { width: 5px; height: 3px; animation: chipDrop11 3.1s ease-out infinite 1.7s; }
.chips span:nth-child(19) { width: 4px; height: 2px; animation: chipDrop2 2.7s ease-out infinite 1.8s; }
.chips span:nth-child(20) { width: 3px; height: 2px; animation: chipDrop4 2.85s ease-out infinite 1.9s; }
.chips span:nth-child(21) { width: 5px; height: 2px; animation: chipDrop6 2.8s ease-out infinite 2.0s; }
.chips span:nth-child(22) { width: 4px; height: 3px; animation: chipDrop8 3.0s ease-out infinite 2.1s; }
.chips span:nth-child(23) { width: 3px; height: 2px; animation: chipDrop10 2.75s ease-out infinite 2.2s; }
.chips span:nth-child(24) { width: 5px; height: 2px; animation: chipDrop12 2.9s ease-out infinite 2.3s; }

/* ============ POUSSIÈRE FINE ============ */
.dust {
    position: absolute;
    top: 45%;
    left: 52%;
    width: 70px;
    height: 70px;
    pointer-events: none;
}

.dust i {
    position: absolute;
    display: block;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(250, 250, 250, 0.7) 40%,
        rgba(245, 245, 245, 0.2) 100%);
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
}

.dust i:nth-child(1) { width: 3px; height: 3px; animation: dustUp1 1.8s ease-out infinite 0s; }
.dust i:nth-child(2) { width: 2px; height: 2px; animation: dustUp2 1.8s ease-out infinite 0.12s; }
.dust i:nth-child(3) { width: 4px; height: 4px; animation: dustUp3 1.8s ease-out infinite 0.24s; }
.dust i:nth-child(4) { width: 2px; height: 2px; animation: dustUp4 1.8s ease-out infinite 0.36s; }
.dust i:nth-child(5) { width: 3px; height: 3px; animation: dustUp1 1.8s ease-out infinite 0.48s; }
.dust i:nth-child(6) { width: 2px; height: 2px; animation: dustUp2 1.8s ease-out infinite 0.6s; }
.dust i:nth-child(7) { width: 3px; height: 3px; animation: dustUp3 1.8s ease-out infinite 0.72s; }
.dust i:nth-child(8) { width: 2px; height: 2px; animation: dustUp4 1.8s ease-out infinite 0.84s; }

/* ============ SOL TRANSPARENT + DÉBRIS ============ */
.floor {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%) rotateX(72deg);
    width: 260px;
    height: 80px;
    transform-style: preserve-3d;
}

.floor-glass {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(230, 240, 250, 0.12) 50%,
        rgba(210, 225, 240, 0.15) 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 0 35px rgba(255, 255, 255, 0.1),
        0 3px 15px rgba(0, 0, 0, 0.08);
}

.debris {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 35px;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(250, 250, 250, 0.8) 30%,
        rgba(245, 245, 245, 0.5) 60%,
        transparent 100%);
    border-radius: 50%;
    animation: debrisAccum 5s ease-in-out infinite;
}

.debris::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background: 
        radial-gradient(circle at 15% 25%, rgba(255,255,255,0.9) 0%, transparent 20%),
        radial-gradient(circle at 50% 40%, rgba(255,255,255,0.85) 0%, transparent 18%),
        radial-gradient(circle at 80% 35%, rgba(255,255,255,0.8) 0%, transparent 16%),
        radial-gradient(circle at 30% 60%, rgba(255,255,255,0.75) 0%, transparent 15%),
        radial-gradient(circle at 65% 65%, rgba(255,255,255,0.7) 0%, transparent 14%),
        radial-gradient(circle at 45% 75%, rgba(255,255,255,0.65) 0%, transparent 12%),
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.6) 0%, transparent 10%),
        radial-gradient(circle at 75% 80%, rgba(255,255,255,0.55) 0%, transparent 10%);
    border-radius: 50%;
}

/* ============ FRITTAGE TOMBANT SOUS LE SUPPORT ============ */
.falling-chips {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 100px;
    height: 200px;
    pointer-events: none;
    z-index: 8;
}

.falling-chips span {
    position: absolute;
    display: block;
    background: linear-gradient(135deg, 
        #ffffff 0%, 
        #f8f8f8 40%,
        #f0f0f0 100%);
    border-radius: 30% 70% 50% 50%;
    opacity: 0;
}

.falling-chips span:nth-child(1) { width: 3px; height: 2px; animation: fallChip1 2.6s ease-out infinite 0s; }
.falling-chips span:nth-child(2) { width: 4px; height: 2px; animation: fallChip2 2.8s ease-out infinite 0.1s; }
.falling-chips span:nth-child(3) { width: 3px; height: 3px; animation: fallChip3 2.5s ease-out infinite 0.2s; }
.falling-chips span:nth-child(4) { width: 4px; height: 2px; animation: fallChip4 2.7s ease-out infinite 0.3s; }
.falling-chips span:nth-child(5) { width: 3px; height: 2px; animation: fallChip5 2.55s ease-out infinite 0.4s; }
.falling-chips span:nth-child(6) { width: 4px; height: 3px; animation: fallChip6 2.8s ease-out infinite 0.5s; }
.falling-chips span:nth-child(7) { width: 3px; height: 2px; animation: fallChip1 2.6s ease-out infinite 0.6s; }
.falling-chips span:nth-child(8) { width: 4px; height: 2px; animation: fallChip2 2.55s ease-out infinite 0.7s; }
.falling-chips span:nth-child(9) { width: 3px; height: 2px; animation: fallChip3 2.7s ease-out infinite 0.8s; }
.falling-chips span:nth-child(10) { width: 4px; height: 3px; animation: fallChip4 2.5s ease-out infinite 0.9s; }
.falling-chips span:nth-child(11) { width: 3px; height: 2px; animation: fallChip5 2.8s ease-out infinite 1.0s; }
.falling-chips span:nth-child(12) { width: 4px; height: 2px; animation: fallChip6 2.6s ease-out infinite 1.1s; }
.falling-chips span:nth-child(13) { width: 3px; height: 2px; animation: fallChip1 2.55s ease-out infinite 1.2s; }
.falling-chips span:nth-child(14) { width: 4px; height: 3px; animation: fallChip2 2.7s ease-out infinite 1.3s; }
.falling-chips span:nth-child(15) { width: 3px; height: 2px; animation: fallChip3 2.6s ease-out infinite 1.4s; }
.falling-chips span:nth-child(16) { width: 4px; height: 2px; animation: fallChip4 2.8s ease-out infinite 1.5s; }
.falling-chips span:nth-child(17) { width: 3px; height: 2px; animation: fallChip5 2.55s ease-out infinite 1.6s; }
.falling-chips span:nth-child(18) { width: 4px; height: 3px; animation: fallChip6 2.7s ease-out infinite 1.7s; }
.falling-chips span:nth-child(19) { width: 3px; height: 2px; animation: fallChip1 2.6s ease-out infinite 1.8s; }
.falling-chips span:nth-child(20) { width: 4px; height: 2px; animation: fallChip2 2.5s ease-out infinite 1.9s; }
.falling-chips span:nth-child(21) { width: 3px; height: 3px; animation: fallChip3 2.8s ease-out infinite 2.0s; }
.falling-chips span:nth-child(22) { width: 4px; height: 2px; animation: fallChip4 2.6s ease-out infinite 2.1s; }
.falling-chips span:nth-child(23) { width: 3px; height: 2px; animation: fallChip5 2.7s ease-out infinite 2.2s; }
.falling-chips span:nth-child(24) { width: 4px; height: 3px; animation: fallChip6 2.55s ease-out infinite 2.3s; }

/* Animations de chute - les copeaux s'arrêtent sur le floor-glass */
@keyframes fallChip1 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 0.95; }
    /* Chute jusqu'au floor-glass */
    55% { transform: translate(-6px, 85px) rotate(280deg); opacity: 0.9; }
    /* Rebond léger */
    60% { transform: translate(-6px, 80px) rotate(285deg); opacity: 0.9; }
    /* Repos sur le floor-glass */
    65% { transform: translate(-6px, 85px) rotate(288deg); opacity: 0.9; }
    100% { transform: translate(-6px, 85px) rotate(288deg); opacity: 0.85; }
}
@keyframes fallChip2 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 0.95; }
    55% { transform: translate(8px, 80px) rotate(-260deg); opacity: 0.9; }
    60% { transform: translate(8px, 75px) rotate(-265deg); opacity: 0.9; }
    65% { transform: translate(8px, 80px) rotate(-268deg); opacity: 0.9; }
    100% { transform: translate(8px, 80px) rotate(-268deg); opacity: 0.85; }
}
@keyframes fallChip3 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 0.95; }
    55% { transform: translate(-3px, 90px) rotate(300deg); opacity: 0.9; }
    60% { transform: translate(-3px, 85px) rotate(305deg); opacity: 0.9; }
    65% { transform: translate(-3px, 90px) rotate(308deg); opacity: 0.9; }
    100% { transform: translate(-3px, 90px) rotate(308deg); opacity: 0.85; }
}
@keyframes fallChip4 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 0.95; }
    55% { transform: translate(5px, 78px) rotate(-280deg); opacity: 0.9; }
    60% { transform: translate(5px, 73px) rotate(-285deg); opacity: 0.9; }
    65% { transform: translate(5px, 78px) rotate(-288deg); opacity: 0.9; }
    100% { transform: translate(5px, 78px) rotate(-288deg); opacity: 0.85; }
}
@keyframes fallChip5 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 0.95; }
    55% { transform: translate(-8px, 83px) rotate(270deg); opacity: 0.9; }
    60% { transform: translate(-8px, 78px) rotate(275deg); opacity: 0.9; }
    65% { transform: translate(-8px, 83px) rotate(278deg); opacity: 0.9; }
    100% { transform: translate(-8px, 83px) rotate(278deg); opacity: 0.85; }
}
@keyframes fallChip6 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 0.95; }
    55% { transform: translate(3px, 87px) rotate(-290deg); opacity: 0.9; }
    60% { transform: translate(3px, 82px) rotate(-295deg); opacity: 0.9; }
    65% { transform: translate(3px, 87px) rotate(-298deg); opacity: 0.9; }
    100% { transform: translate(3px, 87px) rotate(-298deg); opacity: 0.85; }
}

/* Anciens éléments masqués pour compatibilité */
.mill-bed,
.mill-tooth,
.mill-tooth-face,
.mill-tooth-edge,
.mill-spindle,
.mill-spindle-head,
.mill-bur,
.mill-path {
    display: none;
}

/* =========================================================
   Hero & sections Accueil
   ========================================================= */

.hero {
    max-width: 1120px;
    margin: 0 auto;
}

.hero-content {
    background: linear-gradient(145deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);
    border-radius: var(--radius-lg);
    padding: 36px 30px 32px;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-soft);
}

.hero h1 {
    margin: 0 0 12px 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-dark);
    font-weight: 700;
}

.hero-subtitle {
    margin: 0 0 24px 0;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    max-width: 600px;
    line-height: 1.7;
}

.hero-actions {
    margin-bottom: 20px;
}

.hero-meta-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hero-meta-item {
    border-left: 3px solid var(--color-primary-light);
    padding-left: 14px;
}

.hero-meta-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 2px;
}

.hero-meta-value {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-dark);
    font-weight: 500;
}

/* =========================================================
   HOMEPAGE – Redesign
   ========================================================= */

/* Hero */
.hp-hero {
    padding: 60px 48px 80px;
    margin-top: -80px;
    padding-top: 140px;
    background: linear-gradient(145deg, #0b1228 0%, #0e7490 38%, #1d4ed8 72%, #0b1228 100%);
    position: relative;
    overflow: hidden;
}

.hp-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(8, 145, 178, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.hp-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}

.hp-hero-left {
    flex: 1.2;
}

.hp-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-primary);
    margin-bottom: 20px;
    border: 1px solid rgba(8, 145, 178, 0.3);
    padding: 6px 14px;
}

.hp-hero h1 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 24px 0;
    letter-spacing: -0.01em;
}

.hp-hero-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin: 0 0 36px 0;
    max-width: 500px;
}

body:not(.page-accueil) .hp-hero-desc {
    display: none !important;
}

.page-partenaire .hp-hero-desc {
    color: #ffffff !important;
}

.page-nouveautes .hp-hero-desc,
.page-service-technique .hp-hero-desc {
    color: #ffffff !important;
}

.page-apropos .hp-hero-desc,
.page-formations .hp-hero-desc,
.page-contact .hp-hero-desc {
    color: #ffffff !important;
}

.page-accueil .hp-hero-desc {
    color: #ffffff !important;
}

.page-accueil .hp-btn-primary,
.page-accueil .hp-btn-secondary {
    color: #ffffff !important;
}

.page-contact .hp-btn-primary,
.page-contact .hp-btn-secondary {
    color: #ffffff !important;
}

.contact-hours-nowrap {
    white-space: nowrap;
}

.page-service-technique .hp-btn-secondary {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}

.hp-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hp-btn-primary {
    display: inline-block;
    padding: 14px 32px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.hp-btn-primary:hover {
    background: var(--color-primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(8, 145, 178, 0.35);
}

.hp-btn-secondary {
    display: inline-block;
    padding: 14px 32px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.hp-btn-secondary:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.hp-hero-right {
    flex: 0.8;
}

.hp-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.hp-stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 32px 24px;
    text-align: center;
    transition: all var(--transition-base);
}

.hp-stat:hover {
    background: rgba(8, 145, 178, 0.08);
    border-color: rgba(8, 145, 178, 0.2);
}

.hp-stat-num {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary-light);
    line-height: 1;
    margin-bottom: 8px;
}

.hp-stat-label {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Section header shared */
.hp-section-header {
    max-width: 1200px;
    margin: 0 auto 48px;
    padding: 0 24px;
}

.hp-section-header .hp-label {
    margin-bottom: 12px;
}

.hp-section-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
    letter-spacing: -0.01em;
}

/* News section override */
.hp-news {
    padding: 80px 24px;
    background: var(--color-bg);
}

/* Services */
.hp-services {
    padding: 80px 24px;
    background: #ffffff;
}

.hp-services-no-bottom {
    padding-bottom: 0;
}

.hp-services-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 1px 0 0 1px;
}

.hp-service {
    padding: 40px 32px;
    border: 1px solid var(--color-border-light);
    margin-left: -1px;
    margin-top: -1px;
    transition: all var(--transition-base);
    position: relative;
}

.hp-service:hover {
    background: var(--color-surface-soft);
    z-index: 1;
}

.hp-service-num {
    font-size: 2.4rem;
    font-weight: 800;
    color: rgba(8, 145, 178, 0.15);
    line-height: 1;
    margin-bottom: 20px;
    font-variant-numeric: tabular-nums;
}

.hp-service h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hp-service > p {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0 0 20px 0;
}

/* About page: keep bullet sections aligned between cards */
.page-apropos .hp-service {
    display: flex;
    flex-direction: column;
}

.page-apropos .hp-service > p {
    min-height: 8.2rem;
}

/* Formations: aligner proprement les 3 cartes */
.page-formations .hp-service {
    display: flex;
    flex-direction: column;
}

.page-formations .hp-service h3 {
    min-height: 2.6rem;
}

.page-formations .hp-service > p {
    min-height: 7.6rem;
}

.page-formations .hp-service .hp-service-list {
    margin-top: auto;
}

.hp-service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hp-service-list li {
    font-size: 0.82rem;
    color: var(--color-text-main);
    padding: 6px 0;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hp-service-list li::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    flex-shrink: 0;
}

/* Clients */
.hp-clients {
    padding: 80px 24px;
    background: linear-gradient(145deg, #0b1228 0%, #0e7490 38%, #1d4ed8 72%, #0b1228 100%);
}

.hp-clients .hp-section-header h2 {
    color: #ffffff;
}

.hp-clients .hp-label {
    color: var(--color-primary-light);
    border-color: rgba(34, 211, 238, 0.3);
}

.hp-clients-row {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.hp-clients-row-4col {
    grid-template-columns: repeat(4, 1fr);
}

.hp-client {
    padding: 40px 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all var(--transition-base);
}

.hp-client:hover {
    background: rgba(8, 145, 178, 0.08);
    border-color: rgba(8, 145, 178, 0.2);
}

.hp-client-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(8, 145, 178, 0.3);
    color: var(--color-primary-light);
    margin-bottom: 24px;
}

.hp-client h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hp-client p {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.65;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

/* CTA */
.hp-cta {
    padding: 100px 24px;
    background: #ffffff;
    text-align: center;
}

.hp-cta-inner {
    max-width: 600px;
    margin: 0 auto;
}

.hp-cta h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 16px 0;
}

.hp-cta p {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0 0 36px 0;
    line-height: 1.6;
}

.hp-cta .hp-btn-primary {
    padding: 16px 48px;
    font-size: 0.85rem;
}

/* Homepage responsive */
@media (max-width: 1024px) {
    .hp-hero-inner {
        flex-direction: column;
        gap: 48px;
    }

    .hp-hero-left,
    .hp-hero-right {
        flex: none;
        width: 100%;
    }

    .hp-hero {
        padding: 130px 32px 64px;
    }

    .hp-hero h1 {
        font-size: 2rem;
    }

    .hp-services-grid {
        grid-template-columns: 1fr;
    }

    .hp-service {
        margin-left: 0;
    }

    .page-apropos .hp-service > p {
        min-height: auto;
    }

    .hp-clients-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .hp-hero {
        padding: 110px 20px 48px;
    }

    .hp-hero h1 {
        font-size: 1.6rem;
    }

    .hp-hero-desc {
        font-size: 0.9rem;
    }

    .hp-hero-actions {
        flex-direction: column;
    }

    .hp-btn-primary,
    .hp-btn-secondary {
        text-align: center;
        width: 100%;
    }

    .hp-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1px;
    }

    .hp-stat {
        padding: 24px 16px;
    }

    .hp-stat-num {
        font-size: 1.6rem;
    }

    .hp-section-header {
        padding: 0 16px;
    }

    .hp-section-header h2 {
        font-size: 1.3rem;
    }

    .hp-news {
        padding: 56px 16px;
    }

    .hp-services {
        padding: 56px 16px;
    }

    .hp-service {
        padding: 28px 20px;
    }

    .hp-clients {
        padding: 56px 16px;
    }

    .hp-client {
        padding: 28px 20px;
    }

    .hp-cta {
        padding: 64px 20px;
    }

    .hp-cta h2 {
        font-size: 1.4rem;
    }
}

/* =========================================================
   PAGE STYLES – News grid, shared across pages
   ========================================================= */

.pg-news-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}

.pg-news-item {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    transition: all var(--transition-base);
}

.pg-news-item:hover {
    border-color: var(--color-primary-light);
    z-index: 1;
}

.pg-news-visual {
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.pg-news-visual.pg-news-has-img {
    padding: 0;
}

.pg-news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pg-news-visual.pg-news-icon-bg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-news-status {
    position: absolute;
    bottom: 16px;
    right: 16px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pg-news-status-active {
    background: rgba(16, 185, 129, 0.85);
}

.pg-news-status-coming {
    background: rgba(139, 92, 246, 0.85);
}

.pg-news-body {
    padding: 28px 24px;
    flex: 1;
}

.pg-news-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pg-news-year {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pg-news-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 12px 0;
}

.pg-news-body > p {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0 0 16px 0;
}

/* Responsive: news grid */
@media (max-width: 768px) {
    .pg-news-grid {
        grid-template-columns: 1fr;
    }

    .pg-news-visual {
        height: 300px;
    }
}

/* Responsive: 4-col values grid on apropos */
@media (max-width: 1024px) {
    .hp-clients-row-4col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .hp-clients-row-4col {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Section Nouveautes - Grand Bandeau
   ========================================================= */

/* Bandeau principal */
.news-banner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.banner-wrapper {
    overflow: hidden;
    border-radius: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-soft);
}

.banner-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}

.banner-track img {
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.banner-slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
}

.banner-slide .banner-image,
.banner-slide .banner-image *,
.banner-slide .banner-text,
.banner-slide .banner-text * {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
}

.banner-slide a,
.banner-slide button {
    pointer-events: auto;
}

/* Zone image en haut */
.banner-image {
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: relative;
}

.banner-image.shop {
    background: var(--color-surface);
    color: var(--color-primary-dark);
}

.banner-image.training {
    background: var(--color-surface);
    color: #047857;
}

.banner-image.training .banner-img-cover {
    object-fit: fill;
}

.banner-image.coming {
    background: var(--color-surface);
    color: #6d28d9;
}

.banner-image.coming .banner-img-cover {
    object-fit: fill;
}

/* Image cover pour les bannières */
.banner-has-img {
    padding: 0;
    overflow: hidden;
}

.banner-img-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner-has-img .banner-badge {
    z-index: 2;
}

.banner-icon {
    opacity: 0.7;
}

.banner-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-text-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.banner-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Zone texte en bas */
.banner-text {
    padding: 28px 40px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
}

.banner-text p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

/* Indicateurs */
.banner-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.banner-indicators .indicator {
    width: 40px;
    height: 4px;
    border: none;
    border-radius: 0;
    background: var(--color-border);
    cursor: pointer;
    transition: all var(--transition-base);
    padding: 0;
}

.banner-indicators .indicator:hover {
    background: var(--color-primary-light);
}

.banner-indicators .indicator.active {
    background: var(--color-primary);
    width: 60px;
}

/* Responsive bandeau */
@media (max-width: 768px) {
    .banner-image {
        height: 470px;
    }
    
    .banner-icon svg {
        width: 90px;
        height: 90px;
    }
    
    .banner-title {
        font-size: 1.4rem;
    }
    
    .banner-text {
        padding: 24px 24px;
    }
    
    .banner-text p {
        font-size: 0.9rem;
    }
}

@media (max-width: 600px) {
    .banner-image {
        height: clamp(320px, 62vw, 420px);
    }

    .banner-has-img {
        padding: 12px;
    }

    /* Mobile iPhone: avoid stretching and keep full image visible */
    .banner-has-img .banner-img-cover,
    .banner-image.training .banner-img-cover,
    .banner-image.coming .banner-img-cover {
        object-fit: contain;
        object-position: center;
    }
}

@media (max-width: 480px) {
    .site-slogan {
        display: none;
    }
    
    .section-news {
        padding: 40px 16px 60px;
    }
    
    .banner-image {
        height: 400px;
    }
    
    .banner-icon svg {
        width: 70px;
        height: 70px;
    }
    
    .banner-title {
        font-size: 1.2rem;
    }
    
    .banner-badge {
        top: 12px;
        right: 12px;
        font-size: 0.6rem;
        padding: 4px 10px;
    }
    
    .banner-text {
        padding: 20px 16px;
    }
    
    .banner-indicators .indicator {
        width: 30px;
    }
    
    .banner-indicators .indicator.active {
        width: 45px;
    }
}

/* =========================================================
   Accueil - Nouveautes en blocs alternes (sans carousel)
   ========================================================= */
.hp-news .news-stack {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    gap: 34px;
}

.hp-news .news-item {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    align-items: stretch;
    gap: 30px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.hp-news .news-item--reverse {
    grid-template-columns: 1fr 1.08fr;
}

.hp-news .news-item-media {
    min-height: 360px;
}

.hp-news .news-item-img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.11);
}

.hp-news .news-item-content {
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0;
}

.hp-news .news-item--reverse .news-item-content {
    order: -1;
}

.news-item-badge {
    display: inline-block;
    width: fit-content;
    margin-bottom: 10px;
    padding: 5px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(8, 145, 178, 0.25);
    background: rgba(8, 145, 178, 0.07);
    color: #0f172a;
}

.hp-news .news-item-content h3 {
    margin: 0 0 10px;
    font-size: clamp(1.15rem, 1.9vw, 1.45rem);
    color: var(--color-primary);
}

.hp-news .news-item-content p {
    margin: 0;
    line-height: 1.75;
    color: #334155;
    font-size: 0.98rem;
}

.hp-news .news-item-content .news-checklist {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.hp-news .news-item-content .news-checklist li {
    position: relative;
    padding-left: 26px;
    color: #1e293b;
    line-height: 1.6;
    font-size: 0.95rem;
}

.hp-news .news-item-content .news-checklist li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #16a34a;
    font-weight: 700;
}

/* Nouveautes: images un peu plus larges */
.page-nouveautes .hp-news .news-item {
    grid-template-columns: 1.18fr 0.92fr;
}

.page-nouveautes .hp-news .news-item--reverse {
    grid-template-columns: 0.92fr 1.18fr;
}

.page-nouveautes .hp-news .news-item-media,
.page-nouveautes .hp-news .news-item-img {
    min-height: 400px;
}

@media (max-width: 980px) {
    .hp-news .news-item,
    .hp-news .news-item--reverse {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hp-news .news-item-content,
    .hp-news .news-item--reverse .news-item-content {
        border: 0;
        order: initial;
        padding: 4px 2px;
    }

    .hp-news .news-item-media,
    .hp-news .news-item-img {
        min-height: 280px;
    }

    .page-nouveautes .hp-news .news-item-media,
    .page-nouveautes .hp-news .news-item-img {
        min-height: 320px;
    }
}

/* Cartes & focus */
.card,
.focus-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    padding: 24px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
}

.card:hover,
.focus-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

.card h3,
.focus-card h3 {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    font-weight: 600;
}

.card p,
.focus-card p {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.card-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.88rem;
    color: var(--color-text-main);
}

.card-list li + li {
    margin-top: 6px;
}

/* Horaires */
.section-hours {
    padding-top: 40px;
}

.hours-panel {
    max-width: 540px;
    margin: 0 auto;
    background: radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.2), rgba(15, 23, 42, 1));
    border-radius: 0;
    padding: 22px 20px 20px 20px;
    border: 1px solid rgba(55, 65, 81, 0.95);
    box-shadow: var(--shadow-soft);
}

.hours-panel h2 {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
}

.opening-hours {
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.88rem;
}

.opening-hours li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(75, 85, 99, 0.7);
}

.opening-hours li:last-child {
    border-bottom: none;
}

.hours-note {
    margin: 6px 0 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* =========================================================
   Partenaire (maintenance)
   ========================================================= */

.section-collab-maintenance {
    max-width: 1120px;
    margin: 0 auto;
}

.collab-maintenance-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 80px;
    margin-bottom: 24px;
}

.collab-maintenance-panel {
    text-align: center;
}

.collab-maintenance-panel h2 {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.collab-maintenance-panel p {
    margin: 0;
    text-align: center;
    line-height: 1.6;
}

.collab-status {
    max-width: 640px;
    margin: 100px auto 0;
    text-align: left;
}

.status-label {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 0;
    border: 1px solid rgba(148, 163, 184, 0.6);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.status-progress {
    margin-top: 10px;
    margin-bottom: 10px;
}

.status-track {
    position: relative;
    height: 3px;
    border-radius: 0;
    background: rgba(31, 41, 55, 0.8);
    overflow: hidden;
}

.status-bar {
    position: absolute;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(90deg, var(--color-primary-soft), var(--color-primary));
    animation: loaderStripe 3s ease-in-out infinite;
}

.status-note {
    font-size: 0.84rem;
    color: var(--color-text-muted);
}

/* =========================================================
   À propos
   ========================================================= */

.section-about .about-layout {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr);
    gap: 22px;
}

.about-block {
    background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(55, 65, 81, 0.9);
    padding: 18px 16px;
    box-shadow: var(--shadow-subtle);
}

.about-block h2 {
    margin: 0 0 8px 0;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
}

.about-block p {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
}

/* =========================================================
   Contact
   ========================================================= */

.section-contact .contact-layout {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
    gap: 22px;
}

.contact-form-wrapper {
    background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(55, 65, 81, 0.9);
    padding: 20px 18px 20px 18px;
    box-shadow: var(--shadow-subtle);
}

.form-row {
    margin-bottom: 14px;
}

.form-row label {
    display: block;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3px;
    color: var(--color-text-muted);
}

.form-row input,
.form-row textarea {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: #020617;
    color: var(--color-text-main);
    padding: 8px 9px;
    font-size: 0.88rem;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform 140ms ease-out, background-color var(--transition-fast);
}

.form-row input:focus,
.form-row textarea:focus {
    border-color: var(--color-primary-soft);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.7);
    background: #020617;
    transform: translateY(-1px);
}

.form-row textarea {
    resize: vertical;
    min-height: 110px;
}

.field-error-message {
    display: block;
    font-size: 0.78rem;
    color: var(--color-danger);
    min-height: 1em;
    margin-top: 4px;
}

.field-error {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.65);
}

.form-row.form-actions {
    margin-top: 10px;
}

.rgpd-note {
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Statut du formulaire */
.form-status {
    margin-top: 12px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    padding: 9px 10px;
    font-size: 0.82rem;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.form-status.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.form-status-inner {
    display: flex;
    align-items: center;
    gap: 9px;
}

.form-status-icon {
    width: 18px;
    height: 18px;
    border-radius: 0;
    border: 2px solid var(--color-primary-soft);
    position: relative;
    flex-shrink: 0;
}

/* Icône validation (check) par défaut */
.form-status-icon::before,
.form-status-icon::after {
    content: "";
    position: absolute;
    background-color: var(--color-primary-soft);
    border-radius: 0;
    transform-origin: center;
}

.form-status-icon::before {
    width: 7px;
    height: 2px;
    left: 3px;
    top: 9px;
    transform: rotate(40deg);
}

.form-status-icon::after {
    width: 10px;
    height: 2px;
    right: 1px;
    top: 7px;
    transform: rotate(-48deg);
}

.form-status-title {
    display: block;
    font-weight: 600;
}

.form-status-message {
    display: block;
    color: var(--color-text-muted);
}

/* États */
.form-status.success {
    border-color: rgba(45, 212, 191, 0.9);
    background: rgba(6, 95, 70, 0.18);
}

.form-status.error {
    border-color: rgba(248, 113, 113, 0.9);
    background: rgba(127, 29, 29, 0.3);
}

/* Loader pour l'état "loading" */
.form-status.loading {
    border-color: rgba(56, 189, 248, 0.9);
    background: rgba(15, 23, 42, 0.7);
}

.form-status.loading .form-status-icon {
    border-color: rgba(56, 189, 248, 0.9);
    animation: spin 1.1s linear infinite;
}

.form-status.loading .form-status-icon::before,
.form-status.loading .form-status-icon::after {
    display: none;
}

/* Aside contact */
.contact-aside .aside-panel {
    background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(55, 65, 81, 0.9);
    padding: 18px 16px;
    box-shadow: var(--shadow-subtle);
}

.contact-aside h2 {
    margin: 0 0 8px 0;
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.contact-aside h3 {
    margin: 12px 0 6px 0;
    font-size: 0.86rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.aside-note {
    margin: 6px 0 0 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* =========================================================
   Page Contact - Design professionnel
   ========================================================= */

/* Contact Hero */
.contact-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 80px 60px;
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    gap: 60px;
}

.contact-hero-content {
    max-width: 650px;
}

.contact-hero-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    margin-bottom: 20px;
}

.contact-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 16px 0;
    line-height: 1.1;
}

.contact-hero p {
    font-size: 1.1rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
}

.contact-hero-visual {
    position: relative;
    flex-shrink: 0;
}

.contact-hero-icon {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0891b2 0%, #0e7490 100%);
    border-radius: 50%;
    color: white;
    box-shadow: 0 20px 50px rgba(8, 145, 178, 0.35);
}

@media (max-width: 1100px) {
    .contact-hero {
        padding: 60px 40px;
        gap: 40px;
    }
    
    .contact-hero h1 {
        font-size: 2.4rem;
    }
    
    .contact-hero-icon {
        width: 150px;
        height: 150px;
    }
    
    .contact-hero-icon svg {
        width: 65px;
        height: 65px;
    }
}

@media (max-width: 900px) {
    .contact-hero {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-hero-content {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .contact-hero {
        padding: 50px 24px;
    }
    
    .contact-hero h1 {
        font-size: 2rem;
    }
    
    .contact-hero p {
        font-size: 1rem;
    }
    
    .contact-hero-icon {
        width: 120px;
        height: 120px;
    }
    
    .contact-hero-icon svg {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .contact-hero {
        padding: 40px 20px;
    }
    
    .contact-hero h1 {
        font-size: 1.8rem;
    }
}

/* Layout Contact - Nouvelle structure */
.contact-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.contact-form-row {
    width: 100%;
}

.contact-form-row .contact-form-card {
    max-width: 100%;
}

/* Scenario Box */
.scenario-box {
    background: white;
    border-radius: var(--radius-lg);
    border: 2px solid #e2e8f0;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.scenario-box:hover {
    border-color: #0891b2;
    box-shadow: 0 8px 30px rgba(8, 145, 178, 0.12);
}

.scenario-header {
    margin-bottom: 20px;
}

.scenario-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 0;
    margin-bottom: 8px;
    margin-right: 8px;
}

.scenario-badge-secondary {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    margin-bottom: 12px;
}

.scenario-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
}

.scenario-content {
    flex: 1;
}

.scenario-placeholder {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

@media (max-width: 900px) {
    .contact-top-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .scenario-box {
        padding: 24px;
    }
}

@media (max-width: 600px) {
    .scenario-box {
        padding: 20px;
    }
    
    .scenario-header h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .scenario-box {
        padding: 16px;
    }
    
    .scenario-header h2 {
        font-size: 1.2rem;
    }
}

.section-contact {
    padding: 60px 24px 80px;
}

.contact-page-layout {
    max-width: 1100px;
    margin: 0 auto;
}

.contact-form-card-wrapper {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
}

.contact-placeholder {
    grid-column: 2;
    grid-row: 1;
}

/* Colonne informations */
.contact-info-column {
    position: relative;
    align-self: start;
    height: fit-content;
}

.contact-boxes-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.contact-side-box {
    width: 200px;
    flex-shrink: 0;
    background: white;
    border: 2px solid #0891b2;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Box avec les mascottes dents */
.teeth-box {
    width: 180px;
    border: 4px solid #0891b2;
    padding: 20px 15px;
    align-self: stretch;
    background: linear-gradient(180deg, #f0faff 0%, #e0f4ff 100%);
}

.teeth-characters {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    height: 100%;
}

/* Personnage dent de base */
.tooth-character {
    display: flex;
    align-items: center;
    position: relative;
}

.tooth-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Couronne de la dent */
.tooth-crown {
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 50%, #ebebeb 100%);
    border-radius: 45% 45% 40% 40%;
    position: relative;
    box-shadow: 
        inset -3px -3px 8px rgba(0, 0, 0, 0.08),
        inset 3px 3px 8px rgba(255, 255, 255, 0.9),
        0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tailles des dents */
.tooth-large .tooth-crown {
    width: 45px;
    height: 50px;
}

.tooth-medium .tooth-crown {
    width: 38px;
    height: 42px;
}

.tooth-small .tooth-crown {
    width: 32px;
    height: 36px;
}

/* Racines (pieds) */
.tooth-roots {
    display: flex;
    gap: 4px;
    margin-top: -2px;
}

.root {
    background: linear-gradient(180deg, #ebebeb 0%, #d9d9d9 100%);
    border-radius: 0 0 50% 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.tooth-large .root {
    width: 12px;
    height: 18px;
}

.tooth-medium .root {
    width: 10px;
    height: 15px;
}

.tooth-small .root {
    width: 8px;
    height: 12px;
}

/* Visage manga */
.tooth-face {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
}

/* Yeux manga */
.tooth-eyes {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.eye {
    background: #2d2d2d;
    border-radius: 50%;
    position: relative;
}

.tooth-large .eye {
    width: 10px;
    height: 10px;
}

.tooth-medium .eye {
    width: 8px;
    height: 8px;
}

.tooth-small .eye {
    width: 7px;
    height: 7px;
}

.eye-shine {
    position: absolute;
    background: white;
    border-radius: 50%;
    width: 35%;
    height: 35%;
    top: 15%;
    left: 15%;
}

/* Yeux joyeux (arc) */
.eye-happy {
    background: transparent;
    border: none;
    border-bottom: 3px solid #2d2d2d;
    border-radius: 0 0 50% 50%;
    height: 5px !important;
}

.tooth-large .eye-happy {
    width: 10px;
    border-bottom-width: 3px;
}

.tooth-medium .eye-happy {
    width: 8px;
    border-bottom-width: 2.5px;
}

/* Clin d'oeil */
.eye-wink {
    background: transparent;
    width: 8px !important;
    height: 3px !important;
    border: none;
    position: relative;
}

.eye-wink::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #2d2d2d;
    top: 50%;
    transform: rotate(-10deg);
}

/* Yeux timides */
.eye-shy {
    background: #2d2d2d;
    animation: shyLook 3s ease-in-out infinite;
}

@keyframes shyLook {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-1px); }
}

/* Bouches manga */
.mouth {
    position: relative;
}

/* Grand sourire */
.mouth-big-smile {
    width: 20px;
    height: 10px;
    background: #ff6b8a;
    border-radius: 0 0 50% 50%;
    border-top: 2px solid #2d2d2d;
    position: relative;
    overflow: hidden;
}

.mouth-big-smile::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 5px;
    background: #ff4d6d;
    border-radius: 50%;
}

/* Sourire moyen */
.mouth-smile {
    width: 14px;
    height: 7px;
    border: none;
    border-bottom: 2.5px solid #2d2d2d;
    border-radius: 0 0 50% 50%;
}

/* Bouche timide */
.mouth-shy {
    width: 8px;
    height: 8px;
    background: transparent;
    border: 2px solid #2d2d2d;
    border-radius: 50%;
    position: relative;
}

.mouth-shy::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 50%;
    background: white;
}

/* Joues roses */
.blush {
    position: absolute;
    width: 8px;
    height: 5px;
    background: rgba(255, 150, 170, 0.5);
    border-radius: 50%;
    top: 55%;
}

.blush-left {
    left: 15%;
}

.blush-right {
    right: 15%;
}

.blush.big {
    width: 10px;
    height: 6px;
    background: rgba(255, 130, 150, 0.6);
}

/* Mains */
.tooth-hand {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px;
}

.tooth-hand-left {
    margin-right: -5px;
    transform: rotate(-20deg);
}

.tooth-hand-right {
    margin-left: -5px;
    transform: rotate(20deg);
}

.finger {
    width: 3px;
    height: 8px;
    background: linear-gradient(90deg, #f5f5f5, #e0e0e0);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.tooth-large .finger {
    height: 8px;
    width: 3px;
}

.tooth-medium .finger {
    height: 7px;
    width: 2.5px;
}

.tooth-small .finger {
    height: 5px;
    width: 2px;
}

/* Animation main qui salue */
.tooth-hand.wave {
    animation: wave 1s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes wave {
    0%, 100% { transform: rotate(20deg); }
    50% { transform: rotate(40deg); }
}

/* Main signe de paix */
.tooth-hand.peace .finger:nth-child(3) {
    transform: rotate(-30deg);
    margin-left: 2px;
}

/* Main timide */
.tooth-hand.shy {
    transform: rotate(-40deg) translateY(-5px);
}

/* Animation flottante pour les dents */
.tooth-character {
    animation: float 3s ease-in-out infinite;
}

.tooth-large {
    animation-delay: 0s;
}

.tooth-medium {
    animation-delay: 0.5s;
}

.tooth-small {
    animation-delay: 1s;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.contact-info-card {
    background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    color: #ffffff;
}

.contact-info-card.compact {
    padding: 28px 28px;
}

.contact-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-info-card h1,
.contact-info-card h2 {
    margin: 0 0 12px 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.contact-intro {
    margin: 0 0 24px 0;
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Details de contact */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.detail-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.detail-icon svg {
    color: #ffffff;
}

.detail-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.detail-value {
    font-size: 0.95rem;
    font-weight: 500;
}

a.detail-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a.detail-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Section horaires */
.hours-section {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 28px;
}

.hours-section h3 {
    margin: 0 0 16px 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.hours-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hour-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0;
    font-size: 0.85rem;
}

.hour-row.weekend {
    background: rgba(255, 255, 255, 0.05);
}

.day-name {
    font-weight: 500;
}

.day-hours {
    opacity: 0.9;
}

.day-hours.closed {
    color: #fca5a5;
}

.hours-note {
    margin: 12px 0 0 0;
    font-size: 0.8rem;
    opacity: 0.7;
    font-style: italic;
}

/* Colonne formulaire */
.contact-form-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-soft);
}

.contact-form-card h2 {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    color: var(--color-text-dark);
    font-weight: 600;
}

.form-subtitle {
    margin: 0 0 28px 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Formulaire */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-main);
    letter-spacing: 0.02em;
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--color-bg);
    color: var(--color-text-dark);
    transition: all var(--transition-fast);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-light);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* hCaptcha styling */
.captcha-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px 0;
}

.btn-submit {
    width: 100%;
    padding: 16px 24px;
    margin-top: 8px;
    font-size: 0.9rem;
}

.form-legal {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-text-light);
    text-align: center;
    line-height: 1.5;
}

.form-legal a {
    color: var(--color-primary);
}

/* Responsive contact */
@media (max-width: 900px) {
    .contact-page-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .contact-info-column {
        position: static;
    }
    
    .contact-boxes-row {
        flex-direction: column;
    }
    
    .contact-side-box,
    .teeth-box {
        width: 100%;
        height: auto;
        min-height: 150px;
    }
    
    .contact-info-card {
        padding: 32px 24px;
    }
    
    .contact-form-card {
        padding: 32px 24px;
    }
}

@media (max-width: 600px) {
    .section-contact {
        padding: 40px 16px 60px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-info-card h1 {
        font-size: 1.4rem;
    }
    
    .contact-form-card h2 {
        font-size: 1.15rem;
    }
}

/* Panel horaires - style moderne */
.contact-form-column .hours-panel {
    background: linear-gradient(145deg, #f8fafc, #ffffff);
    border-radius: 0;
    padding: 24px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06);
}

.contact-form-column .hours-panel h2 {
    margin: 0 0 16px 0;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #2563eb;
    font-weight: 600;
}

/* =========================================================
   Dents mignonnes en bas à gauche
   ========================================================= */

.teeth-bottom-section {
    display: flex;
    justify-content: flex-start;
    padding: 20px 0 40px;
    max-width: 1120px;
    margin: 0 auto;
}

.teeth-showcase-compact {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 25px 30px;
    background: linear-gradient(145deg, #f8fafc, #ffffff);
    border-radius: 0;
    border: 1px solid rgba(37, 99, 235, 0.1);
    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.06);
}

/* Dent mignonne */
.cute-tooth {
    position: relative;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cute-tooth:hover {
    transform: translateY(-6px) scale(1.05);
}

.cute-tooth:hover .tooth-base-shadow {
    transform: scale(1.15);
    opacity: 0.2;
}

/* Forme de la dent */
.tooth-shape {
    position: relative;
    width: 52px;
    height: 62px;
    background: linear-gradient(180deg, 
        #ffffff 0%, 
        #fafafa 40%, 
        #f0f0f0 80%,
        #e5e5e5 100%);
    border-radius: 46% 46% 50% 50% / 35% 35% 58% 58%;
    box-shadow: 
        0 3px 12px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.04),
        inset 0 -6px 15px rgba(0, 0, 0, 0.03),
        inset 0 3px 8px rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(200, 200, 200, 0.5);
    overflow: visible;
}

.tooth-shape.tall {
    height: 70px;
    width: 48px;
    border-radius: 44% 44% 48% 48% / 30% 30% 62% 62%;
}

.tooth-shape.wide {
    width: 58px;
    height: 58px;
    border-radius: 48% 48% 52% 52% / 38% 38% 55% 55%;
}

/* Reflet */
.tooth-gloss {
    position: absolute;
    top: 6px;
    left: 8px;
    width: 16px;
    height: 22px;
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.2) 60%,
        transparent 100%);
    border-radius: 50%;
    transform: rotate(-15deg);
}

/* Visage de la dent */
.tooth-shape .tooth-face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* Yeux mignons - nouveau design */
.cute-eyes {
    display: flex;
    gap: 10px;
}

.cute-eye {
    width: 11px;
    height: 11px;
    background: #ffffff;
    border-radius: 50%;
    position: relative;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.12),
        0 0.5px 1px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(180, 180, 180, 0.4);
}

.cute-eye .iris {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background: radial-gradient(circle at 35% 35%, #4a5568, #1a202c);
    border-radius: 50%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cute-eye .pupil-dot {
    position: absolute;
    top: 1px;
    left: 1.5px;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
}

/* Bouches mignonnes avec animations */
.cute-mouth {
    position: relative;
    transition: all 0.4s ease;
}

.cute-mouth.happy {
    width: 14px;
    height: 7px;
    border: 1.5px solid #64748b;
    border-top: none;
    border-radius: 0;
    animation: mouthBreathe 3s ease-in-out infinite;
}

.cute-mouth.smile {
    width: 12px;
    height: 6px;
    border: 1.5px solid #64748b;
    border-top: none;
    border-radius: 0;
    animation: mouthBreathe 3.5s ease-in-out infinite 0.5s;
}

.cute-mouth.neutral {
    width: 10px;
    height: 1.5px;
    background: #64748b;
    border-radius: 0;
    animation: mouthWiggle 4s ease-in-out infinite;
}

.cute-mouth.grin {
    width: 16px;
    height: 8px;
    border: 1.5px solid #64748b;
    border-top: none;
    border-radius: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(255, 120, 120, 0.15) 100%);
    animation: mouthBreathe 2.8s ease-in-out infinite 0.2s;
}

/* Animations de la bouche */
@keyframes mouthBreathe {
    0%, 100% { transform: scaleX(1) scaleY(1); }
    50% { transform: scaleX(1.1) scaleY(1.15); }
}

@keyframes mouthWiggle {
    0%, 100% { transform: scaleX(1); }
    25% { transform: scaleX(1.15); }
    75% { transform: scaleX(0.9); }
}

/* Ombre sous la dent */
.tooth-base-shadow {
    width: 40px;
    height: 10px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.12) 0%, transparent 70%);
    margin: 6px auto 0;
    border-radius: 50%;
    transition: all 0.5s ease;
}

/* Responsive dents en bas */
@media (max-width: 768px) {
    .teeth-bottom-section {
        justify-content: center;
        padding: 15px 0 30px;
    }
    
    .teeth-showcase-compact {
        gap: 10px;
        padding: 20px 25px;
    }
    
    .tooth-shape {
        width: 45px;
        height: 55px;
    }
    
    .tooth-shape.tall {
        width: 42px;
        height: 62px;
    }
    
    .tooth-shape.wide {
        width: 50px;
        height: 50px;
    }
    
    .cute-eye {
        width: 9px;
        height: 9px;
    }
    
    .cute-eye .iris {
        width: 6px;
        height: 6px;
    }
}

@media (max-width: 480px) {
    .teeth-showcase-compact {
        gap: 8px;
        padding: 15px 20px;
    }
    
    .tooth-shape {
        width: 40px;
        height: 48px;
    }
    
    .tooth-shape.tall {
        width: 36px;
        height: 54px;
    }
    
    .tooth-shape.wide {
        width: 44px;
        height: 44px;
    }
}

.opening-hours-modern {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opening-hours-modern li {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: rgba(241, 245, 249, 0.6);
    border-radius: 0;
    border: 1px solid rgba(203, 213, 225, 0.4);
}

.opening-hours-modern .day {
    font-size: 0.85rem;
    color: #334155;
    font-weight: 500;
    min-width: 100px;
    margin-right: 40px;
}

.opening-hours-modern .hours {
    font-size: 0.85rem;
    color: #059669;
    font-weight: 600;
    text-align: right;
    margin-left: auto;
    min-width: 180px;
}

.opening-hours-modern .hours.closed {
    color: #dc2626;
}

/* Formulaire moderne */
.contact-form-modern {
    background: linear-gradient(145deg, #f8fafc, #ffffff);
    border-radius: 0;
    padding: 28px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.08);
}

.contact-form-modern h3 {
    margin: 0 0 20px 0;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1e293b;
    font-weight: 600;
}

.contact-form-modern .form-row {
    margin-bottom: 16px;
}

.contact-form-modern label {
    display: block;
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 6px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.contact-form-modern input,
.contact-form-modern textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(203, 213, 225, 0.8);
    border-radius: 0;
    font-size: 0.9rem;
    background: #ffffff;
    color: #1e293b;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.contact-form-modern input::placeholder,
.contact-form-modern textarea::placeholder {
    color: #94a3b8;
}

.contact-form-modern input:focus,
.contact-form-modern textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.contact-form-modern textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form-modern .form-actions {
    margin-top: 20px;
}

.contact-form-modern .btn-primary {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 16px rgba(8, 145, 178, 0.25);
}

.contact-form-modern .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(8, 145, 178, 0.35);
}

.contact-form-modern .rgpd-note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 16px;
    line-height: 1.6;
}

.contact-form-modern .rgpd-note a {
    color: var(--color-primary);
}

/* Responsive pour la section contact */
@media (max-width: 768px) {
    .contact-main-layout {
        padding: 0 15px;
    }
    
    .contact-form-column .hours-panel,
    .contact-form-modern {
        padding: 20px 16px;
    }
}

/* =========================================================
   Ancien groupe de dents (legacy - masqué)
   ========================================================= */

.teeth-group-container {
    display: none;
}

.animated-tooth {
    display: none;
}

.tooth-stem,
.tooth-stem-inner {
    display: none;
}

.cartoon-tooth {
    display: none;
    box-shadow: 
        0 8px 25px rgba(0,0,0,0.2),
        inset 0 -10px 20px rgba(0,0,0,0.05),
        inset 0 10px 20px rgba(255,255,255,0.8);
    transition: transform 0.3s ease;
}

/* Reflet sur la dent */
.cartoon-tooth::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 12px;
    width: 20px;
    height: 15px;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), transparent);
    border-radius: 50%;
}

/* Zone des yeux */
.tooth-eyes {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    transition: transform 0.15s ease-out;
}

.tooth-eye {
    position: relative;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.tooth-pupil {
    position: absolute;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle at 30% 30%, #444, #111);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out;
}

/* Reflet dans l'oeil */
.tooth-pupil::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    top: 1px;
    left: 1px;
}

/* Bouche */
.tooth-mouth {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}

/* Paupière pour le clin d'oeil */
.tooth-eyelid {
    position: absolute;
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, #f5f5f5, #e8e8e8);
    border-radius: 50% 50% 0 0;
    top: 0;
    left: 0;
    transition: height 0.15s ease;
    z-index: 2;
}

/* État clin d'oeil */
.animated-tooth.winking .tooth-eyelid {
    height: 100%;
    border-radius: 50%;
}

/* Dent 1 : Cool et sympathique */
.tooth-cool .tooth-mouth {
    width: 25px;
    height: 12px;
    background: #333;
    border-radius: 0 0 50% 50%;
}

.tooth-cool .tooth-mouth::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 5px;
    background: #ff6b8a;
    border-radius: 0 0 50% 50%;
}

/* Sourcils cool */
.tooth-cool::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    width: 35px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #666, transparent);
    border-radius: 0;
}

/* Dent 2 : Triste et désorientée */
.tooth-sad .tooth-mouth {
    width: 20px;
    height: 8px;
    border: 2px solid #666;
    border-top: none;
    border-radius: 0 0 50% 50%;
    background: transparent;
}

.tooth-sad .tooth-eye {
    transform: translateY(2px);
}

/* Sourcils tristes */
.tooth-sad .tooth-eyes::before,
.tooth-sad .tooth-eyes::after {
    content: '';
    position: absolute;
    top: -8px;
    width: 12px;
    height: 3px;
    background: #888;
    border-radius: 0;
}

.tooth-sad .tooth-eyes::before {
    left: -2px;
    transform: rotate(15deg);
}

.tooth-sad .tooth-eyes::after {
    right: -2px;
    transform: rotate(-15deg);
}

/* Dent 3 : En colère mais classe */
.tooth-angry .tooth-mouth {
    width: 22px;
    height: 6px;
    background: #444;
    border-radius: 0;
}

/* Sourcils en colère */
.tooth-angry .tooth-eyes::before,
.tooth-angry .tooth-eyes::after {
    content: '';
    position: absolute;
    top: -10px;
    width: 14px;
    height: 4px;
    background: #555;
    border-radius: 0;
}

.tooth-angry .tooth-eyes::before {
    left: -4px;
    transform: rotate(-20deg);
}

.tooth-angry .tooth-eyes::after {
    right: -4px;
    transform: rotate(20deg);
}

/* Dent 4 : Neutre */
.tooth-neutral .tooth-mouth {
    width: 18px;
    height: 3px;
    background: #666;
    border-radius: 0;
}

/* Dent 5 : Très souriante */
.tooth-happy .tooth-mouth {
    width: 30px;
    height: 15px;
    background: #333;
    border-radius: 0 0 50% 50%;
}

.tooth-happy .tooth-mouth::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 8px;
    background: white;
    border-radius: 0 0 40% 40%;
}

.tooth-happy .tooth-mouth::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 5px;
    background: #ff6b8a;
    border-radius: 50%;
}

/* Joues roses pour la dent heureuse */
.tooth-happy .cartoon-tooth::after {
    content: '';
    position: absolute;
    bottom: 30px;
    width: 12px;
    height: 8px;
    background: rgba(255, 150, 150, 0.4);
    border-radius: 50%;
}

.tooth-happy .cartoon-tooth::after {
    left: 8px;
    box-shadow: 42px 0 0 rgba(255, 150, 150, 0.4);
}

/* Ombres réalistes sous les dents */
.tooth-shadow {
    width: 50px;
    height: 10px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.2), transparent 70%);
    margin-top: 5px;
}

/* =========================================================
   Pages légales (contenus textuels)
   ========================================================= */

.legal-section {
    max-width: 960px;
    margin: 0 auto;
}

.legal-block {
    background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(55, 65, 81, 0.9);
    padding: 18px 16px;
    box-shadow: var(--shadow-subtle);
    font-size: 0.9rem;
}

.legal-block + .legal-block {
    margin-top: 16px;
}

.legal-block h2 {
    margin: 0 0 8px 0;
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.legal-cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.legal-cookie-table-head-row {
    background: var(--color-primary-dark, #0c4a6e);
    color: #ffffff;
    text-align: left;
}

.legal-cookie-table-row {
    border-bottom: 1px solid #e2e8f0;
}

.legal-cookie-table-row-alt {
    background: #f8fafc;
}

.legal-cookie-table-cell {
    padding: 12px 16px;
}

/* =========================================================
   Boutons & micro-interactions
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(8, 145, 178, 0.35);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.2);
}

/* Effet de vague directionnel */
.btn-wave::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.6), transparent 55%);
    transform: translateX(-120%);
    opacity: 0;
    transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 240ms ease-out;
}

.btn-wave:hover::before {
    transform: translateX(120%);
    opacity: 1;
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
    border-top: none;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
    margin-top: auto;
    flex-shrink: 0;
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #0891b2, transparent);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px 0;
}

/* Footer Top - Grid layout */
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 40px;
}

/* Brand section */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-logo {
    display: inline-block;
}

.footer-logo-img {
    height: 50px;
    width: auto;
    margin-left: -20px;
    transition: opacity var(--transition-base);
}

.footer-logo:hover .footer-logo-img {
    opacity: 0.85;
}

.footer-description {
    font-size: 0.88rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
    max-width: 320px;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.footer-social-link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: white;
    color: var(--color-text-light);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.footer-social-link:hover {
    background: #0891b2;
    color: white;
    border-color: #0891b2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

/* Nav groups */
.footer-nav-group h4 {
    margin: 0 0 16px 0;
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-main);
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}

.footer-nav-group h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: #0891b2;
    border-radius: 0;
}

.footer-nav-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav-group ul li + li {
    margin-top: 10px;
}

.footer-nav-group a {
    color: var(--color-text-light);
    font-size: 0.88rem;
    transition: all 0.2s ease;
    position: relative;
    padding-left: 0;
}

.footer-nav-group a:hover {
    color: #0891b2;
    padding-left: 6px;
}

/* Footer contact info */
.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.footer-contact-item svg {
    flex-shrink: 0;
    color: #0891b2;
}

.footer-contact-item a {
    color: var(--color-text-light);
    transition: color 0.2s ease;
}

.footer-contact-item a:hover {
    color: #0891b2;
}

/* Footer bottom bar */
.footer-bottom {
    padding: 20px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.3);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-made {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    opacity: 0.7;
}

.language-selector {
    display: flex;
    align-items: center;
}

.language-selector select {
    background: transparent;
    border: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
    padding: 6px 12px;
    border-radius: 0;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.language-selector select:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.language-selector select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.language-selector select option {
    background: var(--color-bg);
    color: var(--color-text);
}

/* =========================================================
   Animations d'apparition
   ========================================================= */

.fade-in-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 520ms ease-out, transform 520ms ease-out;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   Keyframes
   ========================================================= */

/* ============ ANIMATIONS CNC SYNCHRONISÉES ============ */

/* Mouvement 5 axes du mandrin + disque */
@keyframes chuckMove {
    0% { transform: translate(-50%, -50%) rotateX(62deg) rotateY(-5deg); }
    12% { transform: translate(-50%, -50%) rotateX(65deg) rotateY(-3deg); }
    25% { transform: translate(-50%, -50%) rotateX(60deg) rotateY(-8deg); }
    37% { transform: translate(-50%, -50%) rotateX(64deg) rotateY(-4deg); }
    50% { transform: translate(-50%, -50%) rotateX(61deg) rotateY(-7deg); }
    62% { transform: translate(-50%, -50%) rotateX(65deg) rotateY(-2deg); }
    75% { transform: translate(-50%, -50%) rotateX(59deg) rotateY(-6deg); }
    87% { transform: translate(-50%, -50%) rotateX(63deg) rotateY(-4deg); }
    100% { transform: translate(-50%, -50%) rotateX(62deg) rotateY(-5deg); }
}

/* Mouvement synchronisé de la fraise (suit le disque) */
@keyframes millSync {
    0% { transform: translateX(-50%) translateY(0px) translateZ(27px) rotateX(-3deg) rotateZ(0deg); }
    12% { transform: translateX(-50%) translateY(3px) translateZ(27px) rotateX(-5deg) rotateZ(-2deg); }
    25% { transform: translateX(-50%) translateY(5px) translateZ(27px) rotateX(-7deg) rotateZ(3deg); }
    37% { transform: translateX(-50%) translateY(3px) translateZ(27px) rotateX(-4deg) rotateZ(-1deg); }
    50% { transform: translateX(-50%) translateY(6px) translateZ(27px) rotateX(-8deg) rotateZ(2deg); }
    62% { transform: translateX(-50%) translateY(2px) translateZ(27px) rotateX(-5deg) rotateZ(-3deg); }
    75% { transform: translateX(-50%) translateY(4px) translateZ(27px) rotateX(-6deg) rotateZ(1deg); }
    87% { transform: translateX(-50%) translateY(3px) translateZ(27px) rotateX(-4deg) rotateZ(-2deg); }
    100% { transform: translateX(-50%) translateY(0px) translateZ(27px) rotateX(-3deg) rotateZ(0deg); }
}

/* Lueur du point de coupe */
@keyframes cutGlow {
    0%, 100% { opacity: 0.85; transform: scale(1); box-shadow: 0 0 25px rgba(150, 200, 255, 0.9); }
    50% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 35px rgba(170, 215, 255, 1); }
}

/* Étincelle */
@keyframes sparkle {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(4px, -4px) scale(0.3); }
}

/* LED pulsation */
@keyframes ledPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px #00ff88, 0 0 20px rgba(0, 255, 136, 0.6); }
    50% { opacity: 0.6; box-shadow: 0 0 5px #00ff88, 0 0 10px rgba(0, 255, 136, 0.3); }
}

/* Effet de rotation de la fraise */
@keyframes spinBlur {
    0% { opacity: 0.4; }
    50% { opacity: 0.6; }
    100% { opacity: 0.4; }
}

/* Chute des copeaux - s'arrêtent sur le floor-glass avec rebond */
@keyframes chipDrop1 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(-8px, 145px) rotate(360deg); opacity: 0.95; }
    55% { transform: translate(-8px, 138px) rotate(365deg); opacity: 0.95; }
    60% { transform: translate(-8px, 145px) rotate(368deg); opacity: 0.95; }
    100% { transform: translate(-8px, 145px) rotate(368deg); opacity: 0.85; }
}

@keyframes chipDrop2 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(6px, 140px) rotate(-320deg); opacity: 0.95; }
    55% { transform: translate(6px, 133px) rotate(-325deg); opacity: 0.95; }
    60% { transform: translate(6px, 140px) rotate(-328deg); opacity: 0.95; }
    100% { transform: translate(6px, 140px) rotate(-328deg); opacity: 0.85; }
}

@keyframes chipDrop3 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(-4px, 150px) rotate(400deg); opacity: 0.95; }
    55% { transform: translate(-4px, 143px) rotate(405deg); opacity: 0.95; }
    60% { transform: translate(-4px, 150px) rotate(408deg); opacity: 0.95; }
    100% { transform: translate(-4px, 150px) rotate(408deg); opacity: 0.85; }
}

@keyframes chipDrop4 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(10px, 138px) rotate(-350deg); opacity: 0.95; }
    55% { transform: translate(10px, 131px) rotate(-355deg); opacity: 0.95; }
    60% { transform: translate(10px, 138px) rotate(-358deg); opacity: 0.95; }
    100% { transform: translate(10px, 138px) rotate(-358deg); opacity: 0.85; }
}

@keyframes chipDrop5 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(-2px, 148px) rotate(380deg); opacity: 0.95; }
    55% { transform: translate(-2px, 141px) rotate(385deg); opacity: 0.95; }
    60% { transform: translate(-2px, 148px) rotate(388deg); opacity: 0.95; }
    100% { transform: translate(-2px, 148px) rotate(388deg); opacity: 0.85; }
}

@keyframes chipDrop6 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(5px, 155px) rotate(-400deg); opacity: 0.95; }
    55% { transform: translate(5px, 148px) rotate(-405deg); opacity: 0.95; }
    60% { transform: translate(5px, 155px) rotate(-408deg); opacity: 0.95; }
    100% { transform: translate(5px, 155px) rotate(-408deg); opacity: 0.85; }
}

@keyframes chipDrop7 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(-6px, 142px) rotate(420deg); opacity: 0.95; }
    55% { transform: translate(-6px, 135px) rotate(425deg); opacity: 0.95; }
    60% { transform: translate(-6px, 142px) rotate(428deg); opacity: 0.95; }
    100% { transform: translate(-6px, 142px) rotate(428deg); opacity: 0.85; }
}

@keyframes chipDrop8 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(8px, 152px) rotate(-370deg); opacity: 0.95; }
    55% { transform: translate(8px, 145px) rotate(-375deg); opacity: 0.95; }
    60% { transform: translate(8px, 152px) rotate(-378deg); opacity: 0.95; }
    100% { transform: translate(8px, 152px) rotate(-378deg); opacity: 0.85; }
}

@keyframes chipDrop9 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(-1px, 158px) rotate(390deg); opacity: 0.95; }
    55% { transform: translate(-1px, 151px) rotate(395deg); opacity: 0.95; }
    60% { transform: translate(-1px, 158px) rotate(398deg); opacity: 0.95; }
    100% { transform: translate(-1px, 158px) rotate(398deg); opacity: 0.85; }
}

@keyframes chipDrop10 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(3px, 146px) rotate(-340deg); opacity: 0.95; }
    55% { transform: translate(3px, 139px) rotate(-345deg); opacity: 0.95; }
    60% { transform: translate(3px, 146px) rotate(-348deg); opacity: 0.95; }
    100% { transform: translate(3px, 146px) rotate(-348deg); opacity: 0.85; }
}

@keyframes chipDrop11 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(-7px, 140px) rotate(450deg); opacity: 0.95; }
    55% { transform: translate(-7px, 133px) rotate(455deg); opacity: 0.95; }
    60% { transform: translate(-7px, 140px) rotate(458deg); opacity: 0.95; }
    100% { transform: translate(-7px, 140px) rotate(458deg); opacity: 0.85; }
}

@keyframes chipDrop12 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translate(7px, 160px) rotate(-430deg); opacity: 0.95; }
    55% { transform: translate(7px, 153px) rotate(-435deg); opacity: 0.95; }
    60% { transform: translate(7px, 160px) rotate(-438deg); opacity: 0.95; }
    100% { transform: translate(7px, 160px) rotate(-438deg); opacity: 0.85; }
}

/* Montée de la poussière */
@keyframes dustUp1 {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 0.95; }
    100% { transform: translate(-16px, -42px); opacity: 0; }
}

@keyframes dustUp2 {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 0.9; }
    100% { transform: translate(14px, -38px); opacity: 0; }
}

@keyframes dustUp3 {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 0.95; }
    100% { transform: translate(-8px, -48px); opacity: 0; }
}

@keyframes dustUp4 {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 0.9; }
    100% { transform: translate(18px, -35px); opacity: 0; }
}

@keyframes dustUp5 {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 0.88; }
    100% { transform: translate(-12px, -45px); opacity: 0; }
}

@keyframes dustUp6 {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 0.92; }
    100% { transform: translate(10px, -40px); opacity: 0; }
}

@keyframes dustUp7 {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 0.85; }
    100% { transform: translate(-20px, -38px); opacity: 0; }
}

@keyframes dustUp8 {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 0.9; }
    100% { transform: translate(6px, -50px); opacity: 0; }
}

/* Accumulation des débris */
@keyframes debrisAccum {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.95; }
}

@keyframes millPass {
    0% {
        transform: translateY(0) translateX(0);
    }
    35% {
        transform: translateY(6px) translateX(-18px);
    }
    65% {
        transform: translateY(18px) translateX(0);
    }
    100% {
        transform: translateY(0) translateX(0);
    }
}

@keyframes millPath {
    0% {
        opacity: 0.1;
        transform: translateX(-10px);
    }
    40% {
        opacity: 1;
        transform: translateX(0);
    }
    80% {
        opacity: 0.4;
        transform: translateX(8px);
    }
    100% {
        opacity: 0.1;
        transform: translateX(0);
    }
}

@keyframes loaderStripe {
    0% {
        width: 0%;
        left: 0;
    }
    50% {
        width: 100%;
        left: 0;
    }
    51% {
        width: 100%;
        left: 0;
    }
    100% {
        width: 0%;
        left: 100%;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1024px) {
    .cards-grid,
    .focus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-about .about-layout,
    .section-contact .contact-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .header-inner {
        padding-inline: 18px;
    }

    .site-slogan {
        font-size: 0.55rem;
        letter-spacing: 0.1em;
    }

    .main-nav ul {
        gap: 10px;
    }

    .nav-link {
        font-size: 0.7rem;
    }

    .section {
        padding-inline: 18px;
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .cards-grid,
    .focus-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

    .hero-content {
        padding-inline: 20px;
    }

    .hero-meta-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .collab-maintenance-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    
    .teeth-group-container {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .cartoon-tooth {
        width: 55px;
        height: 70px;
    }
}

@media (max-width: 520px) {
    .site-title {
        letter-spacing: 0.22em;
        font-size: 0.78rem;
    }

    .section {
        padding-inline: 16px;
    }

    .hero-content {
        padding-inline: 16px;
    }

    .main-nav ul {
        gap: 8px;
    }

    .nav-link {
        letter-spacing: 0.14em;
    }

    .preloader-inner {
        transform: scale(0.8);
    }

    .preloader-status {
        max-width: 220px;
    }

    .preloader-text {
        font-size: 0.75rem;
        letter-spacing: 0.14em;
    }

    .loading-bar {
        height: 3px;
    }
    
    .mill-scene {
        width: 180px;
        height: 180px;
    }
    
    .zirconia-disc {
        width: 140px;
        height: 140px;
    }
    
    .disc-surface {
        top: 6px;
        left: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        transform: translateZ(10px);
    }
    
    .milled-tooth {
        width: 38px;
        height: 46px;
    }
    
    .milling-bur {
        margin-left: 22px;
        height: 90px;
    }
    
    .bur-shaft {
        width: 12px;
        height: 28px;
    }
    
    .bur-head {
        top: 38px;
        height: 42px;
    }
    
    .milling-zone {
        margin-left: 10px;
        width: 5px;
        height: 10px;
    }
    
    .dust-particles {
        margin-left: 18px;
    }
}

/* ============================================================
   PAGE NOUVEAUTÉS - News Timeline Design
   ============================================================ */

/* Hero Section */
.news-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    position: relative;
    padding: 80px 60px;
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.news-hero-visual {
    position: relative;
    flex-shrink: 0;
}

.news-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.news-hero-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    margin-bottom: 20px;
}

.news-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 16px 0;
    line-height: 1.1;
}

.news-hero p {
    font-size: 1.1rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
}

.news-hero-decoration {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.hero-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(8, 145, 178, 0.08) 0%, rgba(14, 116, 144, 0.04) 100%);
    border: 2px solid rgba(8, 145, 178, 0.1);
}

.hero-dots {
    position: absolute;
    top: 20px;
    right: -40px;
    width: 100px;
    height: 100px;
    background-image: radial-gradient(circle, rgba(8, 145, 178, 0.2) 2px, transparent 2px);
    background-size: 12px 12px;
}

/* News Timeline Container */
.news-timeline {
    padding: 80px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

/* News Item - Alternating Layout */
.news-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 60px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.news-item:last-child {
    border-bottom: none;
}

.news-item-reverse {
    direction: rtl;
}

.news-item-reverse > * {
    direction: ltr;
}

/* News Visual / Image */
.news-visual {
    position: relative;
}

.news-image-wrapper {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.news-image {
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Image cover pour les news */
.news-has-img {
    padding: 0;
}

.news-img-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.news-image::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.9;
}

.news-image-shop::before {
    background: linear-gradient(145deg, #0891b2 0%, #0e7490 50%, #164e63 100%);
}

.news-image-training::before {
    background: linear-gradient(145deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
}

.news-image-equipment::before {
    background: linear-gradient(145deg, #059669 0%, #047857 50%, #065f46 100%);
}

.news-image-support::before {
    background: linear-gradient(145deg, #ea580c 0%, #dc2626 50%, #b91c1c 100%);
}

.news-icon {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

.news-status {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
    z-index: 3;
}

.news-status-soon {
    background: rgba(255, 255, 255, 0.95);
    color: #0891b2;
}

.news-status-prep {
    background: rgba(255, 255, 255, 0.95);
    color: #7c3aed;
}

.news-status-new {
    background: rgba(255, 255, 255, 0.95);
    color: #059669;
}

.news-status-active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

/* News Content */
.news-content {
    padding: 20px 0;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.news-category {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
    background: rgba(8, 145, 178, 0.1);
    padding: 4px 12px;
    border-radius: 0;
}

.news-date {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.news-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.news-description {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
    margin: 0 0 24px 0;
}

.news-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}

.news-features li {
    position: relative;
    padding-left: 24px;
    font-size: 0.9rem;
    color: var(--color-text);
}

.news-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    border-radius: 50%;
}

.news-cta {
    margin-top: 8px;
}

.btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Subscribe Section */
.news-subscribe {
    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 60px;
    margin: 40px 60px 80px;
    border-radius: 0;
    border: 1px solid var(--color-border);
}

.subscribe-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.subscribe-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0891b2 0%, #0e7490 100%);
    border-radius: 0;
    color: white;
    box-shadow: 0 10px 30px rgba(8, 145, 178, 0.3);
}

.subscribe-text {
    flex: 1;
}

.subscribe-text h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0 0 8px 0;
}

.subscribe-text p {
    font-size: 0.95rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.6;
}

/* Responsive News Page */
@media (max-width: 1100px) {
    .news-hero {
        padding: 60px 40px;
    }
    
    .news-hero h1 {
        font-size: 2.4rem;
    }
    
    .hero-circle {
        width: 220px;
        height: 220px;
    }
    
    .news-timeline {
        padding: 60px 40px;
    }
    
    .news-item {
        gap: 40px;
        padding: 50px 0;
    }
    
    .news-image {
        height: 300px;
    }
    
    .news-content h2 {
        font-size: 1.7rem;
    }
    
    .news-subscribe {
        margin: 40px 40px 60px;
        padding: 50px;
    }
}

@media (max-width: 900px) {
    .news-hero {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .news-hero-content {
        max-width: 100%;
    }
    
    .news-hero-decoration {
        display: none;
    }
    
    .news-item,
    .news-item-reverse {
        grid-template-columns: 1fr;
        gap: 30px;
        direction: ltr;
    }
    
    .news-image {
        height: 280px;
    }
    
    .news-features {
        grid-template-columns: 1fr;
    }
    
    .subscribe-content {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
}

@media (max-width: 600px) {
    .news-hero {
        padding: 50px 24px;
    }
    
    .news-hero h1 {
        font-size: 2rem;
    }
    
    .news-hero p {
        font-size: 1rem;
    }
    
    .news-timeline {
        padding: 40px 24px;
    }
    
    .news-item {
        padding: 40px 0;
    }
    
    .news-image {
        height: 240px;
    }
    
    .news-content h2 {
        font-size: 1.5rem;
    }
    
    .news-description {
        font-size: 0.95rem;
    }
    
    .news-subscribe {
        margin: 30px 24px 50px;
        padding: 40px 24px;
    }
    
    .subscribe-icon {
        width: 64px;
        height: 64px;
    }
    
    .subscribe-icon svg {
        width: 32px;
        height: 32px;
    }
}

/* ============================================================
   PAGE FORMATIONS - Training Page Design
   ============================================================ */

/* Training Hero */
.training-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 80px 60px;
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    gap: 60px;
}

.training-hero-content {
    max-width: 600px;
}

.training-hero-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    margin-bottom: 20px;
}

.training-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 16px 0;
    line-height: 1.1;
}

.training-hero p {
    font-size: 1.1rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
}

.training-hero-visual {
    position: relative;
    flex-shrink: 0;
}

.hero-icon-main {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c3aed 0%, #6d28d9 100%);
    border-radius: 50%;
    color: white;
    box-shadow: 0 20px 50px rgba(124, 58, 237, 0.35);
}

.hero-floating-icons {
    position: absolute;
    inset: -40px;
}

.floating-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    color: var(--color-primary);
    animation: floatIcon 4s ease-in-out infinite;
}

.fi-1 {
    top: 0;
    right: 10px;
    animation-delay: 0s;
}

.fi-2 {
    bottom: 20px;
    left: -20px;
    animation-delay: 1s;
}

.fi-3 {
    bottom: -10px;
    right: -10px;
    animation-delay: 2s;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Training Intro */
.training-intro {
    padding: 80px 60px;
    display: flex;
    gap: 60px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.intro-content {
    flex: 1;
}

.intro-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 20px 0;
}

.intro-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text);
    margin: 0;
}

.intro-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    flex-shrink: 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 20px;
    background: white;
    border-radius: 0;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-card);
    text-align: center;
    min-width: 140px;
}

.stat-icon {
    color: var(--color-primary);
}

.stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-main);
}

/* Training Grid */
.training-grid {
    padding: 0 60px 80px;
    max-width: 1400px;
    margin: 0 auto;
}

.training-grid .section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 40px 0;
    text-align: center;
}

.training-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Training Card */
.training-card {
    background: white;
    border-radius: 0;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.training-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.training-card-featured {
    border: 2px solid rgba(124, 58, 237, 0.3);
}

.training-card-featured:hover {
    border-color: rgba(124, 58, 237, 0.5);
}

.training-card-custom {
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border-style: dashed;
}

.card-header {
    padding: 24px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    color: white;
}

.card-icon-cad {
    background: linear-gradient(145deg, #7c3aed 0%, #6d28d9 100%);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.card-icon-cad {
    background: linear-gradient(145deg, #0891b2 0%, #0e7490 100%);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.3);
}

.card-icon-cam {
    background: linear-gradient(145deg, #059669 0%, #047857 100%);
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.3);
}

.card-icon-scan {
    background: linear-gradient(145deg, #ea580c 0%, #dc2626 100%);
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.3);
}

.card-icon-print {
    background: linear-gradient(145deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.card-icon-custom {
    background: linear-gradient(145deg, #64748b 0%, #475569 100%);
    box-shadow: 0 8px 20px rgba(100, 116, 139, 0.3);
}

.card-badge {
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
}

.badge-coming {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.badge-custom {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
}

.card-body {
    padding: 20px 24px;
    flex: 1;
}

.card-body h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 12px 0;
}

.card-description {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0 0 16px 0;
}

.card-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.level {
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 0;
}

.level-beginner {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.level-intermediate {
    background: rgba(234, 179, 8, 0.15);
    color: #b45309;
}

.level-advanced {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-features li {
    position: relative;
    padding-left: 20px;
    font-size: 0.85rem;
    color: var(--color-text);
    margin-bottom: 8px;
    line-height: 1.5;
}

.card-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.card-features li:last-child {
    margin-bottom: 0;
}

.card-footer {
    padding: 16px 24px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border-light);
    margin-top: auto;
}

.card-duration {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.card-status {
    font-size: 0.75rem;
    color: var(--color-text-light);
    font-style: italic;
}

.btn-sm {
    padding: 10px 20px;
    font-size: 0.85rem;
}

/* Training Floating Icons Section */
.training-floating-section {
    padding: 0 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.floating-icons-row {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.floating-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 32px;
    background: white;
    border-radius: 0;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.floating-icon-card:hover {
    transform: translateY(-4px);
    border-color: #0891b2;
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.15);
}

.floating-icon-card .floating-icon {
    position: static;
    animation: none;
}

.floating-icon-card span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-main);
    letter-spacing: 0.02em;
}

@media (max-width: 900px) {
    .training-floating-section {
        padding: 0 40px 30px;
    }
    
    .floating-icons-row {
        gap: 20px;
    }
    
    .floating-icon-card {
        padding: 20px 24px;
    }
}

@media (max-width: 600px) {
    .training-floating-section {
        padding: 0 24px 30px;
    }
    
    .floating-icons-row {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    
    .floating-icon-card {
        flex-direction: row;
        width: 100%;
        max-width: 280px;
        padding: 16px 20px;
        gap: 14px;
    }
}

/* Training CTA */
.training-cta {
    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 60px;
    margin: 0 60px 80px;
    border-radius: 0;
    border: 1px solid var(--color-border);
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.cta-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7c3aed 0%, #6d28d9 100%);
    border-radius: 0;
    color: white;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3);
}

.cta-text {
    flex: 1;
}

.cta-text h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0 0 8px 0;
}

.cta-text p {
    font-size: 0.95rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.6;
}

/* Responsive Training Page */
@media (max-width: 1200px) {
    .training-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1000px) {
    .training-hero {
        flex-direction: column;
        text-align: center;
        padding: 60px 40px;
        gap: 40px;
    }
    
    .training-hero-content {
        max-width: 100%;
    }
    
    .training-intro {
        flex-direction: column;
        padding: 60px 40px;
        text-align: center;
    }
    
    .intro-stats {
        width: 100%;
        max-width: 400px;
    }
    
    .training-grid {
        padding: 0 40px 60px;
    }
    
    .training-cta {
        margin: 0 40px 60px;
        padding: 50px;
    }
    
    .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .training-hero {
        padding: 50px 24px;
    }
    
    .training-hero h1 {
        font-size: 2.2rem;
    }
    
    .hero-icon-main {
        width: 140px;
        height: 140px;
    }
    
    .hero-icon-main svg {
        width: 70px;
        height: 70px;
    }
    
    .hero-floating-icons {
        display: none;
    }
    
    .training-cards {
        grid-template-columns: 1fr;
    }
    
    .training-intro {
        padding: 50px 24px;
    }
    
    .intro-content h2 {
        font-size: 1.6rem;
    }
    
    .training-grid {
        padding: 0 24px 50px;
    }
    
    .training-grid .section-title {
        font-size: 1.5rem;
    }
    
    .training-cta {
        margin: 0 24px 50px;
        padding: 40px 24px;
    }
    
    .cta-icon {
        width: 64px;
        height: 64px;
    }
    
    .cta-icon svg {
        width: 32px;
        height: 32px;
    }
    
    .card-footer {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

/* ============================================================
   PAGE À PROPOS - About Page Design
   ============================================================ */

/* About Hero */
.about-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 80px 60px;
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    gap: 60px;
}

.about-hero-content {
    max-width: 650px;
}

.about-hero-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    margin-bottom: 20px;
}

.about-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 16px 0;
    line-height: 1.1;
}

.about-hero p {
    font-size: 1.1rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
}

.about-hero-visual {
    position: relative;
    flex-shrink: 0;
}

.hero-icon-about {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0891b2 0%, #0e7490 100%);
    border-radius: 50%;
    color: white;
    box-shadow: 0 20px 50px rgba(8, 145, 178, 0.35);
    overflow: hidden;
}

.hero-logo-img {
    width: 140px;
    height: auto;
    object-fit: contain;
}

.hero-logo-standalone {
    width: auto;
    height: 160px;
    object-fit: contain;
}

.hero-accent-dots {
    position: absolute;
    top: -30px;
    right: -40px;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(circle, rgba(8, 145, 178, 0.2) 2px, transparent 2px);
    background-size: 14px 14px;
}

/* About Timeline */
.about-timeline {
    padding: 80px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.about-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 60px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.about-item:last-child {
    border-bottom: none;
}

.about-item-reverse {
    direction: rtl;
}

.about-item-reverse > * {
    direction: ltr;
}

/* About Visual */
.about-visual {
    position: relative;
}

.about-image-wrapper {
    position: relative;
    border-radius: 0;
    overflow: visible;
}

.about-image {
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.about-image::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.95;
}

.about-image-origin::before {
    background: linear-gradient(145deg, #0891b2 0%, #0e7490 50%, #164e63 100%);
}

.about-image-specialty::before {
    background: linear-gradient(145deg, #059669 0%, #047857 50%, #065f46 100%);
}

.about-image-philosophy::before {
    background: linear-gradient(145deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
}

.about-icon {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

.about-year {
    position: absolute;
    bottom: -15px;
    left: 30px;
    padding: 10px 24px;
    background: white;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 3;
}

.about-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.95);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #059669;
    border-radius: 0;
    z-index: 3;
}

.about-badge-alt {
    color: #7c3aed;
}

/* About Content */
.about-content {
    padding: 20px 0;
}

.about-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.about-category {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
    background: rgba(8, 145, 178, 0.1);
    padding: 4px 12px;
    border-radius: 0;
}

.about-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.about-description {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
    margin: 0 0 16px 0;
}

.about-description strong {
    color: var(--color-text-main);
}

.about-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.about-features li {
    position: relative;
    padding-left: 28px;
    font-size: 0.95rem;
    color: var(--color-text);
    margin-bottom: 12px;
    line-height: 1.6;
}

.about-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    border-radius: 50%;
}

.about-features li:last-child {
    margin-bottom: 0;
}

.about-note {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
    padding-left: 16px;
    border-left: 3px solid var(--color-border);
    font-style: italic;
}

/* Values Section */
.about-values {
    padding: 80px 60px;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
}

.values-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-align: center;
    margin: 0 0 50px 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.value-card {
    background: white;
    padding: 32px 28px;
    border-radius: 0;
    text-align: center;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.value-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    background: linear-gradient(145deg, rgba(8, 145, 178, 0.1) 0%, rgba(14, 116, 144, 0.05) 100%);
    border-radius: 0;
    color: var(--color-primary);
}

.value-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 12px 0;
}

.value-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
}

/* About CTA */
.about-cta {
    background: linear-gradient(145deg, #e2e8f0 0%, #cbd5e1 100%);
    padding: 60px;
    margin: 0 60px 80px;
    border-radius: 0;
    border: 1px solid var(--color-border);
}

.about-cta .cta-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.about-cta .cta-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0891b2 0%, #0e7490 100%);
    border-radius: 0;
    color: white;
    box-shadow: 0 10px 30px rgba(8, 145, 178, 0.3);
}

.about-cta .cta-text {
    flex: 1;
}

.about-cta .cta-text h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0 0 8px 0;
}

.about-cta .cta-text p {
    font-size: 0.95rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.6;
}

/* Responsive About Page */
@media (max-width: 1100px) {
    .about-hero {
        padding: 60px 40px;
        gap: 40px;
    }
    
    .about-hero h1 {
        font-size: 2.4rem;
    }
    
    .hero-icon-about {
        width: 150px;
        height: 150px;
    }
    
    .hero-icon-about svg {
        width: 80px;
        height: 80px;
    }
    
    .about-timeline {
        padding: 60px 40px;
    }
    
    .about-item {
        gap: 40px;
        padding: 50px 0;
    }
    
    .about-image {
        height: 300px;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-values {
        padding: 60px 40px;
    }
    
    .about-cta {
        margin: 0 40px 60px;
        padding: 50px;
    }
}

@media (max-width: 900px) {
    .about-hero {
        flex-direction: column;
        text-align: center;
    }
    
    .about-hero-content {
        max-width: 100%;
    }
    
    .about-item,
    .about-item-reverse {
        grid-template-columns: 1fr;
        gap: 30px;
        direction: ltr;
    }
    
    .about-image {
        height: 280px;
    }
    
    .about-cta .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
}

@media (max-width: 600px) {
    .about-hero {
        padding: 50px 24px;
    }
    
    .about-hero h1 {
        font-size: 2rem;
    }
    
    .about-hero p {
        font-size: 1rem;
    }
    
    .hero-icon-about {
        width: 120px;
        height: 120px;
    }
    
    .hero-icon-about svg {
        width: 60px;
        height: 60px;
    }
    
    .hero-accent-dots {
        display: none;
    }
    
    .about-timeline {
        padding: 40px 24px;
    }
    
    .about-item {
        padding: 40px 0;
    }
    
    .about-image {
        height: 240px;
    }
    
    .about-content h2 {
        font-size: 1.6rem;
    }
    
    .about-description {
        font-size: 0.95rem;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .about-values {
        padding: 50px 24px;
    }
    
    .values-title {
        font-size: 1.6rem;
    }
    
    .about-cta {
        margin: 0 24px 50px;
        padding: 40px 24px;
    }
    
    .about-cta .cta-icon {
        width: 64px;
        height: 64px;
    }
    
    .about-cta .cta-icon svg {
        width: 32px;
        height: 32px;
    }
}

/* ============================================================
   MOBILE RESPONSIVE - Menu Hamburger & Adaptations
   ============================================================ */

/* Hamburger Button - Hidden on Desktop */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10005;
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text-main);
    border-radius: 0;
    transition: all 0.3s ease;
}

/* Hamburger Animation when menu is open */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Styles - Max 768px */
@media (max-width: 768px) {
    /* Show hamburger button */
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Header adjustments */
    .header-inner {
        padding: 12px 20px;
    }
    
    .logo-img {
        height: 40px;
    }
    
    /* Mobile Navigation */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: white;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
        transition: right 0.3s ease;
        z-index: 10004;
        padding-top: 80px;
        visibility: hidden;
        opacity: 0;
    }
    
    .main-nav.active {
        right: 0;
        visibility: visible;
        opacity: 1;
    }

    .main-nav,
    .main-nav * {
        pointer-events: auto !important;
    }
    
    .main-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 20px;
    }
    
    .main-nav li {
        border-bottom: 1px solid var(--color-border-light);
    }
    
    .main-nav li:last-child {
        border-bottom: none;
    }
    
    .nav-link {
        display: block;
        padding: 16px 0;
        font-size: 1rem;
        letter-spacing: 0.05em;
    }
    
    /* Overlay when menu is open */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 10002;
        pointer-events: none;
    }
    
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: none;
    }
    
    /* Preloader adjustments */
    .preloader-logo-img {
        height: 40px;
    }
    
    .preloader-logo {
        top: 15px;
        left: 20px;
    }
    
    .cnc-viewport {
        transform: scale(1);
    }
    
    /* Hero sections */
    .news-hero,
    .training-hero,
    .about-hero {
        padding: 40px 20px;
    }
    
    .news-hero h1,
    .training-hero h1,
    .about-hero h1 {
        font-size: 1.8rem;
    }
    
    .news-hero p,
    .training-hero p,
    .about-hero p {
        font-size: 0.95rem;
    }
    
    /* News timeline */
    .news-timeline {
        padding: 40px 20px;
    }
    
    .news-item {
        padding: 30px 0;
        gap: 24px;
    }
    
    .news-image {
        height: 200px;
    }
    
    .news-content h2 {
        font-size: 1.4rem;
    }
    
    .news-features {
        grid-template-columns: 1fr;
    }
    
    /* Training cards */
    .training-intro {
        padding: 40px 20px;
    }
    
    .intro-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .stat-item {
        padding: 16px 12px;
        min-width: auto;
    }
    
    .training-grid {
        padding: 0 20px 40px;
    }
    
    .training-cards {
        gap: 20px;
    }
    
    .card-body h3 {
        font-size: 1.15rem;
    }
    
    /* About page */
    .about-timeline {
        padding: 40px 20px;
    }
    
    .about-item {
        padding: 30px 0;
    }
    
    .about-image {
        height: 200px;
    }
    
    .about-content h2 {
        font-size: 1.4rem;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .value-card {
        padding: 24px 16px;
    }
    
    .value-icon {
        width: 56px;
        height: 56px;
    }
    
    .value-card h3 {
        font-size: 1rem;
    }
    
    .value-card p {
        font-size: 0.85rem;
    }
    
    /* Subscribe/CTA sections */
    .news-subscribe,
    .training-cta,
    .about-cta {
        margin: 20px;
        padding: 30px 20px;
    }
    
    .subscribe-content,
    .cta-content,
    .about-cta .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .subscribe-icon,
    .cta-icon,
    .about-cta .cta-icon {
        width: 60px;
        height: 60px;
    }
    
    .subscribe-text h3,
    .cta-text h3,
    .about-cta .cta-text h3 {
        font-size: 1.2rem;
    }
    
    /* Contact page */
    .contact-page-layout {
        grid-template-columns: 1fr;
        padding: 30px 20px;
    }
    
    .contact-info-card {
        padding: 30px 24px;
    }
    
    .contact-form-card {
        padding: 30px 24px;
    }
    
    .contact-form-card h2 {
        font-size: 1.4rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-inner {
        padding: 40px 20px 0;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .footer-brand {
        align-items: center;
    }
    
    .footer-description {
        max-width: 100%;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-logo-img {
        margin-left: 0;
    }
    
    .footer-nav-group h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-contact-info {
        align-items: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .footer-bottom-right {
        flex-direction: column;
        gap: 12px;
    }
    
    /* Buttons */
    .btn {
        padding: 12px 24px;
        font-size: 0.85rem;
    }
    
    /* Hero logo standalone */
    .hero-logo-standalone {
        height: 120px;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .header-inner {
        padding: 10px 16px;
    }
    
    .logo-img {
        height: 35px;
    }
    
    .news-hero h1,
    .training-hero h1,
    .about-hero h1 {
        font-size: 1.5rem;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .intro-stats {
        grid-template-columns: 1fr;
    }
    
    .news-image,
    .about-image {
        height: 180px;
    }
    
    .card-header {
        padding: 20px 20px 0;
    }
    
    .card-body {
        padding: 16px 20px;
    }
    
    .card-footer {
        padding: 16px 20px 20px;
    }
    
    .hero-logo-standalone {
        height: 100px;
    }
}

/* =========================================================
   Bandeau Cookies & Modale de préférences (LPD suisse)
   ========================================================= */

/* --- Bandeau --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    background: linear-gradient(145deg, #0c4a6e 0%, #0e7490 100%);
    color: #e0f2fe;
    padding: 0;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 420ms ease;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.cookie-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.cookie-banner-text {
    flex: 1;
}

.cookie-banner-text h3 {
    margin: 0 0 6px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.08em;
}

.cookie-banner-text p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #bae6fd;
}

.cookie-banner-text a {
    color: #67e8f9;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-banner-text a:hover {
    color: #ffffff;
}

.cookie-banner-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 10px 20px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Oxanium', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 200ms ease;
    white-space: nowrap;
}

.cookie-btn-accept {
    background: #22d3ee;
    color: #0c4a6e;
}

.cookie-btn-accept:hover {
    background: #67e8f9;
}

.cookie-btn-refuse {
    background: transparent;
    color: #bae6fd;
    border: 1px solid rgba(186, 230, 253, 0.4);
}

.cookie-btn-refuse:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}

.cookie-btn-settings {
    background: transparent;
    color: #67e8f9;
    border: 1px solid rgba(103, 232, 249, 0.4);
}

.cookie-btn-settings:hover {
    background: rgba(103, 232, 249, 0.1);
    color: #ffffff;
    border-color: rgba(103, 232, 249, 0.7);
}

/* --- Overlay modale --- */
.cookie-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
    padding: 20px;
}

.cookie-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* --- Modale --- */
.cookie-modal {
    background: #ffffff;
    color: #334155;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.3);
    transform: translateY(20px) scale(0.97);
    transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cookie-modal-overlay.is-visible .cookie-modal {
    transform: translateY(0) scale(1);
}

.cookie-modal-header {
    padding: 28px 28px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cookie-modal-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0c4a6e;
    letter-spacing: 0.06em;
}

.cookie-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    transition: color 200ms ease;
}

.cookie-modal-close:hover {
    color: #0c4a6e;
}

.cookie-modal-intro {
    padding: 12px 28px 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #64748b;
}

.cookie-modal-intro a {
    color: #0891b2;
    text-decoration: underline;
}

/* --- Catégories de cookies --- */
.cookie-categories {
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cookie-category {
    border: 1px solid #e2e8f0;
    padding: 18px 20px;
    transition: border-color 200ms ease;
}

.cookie-category:hover {
    border-color: #0891b2;
}

.cookie-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.cookie-category-info h4 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0c4a6e;
    letter-spacing: 0.04em;
}

.cookie-category-info p {
    margin: 4px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #64748b;
}

/* --- Toggle switch --- */
.cookie-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cookie-toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 24px;
    cursor: pointer;
    transition: background 200ms ease;
}

.cookie-toggle-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 200ms ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.cookie-toggle input:checked + .cookie-toggle-slider {
    background: #0891b2;
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
    transform: translateX(20px);
}

.cookie-toggle input:disabled + .cookie-toggle-slider {
    background: #0891b2;
    opacity: 0.6;
    cursor: not-allowed;
}

.cookie-toggle input:disabled:checked + .cookie-toggle-slider::before {
    transform: translateX(20px);
}

.cookie-category-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    margin-left: 8px;
    background: rgba(8, 145, 178, 0.1);
    color: #0891b2;
}

.cookie-category-badge-required {
    background: rgba(14, 116, 144, 0.1);
    color: #0e7490;
}

/* --- Footer modale --- */
.cookie-modal-footer {
    padding: 0 28px 24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.cookie-modal-footer .cookie-btn {
    padding: 10px 24px;
}

/* --- Lien footer --- */
.footer-cookie-link {
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    padding: 0;
    text-decoration: none;
    transition: color 200ms ease;
}

.footer-cookie-link:hover {
    color: var(--color-accent);
}

/* --- Responsive bandeau cookies --- */
@media (max-width: 768px) {
    .cookie-banner-inner {
        flex-direction: column;
        padding: 20px 20px;
        gap: 16px;
    }

    .cookie-banner-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .cookie-btn {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
    }

    .cookie-modal {
        max-height: 90vh;
    }

    .cookie-modal-header {
        padding: 20px 20px 0;
    }

    .cookie-modal-intro {
        padding: 12px 20px 0;
    }

    .cookie-categories {
        padding: 16px 20px;
    }

    .cookie-category {
        padding: 14px 16px;
    }

    .cookie-modal-footer {
        padding: 0 20px 20px;
        flex-direction: column;
    }

    .cookie-modal-footer .cookie-btn {
        width: 100%;
        text-align: center;
    }
}


/* =========================================================
   PARTENAIRES & FOURNISSEURS – Logo grids
   ========================================================= */

.logo-section {
    padding: 80px 24px;
    background: var(--color-surface);
}

.logo-section-dark {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
}

.logo-section-dark .hp-section-header h2 {
    color: #ffffff;
}

.logo-section-dark .hp-label {
    color: var(--color-primary-light);
    border-color: rgba(34, 211, 238, 0.3);
}

.logo-section-dark .logo-section-desc {
    color: rgba(255, 255, 255, 0.55);
}

.logo-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.logo-section-desc {
    font-size: 0.92rem;
    color: rgba(100, 116, 139, 0.9);
    line-height: 1.65;
    max-width: 640px;
    margin-bottom: 48px;
}

.logo-grid {
    display: grid;
    gap: 24px;
}

.logo-grid-partners {
    grid-template-columns: repeat(3, 1fr);
}

.logo-grid-suppliers {
    grid-template-columns: repeat(4, 1fr);
}

.logo-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    min-height: 160px;
}

.logo-section:not(.logo-section-dark) .logo-slot {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.logo-slot:hover {
    border-color: rgba(8, 145, 178, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.08);
}

.logo-section:not(.logo-section-dark) .logo-slot:hover {
    border-color: rgba(8, 145, 178, 0.3);
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.1);
}

.logo-slot img {
    width: 140px;
    height: 80px;
    object-fit: contain;
    filter: grayscale(0.3);
    transition: filter 0.3s ease;
}

.logo-slot:hover img {
    filter: grayscale(0);
}

.logo-name {
    display: block;
    margin-top: 16px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.5;
}

.logo-section-dark .logo-name {
    color: #ffffff;
}

/* Partner page custom look: no cards, bigger logos, transparent round pedestal */
.page-partenaire .logo-slot,
.page-partenaire .logo-section:not(.logo-section-dark) .logo-slot {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 14px 10px 20px;
    min-height: 220px;
}

.page-partenaire .logo-slot:hover,
.page-partenaire .logo-section:not(.logo-section-dark) .logo-slot:hover {
    transform: none;
    border: none;
    box-shadow: none;
}

.page-partenaire .logo-slot img {
    width: 360px;
    height: 200px;
    max-width: 100%;
    object-fit: contain;
    filter: none;
    transform: none;
    transition: transform 0.28s ease;
}

.page-partenaire .logo-slot:hover img {
    transform: translateY(-4px);
}

.page-partenaire .logo-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    clip-path: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 1;
}

.page-partenaire .logo-name::before {
    content: none;
}

.page-partenaire .logo-name::after {
    content: none;
}

.page-partenaire .logo-section:not(.logo-section-dark) .logo-name {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #0f172a;
}

@media (max-width: 1024px) {
    .logo-grid-partners {
        grid-template-columns: repeat(2, 1fr);
    }
    .logo-grid-suppliers {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .logo-section {
        padding: 56px 16px;
    }
    .logo-grid-partners {
        grid-template-columns: repeat(2, 1fr);
    }
    .logo-grid-suppliers {
        grid-template-columns: repeat(2, 1fr);
    }
    .logo-grid {
        gap: 16px;
    }
    .logo-slot {
        padding: 24px 16px 20px;
        min-height: 130px;
    }
    .logo-slot img {
        width: 110px;
        height: 60px;
    }
    .page-partenaire .logo-slot,
    .page-partenaire .logo-section:not(.logo-section-dark) .logo-slot {
        min-height: 190px;
        padding: 10px 6px 16px;
    }
    .page-partenaire .logo-slot img {
        width: 300px;
        height: 170px;
        transform: none;
    }
    .page-partenaire .logo-name {
        font-size: 0.68rem;
    }
}

@media (max-width: 480px) {
    .logo-grid-suppliers {
        grid-template-columns: repeat(2, 1fr);
    }
    .logo-slot {
        padding: 20px 12px 16px;
        min-height: 110px;
    }
    .logo-slot img {
        width: 90px;
        height: 50px;
    }
    .logo-name {
        font-size: 0.7rem;
    }
    .page-partenaire .logo-slot img {
        width: 240px;
        height: 136px;
        transform: none;
    }
    .page-partenaire .logo-name {
        font-size: 0.62rem;
        padding: 0;
    }
}

/* =========================================================
   PARTNER PAGE V2 (FR preview only)
   ========================================================= */

.partner-v2 .partner-showcase {
    padding: 82px 24px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
}

.partner-v2 .partner-showcase-dark {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.partner-v2 .partner-showcase-inner {
    max-width: 1240px;
    margin: 0 auto;
}

.partner-v2 .partner-showcase-head {
    max-width: 820px;
    margin-bottom: 34px;
}

.partner-v2 .partner-showcase-head h2 {
    margin: 10px 0 10px;
    font-size: clamp(1.7rem, 2.3vw, 2.25rem);
    letter-spacing: 0.02em;
}

.partner-v2 .partner-showcase-head p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(15, 23, 42, 0.72);
}

.partner-v2 .partner-showcase-dark .partner-showcase-head h2 {
    color: #0f172a;
}

.partner-v2 .partner-showcase-dark .partner-showcase-head p {
    color: rgba(15, 23, 42, 0.72);
}

.partner-v2 .partner-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.partner-v2 .supplier-stage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.partner-v2 .partner-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, 0.18);
    background: rgba(255, 255, 255, 0.85);
    padding: 28px 24px 24px;
    min-height: 240px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.partner-v2 .partner-card::before {
    content: none;
}

.partner-v2 .partner-card:hover {
    transform: translateY(-4px);
    border-color: rgba(8, 145, 178, 0.32);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.partner-v2 .partner-showcase-dark .partner-card {
    border-color: rgba(148, 163, 184, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.9) 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}

.partner-v2 .partner-showcase-dark .partner-card:hover {
    border-color: rgba(8, 145, 178, 0.36);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
}

.partner-v2 .partner-card-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 8px;
}

.partner-v2 .partner-card-logo::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #0891b2 0%, #22d3ee 38%, #6366f1 70%, #0891b2 100%);
    background-size: 220% 100%;
    animation: partnerLineFlow 4s linear infinite;
}

.partner-v2 .partner-card-logo img {
    width: min(100%, 340px);
    height: 150px;
    object-fit: contain;
    filter: none;
}

.partner-v2 .supplier-card .partner-card-logo img {
    height: 128px;
}

.partner-v2 .partner-card-name {
    margin-top: 16px;
    display: inline-block;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: #0f172a;
}

.partner-v2 .partner-card-coming .partner-card-logo {
    border: 1px dashed rgba(16, 51, 92, 0.24);
    background: rgba(255, 255, 255, 0.55);
}

.partner-v2 .partner-card-coming-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid rgba(16, 51, 92, 0.16);
    color: #5a6880;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
}

@keyframes partnerLineFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

.partner-v2 .partner-showcase-dark .partner-card-name {
    color: #0f172a;
}

@media (max-width: 1024px) {
    .partner-v2 .supplier-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .partner-v2 .partner-showcase {
        padding: 58px 16px;
    }
    .partner-v2 .partner-stage,
    .partner-v2 .supplier-stage {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .partner-v2 .partner-card {
        min-height: 200px;
        padding: 22px 18px 18px;
    }
    .partner-v2 .partner-card-logo {
        min-height: 120px;
    }
    .partner-v2 .partner-card-logo img,
    .partner-v2 .supplier-card .partner-card-logo img {
        height: 116px;
    }
}

/* Retire globalement tous les badges de section */
.hp-label {
    display: none !important;
}

/* Header verrouille (sticky) sur la page Service technique */
.page-service-technique .site-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10003 !important;
}

.page-service-technique .page-main {
    padding-top: 0 !important;
}

.page-service-technique .hp-hero {
    margin-top: 0 !important;
    padding-top: 56px !important;
}

/* Header harmonise globalement */
.header-inner {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.page-service-technique .service-tech-layout {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 34px;
    align-items: center;
    padding: 28px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.page-service-technique .service-tech-layout-constrained {
    max-width: 1120px;
    margin: 0 auto;
}

.page-service-technique .service-tech-image {
    width: 100%;
    height: 100%;
    min-height: 410px;
    display: block;
    object-fit: cover;
    border-radius: 0;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.page-service-technique .service-tech-copy {
    color: #0f172a;
    background: #ffffff;
    border: 1px solid rgba(8, 145, 178, 0.16);
    box-shadow: 0 10px 28px rgba(8, 145, 178, 0.08);
    padding: 28px;
    text-align: left;
    max-width: 620px;
}

.page-service-technique .service-tech-title {
    margin: 0 0 16px;
    font-size: clamp(1.22rem, 2.05vw, 1.78rem);
    line-height: 1.24;
    font-weight: 700;
    color: var(--color-primary-light);
}

.page-service-technique .service-tech-title-nowrap {
    white-space: nowrap;
}

.page-service-technique .service-tech-copy p {
    margin: 0 0 16px;
    font-size: 1.02rem;
    line-height: 1.78;
    color: #0f172a;
}

.page-service-technique .service-tech-copy p:first-of-type {
    color: #1e293b;
    font-weight: 500;
}

@media (max-width: 900px) {
    .page-service-technique .service-tech-layout {
        grid-template-columns: 1fr;
        padding: 18px;
        gap: 20px;
    }
    .page-service-technique .service-tech-image {
        min-height: 300px;
    }
    .page-service-technique .service-tech-copy {
        max-width: 100%;
        padding: 20px;
    }
}

/* Tablette + mobile: eviter tout rognage des images sur nouveautes/service-technique */
@media (max-width: 1024px) {
    .page-nouveautes .hp-news .news-item-media {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8fbff;
        height: 320px;
        min-height: 320px;
    }

    .page-nouveautes .hp-news .news-item-img {
        width: 100%;
        height: 100%;
        min-height: 0 !important;
        max-height: none;
        object-fit: contain;
        object-position: center;
        box-shadow: none;
        background: #f8fbff;
    }

    .page-service-technique .service-tech-image {
        width: 100%;
        height: auto;
        min-height: 0 !important;
        max-height: 420px;
        object-fit: contain;
        object-position: center;
        box-shadow: none;
        background: #f8fbff;
    }
}

/* iPhone / petits ecrans: meilleure adaptation nouveautes + service technique */
@media (max-width: 768px) {
    .page-nouveautes .hp-news {
        padding: 56px 16px;
    }

    .page-nouveautes .hp-news .news-stack {
        gap: 22px;
    }

    .page-nouveautes .hp-news .news-item {
        gap: 12px;
    }

    .page-nouveautes .hp-news .news-item-content h3 {
        font-size: clamp(1.02rem, 5.2vw, 1.22rem);
        line-height: 1.3;
    }

    .page-nouveautes .hp-news .news-item-content p {
        font-size: 0.92rem;
        line-height: 1.62;
    }

    .page-nouveautes .hp-news .news-item-content .news-checklist li {
        font-size: 0.88rem;
        line-height: 1.48;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .page-service-technique .service-tech-layout {
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        gap: 14px;
    }

    .page-service-technique .service-tech-copy {
        padding: 16px;
        box-shadow: none;
    }

    .page-service-technique .service-tech-title {
        font-size: clamp(1.02rem, 5.6vw, 1.28rem);
        line-height: 1.3;
    }

    .page-service-technique .service-tech-title-nowrap {
        white-space: normal !important;
    }

    .page-service-technique .service-tech-copy p {
        font-size: 0.94rem;
        line-height: 1.66;
    }
}

@media (max-width: 480px) {
    .page-nouveautes .hp-news .news-item-media {
        height: 250px;
        min-height: 250px;
    }

    .page-nouveautes .hp-news .news-item-img {
        height: 100%;
        max-height: none;
    }

    .page-service-technique .service-tech-image {
        max-height: 300px;
    }
}

/* =========================================================
   Mobile redesign - page Nouveautes uniquement
   ========================================================= */
@media (max-width: 768px) {
    .page-nouveautes .hp-news {
        padding: 42px 14px 54px !important;
    }

    .page-nouveautes .hp-news .news-stack {
        gap: 18px !important;
    }

    .page-nouveautes .hp-news .news-item,
    .page-nouveautes .hp-news .news-item--reverse {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.1) !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
        overflow: hidden !important;
    }

    .page-nouveautes .hp-news .news-item-media {
        height: auto !important;
        min-height: 0 !important;
        background: #f4f8fb !important;
    }

    .page-nouveautes .hp-news .news-item-img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 16 / 10;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        background: #f4f8fb !important;
    }

    .page-nouveautes .hp-news .news-item-content {
        padding: 16px 14px 18px !important;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    .page-nouveautes .hp-news .news-item-content h3 {
        font-size: 1.03rem !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    .page-nouveautes .hp-news .news-item-content p {
        font-size: 0.91rem !important;
        line-height: 1.58 !important;
    }

    .page-nouveautes .hp-news .news-item-content .news-checklist {
        margin-top: 12px !important;
        gap: 7px !important;
    }

    .page-nouveautes .hp-news .news-item-content .news-checklist li {
        font-size: 0.86rem !important;
        line-height: 1.45 !important;
        padding-left: 22px !important;
    }
}

@media (max-width: 480px) {
    .page-nouveautes .hp-news {
        padding: 36px 12px 46px !important;
    }

    .page-nouveautes .hp-news .news-item-content {
        padding: 14px 12px 16px !important;
    }

    .page-nouveautes .hp-news .news-item-content h3 {
        font-size: 0.98rem !important;
    }
}

/* Garde le header sticky partout, y compris apres les media queries */
.site-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 10003 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #ffffff !important;
    box-shadow: 0 1px 8px rgba(8, 145, 178, 0.08) !important;
}

/* Verrou global anti-decalage */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    overflow-x: hidden !important;
}

html {
    overflow-y: scroll !important;
}

body {
    padding-top: 0 !important;
}

.page-main {
    padding-top: 0 !important;
}