/* =====================================================
       VARIABLES CSS — CHARTE GRAPHIQUE SENESAEL 2025
       Modifier ici pour adapter l'identité visuelle
    ===================================================== */
    :root {
      /* Palette principale */
      --color-noir:        #0C0C0C;
      --color-gris-bleu:   #8D99AE;
      --color-blanc:       #EDF2F4;
      --color-rouge-vif:   #FF0000;
      --color-rouge:       #D30000;
      --color-bordeaux:    #980000;
      --color-mid-dark:    #491111;

      /* Dégradés officiels */
      --gradient-fond:     linear-gradient(135deg, var(--color-rouge) 0%, var(--color-mid-dark) 45%, var(--color-noir) 100%);
      --gradient-formes:   linear-gradient(135deg, var(--color-rouge-vif) 0%, var(--color-mid-dark) 50%, var(--color-noir) 100%);

      /* Fonds de sections */
      --bg-dark:           #111111;
      --bg-section:        #F5F6F7;
      --bg-card:           #FFFFFF;

      /* Textes */
      --text-light:        #EDF2F4;
      --text-muted:        #8D99AE;
      --text-dark:         #1A1A1A;

      /* Typographies */
      --font-display:      'IBM Plex Mono', 'Courier New', monospace;  /* accent / titres forts */
      --font-body:         'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

      /* Espacements */
      --section-pad:       90px 0;
      --container:         1160px;
      --radius:            4px;
      --radius-card:       6px;

      /* Navbar */
      --nav-h:             72px;
    }

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

    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: var(--font-body);
      color: var(--text-dark);
      background: var(--bg-section);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    img { display: block; max-width: 100%; height: auto; }

    a { color: inherit; text-decoration: none; }

    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 28px;
    }

    /* =====================================================
       UTILITAIRES
    ===================================================== */
    .label-eyebrow {
      font-family: var(--font-display);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--color-rouge);
      display: block;
      margin-bottom: 14px;
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1.2;
      color: var(--text-dark);
    }

    .section-title.light { color: var(--text-light); }

    .divider-red {
      display: block;
      width: 48px;
      height: 3px;
      background: var(--gradient-formes);
      margin: 20px 0 32px;
      border: none;
    }

    .btn {
      display: inline-block;
      font-family: var(--font-display);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 14px 32px;
      border-radius: var(--radius);
      cursor: pointer;
      transition: opacity 0.2s, transform 0.15s;
    }

    .btn:hover { opacity: 0.85; transform: translateY(-1px); }

    .btn-primary {
      background: var(--gradient-formes);
      color: var(--text-light);
      border: none;
    }

    .btn-outline {
      background: transparent;
      color: var(--text-light);
      border: 2px solid rgba(237,242,244,0.5);
    }

    .btn-outline:hover { border-color: var(--color-rouge); }

    /* =====================================================
       LOGO IMAGE — fichier PNG officiel
    ===================================================== */
    .logo-wrapper {
      display: flex;
      align-items: center;
      gap: 0;
      text-decoration: none;
      flex-shrink: 0;
    }

    /* Taille de l'image logo dans la navbar et le footer */
    .logo-img {
      height: 48px;
      width: auto;
      display: block;
      object-fit: contain;
    }

    /* Version footer : logo long horizontal (SENESAEL CARROSSERIE) */
    .logo-img-footer {
      height: 38px;
      width: auto;
      display: block;
      object-fit: contain;
      margin-bottom: 20px;
    }

    /* =====================================================
       NAVIGATION STICKY
    ===================================================== */
    #navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      height: var(--nav-h);
      background: rgba(12, 12, 12, 0.96);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(141,153,174,0.12);
      display: flex;
      align-items: center;
    }

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

    .nav-links {
      display: flex;
      gap: 32px;
      list-style: none;
    }

    .nav-links a {
      font-family: var(--font-display);
      font-size: 0.68rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--color-gris-bleu);
      transition: color 0.2s;
    }

    .nav-links a:hover { color: var(--text-light); }

    .nav-cta {
      font-family: var(--font-display);
      font-size: 0.68rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 10px 22px;
      background: var(--gradient-formes);
      color: var(--text-light);
      border-radius: var(--radius);
      transition: opacity 0.2s;
      white-space: nowrap;
    }

    .nav-cta:hover { opacity: 0.82; }

    /* =====================================================
       HERO — Fond dégradé charte + logo filigrane
       Layout 2 colonnes : texte ancré à gauche, logo à droite
    ===================================================== */
    #hero {
      position: relative;
      min-height: 100vh;
      display: grid;
      /* Colonne texte (max 52%) | Colonne logo filigrane */
      grid-template-columns: minmax(0, 52%) 1fr;
      align-items: center;
      overflow: hidden;
      padding-top: var(--nav-h);
      /* Dégradé de base : rouge → bordeaux → noir, fidèle à la charte */
      background: linear-gradient(148deg,
        #C80000 0%,
        #8B0000 20%,
        #3D0000 40%,
        #1A0000 58%,
        #0C0C0C 75%,
        #080808 100%
      );
    }

    /* Logo en filigrane — occupe la colonne droite, centré verticalement */
    .hero-watermark {
      position: absolute;
      top: 50%;
      right: -4%;
      transform: translateY(-50%);
      width: 58%;
      max-width: 680px;
      aspect-ratio: 1;
      background-image: url('assets/logo.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.13;
      /* mix-blend-mode luminosity : fond du logo rouge se fond dans le dégradé */
      mix-blend-mode: luminosity;
      pointer-events: none;
      z-index: 1;
    }

    /* Voile sombre sur le côté gauche pour garantir la lisibilité du texte */
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg,
        rgba(8,8,8,0.72) 0%,
        rgba(8,8,8,0.52) 45%,
        transparent 75%
      );
      z-index: 1;
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      /* Colonne gauche du grid — pleine largeur de la cellule avec padding gauche */
      width: 100%;
      padding-left: 0;
      text-align: left;
    }

    /* Le container du hero est contraint à la colonne de texte (grid-column: 1),
       qui démarre au bord réel de l'écran — alors que .container est centré
       (max-width 1160px) partout ailleurs sur le site. On recalcule ici le même
       retrait que le reste du site pour que le texte soit parfaitement aligné
       avec les titres des autres sections.
       IMPORTANT : .container impose aussi max-width:1160px + margin:auto ; sur
       très grand écran (32", 4K...) ce max-width entrait en conflit avec le
       padding calculé ci-dessous (padding > 1160px), écrasant la largeur du
       texte à ~0 et le faisant passer à la ligne mot par mot. On neutralise
       donc ici le max-width/margin hérités : cet élément est déjà borné par
       la colonne de grille (52vw max), il n'a pas besoin d'un second plafond. */
    #hero .container {
      max-width: none;
      margin: 0;
      width: 100%;
      /* Plafonné à 480px : au-delà d'environ 2260px de large, on préfère
         garder une colonne de texte confortable plutôt que de coller
         parfaitement à l'alignement des autres sections. */
      padding-left: clamp(28px, calc((100vw - var(--container)) / 2 + 28px), 480px);
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 6vw, 4.5rem);
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-light);
      line-height: 1.05;
      margin-bottom: 24px;
    }

    .hero-title span {
      color: var(--color-rouge);
    }

    .hero-sub {
      font-size: 1.05rem;
      font-weight: 300;
      color: rgba(237,242,244,0.72);
      max-width: 520px;
      margin-bottom: 44px;
      line-height: 1.75;
    }

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

    /* =====================================================
       PRÉSENTATION
    ===================================================== */
    #presentation {
      padding: var(--section-pad);
      background: var(--color-noir);
    }

    .presentation-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    /* ZONE IMAGE : REMPLACER L'URL ICI */
    .presentation-img {
      position: relative;
      border-radius: var(--radius-card);
      overflow: hidden;
    }

    .presentation-img img {
      width: 100%;
      height: 420px;
      object-fit: cover;
      filter: brightness(0.85) saturate(0.7);
    }

    .presentation-img::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid rgba(141,153,174,0.15);
      border-radius: var(--radius-card);
      pointer-events: none;
    }

    /* Variante logo — fond neutre sombre + lueur douce, pour laisser le logo
       (qui a déjà son propre dégradé rouge) se détacher proprement, sans
       empiler deux dégradés rouges l'un sur l'autre. */
    .presentation-logo {
      position: relative;
      background: radial-gradient(circle at 50% 45%, rgba(211,0,0,0.22) 0%, rgba(12,12,12,0.95) 62%, #0C0C0C 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 420px;
      overflow: hidden;
    }
    /* Texture fine — reprise du motif diagonal utilisé dans la section Assurances */
    .presentation-logo::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 40px,
        rgba(211,0,0,0.035) 40px,
        rgba(211,0,0,0.035) 41px
      );
      pointer-events: none;
    }
    .presentation-logo img {
      position: relative;
      z-index: 1;
      width: 52%;
      max-width: 260px;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 18px 34px rgba(0,0,0,0.55));
    }

    .pres-accent {
      position: absolute;
      bottom: -16px;
      right: -16px;
      width: 120px;
      height: 120px;
      background: var(--gradient-formes);
      clip-path: polygon(100% 0, 0% 100%, 100% 100%);
      opacity: 0.7;
      border-radius: 0 0 var(--radius-card) 0;
    }

    .presentation-text .section-title { color: var(--text-light); }

    .presentation-text p {
      color: var(--color-gris-bleu);
      font-weight: 300;
      font-size: 0.97rem;
      margin-bottom: 18px;
      line-height: 1.8;
    }

    /* Bande de chiffres clés — pleine largeur, sous le grid photo+texte */
    .stat-band {
      display: flex;
      justify-content: center;
      align-items: stretch;
      margin-top: 72px;
      border-top: 1px solid rgba(141,153,174,0.15);
      border-bottom: 1px solid rgba(141,153,174,0.15);
    }

    .stat-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 44px 32px;
      text-align: center;
      position: relative;
    }

    /* Séparateur vertical entre les blocs */
    .stat-item + .stat-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 20%;
      height: 60%;
      width: 1px;
      background: rgba(141,153,174,0.2);
    }

    .stat-item .num {
      font-family: var(--font-display);
      font-size: 3rem;
      font-weight: 600;
      color: var(--color-rouge);
      line-height: 1;
    }

    .stat-item .lbl {
      font-family: var(--font-display);
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--color-gris-bleu);
      line-height: 1.5;
    }

    /* =====================================================
       VALEURS
    ===================================================== */
    #valeurs {
      padding: var(--section-pad);
      background: var(--bg-section);
    }

    #valeurs .section-header {
      text-align: center;
      margin-bottom: 64px;
    }

    #valeurs .divider-red { margin: 20px auto 0; }

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

    .valeur-card {
      background: var(--bg-card);
      padding: 44px 36px;
      border-bottom: 3px solid transparent;
      transition: border-color 0.25s, box-shadow 0.25s;
    }

    .valeur-card:hover {
      border-bottom-color: var(--color-rouge);
      box-shadow: 0 8px 32px rgba(211,0,0,0.08);
    }

    .valeur-icon {
      width: 48px;
      height: 48px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .valeur-icon svg {
      width: 36px;
      height: 36px;
      stroke: var(--color-rouge);
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .valeur-card h3 {
      font-family: var(--font-display);
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-dark);
      margin-bottom: 14px;
    }

    .valeur-card p {
      font-size: 0.9rem;
      color: #666;
      line-height: 1.7;
    }

    /* ─── ROOMTOUR — bloc vidéo dans la section Valeurs ─── */
    .roomtour-wrapper {
      margin-top: 72px;
      padding-top: 64px;
      border-top: 1px solid rgba(141,153,174,0.12);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .roomtour-header {
      text-align: center;
      margin-bottom: 36px;
    }

    .roomtour-video {
      width: 100%;
      max-width: 900px;
      aspect-ratio: 16 / 9;
      display: block;
      border-radius: var(--radius-card);
      box-shadow:
        0 4px 24px rgba(0,0,0,0.18),
        0 0 0 1px rgba(141,153,174,0.1);
      background: #0C0C0C;
      object-fit: cover;
    }

    .roomtour-note {
      margin-top: 18px;
      font-family: var(--font-display);
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(141,153,174,0.45);
      text-align: center;
    }

    /* =====================================================
       SERVICES — FLIP CARDS CSS PUR
    ===================================================== */
    #services {
      padding: var(--section-pad);
      background: var(--color-noir);
    }

    #services .section-header {
      margin-bottom: 56px;
    }

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

    /* Conteneur de la flip card — hauteur fixe nécessaire pour le 3D */
    .flip-card {
      perspective: 1200px;
      height: 400px;
      position: relative;
    }

    /* Checkbox invisible — moteur du flip CSS pur
       display:none retire complètement l'élément du flux de focus :
       aucun scroll ne peut être déclenché par le navigateur vers elle. */
    .flip-toggle {
      display: none;
    }

    /* Inner — c'est lui qui pivote */
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
    }

    /* ─── DÉCLENCHEMENT AU CLIC sur le label "En savoir plus" ───
       Sélecteur : quand la checkbox est cochée, on pivote l'inner
       qui est son sibling suivant dans le même .flip-card          */
    .flip-toggle:checked + .flip-card-inner {
      transform: rotateY(180deg);
    }

    /* Bordure active sur la face avant quand carte retournée */
    .flip-toggle:checked + .flip-card-inner .flip-card-front {
      border-color: rgba(211,0,0,0.35);
    }

    /* Face avant et face arrière — propriétés communes */
    .flip-card-front,
    .flip-card-back {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      overflow: hidden;
    }

    /* ── FACE AVANT ── */
    .flip-card-front {
      background: #171717;
      padding: 36px 34px;
      border: 1px solid rgba(141,153,174,0.08);
      transition: border-color 0.25s;
      display: flex;
      flex-direction: column;
    }

    /* ZONE IMAGE : REMPLACER L'URL ICI — image de fond de carte service */
    .service-card-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: var(--radius);
      margin-bottom: 28px;
      filter: brightness(0.55) saturate(0.5);
      flex-shrink: 0;
    }

    /* Icône métier — reprise de la charte graphique (petite icône linéaire rouge) */
    .service-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 18px;
      color: var(--color-rouge);
    }
    .service-icon svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .flip-card-front h3 {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-light);
      margin-bottom: 14px;
    }

    .flip-card-front p {
      font-size: 0.9rem;
      color: var(--color-gris-bleu);
      line-height: 1.75;
      flex: 1;
    }

    /* Label "En savoir plus" — déclencheur du flip */
    .btn-flip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 20px;
      font-family: var(--font-display);
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--color-rouge);
      border-bottom: 1px solid var(--color-rouge);
      padding-bottom: 2px;
      align-self: flex-start;
      cursor: pointer;
      user-select: none;
      transition: color 0.2s, border-color 0.2s;
    }

    .btn-flip:hover {
      color: var(--color-rouge-vif);
      border-color: var(--color-rouge-vif);
    }

    /* ── FACE ARRIÈRE ── */
    .flip-card-back {
      background: #1a0404;
      border: 1px solid rgba(211,0,0,0.25);
      transform: rotateY(180deg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 36px 34px;
    }

    /* Trait décoratif rouge à gauche */
    .flip-card-back::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: var(--gradient-formes);
    }

    .flip-card-back .back-eyebrow {
      font-family: var(--font-display);
      font-size: 0.6rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--color-rouge);
      margin-bottom: 18px;
      display: block;
    }

    .flip-card-back h3 {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-light);
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(141,153,174,0.15);
    }

    .flip-card-back ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 28px;
    }

    .flip-card-back ul li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 0.88rem;
      color: var(--color-gris-bleu);
      line-height: 1.6;
    }

    .flip-card-back ul li::before {
      content: '—';
      color: var(--color-rouge);
      flex-shrink: 0;
      font-family: var(--font-display);
      font-size: 0.7rem;
      margin-top: 2px;
    }

    .flip-card-back .back-note {
      font-size: 0.8rem;
      color: rgba(141,153,174,0.55);
      font-style: italic;
      line-height: 1.6;
      border-top: 1px solid rgba(141,153,174,0.1);
      padding-top: 18px;
      margin-top: auto;
    }

    /* Label "Fermer" sur la face arrière — remet la carte à l'endroit */
    .btn-close-flip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 16px;
      font-family: var(--font-display);
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(141,153,174,0.5);
      cursor: pointer;
      user-select: none;
      transition: color 0.2s;
      align-self: flex-start;
      border: none;
      background: none;
      padding: 0;
    }

    .btn-close-flip:hover { color: var(--text-light); }

    /* =====================================================
       ASSURANCES
    ===================================================== */
    #assurances {
      padding: var(--section-pad);
      background: #111111;
      position: relative;
      overflow: hidden;
    }

    #assurances::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 40px,
        rgba(211,0,0,0.025) 40px,
        rgba(211,0,0,0.025) 41px
      );
      pointer-events: none;
    }

    .assurances-inner {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .assurances-text .section-title { color: var(--text-light); }

    .assurances-text p {
      color: var(--color-gris-bleu);
      font-weight: 300;
      font-size: 0.97rem;
      line-height: 1.8;
      margin-bottom: 16px;
    }

    .assurance-points {
      list-style: none;
      margin-top: 28px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .assurance-points li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      font-size: 0.9rem;
      color: var(--text-light);
    }

    .assurance-points li::before {
      content: '';
      width: 20px;
      height: 20px;
      min-width: 20px;
      background: var(--color-rouge);
      clip-path: polygon(0 50%, 35% 0, 100% 50%, 35% 100%);
      margin-top: 2px;
    }

    .assurance-box {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(141,153,174,0.18);
      border-radius: var(--radius-card);
      padding: 44px 36px;
      text-align: center;
    }

    .assurance-box .big-num {
      font-family: var(--font-display);
      font-size: 5rem;
      font-weight: 600;
      line-height: 1;
      color: var(--text-light);
    }

    .assurance-box .big-label {
      font-family: var(--font-display);
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--color-rouge);
      margin-top: 10px;
      margin-bottom: 28px;
      display: block;
    }

    .assurance-box p {
      font-size: 0.88rem;
      color: var(--color-gris-bleu);
      line-height: 1.7;
    }

    /* =====================================================
       BANDEAU DÉFILANT — base commune
    ===================================================== */
    .ticker-section {
      padding: 64px 0;
      overflow: hidden;
    }

    .ticker-section.bg-dark  { background: #111111; }
    .ticker-section.bg-light { background: var(--bg-section); }

    .ticker-intro {
      text-align: center;
      margin-bottom: 40px;
    }

    .ticker-intro p {
      font-size: 0.9rem;
      color: var(--color-gris-bleu);
      max-width: 560px;
      margin: 0 auto;
    }

    .ticker-track {
      display: flex;
      width: max-content;
      animation: tickerScroll 28s linear infinite;
    }

    .ticker-track:hover { animation-play-state: paused; }

    @keyframes tickerScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .ticker-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 52px;
      white-space: nowrap;
      gap: 14px;
    }

    .ticker-logo-box {
      border-radius: var(--radius);
      padding: 12px 28px;
      border: 1px solid rgba(141,153,174,0.2);
      font-family: var(--font-display);
      font-size: 0.8rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .bg-dark  .ticker-logo-box { color: var(--text-light);    background: rgba(141,153,174,0.06); }
    .bg-light .ticker-logo-box { color: var(--text-dark);     background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

    .ticker-sep {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-rouge);
      flex-shrink: 0;
      margin-left: 52px;
    }

    /* =====================================================
       GALERIE
    ===================================================== */
    #galerie {
      padding: var(--section-pad);
      background: var(--bg-section);
    }

    #galerie .section-header { margin-bottom: 48px; }

    .galerie-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 260px 260px;
      gap: 4px;
    }

    .galerie-item {
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    /* ZONE IMAGE : REMPLACER L'URL ICI — photos galerie */
    .galerie-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  filter 0.4s;
      filter: brightness(0.78) saturate(0.65);
    }

    .galerie-item:hover img {
      transform: scale(1.06);
      filter: brightness(0.9) saturate(0.9);
    }

    .galerie-item:first-child { grid-row: span 2; }

    .galerie-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(12,12,12,0.6) 0%, transparent 55%);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .galerie-item:hover .galerie-overlay { opacity: 1; }

    /* =====================================================
       SUIVI DE TRAVAUX — AVANT / PENDANT / APRÈS
    ===================================================== */
    #suivi {
      padding: var(--section-pad);
      background: var(--color-noir);
    }

    #suivi .section-header { margin-bottom: 56px; }

    .suivi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      align-items: start;
    }

    .suivi-card {
      display: flex;
      flex-direction: column-reverse;
      gap: 0;
      position: relative;
    }

    /* ZONE IMAGE : REMPLACER LES URLs ICI — photos Avant/Pendant/Après */
    .suivi-card-img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      /* Image en bas → radius en bas seulement */
      border-radius: 0 0 var(--radius-card) var(--radius-card);
      filter: brightness(0.75) saturate(0.6);
      transition: filter 0.4s, transform 0.4s;
      display: block;
    }

    .suivi-card:hover .suivi-card-img {
      filter: brightness(0.92) saturate(0.9);
    }

    .suivi-card-label {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 22px;
      background: #171717;
      border: 1px solid rgba(141,153,174,0.1);
      border-bottom: none;
      /* Label en haut → radius en haut seulement */
      border-radius: var(--radius-card) var(--radius-card) 0 0;
    }

    /* Pastille colorée indicatrice */
    .suivi-card-label .step-dot {
      width: 10px;
      height: 10px;
      min-width: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .suivi-card--avant  .step-dot { background: var(--color-rouge);     box-shadow: 0 0 8px rgba(211,0,0,0.5); }
    .suivi-card--pendant .step-dot { background: #e07b00;                box-shadow: 0 0 8px rgba(224,123,0,0.5); }
    .suivi-card--apres  .step-dot { background: #2e9e4f;                box-shadow: 0 0 8px rgba(46,158,79,0.5); }

    .suivi-card-label .step-info {}

    .suivi-card-label .step-tag {
      font-family: var(--font-display);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      display: block;
      line-height: 1;
      margin-bottom: 4px;
    }

    .suivi-card--avant  .step-tag { color: var(--color-rouge); }
    .suivi-card--pendant .step-tag { color: #e07b00; }
    .suivi-card--apres  .step-tag { color: #2e9e4f; }

    .suivi-card-label .step-desc {
      font-size: 0.82rem;
      color: var(--color-gris-bleu);
      line-height: 1.4;
    }

    /* Connecteur flèche entre les cartes */
    .suivi-arrow {
      display: none; /* masqué sur mobile, affiché en grid via pseudo */
    }

    /* Sur desktop : flèche SVG positionnée entre les cartes */
    @media (min-width: 769px) {
      .suivi-grid {
        position: relative;
      }

      /* Flèches CSS pures entre les 3 blocs */
      .suivi-card:not(:last-child)::after {
        content: '→';
        position: absolute;
        right: calc(-28px / 2 - 10px);
        top: calc((4 / 3 * 100% - 40px) / 2);
        font-family: var(--font-display);
        font-size: 1.2rem;
        color: rgba(141,153,174,0.3);
        transform: translateX(50%);
        pointer-events: none;
        z-index: 1;
      }
    }

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

    /* =====================================================
       INFORMATIONS PRATIQUES
    ===================================================== */
    #infos {
      padding: var(--section-pad);
      background: var(--color-noir);
    }

    .infos-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
    }

    .infos-col .section-title { color: var(--text-light); margin-bottom: 32px; }

    .horaires-table {
      width: 100%;
      border-collapse: collapse;
    }

    .horaires-table tr {
      border-bottom: 1px solid rgba(141,153,174,0.12);
    }

    .horaires-table td {
      padding: 14px 0;
      font-size: 0.9rem;
      color: var(--color-gris-bleu);
    }

    .horaires-table td:first-child {
      font-weight: 500;
      color: var(--text-light);
      width: 55%;
    }

    .contact-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .contact-list li {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .contact-list .c-icon {
      width: 36px;
      height: 36px;
      min-width: 36px;
      border-radius: 50%;
      background: rgba(211,0,0,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .contact-list .c-icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--color-rouge);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .contact-list .c-data {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .contact-list .c-label {
      font-family: var(--font-display);
      font-size: 0.62rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-rouge);
    }

    .contact-list .c-value {
      font-size: 0.92rem;
      color: var(--text-light);
    }

    .contact-list a { color: var(--text-light); transition: color 0.2s; }
    .contact-list a:hover { color: var(--color-rouge); }

    .facebook-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 36px;
      font-family: var(--font-display);
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-light);
      border: 1px solid rgba(141,153,174,0.25);
      padding: 12px 22px;
      border-radius: var(--radius);
      transition: border-color 0.2s, color 0.2s;
    }

    .facebook-btn:hover { border-color: var(--color-rouge); color: var(--color-rouge); }

    .facebook-btn svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }

    /* =====================================================
       FOOTER
    ===================================================== */
    footer {
      background: #080808;
      border-top: 1px solid rgba(141,153,174,0.1);
      padding: 56px 0 32px;
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 60px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(141,153,174,0.1);
      margin-bottom: 32px;
    }

    .footer-brand .logo-wrapper { margin-bottom: 20px; }

    .footer-brand p {
      font-size: 0.86rem;
      color: var(--color-gris-bleu);
      line-height: 1.75;
      max-width: 280px;
    }

    .footer-col h4 {
      font-family: var(--font-display);
      font-size: 0.65rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--color-rouge);
      margin-bottom: 20px;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-col ul li a {
      font-size: 0.86rem;
      color: var(--color-gris-bleu);
      transition: color 0.2s;
    }

    .footer-col ul li a:hover { color: var(--text-light); }

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

    .footer-bottom p {
      font-size: 0.78rem;
      color: rgba(141,153,174,0.5);
    }

    .footer-tagline {
      font-family: var(--font-display);
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--color-rouge);
    }

    /* =====================================================
       RESPONSIVE
    ===================================================== */
    @media (max-width: 1024px) {
      .presentation-grid,
      .assurances-inner,
      .infos-grid { grid-template-columns: 1fr; gap: 48px; }

      .valeurs-grid { grid-template-columns: repeat(2, 1fr); }
      .services-grid { grid-template-columns: 1fr; }
      .flip-card { height: 460px; }
      .footer-top { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 768px) {
      :root { --section-pad: 64px 0; }

      .nav-links { display: none; }

      /* Hero : une seule colonne sur mobile */
      #hero {
        grid-template-columns: 1fr;
      }
      .hero-watermark {
        width: 85%;
        right: -15%;
        opacity: 0.08;
      }

      .valeurs-grid { grid-template-columns: 1fr; }

      .galerie-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      }
      .galerie-item:first-child { grid-row: span 1; }

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

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

    @media (prefers-reduced-motion: reduce) {
      .ticker-track { animation: none; }
      * { transition: none !important; }
    }