/**
 * APPO TRANSPORT — vtc.css
 * Styles principaux du site VTC Premium
 * Version: 1.0.0 Production
 * Design: Noir & Or Luxe
 *
 * TABLE DES MATIÈRES
 * ─────────────────────────────────────────
 *  1.  Variables CSS
 *  2.  Reset & Base
 *  3.  Accessibilité
 *  4.  Navigation
 *  5.  Hero
 *  6.  Sections communes
 *  7.  Services
 *  8.  Pourquoi APPO
 *  9.  Chiffres clés
 * 10.  Tarifs
 * 11.  Zones desservies
 * 12.  Avis clients
 * 13.  Contact & Formulaire
 * 14.  Footer
 * 15.  Boutons flottants
 * 16.  Animations
 * 17.  Scroll reveal
 * 18.  Responsive — 1100px
 * 19.  Responsive — 900px
 * 20.  Responsive — 768px
 * 21.  Responsive — 480px
 * 22.  Print
 */

/* ============================================================
   1. VARIABLES CSS
   ============================================================ */
:root {
    /* Couleurs principales */
    --or:           #c9a84c;
    --or-light:     #e8c97a;
    --or-dim:       rgba(201, 168, 76, 0.12);
    --or-border:    rgba(201, 168, 76, 0.25);
    --or-shadow:    0 8px 40px rgba(201, 168, 76, 0.18);

    /* Noirs */
    --noir:         #080808;
    --noir-2:       #0e0e0e;
    --noir-3:       #151515;
    --noir-4:       #1c1c1c;

    /* Textes */
    --blanc:        #f4efe6;
    --blanc-dim:    rgba(244, 239, 230, 0.65);
    --blanc-faint:  rgba(244, 239, 230, 0.35);
    --gris:         #888888;
    --gris-2:       #555555;

    /* WhatsApp */
    --wa:           #25D366;
    --wa-dark:      #128C7E;

    /* Typo */
    --font-serif:   'Cormorant Garamond', Georgia, serif;
    --font-sans:    'Outfit', system-ui, sans-serif;

    /* Layout */
    --nav-height:   74px;
    --section-pad:  100px;
    --side-pad:     5vw;
}

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

html {
    scroll-behavior: smooth;
    font-size:       16px;
    /* Améliore le scroll sur iOS */
    -webkit-overflow-scrolling: touch;
}

body {
    background:             var(--noir);
    color:                  var(--blanc);
    font-family:            var(--font-sans);
    font-weight:            300;
    line-height:            1.7;
    overflow-x:             hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:         optimizeLegibility;
}

img {
    max-width:   100%;
    height:      auto;
    display:     block;
    /* Lazy loading natif */
    loading:     lazy;
}

.nav-logo-img{
height:72px;
width:auto;
display:block;
}

a {
    color:           inherit;
    text-decoration: none;
    transition:      color 0.3s ease;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor:      pointer;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--noir); }
::-webkit-scrollbar-thumb { background: var(--or); border-radius: 2px; }

/* Sélection de texte */
::selection {
    background: var(--or);
    color:      var(--noir);
}

/* ============================================================
   3. ACCESSIBILITÉ
   ============================================================ */

/* Lien d'évitement (skip to content) */
.skip-link {
    position:   absolute;
    top:        -100%;
    left:       0;
    padding:    12px 20px;
    background: var(--or);
    color:      var(--noir);
    font-size:  13px;
    font-weight: 600;
    z-index:    9999;
    transition: top 0.3s;
}
.skip-link:focus {
    top: 0;
}

/* Classe utilitaire pour éléments visuellement cachés */
.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

/* Focus visible amélioré */
:focus-visible {
    outline:        2px solid var(--or);
    outline-offset: 3px;
}

/* ============================================================
   4. NAVIGATION
   ============================================================ */
#nav {
    position:       fixed;
    top:            0;
    left:           0;
    right:          0;
    z-index:        1000;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    padding:        0 var(--side-pad);
    height:         var(--nav-height);
    background:     rgba(8, 8, 8, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:  1px solid var(--or-border);
    transition:     background 0.4s ease, height 0.3s ease;
    will-change:    transform; /* GPU acceleration */
}

#nav.scrolled {
    height:     64px;
    background: rgba(8, 8, 8, 0.98);
}

/* Logo */
.nav-logo {
    display:     flex;
    align-items: center;
    gap:         10px;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-logo-mark {
    width:          34px;
    height:         34px;
    border:         1px solid var(--or);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-family:    var(--font-serif);
    font-size:      15px;
    color:          var(--or);
    letter-spacing: 0.05em;
    flex-shrink:    0;
}

.nav-logo-text {
    font-family:    var(--font-sans);
    font-size:      13px;
    font-weight:    500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--blanc);
}

