/* Polices hebergees sur le serveur : pas d'appel a Google, pas de blocage du rendu.
     Inter remplace Barlow Condensed depuis le 20/08/2026 : les graisses lourdes
     du condense empataient les lettres, surtout aux petites tailles. */
  @font-face { font-family:'Inter'; font-style:normal; font-weight:400;
    src:url('/fonts/inter-400.woff2') format('woff2'); font-display:swap; }
  @font-face { font-family:'Inter'; font-style:normal; font-weight:600;
    src:url('/fonts/inter-600.woff2') format('woff2'); font-display:swap; }
  @font-face { font-family:'Inter'; font-style:normal; font-weight:700;
    src:url('/fonts/inter-700.woff2') format('woff2'); font-display:swap; }
  @font-face { font-family:'Inter'; font-style:normal; font-weight:800;
    src:url('/fonts/inter-800.woff2') format('woff2'); font-display:swap; }

  :root {
    --fire:#E63000; --ember:#FF6A00; --bg:#ffffff; --bg2:#f4f6fa;
    --text:#1a2e4a; --silver:#6b7280; --card-bg:#ffffff;
    --navy:#1a2e4a; --border:#dde3ef;
  }
  *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

  /* Ancres : on decale l'arrivee de la hauteur de la barre fixe,
     sinon le titre vise se retrouve cache derriere elle. */
  html { scroll-padding-top:80px; }
  :target { scroll-margin-top:80px; }

  body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }

  /* FOND DE PAGE — photo fixe + voile, en pseudo-elements plutot que
     background-attachment:fixed, ingerable sur iOS */
  body::before, body::after { content:''; position:fixed; inset:0; z-index:-2; pointer-events:none; }
  body::before {
    background:url('/img/fond-motopompes-v4.webp') 35% center / cover no-repeat;
  }
  body::after { z-index:-1; background:rgba(26,46,74,0.30); }
  a { color:inherit; text-decoration:none; }

  /* NAV */
  nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.97); backdrop-filter:blur(8px); height:64px; display:flex; align-items:center; padding:0 2rem; gap:2rem; border-bottom:1px solid var(--border); box-shadow:0 2px 12px rgba(26,46,74,0.08); }
  .nav-logo { font-size:1.012rem; font-weight:800; letter-spacing:0.4px; color:var(--navy); text-transform:uppercase; flex-shrink:0; }
  .nav-logo span { color:var(--fire); }
  .nav-links { display:flex; gap:1.5rem; flex:1; }
  .nav-links a { color:var(--navy); font-size:0.782rem; font-weight:600; letter-spacing:0.2px; text-transform:uppercase; transition:color 0.2s; }
  .nav-links a:hover { color:var(--fire); }
  .nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0; margin-left:auto; flex-shrink:0; z-index:1001; }
  .nav-burger span { display:block; width:100%; height:2px; background:var(--navy); border-radius:2px; transition:transform 0.3s, opacity 0.3s; }
  .nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity:0; }
  .nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  @media(max-width:720px){
    .nav-burger{ display:flex; }
    .nav-links{
      position:fixed; top:64px; left:0; right:0;
      background:#fff; flex-direction:column; gap:0;
      max-height:0; overflow:hidden; flex:none;
      box-shadow:0 8px 16px rgba(26,46,74,0.08);
      transition:max-height 0.3s ease;
    }
    .nav-links.open{ max-height:400px; }
    .nav-links a{ padding:1rem 2rem; border-bottom:1px solid var(--border); width:100%; }
  }
  /* ------- Menu deroulant "Nos Prestations" ------- */
  .nav-presta { position:relative; display:flex; align-items:center; }
  .nav-presta-btn {
    background:none; border:0; cursor:pointer; font-family:inherit;
    color:var(--navy); font-size:0.85rem; font-weight:600; letter-spacing:0.5px;
    text-transform:uppercase; display:inline-flex; align-items:center; gap:0.4rem;
    padding:0; transition:color 0.2s;
  }
  .nav-presta-btn:hover, .nav-presta-btn[aria-expanded="true"] { color:var(--fire); }
  .chev { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
          border-top:5px solid currentColor; transition:transform 0.2s; }
  .nav-presta-btn[aria-expanded="true"] .chev { transform:rotate(180deg); }

  .nav-presta-menu {
    position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
    background:#fff; border:1px solid var(--border); border-radius:10px;
    box-shadow:0 14px 34px rgba(26,46,74,0.16);
    min-width:270px; padding:0.4rem 0;
    display:flex; flex-direction:column;
    opacity:0; visibility:hidden; transition:opacity 0.18s ease, transform 0.18s ease;
    max-height:min(70vh, 560px); overflow-y:auto;
  }
  .nav-presta-menu.open { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .nav-presta-menu a {
    padding:0.55rem 1.1rem; font-size:0.85rem; font-weight:600; letter-spacing:0;
    text-transform:none; color:var(--navy); white-space:nowrap;
  }
  .nav-presta-menu a:hover { background:var(--bg2); color:var(--fire); }
  .nav-presta-tout { border-top:1px solid var(--border); margin-top:0.35rem; padding-top:0.7rem !important; color:var(--fire) !important; }

  @media(max-width:900px){
    /* dans le menu burger, l'accordeon se deploie dans le flux */
    .nav-presta { display:block; width:100%; }
    .nav-presta-btn { width:100%; justify-content:space-between; padding:1rem 2rem;
                      border-bottom:1px solid var(--border); }
    .nav-presta-menu {
      position:static; transform:none; box-shadow:none; border:0; border-radius:0;
      min-width:0; padding:0; max-height:0; overflow:hidden; visibility:visible; opacity:1;
      background:var(--bg2); transition:max-height 0.3s ease;
    }
    .nav-presta-menu.open { max-height:none; transform:none; }
    .nav-presta-menu a { padding:0.75rem 2.6rem; white-space:normal; border-bottom:1px solid var(--border); }
    .nav-links.open{ max-height:85vh; overflow-y:auto; }
  }

  .nav-cta { background:var(--fire); color:#fff; font-size:0.782rem; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:0.5rem 1.25rem; border-radius:4px; flex-shrink:0; transition:background 0.2s; }
  .nav-cta:hover { background:#c42800; }

  /* HERO */
  .hero { min-height:100vh; background:transparent; display:flex; align-items:center; justify-content:center; text-align:center; padding:6rem 2rem 4rem; position:relative; overflow:hidden; isolation:isolate; }
  .hero > div { width:100%; position:relative; z-index:1; }
  .hero::before { content:''; position:absolute; inset:0; pointer-events:none;
    background:
      /* Le marine ne monte que dans le dernier quart : la descente commence
         juste au-dessus du bandeau des logos, le traverse, et s'acheve au
         debut de la section suivante. */
      linear-gradient(to bottom,
        rgba(26,46,74,0) 74%,
        rgba(26,46,74,0.45) 88%,
        rgba(26,46,74,1) 100%),
      /* voile leger et uniforme sur toute la video */
      linear-gradient(rgba(26,46,74,0.18), rgba(26,46,74,0.18)),
      radial-gradient(ellipse at 60% 40%,rgba(230,48,0,0.07) 0%,transparent 60%); }
  /* VIDEO DE FOND DU HERO — se substitue a la photo de body::before une fois
     la page chargee. Grace a isolation:isolate sur .hero, elle passe au-dessus
     du voile marine de body::after : elle s'affiche a sa luminosite reelle. */
  .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; z-index:-1; pointer-events:none; }
  @media(max-width:720px){
    /* Cadrage portrait + disparition progressive du bas : la video se fond dans
       la photo de fond au lieu de s'arreter net a la limite de la section. */
    .hero-video { object-position:center center; }
  }
  .hero-badge { display:inline-flex; align-items:center; gap:0.5rem; background:#fff; border:2px solid rgba(230,48,0,0.5); color:var(--fire); font-size:0.92rem; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; padding:0.7rem 1.8rem; border-radius:100px; margin-bottom:1.5rem; animation:pulse 2.5s ease-in-out infinite; box-shadow:0 4px 16px rgba(230,48,0,0.12); }
  @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(230,48,0,0.3)} 50%{box-shadow:0 0 0 8px rgba(230,48,0,0)} }
  /* CARTE BLANCHE DU HERO — meme grammaire que les cartes du reste du site
     et que la plaquette. Le texte n'est plus pose sur la video : le contraste
     ne depend donc plus de l'image qui defile derriere. */
  .hero h1 { font-size:clamp(2rem,3.8vw,3rem); font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.8), 0 2px 18px rgba(0,0,0,0.5); line-height:1.14; letter-spacing:-0.5px; margin-bottom:0; }
  .hero h1 span { color:#fff; }
  /* Garantie : sous le bouton d'appel, en blanc sur la video */
  /* Garantie : 24 px, ce qui la fait entrer dans la categorie "grand texte"
     de WCAG — le seuil de contraste exige passe de 4,5:1 a 3:1. */
  .hero-sub {
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 2px 16px rgba(0,0,0,0.5);
    font-size:1.5rem; font-weight:600; letter-spacing:0.2px;
    line-height:1.4;
    max-width:34ch;
    margin:2.75rem auto 0;
  }
  /* Hero : un espacement identique entre le titre, le bouton et la garantie. */
  .hero-btns { padding:0 1.25rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
               margin:2.75rem 0 0; }
  .btn-primary { background:var(--fire); color:#fff; font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:0.92rem; letter-spacing:0.4px; text-transform:uppercase; padding:0.875rem 2rem; border-radius:4px; transition:all 0.2s; cursor:pointer; border:none; }
  .btn-primary:hover { background:#c42800; transform:translateY(-2px); box-shadow:0 8px 24px rgba(230,48,0,0.3); }
  /* Bouton d'urgence du hero : couleurs inversees, comme le bouton "Suivant"
     du formulaire (.btn-tunnel) — fond blanc, texte et pictogramme rouges. */
  .hero .btn-primary { background:#fff; color:var(--fire); border:2px solid #fff;
    padding:0.875rem 0.65rem;          /* cotes resserres : la bordure suit le texte */
    /* aucune transition sur transform ni box-shadow : elles amortiraient l'animation */
    transition:background 0.2s, color 0.2s;
    transform-origin:center center;
    animation:pulse-depannage 1.35s cubic-bezier(.36,.07,.19,.97) infinite;
    will-change:transform; }
  /* Battement de coeur : montee franche, retour amorti, puis temps mort.
     Le pic est bref, donc l'amplitude peut etre forte sans que la cible
     se derobe : au moment du clic, le bouton est au repos 60 % du temps. */
  @keyframes pulse-depannage{
      0% { transform:scale(1);    box-shadow:0 4px 14px rgba(0,0,0,0.28), 0 0 0 0 rgba(255,255,255,0.45); }
     16% { transform:scale(1.10); box-shadow:0 14px 34px rgba(0,0,0,0.34), 0 0 38px 12px rgba(255,255,255,0.95); }
     30% { transform:scale(1.01); box-shadow:0 6px 18px rgba(0,0,0,0.28), 0 0 16px 3px rgba(255,255,255,0.35); }
     42% { transform:scale(1.06); box-shadow:0 10px 26px rgba(0,0,0,0.30), 0 0 26px 7px rgba(255,255,255,0.65); }
     60% { transform:scale(1);    box-shadow:0 4px 14px rgba(0,0,0,0.28), 0 0 0 0 rgba(255,255,255,0.45); }
    100% { transform:scale(1);    box-shadow:0 4px 14px rgba(0,0,0,0.28), 0 0 0 0 rgba(255,255,255,0.45); }
  }
  /* la pulsation s'arrete des que le visiteur vise le bouton */
  .hero .btn-primary:hover, .hero .btn-primary:focus-visible {
    animation:none; transform:scale(1.06); box-shadow:0 12px 30px rgba(0,0,0,0.30); }
  .hero .btn-primary svg { fill:var(--fire); }
  .hero .btn-primary:hover { background:#fff8f4; color:#c42800; }
  .hero .btn-primary:hover svg { fill:#c42800; }
  .whatsapp-float { position:fixed; bottom:24px; right:24px; width:60px; height:60px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,0.25); z-index:2000; transition:all 0.2s; }
  .whatsapp-float:hover { transform:scale(1.08); box-shadow:0 6px 20px rgba(0,0,0,0.35); }
  .btn-outline { border:2px solid var(--navy); color:var(--navy); font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:0.92rem; letter-spacing:0.4px; text-transform:uppercase; padding:0.875rem 2rem; border-radius:4px; transition:all 0.2s; cursor:pointer; background:transparent; }
  .btn-outline:hover { border-color:var(--fire); color:var(--fire); background:rgba(230,48,0,0.05); }
  .hero-stats { display:flex; gap:3rem; justify-content:center; margin-top:3rem; flex-wrap:wrap; }
  .hero-stat-val { font-size:2rem; font-weight:800; color:var(--fire); }
  .hero-stat-lbl { font-size:0.69rem; color:var(--navy); letter-spacing:0.4px; text-transform:uppercase; }

  /* HERO — version telephone : bloc cale en haut, sous la barre de navigation */
  @media(max-width:720px){
    .hero {
      min-height:82vh;
      /* Le bloc part du haut plutot que d'etre centre : le titre se pose
         juste sous la barre de nav, et la video respire en dessous. */
      align-items:flex-start;
      padding:9rem 1.25rem 2rem;
    }
    .hero h1 { margin-bottom:0; line-height:1.2; }
    .hero-sub { font-size:1.25rem; font-weight:700; line-height:1.4; margin-top:1.9rem; }
    .hero-btns { gap:0.75rem; margin-top:1.9rem; }
    .hero-stats { gap:1.5rem; margin-top:2rem; }
  }

  /* STATS STRIP */
  .stats-strip { background:var(--navy); padding:1.5rem 2rem; display:flex; justify-content:center; gap:4rem; flex-wrap:wrap; }
  /* BLOC PREUVES — faits verifiables, places juste apres les logos clients */
  .preuves { background:transparent; padding:1.5rem 2rem 3.25rem; }   /* la photo de fond reste visible */
  .preuves-wrap { max-width:1100px; margin:0 auto; }
  .preuves-chiffres { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-bottom:2rem; }
  .preuve-c { background:var(--card-bg); border:1px solid #e5e7eb; border-radius:12px; padding:1.4rem 1rem; text-align:center; box-shadow:0 4px 16px rgba(26,46,74,0.10); min-width:0; }
  .preuve-c strong { display:block; font-size:clamp(1.7rem, 2.4vw, 2.3rem); font-weight:800; color:var(--fire); line-height:1; margin-bottom:0.4rem; white-space:nowrap; }
  .preuve-c span { display:block; font-size:0.95rem; color:var(--navy); font-weight:600; line-height:1.3; }
  .preuves-titre { font-size:0.782rem; letter-spacing:0.8px; text-transform:uppercase; color:#fff; font-weight:700; margin-bottom:1.25rem; text-align:center; text-shadow:0 1px 4px rgba(0,0,0,0.7); }
  .preuves-nature { text-align:center; font-size:1.05rem; color:#fff; font-weight:600; max-width:760px; margin:-0.75rem auto 2rem; line-height:1.5; text-shadow:0 1px 4px rgba(0,0,0,0.75); }
  .preuves-listes { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
  .preuve-bloc { background:var(--card-bg); border:1px solid #e5e7eb; border-radius:12px; padding:1.4rem 1.6rem; box-shadow:0 4px 16px rgba(26,46,74,0.10); }
  .preuve-bloc h3 { font-size:1.15rem; color:var(--navy); font-weight:800; margin-bottom:0.75rem; }
  .preuve-bloc ul { list-style:none; }
  .preuve-bloc li { position:relative; padding-left:1.35rem; margin-bottom:0.5rem; font-size:1rem; color:#41536e; line-height:1.45; }
  .preuve-bloc li::before { content:''; position:absolute; left:0; top:0.55em; width:7px; height:7px; border-radius:50%; background:var(--fire); }
  @media(max-width:900px){
    .preuves-chiffres { grid-template-columns:repeat(2,1fr); gap:0.8rem; }
    .preuves-listes { grid-template-columns:1fr; }
    /* la valeur peut revenir a la ligne plutot que d'elargir la carte */
    .preuve-c { padding:1.1rem 0.6rem; }
    .preuve-c strong { font-size:clamp(1.15rem, 5.4vw, 1.6rem); white-space:normal; }
    .preuve-c span { font-size:0.85rem; }
  }
  /* Le bandeau des logos s'eteint aussi progressivement qu'il s'est allume :
     la descente vers la section suivante suit la meme courbe que la montee
     depuis la video, pour un enchainement symetrique. */
  .logo-banner { background:linear-gradient(to bottom,
                   var(--navy) 0%,
                   var(--navy) 30%,
                   rgba(26,46,74,0.70) 58%,
                   rgba(26,46,74,0.30) 80%,
                   rgba(26,46,74,0) 100%);
                 padding:2rem 0 6.5rem; overflow:hidden; border-bottom:none;
                 -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
                         mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%); }
  .logo-track { display:flex; align-items:center; gap:4rem; width:max-content; animation:scroll-logos 32s linear infinite; }
  .logo-track:hover { animation-play-state:paused; }
  .logo-item { flex-shrink:0; height:52px; display:flex; align-items:center; justify-content:center; background:#fff; padding:0.55rem 1.1rem; border-radius:8px; box-shadow:0 2px 8px rgba(26,46,74,0.14); box-sizing:content-box; }
  .logo-item img { max-height:52px; max-width:150px; width:auto; height:auto; object-fit:contain; filter:none; opacity:1; transition:transform 0.3s; }
  .logo-item img:hover { transform:scale(1.06); }
  @keyframes scroll-logos { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
  .strip-item { text-align:center; }
  .strip-val { font-size:1.75rem; font-weight:800; color:var(--fire); }

  /* SECTION COMMON */
  section { padding:5rem 2rem; background:rgba(255,255,255,0.94); }
  .hero { background:transparent !important; }
  .section-tag { font-size:0.662rem; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--fire); margin-bottom:0.5rem; }
  .section-title { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; color:var(--text); margin-bottom:1rem; line-height:1.15; }
  .section-desc { color:var(--silver); font-size:1rem; max-width:600px; margin:0 auto 3rem; line-height:1.6; font-weight:400; }

  /* BANNER */

  /* HOW IT WORKS */
  .steps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; max-width:1000px; margin:0 auto; }
  .step-card { background:var(--card-bg); border:1px solid #e5e7eb; border-radius:12px; padding:2rem 1.5rem; text-align:center; position:relative; transition:all 0.3s; }
  .step-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.08); border-color:var(--fire); }
  .step-num { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--fire),var(--ember)); color:#fff; font-size:1.25rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
  .step-title { font-size:1.1rem; font-weight:700; margin-bottom:0.5rem; }
  .step-desc { font-size:0.9rem; color:var(--silver); line-height:1.5; font-weight:400; }

  /* ETABLISSEMENTS */
  #etablissements { background:var(--bg2); text-align:center; }
  .etab-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; max-width:1200px; margin:0 auto; }
  @media(max-width:1100px){.etab-grid{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:780px){.etab-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:480px){.etab-grid{grid-template-columns:1fr;}}
  .etab-card { background:var(--card-bg); border:2px solid #e5e7eb; border-radius:12px; overflow:visible; cursor:pointer; transition:all 0.3s; text-align:left; position:relative; }
  .etab-card:hover { border-color:var(--fire); transform:translateY(-4px); box-shadow:0 12px 32px rgba(255,59,31,0.12); }
  .etab-card.selected { border-color:var(--fire); background:linear-gradient(135deg,rgba(255,59,31,0.05),rgba(255,122,0,0.05)); }
  .etab-img-wrap { overflow:hidden; position:relative; }
  .etab-img { width:100%; height:150px; object-fit:cover; display:block; filter:brightness(0.75) saturate(0.8); transition:filter 0.4s,transform 0.4s; }
  .etab-card:hover .etab-img-wrap .etab-img { filter:brightness(0.9) saturate(1); transform:scale(1.05); }
  .tip-badge {
    position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
    background:var(--fire); color:#fff; font-size:0.72rem; font-weight:800;
    font-family:sans-serif; display:flex; align-items:center; justify-content:center;
    cursor:help; z-index:9999; box-shadow:0 2px 8px rgba(255,59,31,0.5);
    pointer-events:all; user-select:none;
  }
  
  .etab-body { padding:0.875rem; }
  .etab-name { font-size:0.754rem; font-weight:700; line-height:1.3; text-transform:uppercase; letter-spacing:0.12px; }
  .etab-sub { font-size:0.72rem; color:var(--silver); margin-top:0.25rem; font-weight:400; font-family:'Inter',system-ui,sans-serif; line-height:1.4; }
  .etab-check { position:absolute; top:8px; left:8px; width:20px; height:20px; border-radius:50%; background:var(--fire); color:#fff; font-size:0.75rem; display:none; align-items:center; justify-content:center; z-index:5; }
  .etab-card.selected .etab-check { display:flex; }

  /* TOOLTIP GLOBAL */
  #tip-global { position:fixed; background:#fff; color:var(--navy); font-size:0.78rem; font-weight:400; font-family:'Inter',system-ui,sans-serif; line-height:1.55; padding:0.75rem 1rem; border-left:3px solid var(--fire); box-shadow:0 6px 20px rgba(26,46,74,0.15); max-width:260px; z-index:2147483647; pointer-events:none; display:none; border-radius:0 4px 4px 0; }

  /* SERVICES */
  #services { background:var(--bg); }
  .services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; max-width:1100px; margin:0 auto; }
  .service-card { background:var(--card-bg); border-radius:16px; overflow:hidden; border:1px solid #e5e7eb; transition:all 0.3s; }
  .service-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,0.1); border-color:var(--fire); }
  .service-img-wrap { overflow:hidden; }
  .service-img { width:100%; height:180px; object-fit:cover; display:block; transition:transform 0.4s; filter:brightness(0.85) saturate(0.9); }
  .service-card:hover .service-img { transform:scale(1.04); filter:brightness(0.95) saturate(1); }
  .service-body { padding:1.25rem 1.25rem 1.5rem; }
  .service-num { font-size:0.644rem; font-weight:800; letter-spacing:0.8px; color:var(--fire); text-transform:uppercase; margin-bottom:0.5rem; }
  .service-title { font-size:1.05rem; font-weight:700; line-height:1.3; margin-bottom:0.5rem; }
  .service-desc { font-size:0.88rem; color:var(--silver); line-height:1.5; font-weight:400; }

  /* TUNNEL FORM */
  #devis { padding:5rem 2rem; }
  .tunnel-wrap { max-width:780px; margin:0 auto; }
  .tunnel-header { text-align:center; margin-bottom:3rem; }
  .tunnel-header .section-tag { color:var(--ember); }
  .tunnel-header .section-title { color:var(--navy); }
  .tunnel-header .section-desc { color:var(--silver); margin-bottom:0; }
  .tunnel-progress { display:flex; align-items:center; justify-content:center; gap:0; max-width:520px; margin:0 auto 3.8rem; }
  .tunnel-step-dot { position:relative; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; font-family:'Inter',system-ui,sans-serif; font-size:1.35rem; font-weight:700; transition:all 0.3s; flex-shrink:0; cursor:default; box-shadow:0 2px 10px rgba(0,0,0,0.25); }
  .tunnel-step-dot.active { background:var(--fire); color:#fff; box-shadow:0 4px 12px rgba(255,59,31,0.45); }
  .tunnel-step-dot.done { background:#2ecc71; color:#fff; cursor:pointer; }
  .tunnel-step-dot.done:hover { background:#27ae60; transform:scale(1.1); box-shadow:0 4px 12px rgba(46,204,113,0.4); }
  /* Libelle centre sous sa pastille */
  .tunnel-step-dot > span { position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:1.058rem; font-weight:700; letter-spacing:0.2px; text-transform:uppercase; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.7); cursor:inherit; }
  .tunnel-step-dot > span.done { color:#8ff0bb; }
  .tunnel-line { flex:1; height:3px; background:rgba(255,255,255,0.65); transition:background 0.3s; }
  .tunnel-line.done { background:#2ecc71; }
  @media(max-width:600px){
    .tunnel-progress { max-width:340px; margin-bottom:4rem; }
    .tunnel-step-dot { width:40px; height:40px; font-size:1.15rem; }
    .tunnel-step-dot > span { white-space:normal; width:84px; text-align:center; font-size:0.85rem; line-height:1.15; letter-spacing:0.2px; }
  }
  .tunnel-step { display:none; }
  .tunnel-step.active { display:block; animation:fadeIn 0.3s ease; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  .tunnel-q { font-size:1.3rem; font-weight:700; color:var(--navy); margin-bottom:1.5rem; text-align:center; }
  .tunnel-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:0.875rem; }
  .t-card { background:#fff; border:2px solid var(--border); border-radius:10px; padding:0; cursor:pointer; transition:all 0.25s; text-align:center; position:relative; overflow:visible; box-shadow:0 2px 8px rgba(26,46,74,0.06); }
  .t-card img { pointer-events:none; border-radius:8px 8px 0 0; } .t-card .t-card-name { pointer-events:none; } .t-card .t-check { pointer-events:none; }
  .t-card:hover { border-color:var(--ember); background:#fff8f5; box-shadow:0 4px 16px rgba(230,48,0,0.12); }
  .t-card.selected { border-color:#2ecc71; border-width:3px; background:#fff; box-shadow:0 0 0 3px rgba(46,204,113,0.2); }
  .t-check { position:absolute; top:7px; left:8px; width:22px; height:22px; background:#2ecc71; color:#fff; border-radius:50%; font-size:0.85rem; font-weight:800; align-items:center; justify-content:center; z-index:999; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,0.2); display:none; }
  .t-checkmark { display:none; position:absolute; bottom:8px; right:8px; width:24px; height:24px; background:#2ecc71; color:#fff; border-radius:50%; font-size:1rem; font-weight:800; line-height:24px; text-align:center; z-index:500; box-shadow:0 2px 6px rgba(0,0,0,0.3); }
  .t-card-name { font-size:0.754rem; font-weight:700; color:var(--navy); line-height:1.3; text-transform:uppercase; letter-spacing:0.12px; padding:0.6rem 0.75rem; }
  .tunnel-choices { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0.75rem; }
  .t-choice { background:#fff; border:2px solid var(--border); border-radius:8px; padding:0.75rem 1rem; cursor:pointer; font-size:0.85rem; font-weight:600; color:var(--navy); transition:all 0.25s; text-align:center; position:relative; box-shadow:0 2px 6px rgba(26,46,74,0.05); }
  .t-choice:hover { border-color:var(--ember); background:#fff8f5; color:var(--ember); }
  .t-choice.selected { border-color:#2ecc71; border-width:3px; background:#fff; color:var(--navy); }
  /* Message de validation affiche dans l'etape, a la place de la fenetre du navigateur */
  .tunnel-alerte { display:none; margin:1.25rem 0 0; background:#fff; border-left:5px solid var(--fire); border-radius:6px; padding:0.9rem 1.15rem; font-size:0.95rem; font-weight:600; color:var(--navy); box-shadow:0 4px 16px rgba(0,0,0,0.22); text-align:left; }
  .tunnel-alerte.visible { display:block; }
  /* Zone de depot : couleur fixe, aucune variation au survol */
  #upload-label { background:#fff8f4; border:2px dashed rgba(230,48,0,0.45); }
  #upload-label:hover { background:#fff8f4; border-color:rgba(230,48,0,0.75); }
  /* Boutons du tunnel plus compacts sur petit ecran */
  @media(max-width:600px){
    .tunnel-nav { gap:0.6rem; }
    .btn-tunnel { padding:0.6rem 1rem; font-size:0.85rem; letter-spacing:0.3px; }
    .btn-tunnel-back { padding:0.6rem 0.9rem; font-size:0.8rem; letter-spacing:0.3px; }
  }
  .tunnel-nav { display:flex; justify-content:space-between; align-items:center; margin-top:2rem; padding-bottom:0.5rem; }
  .btn-tunnel { background:#fff; color:var(--fire); border:2px solid #fff; padding:0.75rem 2rem; font-family:'Inter',system-ui,sans-serif; font-size:0.92rem; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; border-radius:4px; cursor:pointer; transition:all 0.2s; }
  .btn-tunnel:hover { background:#fff8f4; color:#c42800; transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,0.28); }
  .btn-tunnel-back { background:#fff; color:var(--fire); border:2px solid #fff; padding:0.75rem 1.5rem; font-family:'Inter',system-ui,sans-serif; font-size:0.828rem; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; border-radius:4px; cursor:pointer; transition:all 0.2s; }
  .btn-tunnel-back:hover { background:#fff8f4; color:#c42800; transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,0.28); }

  /* CONTACT FORM */
  .tunnel-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  @media(max-width:500px){.tunnel-form-grid{grid-template-columns:1fr;}}
  .t-input { background:#fff; border:1.5px solid var(--border); border-radius:6px; padding:0.75rem 1rem; font-family:'Inter',system-ui,sans-serif; font-size:0.95rem; color:var(--navy); width:100%; outline:none; transition:border-color 0.2s; box-shadow:0 1px 4px rgba(26,46,74,0.06); }
  .t-input::placeholder { color:rgba(26,46,74,0.35); }
  .t-input:focus { border-color:var(--ember); box-shadow:0 0 0 3px rgba(255,106,0,0.1); }
  .t-input-full { grid-column:1/-1; }
  .t-label { font-size:0.69rem; font-weight:700; color:var(--navy); letter-spacing:0.4px; text-transform:uppercase; margin-bottom:0.3rem; display:block; }

  /* ENTREPRISE SEARCH */
  .entreprise-search-wrap { position:relative; margin-bottom:1rem; grid-column:1/-1; }
  .siren-search-wrap { position:relative; }
  .entreprise-results { position:absolute; top:100%; left:0; right:0; background:#fff; border:1.5px solid rgba(255,106,0,0.35); border-top:none; border-radius:0 0 8px 8px; z-index:1000; max-height:240px; overflow-y:auto; display:none; box-shadow:0 8px 24px rgba(26,46,74,0.12); }
  .entreprise-result-item { padding:0.75rem 1rem; cursor:pointer; border-bottom:1px solid var(--border); transition:background 0.15s; }
  .entreprise-result-item:hover { background:rgba(255,106,0,0.07); }
  .f-societe { font-size:0.9rem; font-weight:700; color:var(--navy); }
  .f-siren { font-size:0.72rem; color:var(--ember); letter-spacing:1px; margin-top:0.15rem; }
  .f-addr { font-size:0.72rem; color:var(--silver); margin-top:0.1rem; }
  .search-spinner { display:none; position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; border:2px solid rgba(255,255,255,0.2); border-top-color:var(--ember); border-radius:50%; animation:spin 0.7s linear infinite; }
  @keyframes spin { to{transform:translateY(-50%) rotate(360deg)} }

  /* MODAL */
  .modal-overlay { position:fixed; inset:0; background:rgba(5,14,26,0.85); z-index:9000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all 0.3s; }
  .modal-overlay.open { opacity:1; visibility:visible; }
  .modal-box { background:#fff; border-radius:16px; padding:3rem 2.5rem; max-width:480px; width:90%; text-align:center; transform:scale(0.9); transition:transform 0.3s; }
  .modal-overlay.open .modal-box { transform:scale(1); }
  .modal-icon { font-size:3rem; margin-bottom:1rem; }
  .modal-title { font-size:1.8rem; font-weight:800; color:var(--text); margin-bottom:0.75rem; }
  .modal-sub { color:var(--silver); font-size:0.95rem; line-height:1.6; font-weight:400; }
  .modal-close { margin-top:2rem; background:var(--fire); color:#fff; border:none; padding:0.75rem 2rem; font-family:'Inter',system-ui,sans-serif; font-size:0.92rem; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; border-radius:4px; cursor:pointer; }
  .modal-box-legal { background:#fff; border-radius:16px; padding:2.5rem 2.5rem 2rem; max-width:820px; width:92%; max-height:85vh; overflow-y:auto; text-align:left; transform:scale(0.97); transition:transform 0.3s; }
  .modal-overlay.open .modal-box-legal { transform:scale(1); }
  .legal-content h2 { font-size:1.5rem; font-weight:800; color:var(--navy); margin-bottom:0.25rem; }
  .legal-content .legal-date { color:var(--silver); font-size:0.85rem; margin-bottom:1.5rem; }
  .legal-content h3 { font-size:1.05rem; font-weight:800; color:var(--navy); margin:1.5rem 0 0.5rem; border-left:4px solid var(--fire); padding-left:0.6rem; }
  .legal-content p { font-size:0.92rem; line-height:1.6; color:#333; margin-bottom:0.75rem; }
  .legal-content ul { margin:0 0 0.9rem 1.3rem; padding:0; }
  .legal-content li { font-size:0.92rem; line-height:1.6; color:#333; margin-bottom:0.4rem; }
  .legal-content strong { color:var(--navy); }
  .legal-content a { color:var(--fire); text-decoration:underline; }
  .modal-close-legal { position:sticky; top:0; float:right; background:var(--navy); color:#fff; border:none; width:36px; height:36px; border-radius:50%; font-size:1.1rem; cursor:pointer; line-height:1; }

  /* FOOTER */
  footer { position:relative; background:url('/img/fond-motopompes-v4.webp') 35% center / cover no-repeat fixed; color:#fff; padding:3rem 2rem; text-align:center; text-shadow:0 1px 4px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.7); }
  footer::before { content:''; position:absolute; inset:0; background:rgba(26,46,74,0.45); z-index:0; }
  footer > * { position:relative; z-index:1; }
  .footer-logo { font-size:1.012rem; font-weight:800; color:#fff; letter-spacing:0.4px; text-transform:uppercase; margin-bottom:0.75rem; }
  .footer-logo span { color:var(--fire); }
  .footer-links { display:flex; gap:2rem; justify-content:center; margin:1.5rem 0; flex-wrap:wrap; }
  .footer-links a { font-size:0.8rem; color:#fff; transition:color 0.2s; }
  .footer-links a:hover { color:var(--fire); }
.glossaire-figure { margin:1rem 0 1.5rem; }
  .glossaire-figure img, .glossaire-duo img {
    width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
    border-radius:10px; border:1px solid var(--border);
    box-shadow:0 3px 12px rgba(26,46,74,0.10); display:block;
  }
  .glossaire-figure img { max-width:430px; margin-left:auto; margin-right:auto; }
  .glossaire-figure figcaption { font-size:0.78rem; color:#6b7280; font-style:italic; margin:0.4rem auto 0; max-width:430px; text-align:center; }
.glossaire-duo { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; max-width:540px; margin-left:auto; margin-right:auto; }
  /* Photos prises en portrait : colonne etroite, sinon elles ecrasent le texte */
  .glossaire-portrait { max-width:430px; }
  .glossaire-portrait img { aspect-ratio:3/4; }
  .glossaire-portrait figcaption, .glossaire-portrait + p { max-width:430px; margin-left:auto; margin-right:auto; text-align:center; }
  .glossaire-figure.glossaire-portrait { max-width:300px; margin-left:auto; margin-right:auto; }
  .glossaire-figure.glossaire-portrait img { aspect-ratio:3/4; max-width:300px; }
  .glossaire-figure.glossaire-portrait figcaption { max-width:300px; }
  /* Photo carree : cadrage d origine conserve, y compris sur mobile */
  .glossaire-figure.glossaire-carre img { aspect-ratio:1/1; max-width:340px; }
  .glossaire-figure.glossaire-carre figcaption { max-width:340px; }
  /* Photo verticale : cadrage d origine conserve, y compris sur mobile */
  .glossaire-figure.glossaire-vertical img { aspect-ratio:2/3; max-width:210px; }
  .glossaire-figure.glossaire-vertical figcaption { max-width:430px; }
  /* Respiration avant chaque titre de definition */
  /* Chaque definition dans sa propre carte, comme la FAQ */
  .def-card { background:#fff; border-radius:12px; padding:1.5rem 1.75rem; margin-bottom:1.25rem; box-shadow:0 2px 10px rgba(26,46,74,0.12); }
  .def-card > h3:first-child { margin-top:0; }
  .def-card h4 { text-align:center; }
  .pastille-attention { display:inline-flex; align-items:center; justify-content:center; width:1.45em; height:1.45em; border-radius:50%; background:var(--fire); color:#fff; font-size:0.9em; font-weight:800; line-height:1; vertical-align:-0.18em; margin-right:0.4em; }
  #definitions > h2 { color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.65); text-align:center; }
  @media(max-width:600px){ .def-card { padding:1.2rem 1.1rem; } }
  /* Texte en blanc sur la photo de la section devis (le glossaire garde son texte fonce) */
  #devis .tunnel-header .section-title, #devis .tunnel-q { color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.6); }
    /* Les libelles de champs sont poses sur la photo de fond : blanc + ombre pour rester lisibles */
    #devis .t-label { color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.75); }
  #devis .tunnel-header .section-desc { color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.65); }
  #devis .tunnel-q span { color:rgba(255,255,255,0.9) !important; }
  /* Photo de fond sur les sections Qui sommes-nous et FAQ */
  #apropos, #faq { background:linear-gradient(rgba(26,46,74,0.28),rgba(26,46,74,0.28)),url('/img/fond-motopompes-v4.webp') 35% center / cover no-repeat fixed; }
  /* Photo de fond derriere le bloc blanc du glossaire */
  #devis { position:relative; background:url('/img/fond-motopompes-v4.webp') 35% center / cover no-repeat fixed; padding-bottom:3rem; }
  #devis::before { content:''; position:absolute; inset:0; background:rgba(26,46,74,0.28); z-index:0; }
  #devis > * { position:relative; z-index:1; }
  @media(max-width:900px){ #devis { padding-bottom:5rem; } }
  /* Titres de niveau 3 centres, comme les images du glossaire */
  #definitions h3, #faq h3, .faq-item h3, .legal-content h3 { text-align:center; }
  /* Telephone : une photo par ligne, mais on conserve le cadrage d origine
     (le 16/9 impose avant coupait le haut et le bas des photos verticales) */
  @media(max-width:600px){
    .glossaire-duo { grid-template-columns:1fr; gap:0.6rem; max-width:100%; }
    /* Photo entiere : plus aucun recadrage, on voit tout le materiel */
    .glossaire-figure img, .glossaire-duo img,
    .glossaire-portrait img,
    .glossaire-figure.glossaire-portrait img,
    .glossaire-figure.glossaire-carre img,
    .glossaire-figure.glossaire-vertical img {
      aspect-ratio:auto; height:auto; object-fit:contain; max-width:100%; width:100%; }
    .glossaire-figure.glossaire-portrait, .glossaire-figure.glossaire-portrait figcaption,
    .glossaire-figure.glossaire-carre figcaption, .glossaire-figure.glossaire-vertical figcaption {
      max-width:100%; }
    .glossaire-figure.glossaire-vertical img { max-width:65%; margin-left:auto; margin-right:auto; }
  }
  .footer-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; max-width:1100px; margin:2.5rem auto 0; text-align:left; }
  .footer-col h3 { font-size:0.736rem; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:0.4px; margin:0 0 0.9rem; }
  .footer-col ul { list-style:none; margin:0; padding:0; }
  .footer-col li { margin-bottom:0.5rem; }
  .footer-col a, .footer-col span { font-size:0.82rem; color:#fff; line-height:1.5; transition:color 0.2s; }
  .footer-col a:hover { color:var(--ember); }
  .footer-col .footer-note { display:block; font-size:0.78rem; color:rgba(255,255,255,0.85); margin-top:0.15rem; }
  .footer-sep { max-width:1100px; margin:2.5rem auto 0; border-top:1px solid rgba(255,255,255,0.30); }
  @media(max-width:900px){ .footer-cols { grid-template-columns:repeat(2,1fr); gap:1.75rem; } }
  @media(max-width:520px){ .footer-cols { grid-template-columns:1fr; gap:1.5rem; } }
  .footer-copy { font-size:0.75rem; color:rgba(255,255,255,0.85); }

  img.zoomable { cursor: zoom-in; }
  #visionneuse {
    position: fixed; inset: 0; z-index: 9999; display: none;
    background: rgba(10,14,26,0.94); padding: 2rem 1rem;
    align-items: center; justify-content: center; flex-direction: column;
    cursor: zoom-out; -webkit-tap-highlight-color: transparent;
  }
  #visionneuse.ouverte { display: flex; }
  #visionneuse img {
    max-width: min(1100px, 94vw); max-height: 82vh;
    width: auto; height: auto; border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6); background: #fff;
  }
  #visionneuse figcaption {
    color: #e7ecf5; font-size: 0.9rem; line-height: 1.5; text-align: center;
    max-width: min(700px, 90vw); margin-top: 1rem;
  }
  #visionneuse .fermer {
    position: absolute; top: 1rem; right: 1.25rem;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.14); color: #fff;
    font-size: 1.6rem; line-height: 1; cursor: pointer;
  }
  #visionneuse .fermer:hover { background: rgba(255,255,255,0.26); }