.nav-logo-text span {
    color: var(--or);
}

/* Menu desktop */
.nav-menu {
    display:     flex;
    align-items: center;
    gap:         0;
    list-style:  none;
}

.nav-menu a {
    display:        block;
    padding:        0 20px;
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--blanc-dim);
    text-decoration: none;
    line-height:    var(--nav-height);
    transition:     color 0.3s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--or);
}

/* CTA navigation */
.nav-cta {
    display:        flex;
    align-items:    center;
    gap:            8px;
    padding:        10px 22px;
    background:     var(--or);
    color:          var(--noir) !important;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    white-space:    nowrap;
    flex-shrink:    0;
    transition:     background 0.3s ease, transform 0.2s ease;
}

.nav-cta:hover {
    background: var(--or-light);
    transform:  translateY(-1px);
}

/* Bouton hamburger mobile */
.nav-toggle {
    display:        none;
    flex-direction: column;
    gap:            5px;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        4px;
    flex-shrink:    0;
}

.nav-toggle span {
    display:    block;
    width:      24px;
    height:     1px;
    background: var(--blanc);
    transition: all 0.3s ease;
}

.nav-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menu mobile */
.mobile-menu {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         999;
    background:      rgba(8, 8, 8, 0.98);
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             8px;
}

/* hidden attribute override */
.mobile-menu:not([hidden]) {
    display: flex;
}

.mobile-menu-close {
    position:    absolute;
    top:         24px;
    right:       24px;
    background:  none;
    border:      none;
    color:       var(--gris);
    font-size:   24px;
    cursor:      pointer;
    transition:  color 0.3s;
}
.mobile-menu-close:hover { color: var(--or); }

.mob-link {
    font-size:       28px;
    font-weight:     300;
    font-family:     var(--font-serif);
    color:           var(--blanc);
    text-decoration: none;
    padding:         12px 40px;
    transition:      color 0.3s ease;
}

.mob-link:hover    { color: var(--or); }

.mobile-cta {
    margin-top:     24px;
    font-family:    var(--font-sans);
    font-size:      13px;
    font-weight:    600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background:     var(--or);
    color:          var(--noir) !important;
    padding:        14px 36px;
}

.mobile-tel {
    margin-top:  8px;
    font-family: var(--font-sans);
    font-size:   13px;
    font-weight: 400;
    color:       var(--gris) !important;
    letter-spacing: 0.1em;
}

/* ============================================================
   5. HERO
   ============================================================ */
#hero {
    position:    relative;
    min-height:  100vh;
    display:     flex;
    align-items: center;
    padding:     calc(var(--nav-height) + 30px) var(--side-pad) 80px;
    overflow:    hidden;
}

/* Fond radial doré */
.hero-bg {
    position:   absolute;
    inset:      0;
    background:
        radial-gradient(ellipse 55% 60% at 68% 45%, rgba(201, 168, 76, 0.055) 0%, transparent 65%),
        radial-gradient(ellipse 30% 40% at 20% 80%, rgba(201, 168, 76, 0.025) 0%, transparent 60%),
        linear-gradient(160deg, #060606 0%, #0c0c0a 50%, #090907 100%);
    pointer-events: none;
}

/* Grille décorative */
.hero-grid {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    opacity:        0.032;
    background-image:
        linear-gradient(var(--or) 1px, transparent 1px),
        linear-gradient(90deg, var(--or) 1px, transparent 1px);
    background-size: 72px 72px;
    will-change: opacity;
}

/* Ligne verticale gauche */
.hero-vline {
    position:   absolute;
    left:       var(--side-pad);
    top:        0;
    bottom:     0;
    width:      1px;
    background: linear-gradient(to bottom, transparent 0%, var(--or) 25%, var(--or) 75%, transparent 100%);
    opacity:    0.22;
    pointer-events: none;
}

/* Cercles décoratifs */
.hero-circle {
    position:       absolute;
    right:          -10vw;
    top:            50%;
    transform:      translateY(-50%);
    width:          600px;
    height:         600px;
    border-radius:  50%;
    border:         1px solid var(--or-border);
    opacity:        0.15;
    pointer-events: none;
}

.hero-circle-2 {
    position:       absolute;
    right:          -6vw;
    top:            50%;
    transform:      translateY(-50%);
    width:          420px;
    height:         420px;
    border-radius:  50%;
    border:         1px solid var(--or-border);
    opacity:        0.1;
    pointer-events: none;
}

/* Texte vertical décoration */
.hero-differentiator {
    position:         absolute;
    right:            var(--side-pad);
    top:              35%;
    writing-mode:     vertical-rl;
    text-orientation: mixed;
    font-family:      var(--font-serif);
    font-style:       italic;
    font-weight:      300;
    font-size:        12px;
    color:            var(--or);
    opacity:          0.5;
    letter-spacing:   0.15em;
    animation:        fadeIn 1.2s ease 0.8s both;
    user-select:      none;
}

/* Contenu hero */
.hero-content {
    position:    relative;
    z-index:     2;
    max-width:   720px;
    padding-left: 2.5rem;
}

/* Badge disponibilité */
.hero-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    border:         1px solid var(--or-border);
    padding:        7px 16px;
    margin-bottom:  36px;
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--or);
    animation:      fadeInDown 0.8s ease both;
}

.hero-badge-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--or);
    flex-shrink:   0;
    animation:     pulse 2s ease-in-out infinite;
}

/* H1 */
.hero-h1 {
    font-family:   var(--font-serif);
    font-size:     clamp(44px, 6.5vw, 86px);
    font-weight:   300;
    line-height:   1.06;
    margin-bottom: 28px;
    animation:     fadeInUp 0.9s ease 0.1s both;
}

.hero-h1 em {
    font-style: italic;
    color:      var(--or);
    display:    block;
}

/* Sous-titre */
.hero-sub {
    font-size:     clamp(15px, 1.3vw, 17px);
    font-weight:   300;
    line-height:   1.75;
    color:         var(--blanc-dim);
    max-width:     520px;
    margin-bottom: 48px;
    animation:     fadeInUp 0.9s ease 0.2s both;
}

/* Actions hero */
.hero-actions {
    display:       flex;
    flex-wrap:     wrap;
    gap:           16px;
    align-items:   center;
    margin-bottom: 60px;
    animation:     fadeInUp 0.9s ease 0.3s both;
}

/* Bande de confiance */
.hero-trust {
    display:     flex;
    flex-wrap:   wrap;
    gap:         32px;
    align-items: center;
    padding-top: 40px;
    border-top:  1px solid rgba(244, 239, 230, 0.06);
    animation:   fadeInUp 0.9s ease 0.4s both;
}

.trust-item {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.trust-icon {
    width:          36px;
    height:         36px;
    border:         1px solid var(--or-border);
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          var(--or);
    font-size:      16px;
    flex-shrink:    0;
}

.trust-text {
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--blanc-dim);
    line-height:    1.3;
}

.trust-text strong {
    display:     block;
    color:       var(--blanc);
    font-weight: 500;
}

/* Stats bureau */
.hero-stats-col {
    position:        absolute;
    right:           var(--side-pad);
    bottom:          10vh;
    z-index:         2;
    display:         flex;
    flex-direction:  column;
    gap:             32px;
    align-items:     flex-end;
    animation:       fadeIn 1s ease 0.5s both;
    pointer-events:  none;
}

.stat-item { text-align: right; }

.stat-number {
    font-family: var(--font-serif);
    font-size:   52px;
    font-weight: 300;
    color:       var(--or);
    line-height: 1;
    display:     block;
    will-change:contents;
}

.stat-label {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--gris);
    margin-top:     4px;
}

/* ============================================================
   6. SECTIONS COMMUNES — Boutons & Utilitaires
   ============================================================ */
section {
    padding: var(--section-pad) var(--side-pad);
}

/* Section eyebrow label */
.section-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            12px;
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--or);
    margin-bottom:  16px;
}

.section-eyebrow::before {
    content:    '';
    display:    block;
    width:      32px;
    height:     1px;
    background: var(--or);
    flex-shrink: 0;
}

/* Titres de section */
.section-title {
    font-family:   var(--font-serif);
    font-size:     clamp(32px, 4.5vw, 56px);
    font-weight:   300;
    line-height:   1.1;
    margin-bottom: 16px;
}

.section-title em {
    font-style: italic;
    color:      var(--or);
}

.section-intro {
    font-size:     15px;
    font-weight:   300;
    color:         var(--blanc-dim);
    max-width:     520px;
    line-height:   1.8;
    margin-bottom: 60px;
}

/* Divider */
.divider {
    width:      100%;
    height:     1px;
    background: linear-gradient(to right, transparent, var(--or-border), transparent);
}

/* Bouton primaire Or */
.btn-primary {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    padding:        16px 32px;
    background:     var(--or);
    color:          var(--noir);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border:         none;
    cursor:         pointer;
    font-family:    var(--font-sans);
    transition:     background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
    background:  var(--or-light);
    transform:   translateY(-3px);
    box-shadow:  var(--or-shadow);
}

/* Bouton secondaire outline */
.btn-secondary {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    padding:        15px 30px;
    background:     transparent;
    color:          var(--blanc);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    border:         1px solid rgba(244, 239, 230, 0.2);
    cursor:         pointer;
    font-family:    var(--font-sans);
    transition:     border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.btn-secondary:hover {
    border-color: var(--wa);
    color:        var(--wa);
    background:   rgba(37, 211, 102, 0.05);
}

/* Bouton téléphone */
.btn-tel {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    padding:        15px 28px;
    background:     transparent;
    color:          var(--blanc);
    font-size:      13px;
    font-weight:    400;
    text-decoration: none;
    border:         1px solid var(--or-border);
    transition:     border-color 0.3s ease, color 0.3s ease;
}

.btn-tel:hover {
    border-color: var(--or);
    color:        var(--or);
}

/* ============================================================
   7. SERVICES
   ============================================================ */
#services {
    background: var(--noir-2);
}

.services-grid {
    display:                  grid;
    grid-template-columns:    repeat(3, 1fr);
    gap:                      1.5px;
    background:               rgba(201, 168, 76, 0.08);
}

.service-card {
    background:  var(--noir-2);
    padding:     44px 36px;
    position:    relative;
    overflow:    hidden;
    transition:  background 0.35s ease;
    cursor:      default;
}

/* Underline doré au hover */
.service-card::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    right:            0;
    height:           2px;
    background:       var(--or);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover              { background: var(--noir-3); }
.service-card:hover::after       { transform: scaleX(1); }

/* Numéro de carte */
.service-card-num {
    position:    absolute;
    top:         24px;
    right:       28px;
    font-family: var(--font-serif);
    font-size:   42px;
    font-weight: 300;
    color:       var(--or);
    opacity:     0.08;
    line-height: 1;
    user-select: none;
}

/* Icône */
.service-icon-wrap {
    width:          52px;
    height:         52px;
    border:         1px solid var(--or-border);
    display:        flex;
    align-items:    center;
    justify-content: center;
    margin-bottom:  24px;
    transition:     border-color 0.3s ease, background 0.3s ease;
}

.service-card:hover .service-icon-wrap {
    border-color: var(--or);
    background:   var(--or-dim);
}

.service-icon { font-size: 22px; }

.service-card h3 {
    font-family:   var(--font-serif);
    font-size:     22px;
    font-weight:   400;
    color:         var(--or-light);
    margin-bottom: 12px;
    line-height:   1.2;
}

.service-card p {
    font-size:   13px;
    font-weight: 300;
    color:       var(--blanc-dim);
    line-height: 1.75;
}

.service-badge {
    display:        inline-block;
    margin-top:     14px;
    padding:        3px 10px;
    background:     var(--or-dim);
    border:         1px solid var(--or-border);
    font-size:      9px;
    font-weight:    500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--or);
}

/* ============================================================
   8. POURQUOI APPO TRANSPORT
   ============================================================ */
#pourquoi {
    background: var(--noir);
}

.pourquoi-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1px;
    background:            rgba(201, 168, 76, 0.06);
}

.pourquoi-item {
    background:  var(--noir);
    padding:     48px 40px;
    display:     flex;
    gap:         24px;
    align-items: flex-start;
    transition:  background 0.3s ease;
}

.pourquoi-item:hover { background: var(--noir-2); }

.pourquoi-num {
    font-family: var(--font-serif);
    font-size:   64px;
    font-weight: 300;
    color:       var(--or);
    opacity:     0.15;
    line-height: 1;
    flex-shrink: 0;
    width:       52px;
    margin-top:  -8px;
    user-select: none;
}

.pourquoi-item h3 {
    font-family:   var(--font-serif);
    font-size:     22px;
    font-weight:   400;
    color:         var(--or-light);
    margin-bottom: 10px;
}

.pourquoi-item p {
    font-size:   13px;
    font-weight: 300;
    color:       var(--blanc-dim);
    line-height: 1.8;
}

/* Bloc différenciateur */
.differentiateur {
    margin-top:  48px;
    padding:     40px 44px;
    background:  var(--noir-2);
    border:      1px solid var(--or-border);
    border-left: 3px solid var(--or);
    display:     flex;
    align-items: center;
    gap:         32px;
}

.differentiateur-icon {
    font-size:   36px;
    flex-shrink: 0;
    opacity:     0.8;
}

.differentiateur-text {
    font-family:  var(--font-serif);
    font-size:    24px;
    font-weight:  300;
    font-style:   italic;
    color:        var(--blanc);
    line-height:  1.4;
}

.differentiateur-text span { color: var(--or); }

/* ============================================================
   9. CHIFFRES CLÉS
   ============================================================ */
#chiffres {
    background: var(--noir-2);
    padding:    72px var(--side-pad);
}

.chiffres-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0;
}

.chiffre-item {
    padding:     44px 36px;
    border-right: 1px solid rgba(201, 168, 76, 0.1);
    text-align:  center;
    position:    relative;
    overflow:    hidden;
}

.chiffre-item:last-child { border-right: none; }

.chiffre-item::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--or-dim);
    opacity:    0;
    transition: opacity 0.3s ease;
}

.chiffre-item:hover::before { opacity: 1; }

.chiffre-number {
    font-family:  var(--font-serif);
    font-size:    clamp(42px, 4vw, 64px);
    font-weight:  300;
    color:        var(--or);
    line-height:  1;
    display:      block;
    position:     relative;
    z-index:      1;
}

.chiffre-label {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--gris);
    margin-top:     10px;
    position:       relative;
    z-index:        1;
}

/* ============================================================
   10. TARIFS
   ============================================================ */
#tarifs {
    background: var(--noir);
}

.tarifs-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
}

.tarif-card {
    border:    1px solid rgba(201, 168, 76, 0.14);
    padding:   40px 32px;
    position:  relative;
    overflow:  hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.tarif-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: transparent;
    transition: background 0.3s ease;
}

.tarif-card:hover {
    border-color: rgba(201, 168, 76, 0.4);
    transform:    translateY(-6px);
}

.tarif-card:hover::before { background: var(--or); }

.tarif-card.featured {
    border-color: var(--or);
    background:   linear-gradient(160deg, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
}

.tarif-card.featured::before { background: var(--or); }

.tarif-badge-featured {
    position:       absolute;
    top:            -1px;
    left:           50%;
    transform:      translateX(-50%);
    background:     var(--or);
    color:          var(--noir);
    font-size:      9px;
    font-weight:    600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding:        5px 16px;
    white-space:    nowrap;
}

.tarif-name {
    font-family:    var(--font-serif);
    font-size:      14px;
    font-weight:    300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--gris);
    margin-bottom:  12px;
}

.tarif-price {
    font-family:   var(--font-serif);
    font-size:     52px;
    font-weight:   300;
    color:         var(--or);
    line-height:   1;
    margin-bottom: 4px;
}

.tarif-price-note {
    font-size:     12px;
    font-weight:   300;
    color:         var(--gris);
    margin-bottom: 24px;
}

.tarif-sep {
    width:      100%;
    height:     1px;
    background: rgba(255, 255, 255, 0.05);
    margin:     24px 0;
}

.tarif-features { list-style: none; }

.tarif-features li {
    padding:       10px 0;
    font-size:     13px;
    font-weight:   300;
    color:         rgba(244, 239, 230, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    display:       flex;
    align-items:   center;
    gap:           10px;
    line-height:   1.4;
}

.tarif-features li:last-child { border-bottom: none; }

.tarif-features li::before {
    content:    '✦';
    color:      var(--or);
    font-size:  8px;
    flex-shrink: 0;
}

.tarif-cta-link {
    display:        block;
    margin-top:     28px;
    text-align:     center;
    padding:        13px;
    border:         1px solid var(--or-border);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--or);
    text-decoration: none;
    transition:     background 0.3s ease, color 0.3s ease;
}

.tarif-cta-link:hover {
    background: var(--or);
    color:      var(--noir);
}

.tarifs-note {
    margin-top:  40px;
    padding:     24px 32px;
    background:  var(--noir-2);
    border-left: 2px solid var(--or);
    display:     flex;
    align-items: center;
    gap:         16px;
}

.tarifs-note-icon { font-size: 22px; flex-shrink: 0; }

.tarifs-note p {
    font-size:   13px;
    font-weight: 300;
    color:       var(--blanc-dim);
    line-height: 1.7;
}

.tarifs-note strong {
    color:       var(--blanc);
    font-weight: 500;
}

/* Paiements */
.paiements {
    margin-top:  32px;
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
}

.paiements-label {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--gris);
}

.paiements-list {
    display:  flex;
    gap:      10px;
    flex-wrap: wrap;
}

.paiement-badge {
    padding:        5px 14px;
    border:         1px solid rgba(255, 255, 255, 0.08);
    font-size:      10px;
    font-weight:    400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--gris);
}

/* ============================================================
   11. ZONES DESSERVIES
   ============================================================ */
#zones {
    background: var(--noir-2);
    padding:    80px var(--side-pad);
}

.zones-wrapper {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   60px;
    align-items:           start;
}

.zones-list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        12px;
    margin-top: 12px;
}

.zone-tag {
    padding:        8px 18px;
    border:         1px solid var(--or-border);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--blanc-dim);
    transition:     border-color 0.3s ease, color 0.3s ease;
}

.zone-tag:hover {
    border-color: var(--or);
    color:        var(--or);
}

.zone-tag.primary {
    border-color: var(--or);
    color:        var(--or);
    background:   var(--or-dim);
}

.zones-aeroports       { margin-top: 32px; }

.zones-aeroports h4 {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--gris);
    margin-bottom:  16px;
}

.aeroport-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size:     13px;
    font-weight:   300;
    color:         var(--blanc-dim);
}

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

.aeroport-icon { font-size: 18px; }

.aeroport-name {
    color:       var(--blanc);
    font-weight: 400;
}

/* Info véhicule */
.vehicule-info {
    margin-top:  36px;
    padding:     20px 24px;
    border:      1px solid var(--or-border);
    display:     flex;
    gap:         14px;
    align-items: center;
}

.vehicule-info-text {
    font-size:   12px;
    font-weight: 300;
    color:       var(--blanc-dim);
}

.vehicule-info-text strong {
    display:     block;
    color:       var(--blanc);
    font-weight: 500;
    font-size:   13px;
    margin-bottom: 2px;
}

/* ============================================================
   12. AVIS CLIENTS
   ============================================================ */
#avis {
    background: var(--noir);
}

.avis-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
}

.avis-card {
    background:   var(--noir-2);
    padding:      36px 28px;
    border-left:  2px solid var(--or);
    position:     relative;
    overflow:     hidden;
    transition:   transform 0.3s ease;
}

.avis-card:hover { transform: translateY(-4px); }

/* Guillemet décoratif */
.avis-card::after {
    content:        '"';
    position:       absolute;
    top:            -10px;
    right:          20px;
    font-family:    var(--font-serif);
    font-size:      140px;
    font-weight:    300;
    color:          var(--or);
    opacity:        0.04;
    line-height:    1;
    pointer-events: none;
    user-select:    none;
}

.avis-stars {
    color:          var(--or);
    font-size:      14px;
    letter-spacing: 2px;
    margin-bottom:  16px;
}

.avis-source {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    font-size:      9px;
    font-weight:    500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--gris);
    margin-bottom:  20px;
}

.avis-source-dot {
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    var(--or);
}

.avis-text {
    font-family:   var(--font-serif);
    font-size:     17px;
    font-style:    italic;
    font-weight:   300;
    color:         rgba(244, 239, 230, 0.88);
    line-height:   1.65;
    margin-bottom: 28px;
}

.avis-author {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding-top: 20px;
    border-top:  1px solid rgba(255, 255, 255, 0.05);
}

.avis-avatar {
    width:          42px;
    height:         42px;
    border-radius:  50%;
    background:     var(--or-dim);
    border:         1px solid var(--or-border);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-family:    var(--font-serif);
    font-size:      18px;
    color:          var(--or);
    flex-shrink:    0;
}

.avis-name {
    font-size:     13px;
    font-weight:   500;
    margin-bottom: 2px;
    color:         var(--blanc);
}

.avis-loc {
    font-size: 11px;
    color:     var(--gris);
}

/* ============================================================
   13. CONTACT & FORMULAIRE
   ============================================================ */
#contact {
    background: var(--noir-2);
}

.contact-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   80px;
    align-items:           start;
}

.contact-info-title {
    font-family:   var(--font-serif);
    font-size:     clamp(28px, 3vw, 42px);
    font-weight:   300;
    line-height:   1.2;
    margin-bottom: 40px;
}

.contact-info-title em {
    font-style: italic;
    color:      var(--or);
}

.contact-item {
    display:       flex;
    gap:           16px;
    margin-bottom: 24px;
    align-items:   flex-start;
}

.contact-item-icon {
    width:          42px;
    height:         42px;
    flex-shrink:    0;
    border:         1px solid var(--or-border);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      18px;
    color:          var(--or);
    transition:     background 0.3s ease;
}

.contact-item:hover .contact-item-icon { background: var(--or-dim); }

.contact-item-label {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--gris);
    margin-bottom:  4px;
}

.contact-item-value {
    font-size:       15px;
    font-weight:     300;
    color:           var(--blanc);
    text-decoration: none;
    transition:      color 0.3s ease;
}

a.contact-item-value:hover { color: var(--or); }

/* Bloc WhatsApp */
.wa-cta-block {
    margin-top: 36px;
    padding:    28px;
    background: rgba(37, 211, 102, 0.06);
    border:     1px solid rgba(37, 211, 102, 0.2);
}

.wa-cta-block p {
    font-size:     12px;
    color:         var(--gris);
    margin-bottom: 14px;
    line-height:   1.6;
}

.btn-wa-full {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         16px 28px;
    background:      var(--wa-dark);
    color:           #fff;
    font-size:       12px;
    font-weight:     600;
    letter-spacing:  0.15em;
    text-transform:  uppercase;
    text-decoration: none;
    transition:      background 0.3s ease;
}

.btn-wa-full:hover { background: var(--wa); }

/* Formulaire */
.contact-form-title {
    font-family:   var(--font-serif);
    font-size:     24px;
    font-weight:   300;
    margin-bottom: 28px;
    color:         var(--blanc);
}

.contact-form-title em {
    font-style: italic;
    color:      var(--or);
}

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

.form-field {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-bottom:  16px;
}

.form-field label {
    font-size:      9px;
    font-weight:    600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--gris);
}

.form-field input,
.form-field select,
.form-field textarea {
    background:   var(--noir-3);
    border:       1px solid rgba(255, 255, 255, 0.07);
    color:        var(--blanc);
    padding:      13px 16px;
    font-family:  var(--font-sans);
    font-size:    13px;
    font-weight:  300;
    outline:      none;
    border-radius: 0;
    -webkit-appearance: none;
    transition:   border-color 0.3s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--gris-2); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--or); }

.form-field select option { background: var(--noir-2); }

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

.form-required { color: var(--or); }

/* Honeypot anti-spam — invisible aux humains */
.form-honeypot {
    position:   absolute;
    left:       -9999px;
    top:        -9999px;
    opacity:    0;
    pointer-events: none;
    tabindex:   -1;
}

/* Bouton soumission */
.form-submit {
    width:          100%;
    padding:        17px;
    background:     var(--or);
    color:          var(--noir);
    border:         none;
    cursor:         pointer;
    font-family:    var(--font-sans);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition:     background 0.3s ease, transform 0.2s ease;
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            10px;
}

.form-submit:hover   { background: var(--or-light); transform: translateY(-2px); }
.form-submit:active  { transform: translateY(0); }
.form-submit:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
    transform: none;
}

/* Message de succès */
.form-success {
    display:    none;
    text-align: center;
    padding:    40px 20px;
}

.form-success h3 {
    font-family:   var(--font-serif);
    font-size:     28px;
    font-weight:   300;
    color:         var(--or);
    margin-bottom: 12px;
}

.form-success p {
    font-size: 13px;
    color:     var(--blanc-dim);
}

/* ============================================================
   14. FOOTER
   ============================================================ */
footer {
    background:  #050505;
    padding:     48px var(--side-pad) 32px;
    border-top:  1px solid rgba(201, 168, 76, 0.1);
}

.footer-top {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   40px;
    padding-bottom:        40px;
    border-bottom:         1px solid rgba(255, 255, 255, 0.04);
}

.footer-brand-logo {
    font-family:    var(--font-serif);
    font-size:      20px;
    font-weight:    300;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color:          var(--or);
    margin-bottom:  8px;
}

.footer-brand-tagline {
    font-size:     11px;
    font-weight:   300;
    color:         var(--gris);
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.footer-brand-legal {
    font-size:   10px;
    color:       var(--gris-2);
    line-height: 1.8;
}

.footer-brand-legal span { display: block; }

.footer-nav-title {
    font-size:      9px;
    font-weight:    600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--gris);
    margin-bottom:  20px;
}

.footer-nav         { list-style: none; }
.footer-nav li      { margin-bottom: 10px; }

.footer-nav a {
    font-size:       12px;
    font-weight:     300;
    color:           var(--gris);
    text-decoration: none;
    letter-spacing:  0.06em;
    transition:      color 0.3s ease;
}

.footer-nav a:hover { color: var(--or); }

.footer-contact-item {
    display:       flex;
    gap:           10px;
    margin-bottom: 12px;
    align-items:   flex-start;
}

.footer-contact-icon {
    color:      var(--or);
    font-size:  13px;
    margin-top: 2px;
    flex-shrink: 0;
}

.footer-contact-text {
    font-size:   12px;
    font-weight: 300;
    color:       var(--gris);
    line-height: 1.5;
}

.footer-contact-text a {
    color:           var(--blanc-dim);
    text-decoration: none;
    transition:      color 0.3s ease;
}

.footer-contact-text a:hover { color: var(--or); }

.footer-bottom {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding-top:     24px;
    flex-wrap:       wrap;
    gap:             12px;
}

.footer-copy {
    font-size: 10px;
    color:     var(--gris-2);
}

.footer-links {
    display: flex;
    gap:     20px;
}

.footer-links a {
    font-size:       10px;
    color:           var(--gris-2);
    text-decoration: none;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    transition:      color 0.3s ease;
}

.footer-links a:hover { color: var(--or); }

/* ============================================================
   15. BOUTONS FLOTTANTS
   ============================================================ */

/* WhatsApp */
.float-wa {
    position:        fixed;
    bottom:          28px;
    right:           28px;
    z-index:         500;
    width:           58px;
    height:          58px;
    border-radius:   50%;
    background:      var(--wa);
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    box-shadow:      0 4px 24px rgba(37, 211, 102, 0.45);
    animation:       floatWa 3.5s ease-in-out infinite;
    transition:      transform 0.3s ease, box-shadow 0.3s ease;
    /* Empêcher l'animation d'annuler le hover */
    will-change:     transform;
}

.float-wa:hover {
    transform:   scale(1.12) !important;
    box-shadow:  0 8px 36px rgba(37, 211, 102, 0.65);
    animation-play-state: paused;
}

.float-wa svg {
    width:  26px;
    height: 26px;
    fill:   #fff;
}

.float-wa-tooltip {
    position:       absolute;
    right:          70px;
    top:            50%;
    transform:      translateY(-50%);
    background:     var(--noir-3);
    color:          var(--blanc);
    padding:        8px 14px;
    font-size:      11px;
    white-space:    nowrap;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.3s ease;
    border:         1px solid var(--or-border);
}

.float-wa:hover .float-wa-tooltip { opacity: 1; }

/* Bouton appel mobile */
.float-tel {
    position:        fixed;
    bottom:          28px;
    left:            28px;
    z-index:         500;
    background:      var(--or);
    color:           var(--noir);
    width:           58px;
    height:          58px;
    border-radius:   50%;
    display:         none; /* visible seulement mobile via media query */
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    font-size:       22px;
    box-shadow:      0 4px 24px rgba(201, 168, 76, 0.35);
    transition:      transform 0.3s ease;
}

.float-tel:hover { transform: scale(1.1); }

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

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.85); }
}

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

/* Respect des préférences système (accessibilité) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
    }
}

/* ============================================================
   17. SCROLL REVEAL
   ============================================================ */
.reveal {
    opacity:    0;
    transform:  translateY(24px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.visible {
    opacity:   1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================================
   18. RESPONSIVE — max 1100px
   ============================================================ */
@media (max-width: 1100px) {
    .services-grid  { grid-template-columns: repeat(2, 1fr); }
    .tarifs-grid    { grid-template-columns: repeat(2, 1fr); }
    .chiffres-grid  { grid-template-columns: repeat(2, 1fr); }
    .footer-top     { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   19. RESPONSIVE — max 900px
   ============================================================ */
@media (max-width: 900px) {
    :root { --section-pad: 72px; }

    .hero-stats-col    { display: none; }
    .hero-differentiator { display: none; }
    .pourquoi-layout   { grid-template-columns: 1fr; }
    .contact-layout    { grid-template-columns: 1fr; gap: 48px; }
    .zones-wrapper     { grid-template-columns: 1fr; }
    .hero-circle,
    .hero-circle-2     { display: none; }
}

/* ============================================================
   20. RESPONSIVE — max 768px
   ============================================================ */
@media (max-width: 768px) {
    /* Navigation */
    .nav-menu,
    .nav-cta       { display: none; }
    .nav-toggle    { display: flex; }
    .float-tel     { display: flex; }

    /* Hero */
    .hero-content  { padding-left: 0; }
    .hero-h1       { font-size: clamp(38px, 10vw, 56px); }

    /* Grilles */
    .services-grid { grid-template-columns: 1fr; }
    .avis-grid     { grid-template-columns: 1fr; }
    .tarifs-grid   { grid-template-columns: 1fr; }
    .chiffres-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid-2   { grid-template-columns: 1fr; }
    .footer-top    { grid-template-columns: 1fr; }

    /* Footer */
    .footer-bottom { flex-direction: column; text-align: center; }

    /* Différenciateur */
    .differentiateur { flex-direction: column; gap: 16px; }
}

/* ============================================================
   21. RESPONSIVE — max 480px
   ============================================================ */
@media (max-width: 480px) {
    :root { --section-pad: 56px; --side-pad: 4vw; }

    .hero-actions {
        flex-direction: column;
        align-items:    stretch;
    }

    .hero-actions a,
    .hero-actions button {
        text-align:      center;
        justify-content: center;
    }

    .hero-trust    { gap: 20px; }
    .chiffres-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   22. PRINT
   ============================================================ */
@media print {
    #nav,
    .float-wa,
    .float-tel,
    .mobile-menu,
    .hero-grid,
    .hero-vline,
    .hero-bg,
    .hero-circle,
    .hero-circle-2 {
        display: none !important;
    }

    body {
        background: white;
        color:      black;
        font-size:  12pt;
    }

    a { color: black; }

    .hero-h1,
    .section-title {
        color: black;
    }
}