/* ============================================================================
   EURODRIVE MOBILE — rhabillage mobile aligné sur l'app Renault Eurodrive
   Chargée en DERNIER dans head.php (après les overload-*), uniquement pour
   renaulteurodrive.com (condition IS_RENAULT_EURODRIVE dans head.php).
   Tout est enfermé dans @media max-width:767px → ZÉRO impact desktop.
   Charte (tokens de l'app Flutter) :
     orange #F45000 · orange foncé #C24000 · sombre #1A1A1A · texte 2nd #6B6B6B
     bordures #E6E6E6 · fond doux #F7F6F3 · pastille #FCE8E0 · sur-sombre #B4B2A9
     arrondis : cartes 16px · boutons 14px · inputs/chips 12px · design 100% plat
   ============================================================================ */
/* Bouton Accueil du header (header.php) : réservé au mobile — jamais en desktop.
   Seule règle hors des blocs mobile, volontairement (elle ne fait que MASQUER). */
@media only screen and (min-width: 768px) { .ed-home-btn { display: none !important; } }
@media only screen and (max-width: 767px) {

  /* ---------- 1. Base : typographie & couleurs ---------- */
  body {
    font-size: 15px;
    line-height: 1.55;
    color: #1A1A1A;
    background: #FFFFFF;
  }
  p, li, td { font-size: 14px; color: #3A3A3A; }
  h1 { font-size: 24px; font-weight: 800; color: #1A1A1A; line-height: 1.25; }
  h2 { font-size: 20px; font-weight: 700; color: #1A1A1A; line-height: 1.3; }
  h3 { font-size: 17px; font-weight: 700; color: #1A1A1A; }
  h4 { font-size: 15.5px; font-weight: 700; color: #1A1A1A; }
  a { color: #F45000; }
  a:hover, a:focus { color: #C24000; }
  .auto-container { padding-left: 16px; padding-right: 16px; }
  img { max-width: 100%; height: auto; }

  /* Titres de section du template : plus proches de l'app (gros, sans fioritures) */
  .sec-title h2, .sec-title h1 { font-size: 21px; font-weight: 800; letter-spacing: 0; text-transform: none; }
  .sec-title .separator { display: none; }

  /* ---------- 2. Header : simple, blanc, net (logo + burger) ---------- */
  .main-header .header-top { display: none; }          /* téléphones/horaires → footer */
  .main-header .header-lower { display: none; }        /* bandeau marques : superflu mobile */
  /* Header 2026 : collant, effet verre dépoli, logo et burger alignés au centre */
  .main-header {
    position: -webkit-sticky; position: sticky;
    top: 0;
    z-index: 9990;
  }
  .main-header .header-upper {
    background: rgba(247,246,243,0.92);   /* crème, comme le reste de la page */
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: none;
  }
  /* Accueil ANCRÉ À GAUCHE, burger À DROITE, logo parfaitement CENTRÉ entre les
     deux (layout d'app) : les deux tuiles sont en absolu sur les bords, le logo
     reste seul dans le flux → centré par justify-content. */
  .main-header .header-upper .upper-inner {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    position: relative;
    min-height: 48px;
    padding: 9px 0;
  }
  .main-header .header-upper .upper-inner > .ed-home-btn {
    position: absolute; left: 0; top: 50%;
    -webkit-transform: translateY(-50%); transform: translateY(-50%);
  }
  .main-header .header-upper .upper-right {
    position: absolute; right: 0; top: 50%;
    -webkit-transform: translateY(-50%); transform: translateY(-50%);
  }
  /* Symétrie au pixel : neutralise le margin-right inline (0/4/12px selon la
     langue, réglage desktop) posé sur <nav class="main-menu"> dans header.php. */
  .main-header .header-upper .upper-right .main-menu { margin: 0 !important; }
  .main-header .header-upper .logo-outer,
  .main-header .header-upper .upper-right { float: none; width: auto; padding: 0; margin: 0; }
  .main-header .logo { margin: 0; padding: 0; }
  /* Logo : version à FOND TRANSPARENT (l'original de l'app avait un fond blanc opaque) */
  .main-header .logo img, .sticky-header .logo img {
    content: url("/images/ed-logo.png");
    width: 148px !important; height: auto !important;
    max-width: none;
    display: block;
  }
  /* Panier : hors sujet sur l'accueil mobile (le tunnel a son propre parcours) */
  .main-header .more-options { display: none !important; }
  /* La zone droite (burger) ne doit jamais rogner le bouton */
  .main-header .nav-outer,
  .main-menu .navbar-header {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .main-menu { margin: 0 !important; }

  /* Burger (SVG injecté par le JS — les barres CSS ne passaient pas) + bouton
     Accueil (<a> dans header.php, masqué sur l'accueil). Boutons JUMEAUX :
     tuile blanche bord #E6E6E6 arrondi 14 (charte boutons) → l'affordance
     « c'est un bouton » est immédiate, contrairement à l'ancien burger nu. */
  .main-menu .navbar-header {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    /* PAS de gap ici : le ::after de clearfix du gabarit devient un item flex
       et le gap ajouterait 10px fantômes après le burger (symétrie cassée). */
  }
  .main-menu .navbar-header:after { content: none; }
  .main-menu .navbar-header .navbar-toggle,
  .navbar-toggle,
  .main-menu .navbar-header .ed-home-btn,
  .ed-home-btn {
    width: 48px; height: 48px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #E6E6E6;
    border-radius: 14px;
    background: #FFFFFF;
    position: relative;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
  }
  .navbar-toggle:active, .ed-home-btn:active { background: #F6F6F4; }
  .navbar-toggle .icon-bar { display: none; }
  .navbar-toggle svg, .ed-home-btn svg { display: block; }

  /* Liens « Read more » morts (href="#") du carrousel : masqués */
  a.read-more[href="#"] { display: none !important; }

  /* ---------- L'ancien BLEU -> orange #F45000 (charte TT Eurodrive) ---------- */
  /* Bleu Bootstrap (#337ab7 et variantes) : boutons, liens, pagination */
  .btn-primary, .btn-info {
    background-color: #F45000 !important;
    border-color: #F45000 !important;
    color: #FFFFFF !important;
  }
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
  .btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: #C24000 !important;
    border-color: #C24000 !important;
  }
  .pagination > li > a, .pagination > li > span { color: #F45000; }
  .pagination > .active > a, .pagination > .active > span,
  .pagination > .active > a:hover, .pagination > .active > a:focus {
    background-color: #F45000 !important;
    border-color: #F45000 !important;
    color: #FFFFFF !important;
  }
  .text-primary { color: #F45000 !important; }
  .bg-primary, .label-primary, .badge-primary { background-color: #F45000 !important; }
  /* Bleu du calendrier jQuery (xdsoft #3af) : sélection et survol en orange */
  .xdsoft_datetimepicker .xdsoft_calendar td:hover,
  .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
    background: #F45000 !important;
    color: #FFFFFF !important;
  }
  .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
  .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
  .xdsoft_datetimepicker .xdsoft_time_box div.xdsoft_current {
    background: #F45000 !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
  }
  .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
    background: #F45000 !important;
    box-shadow: none !important;
  }
  .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: #F45000; }

  /* Page À propos : blocs mission/vision en cartes app */
  .about-section .about-block .inner-box {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none !important;
    margin-bottom: 12px;
  }
  .about-section .about-block .image img { display: block; width: 100%; height: 170px; object-fit: cover; }
  .about-section .about-block .lower-box { padding: 13px 14px 15px; }
  .about-section .about-block .lower-box h3 { font-size: 15.5px; font-weight: 700; color: #1A1A1A; margin: 0 0 6px; text-transform: none; }
  .about-section .about-block .lower-box .text { font-size: 13px; color: #6B6B6B; line-height: 1.55; }

  /* Menu déplié : feuille blanche façon app — grandes lignes tapables, actif orange */
  .main-menu .navbar-collapse {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    margin: 8px 0 10px;
    padding: 4px 0;
    box-shadow: none !important;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-menu .navigation > li { border-bottom: 1px solid #F4F4F2; margin: 0; float: none; width: 100%; }
  .main-menu .navigation > li:last-child { border-bottom: none; }
  .main-menu .navigation > li > a {
    display: block;
    padding: 15px 40px 15px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #1A1A1A !important;
    text-transform: none;
    letter-spacing: 0;
    background: transparent !important;
    position: relative;
  }
  .main-menu .navigation > li > a:after {
    content: ""; position: absolute; right: 19px; top: 50%;
    width: 8px; height: 8px; margin-top: -5px;
    border-right: 2px solid #CFCEC8; border-bottom: 2px solid #CFCEC8;
    transform: rotate(-45deg);
  }
  .main-menu .navigation > li:hover > a,
  .main-menu .navigation > li.current > a,
  .main-menu .navigation > li.current-menu-item > a { color: #F45000 !important; background: transparent !important; }
  .main-menu .navigation > li.current > a:after { border-color: #F45000; }
  /* Sous-menus : à plat, indentés, gris doux */
  .main-menu .navigation li .dropdown-menu,
  .main-menu .navigation > li > ul {
    position: static !important;
    float: none !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: #FAFAF8 !important;
    padding: 0 0 6px;
    margin: 0;
  }
  .main-menu .navigation li ul li a {
    display: block;
    padding: 12px 18px 12px 32px !important;
    font-size: 14px !important;
    font-weight: 500;
    color: #3A3A3A !important;
    text-transform: none !important;
  }

  /* Header collant : redondant sur mobile (le header principal suffit) */
  .sticky-header { display: none !important; }

  /* ---------- Menu 2026 : tiroir PLEIN ÉCRAN animé (JS eurodrive-mobile.js) ----------
     Le tiroir est déplacé par le JS en enfant direct de <body> (sinon le logo du header
     s'affiche par-dessus). Design : typo XXL, aéré, items en cascade, CTA orange en bas. */
  .navbar-collapse.ed-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    height: 100%;
    max-height: none;
    margin: 0;
    border: none !important;
    border-radius: 0;
    background: #FFFFFF;
    z-index: 2147483000;
    padding: 0 22px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(103%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.3, 1);
    /* on reprend la main sur le collapse Bootstrap (display:none) */
    display: -webkit-flex !important; display: flex !important;
    -webkit-flex-direction: column; flex-direction: column;
  }
  body.ed-menu-open { overflow: hidden; }
  body.ed-menu-open .navbar-collapse.ed-drawer { transform: translateX(0); }
  .ed-drawer-top {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: space-between; justify-content: space-between;
    padding: 16px 0 18px;
  }
  .ed-drawer-top img { width: 118px; height: auto; }
  .ed-drawer-close {
    width: 44px; height: 44px;
    border: none; border-radius: 14px;
    background: #F6F6F4;
    font-size: 26px; line-height: 1; color: #1A1A1A;
    padding: 0;
  }
  /* L'ancien <ul> du gabarit reste dans la page (moteurs) mais n'est jamais affiché */
  .ed-drawer ul.navigation { display: none !important; }

  /* Pastilles de langue en haut du tiroir */
  .ed-nav-langs {
    display: -webkit-flex; display: flex;
    gap: 8px;
    padding-bottom: 14px;
  }
  .ed-lang {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: #F6F6F4;
    color: #6B6B6B;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
  }
  .ed-lang-on { background: #F45000; color: #FFFFFF; }

  /* Navigation reconstruite : lignes pleines nettes, groupes, cascade à l'ouverture */
  .ed-nav { -webkit-flex: 1; flex: 1; }
  .ed-nav > * {
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  body.ed-menu-open .ed-nav > * { opacity: 1; transform: none; }
  body.ed-menu-open .ed-nav > *:nth-child(1) { transition-delay: 0.05s; }
  body.ed-menu-open .ed-nav > *:nth-child(2) { transition-delay: 0.08s; }
  body.ed-menu-open .ed-nav > *:nth-child(3) { transition-delay: 0.11s; }
  body.ed-menu-open .ed-nav > *:nth-child(4) { transition-delay: 0.14s; }
  body.ed-menu-open .ed-nav > *:nth-child(5) { transition-delay: 0.17s; }
  body.ed-menu-open .ed-nav > *:nth-child(6) { transition-delay: 0.2s; }
  body.ed-menu-open .ed-nav > *:nth-child(7) { transition-delay: 0.23s; }
  body.ed-menu-open .ed-nav > *:nth-child(8) { transition-delay: 0.26s; }
  body.ed-menu-open .ed-nav > *:nth-child(9) { transition-delay: 0.29s; }
  body.ed-menu-open .ed-nav > *:nth-child(10) { transition-delay: 0.32s; }
  body.ed-menu-open .ed-nav > *:nth-child(n+11) { transition-delay: 0.35s; }
  .ed-nav-item {
    display: block;
    padding: 13px 40px 13px 0;
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.3px; line-height: 1.2;
    color: #1A1A1A; text-decoration: none;
    position: relative;
  }
  .ed-nav-item:after {
    content: ""; position: absolute; right: 8px; top: 50%;
    width: 9px; height: 9px; margin-top: -5px;
    border-right: 2px solid #E0DFDA; border-bottom: 2px solid #E0DFDA;
    transform: rotate(-45deg);
  }
  .ed-nav-item.ed-now { color: #F45000; }
  .ed-nav-item.ed-now:after { border-color: #F45000; }
  .ed-nav-group {
    padding: 18px 0 4px;
    font-size: 12px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: #B4B2A9;
  }
  .ed-nav-sub {
    display: block;
    padding: 11px 40px 11px 0;
    font-size: 16px; font-weight: 600;
    color: #3A3A3A; text-decoration: none;
    position: relative;
  }
  .ed-nav-sub:after {
    content: ""; position: absolute; right: 10px; top: 50%;
    width: 7px; height: 7px; margin-top: -4px;
    border-right: 2px solid #E0DFDA; border-bottom: 2px solid #E0DFDA;
    transform: rotate(-45deg);
  }
  /* Sous-menus : toujours visibles, à plat, indentés */
  .ed-drawer .navigation li ul, .ed-drawer .navigation li .dropdown-menu {
    display: block !important;
    position: static !important;
    padding: 0 0 8px !important;
  }
  .ed-drawer .navigation li ul li { border: none; }
  .ed-drawer .navigation li ul li a {
    padding: 10px 2px 10px 16px !important;
    font-size: 14.5px !important;
    color: #6B6B6B !important;
  }
  .ed-drawer-foot { padding-top: 12px; }
  .ed-drawer-cta {
    display: block;
    background: #F45000;
    color: #FFFFFF !important;
    text-align: center;
    padding: 16px;
    border-radius: 14px;
    font-size: 16px; font-weight: 700;
  }
  .ed-drawer-tel {
    display: block;
    text-align: center;
    color: #6B6B6B !important;
    font-size: 13px; font-weight: 600;
    padding: 12px 0 4px;
  }
  .ed-drawer-tel .fa { color: #0F6E56; margin-right: 4px; }

  /* Bouton-bandeau « Nos agences » (sous l'assistance) : motif signature de l'app */
  .ed-banner {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    background: #1A1A1A;
    border-radius: 18px;
    padding: 14px 16px;
    margin: 0 0 12px;
    text-decoration: none;
  }
  .ed-banner-ico {
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    width: 44px; height: 44px; line-height: 44px;
    text-align: center;
    background: #F45000;
    border-radius: 14px;
    color: #FFFFFF; font-size: 19px;
    margin-right: 12px;
  }
  .ed-banner-txt { -webkit-flex: 1; flex: 1; min-width: 0; }
  .ed-banner-txt b { display: block; color: #FFFFFF; font-size: 15px; font-weight: 700; }
  .ed-banner-txt i { display: block; color: #B4B2A9; font-size: 12.5px; font-style: normal; margin-top: 2px; }
  .ed-banner-arrow { color: #B4B2A9; font-size: 18px; }

  /* Panier / compte */
  .main-header .cart-box a, .main-header .cart-box .icon { color: #1A1A1A; }

  /* ---------- 3. Boutons : orange plein, arrondi 14px, plat (comme l'app) ---------- */
  .theme-btn,
  .btn-style-one, .btn-style-two, .btn-style-three, .btn-style-four,
  .btn-continue-booking,
  button[type="submit"], input[type="submit"] {
    background: #F45000 !important;
    border: 1px solid #F45000 !important;
    color: #FFFFFF !important;
    border-radius: 14px !important;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none !important;
    line-height: 1.3;
  }
  .theme-btn:hover, .theme-btn:active,
  .btn-style-one:hover, .btn-style-two:hover, .btn-style-three:hover, .btn-style-four:hover,
  .btn-continue-booking:hover,
  button[type="submit"]:hover, input[type="submit"]:hover {
    background: #C24000 !important;
    border-color: #C24000 !important;
    color: #FFFFFF !important;
  }

  /* ---------- 4. Formulaires : façon app (48px, arrondi 12px, focus orange) ---------- */
  .form-group input[type="text"], .form-group input[type="email"],
  .form-group input[type="password"], .form-group input[type="tel"],
  .form-group input[type="number"], .form-group select, .form-group textarea,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="search"], select, textarea {
    height: 48px;
    padding: 10px 14px;
    border: 1px solid #E6E6E6 !important;
    border-radius: 12px !important;
    background: #FFFFFF;
    font-size: 15px;
    color: #1A1A1A;
    box-shadow: none !important;
  }
  textarea { height: auto; min-height: 110px; }
  input:focus, select:focus, textarea:focus {
    border-color: #F45000 !important;
    outline: none;
  }
  label { font-size: 13px; font-weight: 600; color: #6B6B6B; }

  /* ---------- 5. Bandeau de titre de page : sombre arrondi (signature app) ---------- */
  .page-title {
    background-color: #1A1A1A !important;
    background-image: none !important;
    border-radius: 0 0 18px 18px;
    padding: 22px 0 20px;
  }
  .page-title h1, .page-title h2 { color: #FFFFFF; font-size: 21px; font-weight: 800; }
  .page-title .bread-crumb, .page-title .bread-crumb li,
  .page-title .bread-crumb a { color: #B4B2A9; font-size: 12.5px; }

  /* ---------- 6. Contenus : cartes plates, pas d'ombres ---------- */
  .news-block .inner-box, .vehicle-block .inner-box,
  .services-block .inner-box, .team-block .inner-box,
  .featured-block .inner-box, .offer-block .inner-box {
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    box-shadow: none !important;
    overflow: hidden;
  }
  .news-block .image img, .vehicle-block .image img { border-radius: 16px 16px 0 0; }

  /* Tableaux (récap commande, tarifs) : défilement horizontal propre */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }

  /* ---------- 7. Footer : réplique du style app — sombre, arrondi, icônes en carrés ---------- */
  .main-footer {
    background-color: #1A1A1A !important;
    background-image: none !important;
    border-radius: 18px 18px 0 0;
    margin-top: 22px;
    padding-top: 24px;
  }
  .main-footer .auto-container { padding-left: 18px; padding-right: 18px; }
  .main-footer .widgets-section { padding-bottom: 6px; }
  /* Titres de colonnes */
  .main-footer h2, .main-footer h3, .main-footer h4,
  .main-footer .footer-widget h2 {
    color: #FFFFFF; font-size: 14px; font-weight: 800;
    text-transform: none; letter-spacing: 0;
    margin: 20px 0 10px; padding: 0;
  }
  .main-footer .footer-widget { margin-bottom: 4px; }
  .main-footer, .main-footer p, .main-footer li,
  .main-footer .about-widget .text { color: #B4B2A9; font-size: 12.5px; line-height: 1.55; }
  /* Listes de liens : lignes nettes tapables */
  .main-footer .footer-links li {
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 0; margin: 0;
  }
  .main-footer .footer-links li:last-child { border-bottom: none; }
  .main-footer .footer-widget .footer-links li a,
  .main-footer .footer-links li a {
    display: block;
    padding: 12px 0 !important;
    color: #CFCEC8; font-size: 13.5px; font-weight: 500;
  }
  .main-footer a:hover { color: #F45000; }
  /* Coordonnées : icône dans un carré arrondi orange (comme les tuiles de l'app) */
  .main-footer .list-style-one li {
    position: relative;
    padding: 9px 0 9px 52px;
    min-height: 52px;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    color: #CFCEC8; font-size: 13px; line-height: 1.45;
    margin: 0 0 6px;
  }
  .main-footer .list-style-one li .icon {
    position: absolute; left: 0; top: 50%;
    margin-top: -19px;
    width: 38px; height: 38px; line-height: 38px !important;
    text-align: center;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    color: #F45000 !important;
    font-size: 15px;
  }
  .main-footer .list-style-one li a { color: #CFCEC8; }
  /* Footer replié (JS eurodrive-mobile.js) : chaque bloc devient une ligne dépliable
     façon app — titre + chevron, contenu masqué tant qu'on ne tape pas dessus. */
  .main-footer .footer-widget.ed-fold {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin: 0;
  }
  .main-footer .footer-widget.ed-fold > h2 {
    position: relative;
    margin: 0; padding: 15px 34px 15px 0;
    cursor: pointer;
  }
  .main-footer .footer-widget.ed-fold > h2:after {
    content: ""; position: absolute; right: 6px; top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid #6B6B6B; border-bottom: 2px solid #6B6B6B;
    transform: rotate(45deg);
    transition: transform 0.2s, border-color 0.2s;
  }
  .main-footer .footer-widget.ed-fold > *:not(h2) { display: none; }
  .main-footer .footer-widget.ed-fold.ed-open > *:not(h2) { display: block; padding-bottom: 10px; }
  .main-footer .footer-widget.ed-fold.ed-open > h2 { color: #F45000; }
  .main-footer .footer-widget.ed-fold.ed-open > h2:after {
    transform: rotate(225deg);
    margin-top: -2px;
    border-color: #F45000;
  }

  /* Bas de page */
  .main-footer .footer-bottom {
    background: #111111;
    border-top: 1px solid #2A2A2A;
    margin-top: 14px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    text-align: center;
  }
  .main-footer .footer-bottom, .main-footer .copyright { color: #8B8980; font-size: 11.5px; }
  .main-footer .footer-nav li { display: inline-block; margin: 0 8px; }
  .main-footer .footer-nav li a { color: #8B8980; font-size: 11.5px; }

  /* ---------- 8. Divers confort mobile ---------- */
  /* Espace vertical entre sections plus régulier */
  section { padding-top: 28px; padding-bottom: 28px; }
  /* Boutons et liens : zone tactile correcte */
  .main-menu .navigation > li > a, .theme-btn { min-height: 44px; }
  /* Widget fixe éventuel (chat/avis) : ne pas gêner le pouce */
  .fixed-widget { bottom: 76px; }
}

/* Le bloc accueil app-like (héros + formulaire + assistance) existe dans le HTML pour tous
   (lisible par les moteurs), mais n'est AFFICHÉ que sur mobile (règles dans le @media). */
.ed-home, .ed-hero { display: none; }

/* ============================================================================
   PAGES SPÉCIFIQUES — réplique du design de l'app, page par page (mobile only)
   ============================================================================ */
@media only screen and (max-width: 767px) {

  /* ---------- ACCUEIL — composant .ed-home (réplique de l'accueil de l'app) ---------- */
  /* Le slider d'images (Revolution) laisse place au bloc app : héros + formulaire + assistance */
  .main-slider { display: none; }
  .ed-home { display: block; padding: 12px 16px 6px; background: #F7F6F3; }

  .ed-hero {
    display: block;
    background: #1A1A1A;
    border-radius: 18px;
    padding: 20px 18px;
    margin: 0 0 12px;
  }
  .ed-hero-title { color: #FFFFFF; font-size: 25px; font-weight: 800; line-height: 1.15; margin: 0 0 6px; }
  .ed-hero-sub { color: #B4B2A9; font-size: 13px; line-height: 1.5; margin: 0; }

  /* Carte formulaire de réservation (comme l'écran Réserver de l'app) */
  .ed-card {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 16px;
    margin: 0 0 12px;
  }
  .ed-card-title { font-size: 18px; font-weight: 800; color: #1A1A1A; margin: 0 0 12px; }
  .ed-label {
    display: block;
    font-size: 12.5px; font-weight: 600; color: #6B6B6B;
    margin: 10px 0 5px;
  }
  .ed-select { position: relative; }
  .ed-select:after {
    content: ""; position: absolute; right: 15px; top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid #6B6B6B; border-bottom: 2px solid #6B6B6B;
    transform: rotate(45deg); pointer-events: none;
  }
  .ed-select select, #ed-booking-form input[type="date"], .ed-promo {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 48px;
    padding: 10px 14px;
    border: 1px solid #E6E6E6; border-radius: 12px;
    background: #FFFFFF;
    font-size: 15px; color: #1A1A1A;
  }
  .ed-select select:focus, #ed-booking-form input[type="date"]:focus, .ed-promo:focus {
    border-color: #F45000; outline: none;
  }
  .ed-dates { display: -webkit-flex; display: flex; gap: 8px; }
  .ed-dates > div { -webkit-flex: 1; flex: 1; min-width: 0; }
  .ed-promo { margin-top: 12px; }
  .ed-submit {
    display: block; width: 100%;
    margin-top: 14px; padding: 15px;
    background: #F45000; color: #FFFFFF;
    border: none; border-radius: 14px;
    font-size: 16px; font-weight: 700;
  }
  .ed-submit:active { background: #C24000; }

  /* Pavé assistance vert (comme la bannière de l'app) */
  .ed-assist {
    display: -webkit-flex; display: flex; align-items: center;
    background: #0F6E56;
    border-radius: 18px;
    padding: 14px 16px;
    margin: 0 0 8px;
    text-decoration: none;
  }
  .ed-assist-ico {
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    width: 44px; height: 44px; line-height: 44px;
    text-align: center;
    background: rgba(255,255,255,0.18);
    border-radius: 14px;
    color: #FFFFFF; font-size: 19px;
    margin-right: 12px;
  }
  .ed-assist-txt { -webkit-flex: 1; flex: 1; min-width: 0; }
  .ed-assist-txt b { display: block; color: #FFFFFF; font-size: 15px; font-weight: 700; }
  .ed-assist-txt i { display: block; color: #C9E7DD; font-size: 12.5px; font-style: normal; margin-top: 2px; }
  .ed-assist-arrow { color: rgba(255,255,255,0.7); font-size: 18px; }
  .ed-assist-more {
    display: block;
    text-align: center;
    color: #6B6B6B; font-size: 13px; font-weight: 600;
    padding: 4px 0 10px;
  }

  /* Sections héritées du vieux gabarit : TOUTES masquées sur l'accueil mobile —
     l'accueil est le composant .ed-home, comme l'app (le contenu reste accessible
     via le menu : véhicules, blog, centres…). Le <body> de l'accueil porte la
     langue (fr/en/es/pt) ou "home" selon l'URL. */
  body.home .services-section, body.fr .services-section, body.en .services-section,
  body.es .services-section, body.pt .services-section,
  body.home .counter-section, body.fr .counter-section, body.en .counter-section,
  body.es .counter-section, body.pt .counter-section,
  body.home .news-page-section, body.fr .news-page-section, body.en .news-page-section,
  body.es .news-page-section, body.pt .news-page-section,
  body.home .popular-cars-section, body.fr .popular-cars-section, body.en .popular-cars-section,
  body.es .popular-cars-section, body.pt .popular-cars-section,
  body.home .popular-cars-section-two, body.fr .popular-cars-section-two, body.en .popular-cars-section-two,
  body.es .popular-cars-section-two, body.pt .popular-cars-section-two { display: none; }

  /* Titre de section (comme « Nos agences » dans l'app) */
  .ed-sec-title { font-size: 17px; font-weight: 800; color: #1A1A1A; margin: 16px 0 10px; }

  /* Centres de livraison : plus de boutons PDF sur mobile (les fiches agences les remplacent) */
  .popular-used-car .city-block .theme-btn { display: none !important; }

  /* ---------- Véhicules : bulles d'infos recadrées + filtres compacts ---------- */
  /* Bulles (places, bagages, carburant, boîte) : icône et texte parfaitement alignés */
  .inventory-section .car-info li {
    display: -webkit-inline-flex !important; display: inline-flex !important;
    -webkit-align-items: center; align-items: center;
    gap: 6px;
    background: #FCE8E0;
    color: #C24000;
    border: none !important;
    border-radius: 999px !important;
    padding: 7px 13px !important;
    margin: 0 6px 8px 0 !important;
    font-size: 12.5px !important; font-weight: 700;
    line-height: 1 !important;
  }
  .inventory-section .car-info li .icon, .inventory-section .car-info li .fa {
    line-height: 1 !important;
    font-size: 13px !important;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
  }
  /* Filtres : repliés derrière le bouton entonnoir (JS), panneau compact */
  .ed-filter-btn {
    display: -webkit-inline-flex; display: inline-flex;
    -webkit-align-items: center; align-items: center;
    gap: 8px;
    background: #F6F6F4;
    color: #1A1A1A;
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    margin: 4px 16px 12px;
    font-size: 14px; font-weight: 700;
  }
  .ed-filter-btn.ed-on { background: #F45000; color: #FFFFFF; }
  .inventory-section .select-cars-tabs.ed-filters { display: none; }
  .inventory-section .select-cars-tabs.ed-filters.ed-open { display: block; }
  .inventory-section .select-cars-tabs.ed-filters .form-group { margin-bottom: 10px; }
  .inventory-section .select-cars-tabs.ed-filters label {
    font-size: 12.5px; font-weight: 600; color: #6B6B6B; margin-bottom: 4px;
  }

  /* Avantages TT : grille 2 colonnes de cartes blanches à icône orange */
  .ed-adv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ed-adv-card {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 13px 12px;
  }
  .ed-adv-ico {
    display: block;
    width: 40px; height: 40px; line-height: 40px;
    text-align: center;
    background: #FCE8E0; color: #F45000;
    border-radius: 12px; font-size: 17px;
    margin-bottom: 9px;
  }
  .ed-adv-card b { display: block; font-size: 13.5px; font-weight: 700; color: #1A1A1A; line-height: 1.3; margin-bottom: 4px; }
  .ed-adv-card i { display: block; font-style: normal; font-size: 11.5px; color: #6B6B6B; line-height: 1.45; }

  /* Étapes de réservation : lignes numérotées façon app */
  .ed-steps {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 6px 0;
  }
  .ed-step {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #F4F4F2;
  }
  .ed-step:last-child { border-bottom: none; }
  .ed-step-num {
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    width: 38px; height: 38px; line-height: 38px;
    text-align: center;
    background: #F45000; color: #FFFFFF;
    border-radius: 12px;
    font-size: 14px; font-weight: 800;
    margin-right: 12px;
  }
  .ed-step-txt { font-size: 13px; color: #6B6B6B; line-height: 1.4; }
  .ed-step-txt b { color: #1A1A1A; font-weight: 700; }

  /* « Le TT, c'est quoi ? » : carte explicative + lien */
  .ed-tt {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 15px 16px;
    margin-top: 12px;
  }
  .ed-tt b { display: block; font-size: 15.5px; font-weight: 800; color: #1A1A1A; margin-bottom: 6px; }
  .ed-tt p { font-size: 13px; color: #3A3A3A; line-height: 1.55; margin: 0 0 10px; }
  .ed-tt a { display: inline-block; color: #F45000; font-size: 13.5px; font-weight: 700; }

  /* Satisfaction : bandeau sombre 97 % + témoignages défilants */
  .ed-sat {
    background: #1A1A1A;
    border-radius: 18px;
    padding: 18px 16px 14px;
    margin-top: 12px;
  }
  .ed-sat > b { display: block; color: #F45000; font-size: 26px; font-weight: 800; line-height: 1.1; }
  .ed-sat > span { display: block; color: #B4B2A9; font-size: 12.5px; line-height: 1.45; margin: 4px 0 12px; }
  .ed-quotes {
    display: -webkit-flex; display: flex;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .ed-quotes::-webkit-scrollbar { display: none; }
  .ed-quote {
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    width: 240px;
    background: rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px 13px;
  }
  .ed-quote p { color: #FFFFFF; font-size: 12.5px; line-height: 1.5; margin: 0 0 8px; }
  .ed-quote i { color: #B4B2A9; font-size: 11.5px; font-style: normal; font-weight: 600; }
  .ed-sat > em { display: block; color: #6B6B6B; font-size: 10.5px; font-style: normal; margin-top: 6px; }

  /* Carrousel de villes avec photos — réplique du carrousel destinations de l'app */
  .ed-cities {
    display: -webkit-flex; display: flex;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 14px;
    scrollbar-width: none;
  }
  .ed-cities::-webkit-scrollbar { display: none; }
  .ed-city {
    position: relative;
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    width: 150px; height: 168px;
    border-radius: 16px;
    overflow: hidden;
    background: #FBE7DD;
  }
  .ed-city img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .ed-city:after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.8));
  }
  .ed-city span {
    position: absolute; left: 10px; right: 10px; bottom: 10px;
    z-index: 1;
    color: #FFFFFF; font-size: 14px; font-weight: 700; line-height: 1.25;
  }

  /* Champ dates (ouvre le calendrier) */
  .ed-datefield {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 48px;
    padding: 10px 14px;
    border: 1px solid #E6E6E6; border-radius: 12px;
    background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F45000' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 14px center;
    font-size: 15px; color: #1A1A1A;
  }
  .ed-datefield:focus { border-color: #F45000; outline: none; }

  /* Feuille calendrier (bottom sheet façon app) */
  .ed-cal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99999;
    display: -webkit-flex; display: flex;
    -webkit-align-items: flex-end; align-items: flex-end;
  }
  .ed-cal-overlay[hidden] { display: none; }
  .ed-cal-sheet {
    width: 100%;
    max-height: 86vh;
    background: #FFFFFF;
    border-radius: 24px 24px 0 0;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
    display: -webkit-flex; display: flex;
    -webkit-flex-direction: column; flex-direction: column;
  }
  .ed-cal-grip {
    width: 40px; height: 4px;
    background: #E6E6E6; border-radius: 2px;
    margin: 2px auto 10px;
  }
  .ed-cal-title { font-size: 17px; font-weight: 800; color: #1A1A1A; margin: 0 0 2px; }
  .ed-cal-help { font-size: 12.5px; color: #6B6B6B; margin: 0 0 10px; }
  .ed-cal-months { overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-flex: 1; flex: 1; }
  .ed-cal-month p {
    font-size: 14.5px; font-weight: 700; color: #1A1A1A;
    margin: 12px 0 8px; text-transform: capitalize;
  }
  .ed-cal-head, .ed-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  .ed-cal-head i {
    font-style: normal; text-align: center;
    font-size: 11px; color: #6B6B6B; font-weight: 600;
    padding-bottom: 4px;
  }
  .ed-cal-grid b {
    height: 40px; line-height: 40px;
    text-align: center;
    font-size: 13.5px; font-weight: 600; color: #1A1A1A;
    border-radius: 10px;
    cursor: pointer;
  }
  .ed-cal-grid b.off { color: #CFCEC8; pointer-events: none; }
  .ed-cal-grid b.in { background: #FCE8E0; border-radius: 0; color: #C24000; }
  .ed-cal-grid b.sel { background: #F45000; color: #FFFFFF; font-weight: 800; }
  .ed-cal-grid b.sel.a { border-radius: 10px 0 0 10px; }
  .ed-cal-grid b.sel.b { border-radius: 0 10px 10px 0; }
  .ed-cal-grid b.sel.a:only-of-type { border-radius: 10px; }
  .ed-cal-ok { margin-top: 10px; }
  .ed-cal-ok:disabled { opacity: 0.4; }

  /* Sections « services » (autres pages) : fond photo → fond doux, blocs en cartes app */
  .services-section {
    background-image: none !important;
    background-color: #F7F6F3;
    padding: 24px 0;
  }
  .services-block .inner-box {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none !important;
    margin-bottom: 12px;
  }
  .services-block .icon-box {
    background: #F45000;
    border-radius: 14px;
    color: #FFFFFF;
  }
  .services-block h2, .services-block h2 a {
    color: #FFFFFF; font-size: 18px; font-weight: 800;
  }
  .services-block .text { font-size: 13px; line-height: 1.5; }

  /* Bande de compteurs : sombre app, chiffres orange */
  .counter-section {
    background-color: #1A1A1A !important;
    background-image: none !important;
    padding: 26px 0 14px;
  }
  .count-outer, .count-outer .count-text,
  .count-outer span { color: #F45000 !important; font-weight: 800; }
  .counter-title { color: #B4B2A9 !important; font-size: 12.5px; }
  .counter-column .inner-box { background: transparent; border: none; box-shadow: none !important; }

  /* Véhicules populaires : vignettes cartes app */
  .car-block .inner-box {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none !important;
    margin-bottom: 12px;
  }
  .car-block h3, .car-block h3 a,
  .car-block h2, .car-block h2 a {
    font-size: 15px; font-weight: 700; color: #1A1A1A; text-transform: none;
  }

  /* Articles (blog) : cartes propres façon vignettes de l'app */
  .news-block { padding: 0 16px; }
  .news-block .inner-box {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none !important;
    margin-bottom: 12px;
  }
  .news-block .image { position: relative; }
  .news-block .image figure, .news-block figure.blog-list-image { margin: 0; }
  .news-block .image img, .news-block figure.blog-list-image img {
    display: block; width: 100%; height: 180px;
    object-fit: cover;
  }
  .news-block .overlay-link { display: none; }
  .news-block .lower-box { padding: 13px 14px 15px; }
  .news-block .lower-box h3, .news-block .lower-box h3 a,
  .news-block .lower-box h2, .news-block .lower-box h2 a {
    font-size: 15px; font-weight: 700; color: #1A1A1A; line-height: 1.35;
    text-transform: none; margin: 0 0 6px;
  }
  .news-block .lower-box .text { font-size: 12.5px; color: #6B6B6B; line-height: 1.5; }
  .news-block .post-date, .news-block .date {
    background: #FCE8E0; color: #C24000;
    border-radius: 12px; font-weight: 700;
    border: none;
  }

  /* Villes / agences : bande déroulante horizontale (comme « Nos agences » dans l'app) */
  .city-block { width: auto; float: none; padding: 0; }
  .city-block .inner-box {
    width: 128px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 14px;
    padding: 12px 10px;
    text-align: center;
    box-shadow: none !important;
  }
  .city-block .icon-box {
    width: 40px; height: 40px; line-height: 40px;
    margin: 0 auto 7px;
    background: #FCE8E0; color: #F45000;
    border-radius: 12px; font-size: 18px;
  }
  .city-block h3, .city-block h3 a {
    font-size: 12px; font-weight: 700; color: #1A1A1A;
    text-transform: none; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* la rangée qui contient les city-blocks devient un ruban qui défile au doigt */
  .city-block:first-child { margin-left: 0; }
  .cities-row, .city-block { display: inline-block; vertical-align: top; }
  .city-block { margin: 0 8px 8px 0; }

  /* ---------- Article Transit Temporaire (section .ed-article du gabarit) ---------- */
  .ed-article { background: #FFFFFF; padding: 8px 0 24px; }
  .ed-article h2 {
    font-size: 20px; font-weight: 800; color: #1A1A1A;
    line-height: 1.25; margin: 28px 0 10px;
  }
  .ed-article h3 { font-size: 16px; font-weight: 700; color: #1A1A1A; margin: 20px 0 8px; }
  .ed-article p, .ed-article li {
    font-size: 15.5px; line-height: 1.7; color: #2A2A2A;
  }
  .ed-article p { margin: 0 0 13px; }
  .ed-article ul, .ed-article ol { padding-left: 20px; margin: 0 0 14px; }
  .ed-article li { margin-bottom: 6px; }
  .ed-article a { color: #F45000; font-weight: 600; }
  .ed-article strong { color: #1A1A1A; }
  .ed-article table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid #E6E6E6; border-radius: 12px;
    border-collapse: collapse;
    margin: 6px 0 16px;
  }
  .ed-article th, .ed-article td {
    padding: 11px 13px;
    font-size: 13px; line-height: 1.45;
    text-align: left;
    border-bottom: 1px solid #F0F0EE;
    min-width: 110px;
  }
  .ed-article thead th, .ed-article th {
    background: #F7F6F3; font-weight: 700; color: #1A1A1A;
  }

  /* ---------- FAQ (/learn-more, /en-savoir-plus…) ---------- */
  /* NB : ne pas conditionner par une classe de <body> — selon l'URL/langue, le body
     porte parfois la langue (« fr ») au lieu du segment de page. Les classes .faq-*
     et .accordion-* n'existent que sur cette page : ciblage direct sans risque. */
  /* Les catégories de questions : puces qui PASSENT À LA LIGNE (flex-wrap) —
     toutes les catégories sont visibles d'un coup d'œil, AUCUN défilement
     horizontal caché (avant : overflow-x avec scrollbar masquée → rien
     n'indiquait qu'il fallait faire défiler vers la droite). */
  .faq-info-tabs .tab-btns {
    display: -webkit-flex; display: flex;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0 12px;
    margin: 0;
  }
  .faq-info-tabs .tab-btn, .faq-info-tabs .tab-btns .tab-btn {
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    width: auto !important;   /* responsive.min.css impose width:100% (1 puce = 1 ligne) */
    background: #F6F6F4;
    color: #1A1A1A;
    border: none !important;
    border-radius: 999px !important;   /* le gabarit impose ses coins carrés */
    padding: 10px 15px !important;
    margin: 0 !important;
    font-size: 13px !important; font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.2 !important;
  }
  .faq-info-tabs .tab-btn.active-btn {
    background: #F45000;
    color: #FFFFFF;
    font-weight: 700;
  }
  /* La colonne latérale (Blog, Catégories, Étiquettes) : hors sujet sur la page FAQ mobile */
  .faq-section .sidebar-side { display: none; }
  .faq-column { width: 100%; }
  .faq-section h2 { font-size: 19px; font-weight: 800; margin-top: 22px; }
  /* Accordéon : tuiles blanches EXACTEMENT comme la FAQ de l'app —
     carte arrondie, question en gras, chevron à droite (orange quand ouvert). */
  .accordion-box { padding-left: 0; }
  .accordion-box .accordion.block {
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #E6E6E6 !important;
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: none !important;
  }
  .accordion-box .acc-btn, .accordion-box .accordion.block .acc-btn {
    position: relative;
    font-size: 14.5px !important; font-weight: 700 !important; color: #1A1A1A;
    padding: 15px 44px 15px 16px !important;   /* le gabarit impose 28px/75px (place de l'ancien +) */
    line-height: 1.4 !important;
    cursor: pointer;
  }
  .accordion-box .acc-btn .icon-outer { display: none; }  /* le +/− à gauche : remplacé par le chevron */
  .accordion-box .acc-btn:after {
    content: ""; position: absolute; right: 19px; top: 50%;
    width: 9px; height: 9px; margin-top: -7px;
    border-right: 2px solid #6B6B6B; border-bottom: 2px solid #6B6B6B;
    transform: rotate(45deg);
    transition: transform 0.2s, border-color 0.2s;
  }
  .accordion-box .acc-btn.active { color: #C24000; }
  .accordion-box .acc-btn.active:after {
    transform: rotate(225deg);
    margin-top: -2px;
    border-color: #F45000;
  }
  .accordion-box .acc-content .content,
  .accordion-box .accordion.block .acc-content .content { padding: 0 16px 15px !important; }
  .accordion-box .acc-content .text,
  .accordion-box .acc-content .text p, .accordion-box .acc-content p {
    font-size: 13px !important; line-height: 1.6 !important; color: #3A3A3A;
  }
}

/* ============ PAGES : véhicules + centres de livraison ============ */
/* ============================================================================
   EURODRIVE MOBILE — pages VÉHICULES (/vehicules) & CENTRES DE LIVRAISON
   (/centres-de-livraison). Complément de eurodrive-mobile.min.css : header,
   boutons, formulaires, footer, page-title déjà traités dans la feuille de base.
   AUCUN sélecteur body.<page> (le body porte parfois la langue fr/en/es/pt) :
   ciblage par les sections propres à chaque page (.inventory-section /
   .popular-cars-section-two + .popular-used-car), vérifiées dans le HTML rendu.
   ============================================================================ */
@media only screen and (max-width: 767px) {

  /* ---------- Commun aux 2 pages : bandeau titre + fil d'Ariane ---------- */
  /* Le <section class="page-title"> porte un padding inline 32px → on réaligne
     sur la base app (22/20). !important justifié : style inline. */
  .page-title { padding-top: 22px !important; padding-bottom: 20px !important; }

  /* Fil d'Ariane : ici il vit dans .page-info (pas dans .page-title) */
  .page-info { background: #FFFFFF; padding: 10px 0 0; }
  .page-info .bread-crumb { margin: 0; padding: 0; }
  .page-info .bread-crumb li {
    display: inline-block;
    font-size: 12.5px;
    color: #6B6B6B;
    text-transform: none;
  }
  .page-info .bread-crumb li a { color: #6B6B6B; font-weight: 500; }
  .page-info .bread-crumb li a:hover { color: #F45000; }
  .page-info .bread-crumb li.current { color: #1A1A1A; font-weight: 600; }

  /* Intro sous les titres de section des 2 pages */
  .inventory-section .sec-title, .popular-cars-section-two .sec-title { margin-bottom: 14px; }
  .inventory-section .sec-title br, .popular-cars-section-two .sec-title br { display: none; }
  .inventory-section .sec-title p, .popular-cars-section-two .sec-title p {
    font-size: 13.5px; color: #6B6B6B; line-height: 1.55; margin: 6px 0 0;
  }

  /* ==========================================================================
     1. PAGE VÉHICULES — .inventory-section (catalogue en cartes app)
     ========================================================================== */
  .inventory-section { background-color: #F7F6F3; background-image: none; }

  /* --- Panneau de filtres : une carte blanche façon app --- */
  .inventory-section .select-cars-tabs {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: none !important;
  }
  .inventory-section .select-cars-tabs .prod-tabs > br { display: none; }
  .cars-form .form-group { margin-bottom: 12px; }
  .cars-form .form-group label { display: block; margin-bottom: 5px; }
  .cars-form select.custom-select-box {
    -webkit-appearance: none; appearance: none;
    width: 100%;
    padding-right: 38px;
    background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  }
  /* Case « Nouveaux modèles seulement » : coche orange, libellé lisible, zone tactile */
  .cars-form .form-group input[type="checkbox"] {
    width: 20px; height: 20px;
    accent-color: #F45000;
    vertical-align: middle;
    margin: 0 8px 0 0;
  }
  .cars-form .form-group input[type="checkbox"] + label {
    display: inline;
    font-size: 13.5px; font-weight: 500; color: #1A1A1A;
    margin: 0; vertical-align: middle;
  }
  /* Bouton « Rafraîchir » : plein orange pleine largeur (règles couleur en base) */
  .cars-form .theme-btn {
    display: block; width: 100%;
    min-height: 48px;
    text-align: center;
  }
  /* « Effacer les filtres » : bouton secondaire façon chip de l'app */
  .cars-form .reset-all {
    display: block; width: 100%;
    min-height: 46px;
    background: #F6F6F4;
    border: none;
    border-radius: 12px;
    font-size: 13.5px; font-weight: 600; color: #6B6B6B;
    text-align: center;
  }
  .cars-form .reset-all:hover, .cars-form .reset-all:active { color: #C24000; }
  .cars-form .reset-all .fa { margin-right: 6px; }

  /* --- Cartes véhicules : photo, nom, pastilles d'infos, bouton PDF --- */
  .inventory-section .car-block { margin-bottom: 0; }
  /* Le H3 est AVANT la photo dans le HTML → réordonné en flex : photo, nom, infos */
  .inventory-section .car-block .inner-box {
    display: -webkit-flex; display: flex;
    -webkit-flex-direction: column; flex-direction: column;
    background: #FFFFFF;              /* bordure/radius 16/ombre : déjà en base */
    overflow: visible !important;    /* le gabarit met overflow:hidden → coupait les puces du bas */
  }
  .inventory-section .car-block .inner-box .image { -webkit-order: 1; order: 1; }
  .inventory-section .car-block .inner-box h3 { -webkit-order: 2; order: 2; }
  .inventory-section .car-block .inner-box .lower-box { -webkit-order: 3; order: 3; }
  .inventory-section .car-block .image img {
    display: block;
    width: 100%; height: auto;
    object-fit: cover;
  }
  .inventory-section .car-block .inner-box h3 {
    font-size: 15px; font-weight: 700; color: #1A1A1A;
    text-transform: none; letter-spacing: 0;
    line-height: 1.35;
    margin: 0; padding: 12px 14px 2px;
  }
  .inventory-section .car-block .lower-box { padding: 8px 14px 14px; }
  /* Infos (passagers, bagages, carburant, boîte) : pastilles de l'app */
  .inventory-section .car-info {
    display: -webkit-flex; display: flex;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
    gap: 6px;
    margin: 0; padding: 0;
    list-style: none;
  }
  .inventory-section .car-info li {
    display: -webkit-inline-flex; display: inline-flex;
    -webkit-align-items: center; align-items: center;
    gap: 5px;
    float: none; width: auto;
    margin: 0; padding: 6px 11px;
    background: #FCE8E0;
    border: none; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; color: #C24000;
    /* le gabarit impose une hauteur/line-height qui écrasait le texte (« Automatic »
       à moitié coupé) → hauteur libre, texte entier */
    height: auto !important; min-height: 0 !important;
    line-height: 1.4 !important;
    white-space: nowrap;
  }
  .inventory-section .car-info li .icon,
  .inventory-section .car-info li .fa { color: #C24000; font-size: 12px; }
  /* Catalogue : carte cliquable (le bouton caractéristiques est bien visible) */
  .inventory-section .car-block.ed-cat-card .inner-box { cursor: pointer; }
  .inventory-section .car-block.ed-cat-card .ed-vdetail { padding: 0 14px 14px; }
  .inventory-section .car-block.ed-cat-card .ed-vdetail-btn { width: 100%; }
  /* Dernière puce = lien PDF → bouton orange pleine largeur, pas une pastille */
  .inventory-section .car-info li:last-child {
    -webkit-flex: 1 1 100%; flex: 1 1 100%;
    background: transparent;
    padding: 0; margin-top: 6px;
    border-radius: 0;
  }
  .inventory-section .car-info li:last-child > .icon { display: none; }
  .inventory-section .car-info li:last-child .theme-btn {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    width: 100%;
    min-height: 46px;
    font-size: 14px;
  }

  /* --- Pagination : cases 44px, page active orange --- */
  .styled-pagination { padding: 4px 0 8px; }
  .styled-pagination ul { display: block; }
  .styled-pagination li { display: inline-block; float: none; margin: 0 3px 6px; }
  .styled-pagination li a {
    display: block;
    min-width: 44px; height: 44px; line-height: 42px;
    padding: 0 8px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    color: #1A1A1A; font-size: 14px; font-weight: 700;
    box-shadow: none;
  }
  .styled-pagination li a:hover { color: #F45000; border-color: #F45000; background: #FFFFFF; }
  .styled-pagination li a.active,
  .styled-pagination li a.active:hover {
    background: #F45000; border-color: #F45000; color: #FFFFFF;
  }

  /* ==========================================================================
     2. PAGE CENTRES DE LIVRAISON — .popular-cars-section-two / .popular-used-car
     (Attention : la base transforme .city-block en ruban 128px pour l'accueil →
     tout est re-déclaré ici avec le scope .popular-used-car, plus spécifique.)
     ========================================================================== */
  .popular-cars-section-two { background-color: #F7F6F3; background-image: none; }

  /* --- Filtres type / ville : selects app pleine largeur --- */
  .popular-used-car .prod-tabs select {
    -webkit-appearance: none; appearance: none;
    display: block; width: 100%;
    margin-bottom: 6px;
    padding-right: 38px;
    background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  }
  /* --- Onglets marques (Toutes / EURODRIVE) : chips, actif orange --- */
  .popular-used-car .tab-btns {
    display: -webkit-flex; display: flex;
    gap: 8px;
    margin: 8px 0 4px; padding: 0;
  }
  .popular-used-car .tab-btns .tab-btn {
    -webkit-flex: 1 1 auto; flex: 1 1 auto;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    float: none;
    min-height: 46px;
    margin: 0; padding: 10px 14px;
    background: #F6F6F4;
    border: none; border-radius: 12px;
    font-size: 13.5px; font-weight: 700; color: #1A1A1A;
    text-transform: none; letter-spacing: 0;
    cursor: pointer;
    box-shadow: none;
  }
  .popular-used-car .tab-btns .tab-btn .text { color: inherit; font-size: inherit; text-transform: none; }
  .popular-used-car .tab-btns .tab-btn.active-btn { background: #F45000; color: #FFFFFF; }

  /* --- Cartes des centres : logo, type, nom, bouton PDF --- */
  .popular-used-car .city-block {
    display: block; float: none;
    width: 100%;
    margin: 0 0 12px;
    padding: 0 15px;                    /* ré-aligne la colonne bootstrap (row -15px) */
  }
  .popular-used-car .city-block .inner-box {
    display: block;
    width: auto;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 14px;
    text-align: left;
    box-shadow: none !important;
  }
  /* Ligne logo + textes : flex ; marges inline (margin-bottom:10px) neutralisées */
  .popular-used-car .city-block .inner-box > .row {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    margin: 0 0 12px !important;
  }
  .popular-used-car .city-block .inner-box .col-md-3 {
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    width: auto; float: none;
    padding: 0; margin-right: 12px;
  }
  .popular-used-car .city-block .inner-box .col-md-9 {
    -webkit-flex: 1; flex: 1;
    min-width: 0; width: auto; float: none;
    padding: 0;
  }
  /* Logo marque : compact (width=64 en attribut, marges inline → !important) */
  .popular-used-car .city-block .inner-box img {
    width: 44px; height: auto;
    margin: 0 !important;
  }
  /* Type de centre (« Aéroport en France »… ) : inline color:#888 + margin → !important */
  .popular-used-car .city-block .inner-box p {
    font-size: 13px;
    color: #6B6B6B !important;     /* inline color:#888 */
    line-height: 1.4;
    margin: 0 0 3px !important;
  }
  /* Nom du centre : inline margin-top:-10px → !important ; on annule aussi
     l'ellipsis 12px du ruban accueil défini dans la base */
  .popular-used-car .city-block h3,
  .popular-used-car .city-block h3 a {
    font-size: 15.5px; font-weight: 700; color: #1A1A1A;
    line-height: 1.3;
    text-transform: none;
    white-space: normal; overflow: visible; text-overflow: clip;
    margin: 0 !important;
  }
  /* Bouton « Afficher le PDF » : plein orange pleine largeur (couleurs en base) */
  .popular-used-car .city-block .theme-btn {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    width: 100%;
    min-height: 46px;
    font-size: 14px;
  }
}

/* ============ PAGES : article, contact, TT, 404 ============ */
/* ============================================================================
   EURODRIVE MOBILE — COMPLÉMENT « pages de contenu »
   Blog (liste + article), Contact, Transit temporaire, page 404.
   À concaténer APRÈS eurodrive-mobile.min.css (ne répète rien de la base :
   header, boutons, footer, formulaires globaux, FAQ déjà traités).
   Charte app : orange #F45000 / #C24000 · sombre #1A1A1A (radius 18, texte
   2nd #B4B2A9) · fond doux #F7F6F3 · cartes blanches #E6E6E6 radius 14-16 sans
   ombre · texte #1A1A1A / #6B6B6B · pastilles #FCE8E0 / #C24000 · chips #F6F6F4.
   NB : page_blog.html a rendu la page 404 (body.erreur-404) — la liste du blog
   (.news-block) est déjà couverte par la feuille de base ; ici on stylise la 404.
   ============================================================================ */
@media only screen and (max-width: 767px) {

  /* ---------- COMMUN aux pages de contenu : bandeau titre + fil d'Ariane ---------- */
  /* Le <section class="page-title"> porte un style inline
     padding-top/bottom:32px → !important justifié (inline uniquement). */
  .page-title { padding-top: 22px !important; padding-bottom: 20px !important; }

  /* Fil d'Ariane : ici il vit dans .page-info (pas dans .page-title) */
  .page-info { padding: 10px 0 2px; background: transparent; }
  .page-info .bread-crumb { margin: 0; padding: 0; }
  .page-info .bread-crumb li {
    display: inline-block;
    font-size: 12px; color: #6B6B6B;
    padding-right: 4px;
  }
  .page-info .bread-crumb li a { color: #6B6B6B; }
  .page-info .bread-crumb li a:hover { color: #C24000; }
  .page-info .bread-crumb li.current { color: #C24000; font-weight: 600; }

  /* ==========================================================================
     1. ARTICLE DE BLOG (/article/…) — lecture confortable façon app
     ========================================================================== */
  .sidebar-page-container {
    background: #F7F6F3;
    padding-top: 18px;
    padding-bottom: 10px;
  }
  .content-side { margin-bottom: 10px; }

  /* L'article devient une carte blanche : photo pleine largeur, contenu aéré */
  .blog-single .news-block-two .inner-box {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none !important;   /* le gabarit pose une ombre !important */
  }
  .news-block-two .image { position: relative; }
  .news-block-two .image img {
    display: block;
    width: 100%; height: auto;
    object-fit: cover;
  }
  .news-block-two .lower-box { padding: 16px; position: relative; }
  /* Le gabarit cale la date en absolu et décale .content : on remet à plat */
  .news-block-two .lower-box .content { padding-left: 0; margin-left: 0; }
  .news-block-two .lower-box .post-date {
    position: static;
    display: inline-block;
    width: auto; height: auto;
    background: #FCE8E0; color: #C24000;
    border: none;
    border-radius: 12px;
    padding: 7px 14px;
    font-size: 12.5px; font-weight: 700; line-height: 1.25;
    text-align: center;
    margin: 0 0 10px;
  }
  .news-block-two .lower-box .post-date br { display: none; }

  /* Métadonnées (auteur, étiquettes) : discrètes, petites, icône orange */
  .news-block-two .post-meta { margin: 0 0 10px; padding: 0; }
  .news-block-two .post-meta li {
    display: inline-block;
    font-size: 12.5px; color: #6B6B6B;
    margin: 0 12px 4px 0;
    padding: 0;
  }
  .news-block-two .post-meta li .icon { color: #F45000; margin-right: 5px; }
  .news-block-two .post-meta a { color: #C24000; }

  /* Titre net, jamais uppercase */
  .news-block-two h3 {
    font-size: 20px; font-weight: 800; color: #1A1A1A;
    line-height: 1.3; text-transform: none;
    margin: 4px 0 12px;
  }

  /* Corps de l'article : 16px / 1.7 pour la lecture longue */
  .blog-single .text,
  .blog-single .text p {
    font-size: 16px; line-height: 1.7; color: #2A2A2A;
  }
  .blog-single .text p { margin-bottom: 14px; }

  /* Contenu CMS injecté dans l'article (#cms.cms_blocs) : même confort,
     images arrondies 16px */
  .cms_blocs p, .cms_blocs li { font-size: 16px; line-height: 1.7; color: #2A2A2A; }
  .cms_blocs h2 { font-size: 19px; font-weight: 800; margin: 20px 0 10px; }
  .cms_blocs h3 { font-size: 17px; font-weight: 700; margin: 18px 0 8px; }
  .cms_blocs img {
    display: block;
    max-width: 100%; width: 100%; height: auto;
    object-fit: cover;
    border-radius: 16px;
    margin: 14px 0;
  }

  /* --- Barre latérale du blog (passe sous l'article) : carte app --- */
  .sidebar-side { margin-top: 6px; }
  .sidebar-side .sidebar {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 16px;
    box-shadow: none !important;
  }
  .sidebar-widget { margin-bottom: 20px; }
  .sidebar-widget:last-child { margin-bottom: 4px; }
  .sidebar-title h2 {
    font-size: 16px; font-weight: 700; color: #1A1A1A;
    text-transform: none; letter-spacing: 0;
    margin: 0 0 10px;
  }

  /* Recherche : champ 48px + bouton orange carré arrondi intégré */
  .sidebar .search-box .form-group { position: relative; margin-bottom: 0; }
  .sidebar .search-box input[type="search"] {
    width: 100%;
    padding-right: 56px;
    background: #FFFFFF;
  }
  .sidebar .search-box button {
    position: absolute; top: 2px; right: 2px;
    width: 44px; height: 44px;
    padding: 0; margin: 0;
    border-radius: 11px !important;  /* prime sur le radius 14 !important global */
    line-height: 44px;
  }
  .sidebar .search-box button .icon { color: #FFFFFF; font-size: 15px; }

  /* Catégories : grandes lignes tapables (>= 44px), séparées finement */
  .sidebar .blog-cat { margin: 0; padding: 0; }
  .sidebar .blog-cat li {
    list-style: none;
    border-bottom: 1px solid #F4F4F2;
    padding: 0; margin: 0;
  }
  .sidebar .blog-cat li:last-child { border-bottom: none; }
  .sidebar .blog-cat li a {
    display: block;
    min-height: 44px;
    padding: 13px 4px;
    font-size: 14px; font-weight: 600; color: #3A3A3A;
    background: transparent;
  }
  .sidebar .blog-cat li a:hover { color: #C24000; }

  /* Étiquettes : chips app (fond #F6F6F4, radius 12, tapables) */
  .sidebar .popular-tags a {
    display: inline-block;
    background: #F6F6F4;
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 6px 8px 0;
    font-size: 13px; font-weight: 600; color: #3A3A3A;
  }
  .sidebar .popular-tags a:hover { background: #FCE8E0; color: #C24000; }

  /* ==========================================================================
     2. CONTACT (/contact) — formulaire façon app + newsletter en bandeau sombre
     ========================================================================== */
  section.contact-form-section {
    background: #F7F6F3;
    padding: 24px 0 18px;
  }
  .contact-form-section .sec-title { margin-bottom: 14px; }
  .contact-form-section .sec-title .text {
    font-size: 13.5px; line-height: 1.55; color: #6B6B6B;
    margin-top: 6px;
  }
  /* Le formulaire devient une carte blanche */
  .contact-form {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 18px 16px 16px;
  }
  .contact-form .form-group { margin-bottom: 12px; }
  .contact-form input, .contact-form textarea { width: 100%; }
  .contact-form textarea { min-height: 140px; }
  .contact-form input::placeholder,
  .contact-form textarea::placeholder { color: #8B8980; opacity: 1; }
  /* Aide sous le message : style inline color:#aaa → !important justifié */
  .contact-form .form-group p {
    color: #6B6B6B !important;
    font-size: 12px !important;
    line-height: 1.5;
    margin-top: 6px !important;
  }
  /* Bouton Envoyer : orange pleine largeur, hauteur app */
  .contact-form .theme-btn {
    display: block;
    width: 100%;
    min-height: 50px;
    margin-top: 2px;
  }
  .contact-form .btn-column .form-group { margin-bottom: 0; }

  /* --- Newsletter : bandeau sombre arrondi 18px (signature app) --- */
  section.subscribe-section {
    background-color: #1A1A1A;
    background-image: none;
    border-radius: 18px;
    margin: 0 16px 26px;
    padding: 24px 0 18px;
  }
  .subscribe-section .sec-title { margin-bottom: 4px; }
  .subscribe-section .sec-title h2 {
    color: #FFFFFF; font-size: 19px; font-weight: 800;
  }
  .subscribe-section > .auto-container > .text {
    color: #B4B2A9; font-size: 13px; line-height: 1.5;
    text-align: center;
    margin: 0 0 14px;
  }
  .subscribe-form .form-group { margin-bottom: 10px; }
  .subscribe-form input[type="email"] {
    width: 100%;
    background: #FFFFFF;
    border-color: #2A2A2A !important;
  }
  .subscribe-form input[type="email"]:focus { border-color: #F45000 !important; }
  .subscribe-form .theme-btn {
    display: block;
    width: 100%;
    min-height: 50px;
  }

  /* ==========================================================================
     3. TRANSIT TEMPORAIRE (/transit-temporaire) — sections en cartes
     ========================================================================== */
  /* Intro « Fonctionnement du TT France » : visuel arrondi + carte de texte */
  section.services-section-two {
    background: #F7F6F3;
    padding: 24px 0;
  }
  .services-section-two .image-column .image { margin: 0 0 14px; }
  .services-section-two .image-column .image img {
    display: block;
    width: 100%; height: auto;   /* neutralise l'attribut height="400" */
    object-fit: cover;
    border-radius: 16px;
  }
  .services-section-two .inner-column {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 18px 16px;
  }
  .services-section-two .sec-title { margin-bottom: 10px; }
  .services-section-two .inner-column .text {
    font-size: 14.5px; line-height: 1.7; color: #3A3A3A;
    margin-bottom: 14px;
  }
  /* Listes d'avantages : rangées chips avec coche orange */
  .list-style-two { margin: 0; padding: 0; }
  .list-style-two li {
    list-style: none;
    position: relative;
    background: #F6F6F4;
    border-radius: 12px;
    padding: 12px 12px 12px 38px;
    margin: 0 0 8px;
    font-size: 13.5px; font-weight: 600; color: #1A1A1A;
    line-height: 1.4;
  }
  .list-style-two li:before {
    content: "";
    position: absolute; left: 14px; top: 50%;
    width: 11px; height: 6px;
    margin-top: -5px;
    border-left: 2px solid #F45000;
    border-bottom: 2px solid #F45000;
    transform: rotate(-45deg);
  }

  /* « Comment ça marche ? » : bandeau sombre arrondi, tuiles blanches app */
  section.services-section-three {
    background-color: #1A1A1A;
    background-image: none;
    border-radius: 18px;
    margin: 0 16px 24px;
    padding: 24px 0 16px;
  }
  .services-section-three .sec-title { margin-bottom: 16px; }
  .services-section-three .sec-title h2 { color: #FFFFFF; }
  .services-block-five { margin-bottom: 12px; }
  .services-block-five .inner-box {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none !important;
  }
  .services-block-five .content-box { padding: 18px 16px; position: static; }
  /* L'overlay photo au survol (desktop) n'a pas de sens au doigt : masqué */
  .services-block-five .overlay-box { display: none; }
  .services-block-five .icon-box {
    width: 46px; height: 46px; line-height: 46px;
    text-align: center;
    background: #FCE8E0;
    border-radius: 14px;
    margin: 0 0 12px;
  }
  .services-block-five .icon-box .icon {
    color: #C24000; font-size: 20px; line-height: 46px;
  }
  .services-block-five h3 { margin: 0 0 8px; }
  .services-block-five h3 a {
    font-size: 16px; font-weight: 700; color: #1A1A1A;
    text-transform: none; line-height: 1.35;
  }
  .services-block-five h3 br { display: none; }  /* césures pensées pour desktop */
  .services-block-five .content-box .text {
    font-size: 13px; line-height: 1.6; color: #6B6B6B;
  }

  /* Marques proposées : simple, centré, logo contenu */
  section.brands-section {
    background: #FFFFFF;
    padding: 22px 0 26px;
  }
  .brands-section .inner-section { text-align: center; }
  .brands-section .sponsor-block {
    display: inline-block;
    float: none;
    width: auto;
    padding: 0;
  }
  .brands-section .sponsor-block .image {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 14px;
    padding: 14px 18px;
  }
  .brands-section .sponsor-block .image img { max-width: 200px; }

  /* ==========================================================================
     4. PAGE 404 (rendu obtenu pour /blog-…) — carte centrée, boutons app
     (la LISTE du blog .news-block est déjà stylée dans la feuille de base)
     ========================================================================== */
  section.error-section {
    background: #F7F6F3;
    padding: 32px 0 36px;
  }
  .error-section .inner-section {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 28px 18px 20px;
    text-align: center;
  }
  .error-section h1 {
    font-size: 56px; font-weight: 800; color: #F45000;
    line-height: 1; margin: 0 0 10px;
  }
  .error-section h2 {
    font-size: 16px; font-weight: 700; color: #1A1A1A;
    line-height: 1.45; text-transform: none;
  }
  .error-section .text {
    font-size: 13.5px; color: #6B6B6B;
    margin: 6px 0 4px;
  }
  .error-section .text-right, .error-section .text-left { text-align: center; }
  .error-section .theme-btn {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 10px 0 0;
  }
}

/* ============ TUNNEL : étape 1 (livraison & restitution) ============ */
/* ============================================================================
   EURODRIVE MOBILE — TUNNEL DE RÉSERVATION · Étape 1
   /reservation/livraison-et-restitution (booking/delivery-and-return)
   Agences (selects) + dates (datepicker) + bouton « Choisir mon véhicule ».
   À charger APRÈS eurodrive-mobile.min.css : ne répète pas la base (inputs 48px,
   boutons orange, bandeau sombre… déjà couverts) — n'ajoute que le spécifique.
   Tokens app : #F45000 / #C24000 / #1A1A1A / #6B6B6B / #E6E6E6 / #F7F6F3 /
   #FCE8E0 / #F6F6F4 / #B4B2A9 — design 100% plat, aucune ombre.
   ============================================================================ */
@media only screen and (max-width: 767px) {

  /* ---------- 1. Bandeau titre : « Réservation » devient un sur-titre discret ----------
     (:has = amélioration progressive ; sans support, le h2 reste blanc 21px : OK) */
  .page-title h2:has(+ h1) {
    font-size: 12.5px;
    font-weight: 600;
    color: #B4B2A9;
    margin: 0 0 2px;
    line-height: 1.3;
  }

  /* ---------- 2. Fil d'Ariane du tunnel : pastilles façon app ---------- */
  .page-info {
    background: #F7F6F3;
    border: none;
    padding: 12px 0 4px;
  }
  .page-info .bread-crumb {
    margin: 0;
    padding: 0 0 8px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-info .bread-crumb::-webkit-scrollbar { display: none; }
  .page-info .bread-crumb li {
    display: inline-block;
    float: none;
    margin: 0 6px 0 0;
    padding: 6px 13px;
    background: #FCE8E0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #C24000;
    line-height: 1.3;
  }
  /* séparateurs (/, », …) du gabarit : supprimés, les pastilles suffisent */
  .page-info .bread-crumb li:before,
  .page-info .bread-crumb li:after { display: none; content: none; }
  .page-info .bread-crumb li a { color: #C24000; }
  /* étape courante : pastille pleine orange */
  .page-info .bread-crumb li.current { background: #F45000; color: #FFFFFF; }

  /* ---------- 3. Section réservation : fond doux + carte blanche ---------- */
  .booking-section {
    background-color: #F7F6F3;
    background-image: none;
    padding: 18px 0 30px;
  }
  /* !important : combat le style INLINE margin-bottom:50px posé sur .sec-title */
  .booking-section .sec-title { margin-bottom: 12px !important; }
  .booking-section .sec-title h1 { font-size: 21px; font-weight: 800; }

  .services-form {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }
  .services-form .form-box {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 16px 16px 18px;
    box-shadow: none;
  }
  /* colonnes Bootstrap → pile verticale pleine largeur, gouttières internes à zéro */
  .services-form .form-box .row { margin-left: 0; margin-right: 0; }
  .services-form .form-group {
    position: relative;
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 12px;
  }
  .services-form .form-group:empty { display: none; margin: 0; }
  .services-form label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #6B6B6B;
    text-transform: none;
    letter-spacing: 0;
  }

  /* ---------- 4. Selects d'agences (natifs) : chevron custom, texte tronqué proprement
     (hauteur 48px / radius 12 / bordure #E6E6E6 / focus orange : déjà dans la base) */
  .services-form select.custom-select-box {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    padding-right: 42px;
    background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .services-form select.custom-select-box::-ms-expand { display: none; }

  /* ---------- 5. Champs de dates : icône calendrier orange dans le champ
     (comme le champ dates de l'accueil app) — l'horloge du gabarit disparaît */
  .services-form .clock-icon { display: none; }
  .services-form input.date-picker {
    display: block;
    width: 100%;
    padding-right: 44px;
    background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F45000' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 14px center;
    cursor: pointer;
  }

  /* ---------- 6. Bouton continuer : orange plein, pleine largeur, bien tapable
     (couleurs/radius 14/hover #C24000 : déjà dans la base .theme-btn) */
  .services-form .theme-btn.btn-style-one,
  .services-form button[type="submit"] {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 14px 22px;
    font-size: 16px;
  }

  /* ============================================================================
     7. CALENDRIER jQuery UI (.ui-datepicker) — réplique du calendrier de l'app
     ============================================================================ */
  /* z-index : jQuery UI pose un z-index INLINE calculé depuis l'input (999 → ~1000),
     d'où le bug « le calendrier passe sous le menu déroulant des agences ».
     !important indispensable contre ce style inline. */
  .ui-datepicker {
    z-index: 99999 !important;
    width: calc(100vw - 32px);
    max-width: 344px;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    color: #1A1A1A;
  }

  /* En-tête : mois en gras, sans texture ni bordure du thème d'origine */
  .ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 0 0 8px;
    background: transparent;
    border: none;
    border-radius: 0;
    font-weight: 700;
  }
  .ui-datepicker .ui-datepicker-title {
    margin: 0 44px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #1A1A1A;
    text-transform: capitalize;
  }
  /* selects mois/année éventuels de l'en-tête : compacts
     (sinon la règle 48px de la base les rend énormes) */
  .ui-datepicker .ui-datepicker-title select {
    display: inline-block;
    width: auto;
    height: 36px;
    margin: 2px 2px 0;
    padding: 4px 8px;
    font-size: 13.5px;
    font-weight: 700;
  }
  /* Flèches mois précédent/suivant : tuiles chip 40px, chevrons CSS (le sprite
     .ui-icon d'origine est neutralisé) */
  .ui-datepicker .ui-datepicker-prev,
  .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 0;
    width: 40px;
    height: 40px;
    background: #F6F6F4;
    border: none;
    border-radius: 12px;
    cursor: pointer;
  }
  .ui-datepicker .ui-datepicker-prev { left: 0; }
  .ui-datepicker .ui-datepicker-next { right: 0; }
  .ui-datepicker .ui-datepicker-prev-hover { left: 0; top: 0; background: #FCE8E0; border: none; }
  .ui-datepicker .ui-datepicker-next-hover { right: 0; top: 0; background: #FCE8E0; border: none; }
  .ui-datepicker .ui-datepicker-prev span,
  .ui-datepicker .ui-datepicker-next span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    margin: -5px 0 0 -3px;
    background: none;
    background-image: none;
    text-indent: -9999px;
    overflow: hidden;
    border-right: 2px solid #1A1A1A;
    border-bottom: 2px solid #1A1A1A;
    transform: rotate(135deg); /* chevron ← */
  }
  .ui-datepicker .ui-datepicker-next span {
    margin-left: -6px;
    transform: rotate(-45deg); /* chevron → */
  }

  /* Grille : neutralise la règle mobile globale « table { display:block } » */
  .ui-datepicker table {
    display: table;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }
  .ui-datepicker th {
    padding: 4px 0 6px;
    background: transparent;
    border: none;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #6B6B6B;
    text-transform: capitalize;
  }
  .ui-datepicker td {
    padding: 2px 1px;
    background: transparent;
    border: none;
  }
  /* Cases : 40px, radius 10, à plat (les jours ne prennent PAS l'orange des liens) */
  .ui-datepicker td a,
  .ui-datepicker td span {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: #1A1A1A;
    background: #FFFFFF;
    border: none;
    border-radius: 10px;
    text-decoration: none;
  }
  /* Aujourd'hui : chip gris doux */
  .ui-datepicker td.ui-datepicker-today a,
  .ui-datepicker td .ui-state-highlight { background: #F6F6F4; color: #1A1A1A; }
  /* Survol / focus : orange pâle */
  .ui-datepicker td a:hover,
  .ui-datepicker td a.ui-state-hover,
  .ui-datepicker td .ui-state-focus { background: #FCE8E0; color: #C24000; }
  /* Jour sélectionné : plein orange */
  .ui-datepicker td a.ui-state-active,
  .ui-datepicker td .ui-state-active { background: #F45000; color: #FFFFFF; font-weight: 800; }
  /* Jours non sélectionnables (délai de livraison 15 j) et hors mois : gris clair, à plat */
  .ui-datepicker td.ui-datepicker-unselectable,
  .ui-datepicker td.ui-state-disabled { opacity: 1; }
  .ui-datepicker td.ui-datepicker-unselectable span,
  .ui-datepicker td.ui-state-disabled span,
  .ui-datepicker td.ui-datepicker-other-month a,
  .ui-datepicker td.ui-datepicker-other-month span {
    background: transparent;
    color: #CFCEC8;
    font-weight: 500;
  }

  /* Barre de boutons éventuelle (Aujourd'hui / Fermer) */
  .ui-datepicker .ui-datepicker-buttonpane {
    margin: 8px 0 0;
    padding: 10px 0 0;
    border: none;
    border-top: 1px solid #F4F4F2;
    background: transparent;
  }
  .ui-datepicker .ui-datepicker-buttonpane button {
    height: 44px;
    margin: 0 4px 0 0;
    padding: 0 18px;
    background: #F6F6F4;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
    cursor: pointer;
    opacity: 1;
  }
  .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
    background: #F45000;
    color: #FFFFFF;
  }

  /* ============================================================================
     8. FALLBACK datepicker XDSoft (jquery.datetimepicker.js + son CSS sont AUSSI
     chargés sur la page) : même habillage, même correctif z-index — si c'est lui
     qui équipe .date-picker, le calendrier reste conforme. Les !important ci-
     dessous répondent aux !important du CSS d'origine (hover #ff8000!important…). */
  .xdsoft_datetimepicker {
    z-index: 99999 !important;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    box-shadow: none;
    color: #1A1A1A;
    font-family: inherit;
  }
  .xdsoft_datetimepicker table {
    display: table;
    width: 100%;
    overflow: visible;
    border-radius: 0;
  }
  .xdsoft_datetimepicker .xdsoft_label {
    background: #FFFFFF;
    font-size: 14.5px;
    font-weight: 700;
    color: #1A1A1A;
  }
  .xdsoft_datetimepicker .xdsoft_calendar th {
    height: 26px;
    background: #FFFFFF;
    border: none;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #6B6B6B;
  }
  .xdsoft_datetimepicker .xdsoft_calendar td {
    height: 40px;
    background: #FFFFFF;
    border: none;
    border-radius: 10px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: #1A1A1A;
  }
  .xdsoft_datetimepicker .xdsoft_calendar td > div { padding: 0; line-height: 40px; }
  .xdsoft_datetimepicker .xdsoft_calendar td:hover {
    background: #FCE8E0 !important;
    color: #C24000 !important;
  }
  .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
  .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current {
    background: #F45000 !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    font-weight: 800;
  }
  .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: #C24000; }
  .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
  .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month {
    background: #FFFFFF !important;
    color: #CFCEC8 !important;
    opacity: 1;
  }

  /* ============================================================================
     9. MENU DÉROULANT DES AGENCES (jQuery UI selectmenu sur .custom-select-box) :
     si le gabarit remplace les selects natifs par ce widget (jquery-ui.min.js est
     chargé et c'est lui qui recouvrait le calendrier), il prend le même habillage.
     Si les selects restent natifs, ces règles sont inertes. */
  .ui-selectmenu-button {
    position: relative;
    display: block;
    float: none;
    width: 100% !important; /* le widget pose une width INLINE calculée en px */
    height: 48px;
    margin: 0;
    padding: 13px 42px 13px 14px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    box-shadow: none;
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    text-transform: none;
  }
  .ui-selectmenu-button.ui-state-focus,
  .ui-selectmenu-button[aria-expanded="true"],
  .ui-selectmenu-button:focus {
    border-color: #F45000;
    outline: none;
    background: #FFFFFF;
    color: #1A1A1A;
  }
  .ui-selectmenu-button .ui-selectmenu-text {
    display: block;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* chevron ↓ en pur CSS, sprite .ui-icon neutralisé */
  .ui-selectmenu-button .ui-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    left: auto;
    width: 9px;
    height: 9px;
    margin: -7px 0 0;
    background: none;
    background-image: none;
    text-indent: -9999px;
    overflow: hidden;
    border-right: 2px solid #6B6B6B;
    border-bottom: 2px solid #6B6B6B;
    transform: rotate(45deg);
  }

  /* Liste déroulante : feuille blanche arrondie, lignes tapables 44px,
     sous le calendrier (99999) mais au-dessus de tout le reste */
  .ui-selectmenu-menu { z-index: 9990; }
  .ui-selectmenu-menu .ui-menu {
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 14px;
    box-shadow: none;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ui-selectmenu-menu .ui-menu .ui-menu-item {
    margin: 0;
    padding: 12px;
    min-height: 44px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-size: 14px;
    color: #1A1A1A;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
  }
  .ui-selectmenu-menu .ui-menu .ui-menu-item a {
    display: block;
    padding: 0;
    border: none;
    color: inherit;
    text-decoration: none;
  }
  /* item survolé/actif : orange pâle (jQuery UI ≤1.11 met l'état sur le <li>…) */
  .ui-selectmenu-menu .ui-menu .ui-menu-item.ui-state-focus,
  .ui-selectmenu-menu .ui-menu .ui-menu-item.ui-state-active,
  .ui-selectmenu-menu .ui-menu .ui-menu-item.ui-state-hover {
    margin: 0;
    background: #FCE8E0;
    border: none;
    color: #C24000;
    font-weight: 600;
  }
  /* …et jQuery UI 1.12 sur un wrapper interne : il recouvre exactement le <li> */
  .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-menu-item-wrapper {
    padding: 12px;
    margin: -12px;
    border: none;
    border-radius: 10px;
    color: inherit;
  }
  .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active,
  .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-focus,
  .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-hover {
    margin: -12px;
    background: #FCE8E0;
    border: none;
    color: #C24000;
    font-weight: 600;
  }
  /* intitulés d'optgroup (Aéroport en France, hors de France…) */
  .ui-selectmenu-menu .ui-selectmenu-optgroup {
    padding: 12px 12px 4px;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: #6B6B6B;
    text-transform: none;
  }
}

/* ============ TUNNEL : choix du véhicule ============ */
/* ============ TUNNEL : étape 2 (choix du véhicule) ============ */
/* ============================================================================
   EURODRIVE MOBILE — TUNNEL DE RÉSERVATION · Étape 2
   /reservation/vehicules — .booking-section.rub-211 > .inventory-section
   .invent-style-two > .car-block-two (cartes véhicules).
   À concaténer APRÈS eurodrive-mobile.min.css : ne répète pas la base
   (header, footer, boutons .theme-btn, inputs 48px, page-title sombre,
   bread-crumb pastilles, panneau .select-cars-tabs, selects .cars-form,
   datepickers jQuery UI/XDSoft… déjà couverts) — n'ajoute que le spécifique.
   Tokens app : #F45000 / #C24000 / #1A1A1A / #6B6B6B / #E6E6E6 / #F7F6F3 /
   #FCE8E0 / #F6F6F4 / #B4B2A9 — design 100% plat, aucune ombre.
   NB : la base transforme .inventory-section .car-info li:last-child en
   bouton PDF pleine largeur (page /vehicules) → ici la dernière pastille
   est « Année » : re-déclarée en pastille normale (scope .car-block-two,
   plus spécifique).
   ============================================================================ */
@media only screen and (max-width: 767px) {

  /* ---------- 1. Squelette de la page : sections imbriquées remises à plat ---------- */
  /* <br> décoratif au-dessus du titre « 2. Sélectionnez votre EURODRIVE » */
  .booking-section > .auto-container > br { display: none; }
  .booking-section .sec-title h2 { font-size: 20px; font-weight: 800; text-transform: none; }

  /* La section inventaire est IMBRIQUÉE dans .booking-section : on annule le
     padding inline (padding-top:20px) et le double conteneur (2 × 16px de
     gouttières sinon). !important : combat le style inline uniquement. */
  .booking-section .inventory-section {
    padding-top: 8px !important;
    padding-bottom: 0;
    background-color: transparent;
    background-image: none;
  }
  .booking-section .inventory-section .auto-container { padding-left: 0; padding-right: 0; }

  /* Colonnes liste (col-lg-9) + formulaire (col-lg-3) : pile verticale */
  .inventory-section .column.pull-left,
  .inventory-section .form-column.pull-right { float: none; width: 100%; }

  /* ---------- 2. Filtres carburant / boîte : chips tapables façon app ---------- */
  .inventory-section .layout-box { margin: 0 0 10px; padding: 0; }
  /* le 2e groupe porte un style inline margin-left:20px → !important justifié */
  .inventory-section .layout-box .pull-left {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 6px !important;
  }
  .inventory-section .layout-box br { display: none; }
  .inventory-section .filter-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #6B6B6B;
    line-height: 1.4;
  }
  /* la rangée de chips (ul inline padding-top:7px → !important justifié) */
  .inventory-section .view-options {
    display: -webkit-flex; display: flex;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
    gap: 8px;
    margin: 7px 0 2px;
    padding: 0 !important;
    list-style: none;
  }
  .inventory-section .view-options li { float: none; margin: 0; padding: 0; list-style: none; }
  .inventory-section .view-options li a {
    display: -webkit-inline-flex; display: inline-flex;
    -webkit-align-items: center; align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
  }
  .inventory-section .view-options li a:hover,
  .inventory-section .view-options li a:focus,
  .inventory-section .view-options li a:active {
    background: #FCE8E0;
    border-color: #FCE8E0;
    color: #C24000;
  }

  /* ---------- 3. Carte véhicule : photo, nom, équivalent USA, pastilles ---------- */
  .inventory-section .car-block-two { margin: 0 0 14px; padding: 0; }
  .inventory-section .car-block-two .inner-box {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none !important;   /* le gabarit pose une ombre au survol */
    padding: 0;
    margin: 0;
  }
  .inventory-section .car-block-two .inner-box > .row { margin: 0; }
  .inventory-section .car-block-two .image-column,
  .inventory-section .car-block-two .content-column {
    float: none;
    width: 100%;
    padding: 0;
  }

  /* Photo : div.image en background-image (inline) → bandeau 190px cover.
     Les coins hauts arrondis viennent de l'overflow:hidden de .inner-box. */
  .inventory-section .car-block-two .image-column a { display: block; }
  .inventory-section .car-block-two .image-column .image {
    display: block;
    position: static;
    width: 100%;
    height: 190px;
    min-height: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
  }

  /* Contenu */
  .inventory-section .car-block-two .content-column { padding: 13px 16px 16px; }
  .inventory-section .car-block-two .content-column h3 {
    margin: 0 0 3px;
    padding: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
  }
  .inventory-section .car-block-two .content-column h3 a { color: #1A1A1A; text-decoration: none; }
  .inventory-section .car-block-two .content-column h3 a:hover,
  .inventory-section .car-block-two .content-column h3 a:active { color: #C24000; }
  /* « Équivalent USA : … » : le div sans classe qui suit le h3 */
  .inventory-section .car-block-two .content-column h3 + div {
    font-size: 12px;
    color: #6B6B6B;
    line-height: 1.45;
    margin: 0 0 11px;
  }

  /* Pastilles d'infos (carburant / transmission / portes / CO² / année).
     La base pose déjà des !important (padding/margin/line-height) sur
     .inventory-section .car-info li → mêmes armes, scope plus spécifique. */
  .inventory-section .car-block-two .info-box { margin: 0 0 2px; padding: 0; border: none; }
  .inventory-section .car-block-two .car-info {
    display: -webkit-flex; display: flex;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .inventory-section .car-block-two .car-info li {
    display: -webkit-inline-flex !important; display: inline-flex !important;
    -webkit-align-items: center; align-items: center;
    gap: 5px;
    float: none;
    width: auto;
    margin: 0 !important;
    padding: 7px 12px !important;
    background: #FCE8E0;
    border: none !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 700;
    color: #C24000;
    line-height: 1.2 !important;
    text-align: left;
    white-space: nowrap;
  }
  .inventory-section .car-block-two .car-info li .icon,
  .inventory-section .car-block-two .car-info li .fa {
    display: inline-block;
    position: static !important;
    top: auto !important;
    width: auto;
    height: auto;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: #C24000;
  }
  /* Libellé (« Carburant », « Portes »…) : discret devant la valeur */
  .inventory-section .car-block-two .car-info li .info-title {
    display: inline;
    position: static;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: 600;
    color: #C24000;
    opacity: 0.72;
    text-transform: none;
    letter-spacing: 0;
  }
  /* La base (page /vehicules) transforme li:last-child en bouton PDF pleine
     largeur et masque son icône → ici « Année » redevient une pastille. */
  .inventory-section .car-block-two .car-info li:last-child {
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    background: #FCE8E0;
    border-radius: 999px !important;
  }
  .inventory-section .car-block-two .car-info li:last-child > .icon { display: inline-block; }

  /* ---------- 4. Prix + bouton « Choisir ce véhicule » ---------- */
  .inventory-section .car-block-two .lower-box {
    display: block;
    margin: 8px 0 0;
    padding: 0;
    border: none;
  }
  .inventory-section .car-block-two .lower-box .btns-box {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .inventory-section .car-block-two .btns-box .btns {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Ligne prix : li avec styles inline padding-top:5px + font-size:150%
     → !important justifié (inline). « Forfait 32 jours: » petit au-dessus… */
  .inventory-section .car-block-two .btns-box .btns > li {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0 !important;
    border: none;
    font-size: 12.5px !important;
    font-weight: 600;
    color: #6B6B6B;
    line-height: 1.35;
    text-align: left;
  }
  /* …et le prix en gros, orange foncé, bien en valeur */
  .inventory-section .car-block-two .btns-box .btns li b {
    display: block;
    margin-top: 2px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.15;
    color: #C24000;
  }
  /* Bouton de sélection : gros, orange, pleine largeur (couleurs, radius 14
     et hover #C24000 : déjà dans la base .theme-btn). Le padding inline
     3px 10px du gabarit → !important justifié. */
  .inventory-section .car-block-two .btns li.logo { margin-top: 12px; }
  .inventory-section .car-block-two .btns li.logo .theme-btn.btn-small {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 14px 18px !important;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }
  /* Message d'indisponibilité éventuel (div inline color:darkred, vide sinon) */
  .inventory-section .car-block-two .lower-box + div {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
  }

  /* ---------- 5. Colonne « Modifier votre demande » (sous la liste) ----------
     Carte blanche, selects et bouton Rafraîchir : déjà stylés par la base
     (.select-cars-tabs / .cars-form). Ici : l'onglet unique devient un titre
     de carte + champs de dates avec icône calendrier (l'horloge disparaît). */
  .inventory-section .form-column { margin-top: 8px; }
  .inventory-section .select-cars-tabs .tab-btns {
    display: block;
    margin: 0 0 12px;
    padding: 0;
    border: none;
  }
  .inventory-section .select-cars-tabs .tab-btns .tab-btn,
  .inventory-section .select-cars-tabs .tab-btns .tab-btn.active-btn {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 17px;
    font-weight: 800;
    color: #1A1A1A;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    cursor: default;
  }
  /* <br> de mise en page du vieux gabarit entre les champs */
  .cars-form br { display: none; }
  /* Dates : icône calendrier orange dans le champ (48px/radius 12/focus : base) */
  .cars-form .clock-icon { display: none; }
  .cars-form input.date-picker {
    display: block;
    width: 100%;
    padding-right: 44px;
    background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F45000' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 14px center;
    cursor: pointer;
  }
  /* Bouton Rafraîchir : pleine largeur, hauteur app (couleurs : base) */
  .cars-form .theme-btn.btn-style-one {
    display: block;
    width: 100%;
    min-height: 50px;
    font-size: 15.5px;
  }
}

/* ============ TUNNEL + PAGES : authentification (connexion/inscription) ============ */
/* ============ TUNNEL : AUTHENTIFICATION (connexion + inscription) ============ */
/* ============================================================================
   EURODRIVE MOBILE — TUNNEL · Authentification (/authentification)
   Deux blocs .register-section (login-form puis register-form) dans des
   colonnes Bootstrap → sur mobile : deux CARTES blanches empilées, connexion
   en premier (ordre du HTML). À charger APRÈS eurodrive-mobile.min.css :
   la base couvre déjà header/footer, bandeau .page-title sombre, pastilles
   du fil d'Ariane (.page-info), boutons orange et inputs 48px génériques.
   Ici : ce que le gabarit .styled-form (style.min.css) impose encore —
   marges 30px, icônes .adon-icon superposées aux champs (dont right:25px
   INLINE), bouton min-width:150px, select à flèche sprite, lien « mot de
   passe oublié » avec padding INLINE.
   Tokens app : #F45000 / #C24000 / #1A1A1A / #6B6B6B / #E6E6E6 / #F7F6F3 /
   #FCE8E0 / #F6F6F4 / #B4B2A9 — design 100% plat, aucune ombre.
   ============================================================================ */
@media only screen and (max-width: 767px) {

  /* ---------- 0. Fond de page doux (signature app) : jamais body.<page>,
     donc via :has sur un motif propre à cette page — les navigateurs sans
     :has gardent simplement le fond blanc de la base ---------- */
  body:has(.register-section .styled-form.login-form) { background: #F7F6F3; }

  /* ---------- 1. Les deux sections deviennent des cartes blanches empilées ----------
     (annule aussi le padding générique « section { padding: 28px 0 } » de la base) */
  .register-section {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 16px 16px 18px;
    margin: 12px 0;
  }
  /* conteneurs internes du gabarit : gouttières remises à zéro pour que les
     champs occupent toute la largeur de la carte */
  .register-section .auto-container { padding-left: 0; padding-right: 0; }
  .register-section .row { margin-left: 0; margin-right: 0; }
  .register-section .form-column,
  .register-section .column {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* ---------- 2. Titres des cartes : 17px, gras 800, jamais uppercase ----------
     (sélecteur long : le gabarit écrit « .register-section .form-column .form-title h2 »
     en 24px UPPERCASE avec filet gris + barrette orange :after → tout est neutralisé) */
  .register-section .form-column .form-title { margin: 0 0 12px; padding: 0; }
  .register-section .form-column .form-title h2 {
    font-size: 17px;
    font-weight: 800;
    color: #1A1A1A;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    border-bottom: none;
    text-transform: none;
    letter-spacing: 0;
  }
  .register-section .form-column .form-title h2:after { display: none; content: none; }

  /* Bandeau sombre : le gabarit met le H1 en UPPERCASE — jamais dans l'app */
  .page-title h1 { text-transform: none; letter-spacing: 0; }

  /* ---------- 3. Groupes de champs : rythme régulier 12px (le gabarit met 30px) ---------- */
  .styled-form .form-group {
    position: relative;
    margin-bottom: 12px;
    font-size: 14px;
    color: #6B6B6B;
  }
  /* Rangées internes (civilité / prénom / nom, mot de passe ×2) : colonnes
     empilées pleine largeur, même respiration 12px entre les champs */
  .styled-form .form-group .row { margin-left: 0; margin-right: 0; }
  .styled-form .form-group .col-xs-12 {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 12px;
  }
  .styled-form .form-group .col-xs-12:last-child { margin-bottom: 0; }

  /* ---------- 4. Champs : la base impose déjà 48px / radius 12 / bordure #E6E6E6
     / focus orange (!important) — on renforce ce qui échappe encore au lot ---------- */
  /* Icônes décoratives dans les champs (enveloppe, cadenas, user) : superflues
     façon app, et elles chevauchent la saisie (right:25px inline) → masquées */
  .styled-form .form-group .adon-icon { display: none; }
  /* Le gabarit garde la main sur line-height:30px → recalé sur le champ 48px */
  .styled-form input[type="text"],
  .styled-form input[type="email"],
  .styled-form input[type="password"],
  .styled-form select {
    line-height: 1.4;
    font-size: 15px;
    color: #1A1A1A;
  }
  .styled-form input::placeholder { color: #9A9890; opacity: 1; }
  /* Select « Civilité » : la flèche sprite du gabarit (icon-select.png) saute,
     remplacée par le chevron SVG maison des autres écrans du tunnel */
  .styled-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    padding-right: 38px;
    background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    cursor: pointer;
  }
  .styled-form select::-ms-expand { display: none; }

  /* ---------- 5. Boutons Connexion / Inscription : orange plein, pleine largeur
     (couleurs / radius 14 / hover #C24000 : déjà dans la base .theme-btn) ---------- */
  /* les demi-colonnes flottantes (bouton à gauche, lien à droite) s'empilent ;
     !important : combat .pull-left { float:left !important } de Bootstrap et
     le padding INLINE (10px 0 0 30px) du lien « mot de passe oublié » */
  .styled-form .form-group.pull-left {
    float: none !important;
    width: 100%;
    padding: 0 !important;
    margin-bottom: 0;
  }
  .styled-form .form-group .theme-btn,
  .styled-form button[type="submit"],
  .styled-form button.theme-btn {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 14px 22px;
    font-size: 16px;
    text-align: center;
  }

  /* ---------- 6. Lien « Mot de passe oublié » : orange, centré, bien tapable ---------- */
  .styled-form .form-group a {
    display: block;
    min-height: 44px;
    padding: 13px 0 5px;
    text-align: center;
    color: #F45000;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
  }
  .styled-form .form-group a:hover,
  .styled-form .form-group a:active { color: #C24000; }
}

/* ============ VÉHICULES façon APP : icône + valeur, sans pastilles (consigne : copier l'app) ============ */
@media only screen and (max-width: 767px) {
  /* Les infos (places, bagages, boîte, carburant…) : icône sombre 15px + valeur 13px w600,
     SANS fond ni pastille — exactement la rangée de specs des cartes véhicules de l'app. */
  .inventory-section .car-info li,
  .inventory-section .car-block-two .car-info li,
  .inventory-section .car-block .car-info li {
    background: transparent !important;
    color: #1A1A1A !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 16px 8px 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 5px;
  }
  .inventory-section .car-info li .icon,
  .inventory-section .car-info li .fa {
    color: #1A1A1A !important;
    font-size: 15px !important;
    background: transparent !important;
  }
  /* Le libellé (« Carburant », « Transmission »…) : l'icône parle d'elle-même, comme dans l'app */
  .inventory-section .car-info li .info-title { display: none !important; }
  /* Titre du véhicule : 17px w700 (patron de l'app) */
  .inventory-section .car-block-two .content-column h3,
  .inventory-section .car-block-two .content-column h3 a {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
  }
  /* Prix : « Forfait 32 jours » discret, montant 18px w700 ORANGE (patron de l'app) */
  .inventory-section .car-block-two .btns > li {
    font-size: 12px !important;
    color: #6B6B6B !important;
  }
  .inventory-section .car-block-two .btns > li b {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #F45000 !important;
  }
}

/* ============ VÉHICULES (tunnel) : fiche détaillée façon app + compactage ============ */
@media only screen and (max-width: 767px) {
  /* La ligne d'infos : UNE rangée compacte qui s'enroule (fini les 5 lignes) */
  .inventory-section .car-info {
    display: -webkit-flex !important; display: flex !important;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-align-items: center; align-items: center;
    padding: 0 !important; margin: 6px 0 10px !important;
  }
  .inventory-section .car-info li,
  .inventory-section .car-block-two .car-info li {
    display: -webkit-inline-flex !important; display: inline-flex !important;
    -webkit-align-items: center; align-items: center;
    width: auto !important;
    float: none !important;
  }
  /* Filtres (carburant / boîte) : une seule rangée défilante de petites puces */
  .inventory-section .layout-box {
    display: -webkit-flex !important; display: flex !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 20px;
    padding: 2px 16px 10px;
    scrollbar-width: none;
  }
  .inventory-section .layout-box::-webkit-scrollbar { display: none; }
  .inventory-section .layout-box .pull-left {
    float: none !important;
    margin: 0 !important;
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
  }
  .inventory-section .filter-title { font-size: 12px; font-weight: 600; color: #6B6B6B; }
  .inventory-section .view-options { padding: 6px 0 0 !important; margin: 0; white-space: nowrap; }
  .inventory-section .view-options li { display: inline-block; float: none !important; margin: 0 6px 0 0; }
  .inventory-section .view-options li a,
  .inventory-section .view-options.fuels li a,
  .inventory-section .view-options.gearboxes li a,
  .inventory-section .layout-box .view-options li a,
  .inventory-section .filter-title .view-options li a {
    display: inline-block !important;
    background: #F6F6F4 !important;
    color: #1A1A1A !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 9px 14px !important;
    font-size: 12.5px !important; font-weight: 600 !important;
    line-height: 1.2 !important;
    height: auto !important; width: auto !important;
    min-width: 0 !important;
    cursor: pointer;
  }
  .inventory-section .view-options li a.active,
  .inventory-section .view-options li a.selected,
  .inventory-section .view-options li.active a {
    background: #F45000 !important;
    color: #FFFFFF !important;
  }
  /* Fiche détaillée façon app (bouton + panneau) */
  .ed-vdetail { padding: 0 14px 14px; }
  .ed-vdetail-btn {
    display: block; width: 100%;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 14px;
    padding: 12px;
    font-size: 14px; font-weight: 700; color: #F45000;
    position: relative;
  }
  .ed-vdetail-btn:after {
    content: ""; position: absolute; right: 18px; top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid #F45000; border-bottom: 2px solid #F45000;
    transform: rotate(45deg); transition: transform 0.2s;
  }
  .ed-vdetail-btn.ed-on:after { transform: rotate(225deg); margin-top: -2px; }
  .ed-vdetail-panel { padding: 12px 2px 0; }
  .ed-vd-load { color: #6B6B6B; text-align: center; }
  .ed-vd-desc { font-size: 13px; color: #3A3A3A; line-height: 1.5; margin: 0 0 10px; }
  /* Faits (conso, dimensions, pneus) : grille 2 colonnes façon fiche technique de l'app */
  .ed-vd-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 6px;
  }
  .ed-vd-facts > div {
    background: #F7F6F3;
    border-radius: 12px;
    padding: 9px 11px;
  }
  .ed-vd-facts span { display: block; font-size: 11px; color: #6B6B6B; font-weight: 600; }
  .ed-vd-facts b { display: block; font-size: 13.5px; color: #1A1A1A; font-weight: 700; margin-top: 1px; }
  /* Listes d'équipements : coches orange, comme l'app */
  .ed-vd-sec { font-size: 13.5px; font-weight: 800; color: #1A1A1A; margin: 12px 0 6px; }
  .ed-vd-list { list-style: none; padding: 0; margin: 0; }
  .ed-vd-list li {
    position: relative;
    padding: 4px 0 4px 22px;
    font-size: 12.5px; color: #3A3A3A; line-height: 1.45;
  }
  .ed-vd-list li:before {
    content: ""; position: absolute; left: 2px; top: 9px;
    width: 5px; height: 9px;
    border-right: 2px solid #F45000; border-bottom: 2px solid #F45000;
    transform: rotate(45deg);
  }
}

/* ============ ÉQUIPEMENTS (tunnel) : interrupteurs façon app + récap compacté ============ */
@media only screen and (max-width: 767px) {
  /* PDF supprimé (la fiche détaillée vit à l'étape du choix désormais) */
  .invent-style-two .image-column .text-center { display: none !important; }
  /* Section motorisation (Gas/Manual/…) : redondante -> masquée, le récap reste compact */
  .invent-style-two .info-box { display: none !important; }
  .invent-style-two .image-column { width: 38%; float: left; }
  .invent-style-two .content-column { width: 62%; float: left; }

  /* Accessoires : cartes à interrupteur (réplique du SwitchListTile de l'app) */
  .ed-acc { padding: 0 2px; }
  .ed-acc-row {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 13px 14px;
    margin: 0 0 10px;
    cursor: pointer;
  }
  .ed-acc-txt { -webkit-flex: 1; flex: 1; min-width: 0; padding-right: 12px; }
  .ed-acc-txt b { display: block; font-size: 14.5px; font-weight: 700; color: #1A1A1A; line-height: 1.3; }
  .ed-acc-txt i { display: block; font-style: normal; font-size: 12px; color: #6B6B6B; line-height: 1.45; margin-top: 2px; }
  .ed-acc-txt em { display: block; font-style: normal; font-size: 13px; font-weight: 700; color: #C24000; margin-top: 4px; }
  /* L'interrupteur : rail 48x28, bouton blanc, orange quand actif */
  .ed-acc-sw { position: relative; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 48px; height: 28px; }
  .ed-acc-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .ed-acc-knob {
    position: absolute; inset: 0;
    background: #E6E6E6;
    border-radius: 999px;
    transition: background 0.2s;
    pointer-events: none;
  }
  .ed-acc-knob:after {
    content: "";
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.2s;
  }
  .ed-acc-sw input:checked + .ed-acc-knob,
  .ed-acc-knob.ed-on { background: #F45000 !important; }
  .ed-acc-sw input:checked + .ed-acc-knob:after,
  .ed-acc-knob.ed-on:after { transform: translateX(20px); }
  /* L'ancienne table reste dans le formulaire mais disparaît de l'écran */
  .ed-acc-hidden { display: none !important; }
}

/* ============ TUNNEL : barre d'étapes + récaps propres ============ */
@media only screen and (max-width: 767px) {
  /* Cercles 1-5 avec connecteurs — étapes passées cliquables (retour sans perte) */
  .ed-steps-bar {
    display: -webkit-flex; display: flex;
    background: #FFFFFF;
    padding: 14px 10px 10px;
    border-bottom: 1px solid #F1F1EF;
  }
  .ed-step-item {
    position: relative;
    -webkit-flex: 1; flex: 1;
    text-align: center;
    text-decoration: none;
  }
  .ed-step-item:not(:first-child):before {
    content: ""; position: absolute;
    top: 14px; right: 50%; left: -50%;
    height: 2px; background: #E6E6E6;
  }
  .ed-step-done:not(:first-child):before,
  .ed-step-cur:not(:first-child):before { background: #F45000; }
  .ed-step-dot {
    position: relative; z-index: 1;
    display: inline-flex; display: -webkit-inline-flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #F6F6F4; border: 2px solid #E6E6E6;
    color: #6B6B6B; font-size: 12.5px; font-weight: 700;
  }
  .ed-step-done .ed-step-dot { background: #F45000; border-color: #F45000; color: #FFFFFF; }
  .ed-step-cur .ed-step-dot { background: #FFFFFF; border-color: #F45000; color: #F45000; }
  .ed-step-lbl { display: block; font-size: 10.5px; font-weight: 600; color: #6B6B6B; margin-top: 4px; }
  .ed-step-done .ed-step-lbl, .ed-step-cur .ed-step-lbl { color: #1A1A1A; }

  /* Récap de réservation : carte à lignes nettes. Les 4 blocs (params, equipments,
     coordinates, amount) partagent la même structure, et ils apparaissent dans le
     funnel (.invent-style-two) COMME sur la page de commande (.register-section). */
  .invent-style-two [class*="booking-request-"],
  .register-section [class*="booking-request-"] {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 4px 14px;
    margin: 0 0 12px;
    /* le gabarit impose font-size:125% + line-height:35px → tout était énorme et aéré */
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  /* icônes d'accessoires (images à l'ancienne charte AutoTT, absentes en prod) */
  .invent-style-two .booking-request-equipments img,
  .register-section .booking-request-equipments img { display: none !important; }
  .invent-style-two .booking-request-equipments div[style*="width:40px"],
  .register-section .booking-request-equipments div[style*="width:40px"] { display: none !important; }
  /* « Coût des équipements : 56 $ » et le lien modifier : sur la même ligne */
  .invent-style-two [class*="booking-request-"] span[style*="80%"],
  .invent-style-two [class*="booking-request-"] b[style*="80%"],
  .register-section [class*="booking-request-"] span[style*="80%"],
  .register-section [class*="booking-request-"] b[style*="80%"] {
    display: inline !important; font-size: 13.5px !important;
  }
  /* sous-titre du véhicule (« USA equivalent… ») : le gabarit le remonte de
     -10px et il chevauchait le titre */
  .invent-style-two .booking-infos div[style*="margin-top:-10"],
  .register-section .booking-infos div[style*="margin-top:-10"] { margin-top: 3px !important; }

  /* carte véhicule incluse dans le récap : prix compacts sur une ligne
     (sinon elle hérite des gros prix empilés des cartes de l'étape 2) */
  .invent-style-two [class*="booking-request-"] .car-block-two .lower-box li,
  .register-section [class*="booking-request-"] .car-block-two .lower-box li {
    font-size: 13.5px !important; line-height: 1.8 !important; padding: 0 !important;
  }
  .invent-style-two [class*="booking-request-"] .car-block-two .lower-box li b,
  .register-section [class*="booking-request-"] .car-block-two .lower-box li b {
    display: inline !important; font-size: 14.5px !important;
  }
  /* « Total à payer » : libellé à gauche, montant orange à droite, une ligne */
  .invent-style-two .booking-request-amount .row,
  .register-section .booking-request-amount .row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  }
  .invent-style-two .booking-request-amount .row > [class*="col-"],
  .register-section .booking-request-amount .row > [class*="col-"] {
    width: auto !important; float: none !important; padding: 0;
  }
  .invent-style-two .booking-request-amount .row > [class*="col-"]:first-child,
  .register-section .booking-request-amount .row > [class*="col-"]:first-child {
    text-align: left !important; font-size: 14px; font-weight: 700; color: #1A1A1A;
  }
  .invent-style-two .booking-request-amount .total,
  .register-section .booking-request-amount .total {
    font-size: 20px !important; white-space: nowrap;
  }
  .invent-style-two [class*="booking-request-"] .row,
  .register-section [class*="booking-request-"] .row {
    border-bottom: 1px solid #F4F4F2;
    padding: 10px 0;
    margin: 0;
    background: transparent !important;
    height: auto !important;
  }
  .invent-style-two [class*="booking-request-"] .row:last-child,
  .register-section [class*="booking-request-"] .row:last-child { border-bottom: none; }
  .invent-style-two [class*="booking-request-"] [class*="col-"],
  .register-section [class*="booking-request-"] [class*="col-"] {
    width: 100% !important; float: none !important; padding: 0; text-align: left !important;
  }
  .invent-style-two [class*="booking-request-"] .info-title,
  .register-section [class*="booking-request-"] .info-title {
    display: block;
    font-size: 11.5px; font-weight: 600; color: #6B6B6B;
    text-transform: none;
  }
  .invent-style-two [class*="booking-request-"] .icon,
  .register-section [class*="booking-request-"] .icon { color: #F45000 !important; margin-right: 6px; }
  .invent-style-two [class*="booking-request-"] .total,
  .register-section [class*="booking-request-"] .total {
    font-size: 18px !important; font-weight: 800 !important; color: #F45000 !important;
  }

  /* Étape 5 : case CGV orange et bien tapable */
  #booking_cgu { width: 20px; height: 20px; accent-color: #F45000; vertical-align: middle; }
  label[for="booking_cgu"] { font-size: 13px; color: #3A3A3A; }
}

/* ============ TUNNEL : filtres 2026, paiement rassurant, détail de commande ============ */
@media only screen and (max-width: 767px) {
  /* --- Filtres (choix du véhicule) : bouton + panneau propre --- */
  .ed-flt { padding: 4px 16px 12px; }
  .ed-flt-btn {
    display: -webkit-inline-flex; display: inline-flex;
    -webkit-align-items: center; align-items: center;
    gap: 8px;
    background: #F6F6F4; color: #1A1A1A;
    border: none; border-radius: 12px;
    padding: 12px 18px;
    font-size: 14px; font-weight: 700;
  }
  .ed-flt-btn.ed-on { background: #1A1A1A; color: #FFFFFF; }
  .ed-flt-badge {
    display: inline-block;
    min-width: 20px; height: 20px; line-height: 20px;
    background: #F45000; color: #FFFFFF;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    text-align: center;
  }
  .ed-flt-panel {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 4px 14px 14px;
    margin-top: 10px;
  }
  .ed-flt-lbl {
    font-size: 11px; font-weight: 700; color: #6B6B6B;
    text-transform: uppercase; letter-spacing: 0.8px;
    margin: 12px 0 7px;
  }
  .ed-flt-grp { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; }
  .ed-flt-chip {
    background: #F6F6F4; color: #1A1A1A;
    border: none; border-radius: 999px;
    padding: 10px 15px;
    font-size: 13px; font-weight: 600;
  }
  .ed-flt-chip.ed-on { background: #F45000; color: #FFFFFF; font-weight: 700; }
  .ed-flt-reset {
    display: block; width: 100%;
    background: transparent; border: none;
    color: #6B6B6B; font-size: 13px; font-weight: 600;
    padding: 12px 0 2px;
  }

  /* --- Paiement (étape 6) : modes en cartes claires, montant lisible, note sécurité --- */
  .ed-pay-note {
    background: #E1F5EE; color: #0F6E56;
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0 16px 14px;
    font-size: 13px; line-height: 1.5; font-weight: 600;
    text-align: left;
  }
  .payment-modes .tab-btns { display: block; padding: 0 16px; border: none; }
  .payment-modes .tab-btns .tab-btn {
    display: block;
    width: 100% !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E6E6E6 !important;
    border-radius: 16px !important;
    padding: 14px 46px 14px 16px !important;
    margin: 0 0 10px !important;
    text-align: left;
    font-size: 12.5px; color: #6B6B6B;
    height: auto !important; float: none !important;
    position: relative;
  }
  .payment-modes .tab-btns .tab-btn.active-btn {
    border-color: #F45000 !important;
    background: #FFF6F1 !important;
  }
  .payment-modes .tab-btns .tab-btn.active-btn:after {
    content: "✓";
    position: absolute;
    /* le gabarit ancre son :after à left:50% (flèche) → tout neutraliser */
    left: auto !important; right: 15px !important;
    top: 50% !important; bottom: auto !important;
    margin: -13px 0 0 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    width: 26px; height: 26px; line-height: 26px;
    background: #F45000; color: #FFFFFF;
    border-radius: 50%;
    text-align: center; font-size: 14px; font-weight: 700;
  }
  /* espace avant le lien « modifier mes équipements » */
  .invent-style-two .booking-request-equipments a,
  .register-section .booking-request-equipments a { margin-left: 10px !important; }
  /* Le gabarit met .text en float:left (la carte s'effondrait, le texte
     débordait dessous en majuscules) et .light en blanc sur carte active
     (invisible) → on reprend tout en main. */
  .payment-modes .tab-btns .tab-btn .text {
    float: none !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
    text-align: left !important;
    font-size: 12.5px !important; color: #6B6B6B !important;
    line-height: 1.5 !important;
  }
  .payment-modes .tab-btns .tab-btn.active-btn .text,
  .payment-modes .tab-btns .tab-btn:hover .text { color: #6B6B6B !important; background: transparent !important; }
  .payment-modes .tab-btn .text b { display: block; font-size: 15px; font-weight: 800; color: #1A1A1A !important; margin-bottom: 2px; text-transform: none; }
  .payment-modes .tab-btn .light,
  .payment-modes .tab-btns .tab-btn.active-btn .text .light,
  .payment-modes .tab-btns .tab-btn:hover .text .light {
    display: block; font-size: 12px; font-weight: 600;
    color: #0F6E56 !important;
    text-transform: none !important; text-align: left !important;
    margin-top: 3px;
  }
  .payment-modes .tabs-content { padding: 0 16px; }
  .payment-modes .tabs-content .tab h3 { font-size: 13px; font-weight: 600; color: #6B6B6B; }
  .payment-modes .tabs-content .tab h3 b { display: block; font-size: 27px; font-weight: 800; color: #1A1A1A; margin-top: 2px; }
  .payment-modes .payment-infos {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 14px;
    margin-top: 10px;
    font-size: 13px; line-height: 1.5;
  }
  .payment-modes p[style*="darkred"] {
    background: #FFF6E8 !important;
    color: #8A5A00 !important;
    border-radius: 14px;
    padding: 12px 14px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 0 14px !important;
  }

  /* --- Détail de commande (confirmation + Mes commandes) : façon app --- */

  /* Bannière flash (« Félicitations, votre commande… ») : carte verte douce */
  .top-message { padding: 12px 16px 0 !important; background: transparent !important; }
  .top-message .message {
    background: #E8F3EE !important;
    color: #0F6E56 !important;
    border: 1px solid #CBE5D9;
    border-radius: 16px;
    padding: 14px 16px !important;
    font-size: 14px !important; font-weight: 600; line-height: 1.5 !important;
    text-align: left !important;
  }
  .top-message .message:before { content: "✓  "; font-weight: 800; }

  /* Référence + statuts. Le gabarit impose font-size:275% et des pastilles inline
     qui débordent de l'écran → référence sur sa ligne, pastilles empilées dessous. */
  .register-section h3[style] { font-size: 24px !important; line-height: 1.4; }
  .register-section h3 .badge { display: block; width: fit-content; margin: 8px 0 0 0 !important; }
  /* le nom de la voiture en h4 tout en haut fait doublon (repris dans la carte
     véhicule) → masqué sur mobile */
  .register-section.ed-has-hero h4[style] { display: none !important; }
  .register-section h4[style] { font-size: 15px !important; font-weight: 800 !important; margin: 12px 0 8px !important; }

  /* Le gabarit enferme les 3 bulles (dates / véhicule / coordonnées) dans un
     cadre gris (.booking-infos padding+border+fond) qui les rétrécit → on
     retire le cadre : les bulles prennent toute la largeur, comme le reste. */
  .register-section .booking-infos {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  /* Carte véhicule (.order-prices-box) : nom + « détails » sous la photo */
  .register-section .ed-veh-head { padding: 4px 0 2px; }
  .register-section .ed-veh-name {
    display: block;
    font-size: 17px; font-weight: 800; color: #1A1A1A; line-height: 1.3;
    margin: 6px 0 2px;
  }
  .register-section .order-prices-box .ed-veh-head .ed-vdetail { padding: 6px 0 4px; }
  .register-section .order-prices-box .ed-veh-head .ed-vdetail-btn { width: 100%; }

  /* Bulle coordonnées : le texte « tombé en vrac » → en-tête + lignes aérées */
  .register-section .booking-request-coordinates .row [class*="col-"]:last-child,
  .register-section .booking-request-coordinates .row [class*="col-"]:last-child * {
    font-size: 13.5px !important; line-height: 1.7 !important; color: #3A3A3A !important;
    text-align: left !important;
  }
  .register-section .booking-request-coordinates b {
    display: block; font-size: 11.5px; font-weight: 700; color: #6B6B6B;
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px;
  }
  .register-section hr { border: none; border-top: 1px solid #EDECE8; margin: 12px 0; width: 100% !important; }
  .register-section .badge {
    display: inline-block;
    position: static !important;   /* le gabarit les met en absolute → débordaient de l'écran */
    border-radius: 999px !important;
    padding: 6px 13px !important;
    font-size: 11.5px !important; font-weight: 700 !important;
    line-height: 1.3 !important;
    vertical-align: middle;
    white-space: normal;
    margin: 0 4px 4px 0;
  }
  /* « ligth » : coquille présente telle quelle dans le gabarit (statut 5) */
  .register-section .badge[style*="darkgreen"] { background-color: #0F6E56 !important; color: #FFFFFF !important; }
  .register-section .badge[style*="darkred"] { background-color: #A32D2D !important; color: #FFFFFF !important; }
  .register-section .badge[style*="gray"], .register-section .badge[style*="grey"],
  .register-section .badge[style*="ligth"] { background-color: #6B6B6B !important; color: #FFFFFF !important; }
  .register-section .badge a { color: inherit !important; }

  /* Les colonnes Bootstrap flottent et leurs hauteurs se replient → le téléphone
     passait sous la photo. Flux normal + nettoyage systématique des .row. */
  .register-section .row:after { content: ""; display: table; clear: both; }
  /* descendant (pas enfant direct) : dans la liste des commandes les colonnes
     sont DANS un lien (.row > a > .col) et flottaient encore → carte de 29px
     effondrée avec le contenu qui débordait dessous */
  .register-section .row [class*="col-"] { float: none !important; }
  .register-section .row > a { display: block; }

  /* Page de commande : le bloc « détails voiture » (logo + lignes carburant/
     boîte/CO2) fait double emploi avec la photo + le tarif de la colonne de
     droite → masqué (demande du 10/07 : « enlève les autres détails voiture »).
     Le titre du véhicule et la liste de ses équipements de série restent. */
  .register-section .booking-infos .car-block-two { display: none !important; }

  /* Colonne prix : une seule carte blanche (photo + « Votre tarif » + total) */
  .register-section .order-prices-box {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 14px 16px;
    margin-top: 16px;
  }
  .register-section .order-prices-box .auto-container { padding: 0 !important; }
  .register-section .order-prices-box .row {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 8px 0; margin: 0;
    border-bottom: 1px solid #F4F4F2;
    background: transparent !important;
    height: auto !important;
  }
  /* les :before/:after de Bootstrap (clearfix) deviennent des ITEMS flex
     invisibles → le space-between répartissait 4 éléments au lieu de 2 et
     tout dérivait vers le centre. On les supprime dans les rangées flex. */
  .register-section .order-prices-box .row:before,
  .register-section .order-prices-box .row:after,
  .invent-style-two .booking-request-amount .row:before,
  .invent-style-two .booking-request-amount .row:after,
  .register-section .booking-request-amount .row:before,
  .register-section .booking-request-amount .row:after {
    content: none !important; display: none !important;
  }
  .register-section .order-prices-box .row > div {
    width: auto !important; float: none !important; padding: 0 !important;
  }
  /* Durci : quel que soit le balisage interne (b, font, spans du gabarit),
     libellé À GAUCHE en gris, montant À DROITE en noir — tailles imposées. */
  .register-section .order-prices-box .row:not([style*="background"]) > div:first-child,
  .register-section .order-prices-box .row:not([style*="background"]) > div:first-child * {
    text-align: left !important; color: #6B6B6B !important;
    font-size: 13.5px !important; font-weight: 600 !important;
  }
  .register-section .order-prices-box .row:not([style*="background"]) > div:last-child,
  .register-section .order-prices-box .row:not([style*="background"]) > div:last-child * {
    text-align: right !important; font-weight: 800 !important; color: #1A1A1A !important;
    font-size: 14.5px !important; white-space: nowrap;
  }
  /* Titre « Votre tarif » (colonne unique centrée) : en-tête de carte,
     ALIGNÉ À GAUCHE comme le reste (la version flex le laissait flotter). */
  .register-section .order-prices-box .auto-container > .row:first-child {
    display: block !important; border-bottom: 1px solid #F4F4F2;
  }
  .register-section .order-prices-box .row > .col-md-12.text-center {
    display: block; width: 100% !important;
    text-align: left !important; font-weight: 800; font-size: 15px; color: #1A1A1A;
    padding: 0 !important;
  }
  .register-section .order-prices-box .row.total {
    border-bottom: none; border-top: 2px solid #EDECE8; margin-top: 4px; padding-top: 12px;
  }
  .register-section .order-prices-box .row.total > div:first-child,
  .register-section .order-prices-box .row.total > div:first-child * {
    color: #1A1A1A !important; font-weight: 800 !important; font-size: 14px !important;
  }
  .register-section .order-prices-box .row.total > div:last-child,
  .register-section .order-prices-box .row.total > div:last-child * {
    color: #F45000 !important; font-size: 19px !important;
  }
  /* Photo du véhicule dans la carte. Le gabarit remonte le conteneur de -192px
     et le fige à 167px (min/max-height, mise en page desktop) → c'est LUI qui
     faisait passer la photo par-dessus le téléphone du client. Flux normal. */
  .register-section .auto-container.picture {
    margin: 0 !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
  }
  .register-section .order-prices-box .row.image, .register-section .order-prices-box .row.picture {
    display: block; border-bottom: none; padding: 0;
    height: auto !important; min-height: 0 !important; max-height: none !important;
  }
  .register-section .row.image [class*="col-"], .register-section .row.picture [class*="col-"] {
    height: auto !important; min-height: 0 !important; max-height: none !important;
  }
  .register-section .row.image img, .register-section .row.picture img {
    width: 88%; height: auto; display: block; margin: 0 auto;
  }
  /* « Vos avantages » : en-tête vert doux + liste à coches, fini les puces carrées */
  .register-section .order-prices-box .row[style*="darkgreen"] {
    display: block;
    background: #0F6E56 !important;
    border-radius: 14px 14px 0 0;
    padding: 12px 14px;
    border-bottom: none;
    margin-top: 14px;
  }
  .register-section .order-prices-box .row[style*="darkgreen"] > div {
    color: #FFFFFF !important; font-weight: 800; font-size: 14px; text-align: left !important;
  }
  .register-section .order-prices-box .row[style*="background-color:#fff"] {
    display: block;
    border: 1px solid #E6E6E6 !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px;
    padding: 12px 14px;
  }
  .register-section .order-prices-box ul[style] { padding-left: 0 !important; line-height: 1.5 !important; margin: 0; }
  .register-section .order-prices-box li[style] {
    list-style: none !important;
    position: relative;
    padding-left: 22px;
    margin: 7px 0;
    font-size: 13px !important; line-height: 1.5; color: #3A3A3A;
  }
  .register-section .order-prices-box li[style]:before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: #F45000; font-weight: 800;
  }

  /* --- Documents à fournir : une carte par document --- */
  .register-section h3:not([style]) { font-size: 20px; font-weight: 800; color: #1A1A1A; margin: 10px 0 6px; }
  .register-section .upload-infos {
    background: #FFF6E8;
    color: #8A5A00 !important;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px !important; font-weight: 600; line-height: 1.55 !important;
    margin: 10px 0 14px;
  }
  .register-section div[style*="margin-right"] { margin-right: 0 !important; }
  .register-section div[style*="margin-right"] > .row {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 14px;
    margin: 0 0 12px;
    display: block;
  }
  .register-section div[style*="margin-right"] > .row > [class*="col-"] {
    width: 100% !important; float: none !important; padding: 0 !important; text-align: left !important;
  }
  /* Intitulé du document (le gabarit force 125%) */
  .register-section div[style*="margin-right"] > .row > [class*="col-"][style] {
    font-size: 14.5px !important; font-weight: 700; color: #1A1A1A !important;
    line-height: 1.45; margin-bottom: 10px;
  }
  /* Les <br> dans les libellés des boutons (« Click<br>to<br>download ») sont
     remplacés par des espaces côté JS (eurodrive-mobile.js). */
  .register-section .btn {
    display: inline-block;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    font-size: 13px !important; font-weight: 700 !important;
    margin: 4px 8px 4px 0;
    box-shadow: none !important;
  }
  .register-section .btn-default {
    background: #FFFFFF !important; color: #F45000 !important; border: 1.5px solid #F45000 !important;
  }
  .register-section .btn-success { background: #0F6E56 !important; color: #FFFFFF !important; border: none !important; }
  .register-section .btn-danger { background: #A32D2D !important; color: #FFFFFF !important; border: none !important; }
  .register-section div[style*="margin-right"] strong { font-size: 12px; color: #6B6B6B; font-weight: 600; }
  .register-section .order-document-upload { margin: 6px 0 0; }
  .register-section .order-document-upload label {
    margin: 0;
  }
  .register-section .order-document-error { color: #A32D2D; font-size: 12.5px; margin: -6px 0 10px; }
  /* Liste « Mes réservations » : cartes façon app reconstruites en JS */
  .ed-book-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 18px;
    padding: 14px;
    margin: 0 0 14px;
    text-decoration: none !important;
  }
  .ed-bk-top { display: flex; align-items: center; justify-content: space-between; }
  .ed-bk-top b { font-size: 16px; font-weight: 800; color: #1A1A1A; letter-spacing: .4px; }
  .ed-bk-arrow { color: #F45000; font-size: 26px; font-weight: 700; line-height: 1; }
  .ed-bk-body { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
  .ed-bk-body img { width: 108px; height: auto; flex: none; }
  .ed-bk-txt { min-width: 0; }
  .ed-bk-model { font-size: 13.5px; font-weight: 700; color: #1A1A1A; margin: 0 0 3px; line-height: 1.35; }
  .ed-bk-dates { font-size: 12.5px; color: #3A3A3A; margin: 0 0 2px; }
  .ed-bk-locs { font-size: 12.5px; color: #6B6B6B; margin: 0; }
  .ed-bk-foot {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    border-top: 1px solid #F4F4F2;
    margin-top: 10px; padding-top: 10px;
  }
  .ed-bk-price { font-size: 17px; font-weight: 800; color: #F45000; white-space: nowrap; }
  .ed-bk-sts { font-size: 11.5px; color: #6B6B6B; text-align: right; line-height: 1.4; }

  /* Secours sans JS : chaque commande = une vraie carte cliquable
     (bordure, chevron ›) — avant, on ne comprenait pas qu'il fallait taper. */
  .register-section .grey-hover {
    position: relative;
    display: block;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 14px 40px 14px 14px;
    margin: 6px 0 4px;
  }
  .register-section .grey-hover:after {
    content: "›";
    position: absolute; right: 16px; top: 50%;
    margin-top: -17px;
    font-size: 28px; font-weight: 700; color: #F45000;
  }
  .register-section .grey-hover img { max-width: 130px; height: auto; }
  .register-section .grey-hover p[style] { font-size: 14px !important; padding-top: 6px !important; line-height: 1.5; }
  .register-section .grey-hover ~ hr { display: none; }
  .register-section .grey-hover [class*="col-"] { text-align: left !important; }

  /* Vieux bloc de filtres du gabarit (« Your fuel » / « Your gearbox ») :
     remplacé par le panneau .ed-flt → masqué en dur (le JS le masquait déjà,
     ceci le garantit même si le JS échoue). */
  .inventory-section .layout-box { display: none !important; }

  /* Confirmation ($status centré du gabarit) : respiration + taille raisonnable */
  .rub-215 div[style*="200%"], section[class*="rub-215"] ~ div[style*="200%"] {
    font-size: 135% !important;
    margin: 28px auto !important;
    padding: 0 20px;
    line-height: 1.45;
  }
}

/* ============ TUNNEL RACCOURCI (10/07/2026) : panneau options, CGU, interstitiel ============ */
@media only screen and (max-width: 767px) {
  /* Panneau « options » et CGV : feuilles de bas d'écran façon app */
  #equipments_modal .modal-dialog, #cgu_modal .modal-dialog {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    margin: 0; width: 100%;
  }
  #equipments_modal .modal-content, #cgu_modal .modal-content {
    border-radius: 22px 22px 0 0;
    border: none;
    max-height: 86vh;
    display: flex; flex-direction: column;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
  }
  #equipments_modal .modal-header, #cgu_modal .modal-header {
    border-bottom: 1px solid #EDECE8; padding: 16px 18px;
  }
  #equipments_modal .modal-title, #cgu_modal .modal-title {
    font-size: 17px !important; font-weight: 800; color: #1A1A1A; display: inline-block;
  }
  #equipments_modal .modal-body, #cgu_modal .modal-body {
    overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px;
  }
  #equipments_modal .modal-footer, #cgu_modal .modal-footer {
    border-top: 1px solid #EDECE8;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }
  #equipments_modal .modal-footer .btn, #cgu_modal .modal-footer .btn {
    background: #FFFFFF; color: #6B6B6B; border: 1.5px solid #E6E6E6;
    border-radius: 999px; font-size: 13.5px; font-weight: 700; padding: 10px 18px;
  }
  /* contenu injecté dans le panneau : total orange + bouton pleine largeur */
  #equipments_modal .total-price { font-size: 15px; font-weight: 700; color: #1A1A1A; }
  #equipments_modal #equipments_total_price { color: #F45000; font-weight: 800; }
  #equipments_modal .theme-btn { width: 100%; border-radius: 999px !important; margin-top: 6px; }
  #equipments_modal .auto-container { padding: 0 !important; }
  #equipments_modal h2 { font-size: 16px; }
  /* carte véhicule pendant le chargement du panneau */
  .car-block-two.ed-loading { opacity: .45; }

  /* CGU sur la page coordonnées : carte propre, case orange (accent déjà défini) */
  .ed-cgu-row {
    background: #FFFFFF; border: 1px solid #E6E6E6; border-radius: 16px;
    padding: 14px !important; margin: 4px 0 16px;
  }
  .ed-cgu-row .form-group {
    float: none !important; width: 100%; padding: 0 !important; margin: 0 0 10px; text-align: left;
  }
  .ed-cgu-row .form-group.pull-right { margin: 8px 0 0; }
  .ed-cgu-row label { display: inline; font-size: 13.5px; color: #3A3A3A; font-weight: 600; }
  .ed-cgu-row a b { color: #F45000; }
  .ed-cgu-row .theme-btn { width: 100%; border-radius: 999px !important; }

  /* Interstitiel « vérification de votre réservation » */
  .ed-interstitial { background: transparent; }
  .ed-interstitial .fa-spinner { color: #F45000; }
  .ed-interstitial .theme-btn { border-radius: 999px !important; }
}

/* Le héro de commande est un composant MOBILE : jamais affiché en desktop
   (le gabarit desktop garde son en-tête classique). */
@media only screen and (min-width: 768px) {
  .ed-order-hero { display: none; }
  .ed-resume-bar { display: none; }
  .ed-sticky-cta { display: none; }
}

@media only screen and (max-width: 767px) {

  /* --- Mon dossier (page commande) : signature + justificatifs façon app --- */
  .ed-dossier { margin: 6px 0 18px; }
  .ed-dos-title { font-size: 20px !important; font-weight: 800 !important; color: #1A1A1A; margin: 8px 0 4px; }
  .ed-dos-sub { font-size: 13px; color: #6B6B6B; line-height: 1.5; margin: 0 0 14px; }
  .ed-doc-card {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    padding: 14px;
    margin: 0 0 12px;
  }
  .ed-doc-card.ed-contract { border: 1.5px solid #F45000; }
  .ed-doc-card.ed-doc-busy { opacity: .5; pointer-events: none; }
  .ed-doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .ed-doc-head b { font-size: 14.5px; font-weight: 700; color: #1A1A1A; line-height: 1.4; }
  .ed-doc-badge {
    flex: none;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 11px; font-weight: 700;
    white-space: nowrap;
  }
  .ed-b-miss { background: #FFF6E8; color: #8A5A00; }
  .ed-b-pend { background: #EDF3FB; color: #2B5C9A; }
  .ed-b-ok   { background: #E8F3EE; color: #0F6E56; }
  .ed-b-ko   { background: #FBEBEB; color: #A32D2D; }
  .ed-doc-help { font-size: 12.5px; color: #6B6B6B; line-height: 1.5; margin: 8px 0 0; }
  .ed-doc-msg  { font-size: 12.5px; color: #A32D2D; font-weight: 600; line-height: 1.5; margin: 8px 0 0; }
  .ed-doc-note { font-size: 13px; color: #0F6E56; font-weight: 700; margin: 10px 0 0; }
  .ed-doc-acts { display: flex; gap: 10px; margin-top: 12px; }
  /* aperçu avant envoi (confirmation) */
  .ed-doc-confirm {
    border-top: 1px dashed #E6E6E6;
    margin-top: 12px; padding-top: 12px;
  }
  .ed-doc-thumbs { display: flex; gap: 8px; }
  .ed-doc-thumb {
    width: 72px; height: 72px;
    object-fit: cover;
    border-radius: 12px; border: 1px solid #E6E6E6;
    background: #F7F6F3;
  }
  .ed-doc-thumb-pdf {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
  }
  .ed-doc-cfn { font-size: 12px; color: #6B6B6B; margin: 8px 0 0; word-break: break-all; }
  /* lien discret « voir le document envoyé », en bas de carte (loin des
     boutons Photo/Fichier) */
  .ed-see-doc {
    display: block;
    background: none !important; border: none !important;
    padding: 10px 0 0 !important; margin: 6px 0 0;
    font-size: 12.5px !important; font-weight: 600;
    color: #6B6B6B !important;
    text-align: left; text-decoration: underline;
  }
  /* le gabarit force input{display:block} : nos champs fichier [hidden]
     redevenaient visibles (« Aucun fichier choisi » qui dépasse) */
  .ed-doc-acts input[type="file"] { display: none !important; }
  .ed-doc-btn {
    display: inline-block;
    border-radius: 999px;
    padding: 11px 16px;
    font-size: 13.5px; font-weight: 700;
    border: none;
    margin-top: 10px;
  }
  .ed-doc-acts .ed-doc-btn { flex: 1; margin-top: 0; }
  .ed-doc-btn-main { background: #F45000; color: #FFFFFF; }
  .ed-doc-btn-line { background: #FFFFFF; color: #F45000; border: 1.5px solid #F45000; }
  .ed-contract .ed-doc-btn { display: block; width: 100%; }

  /* Feuille de signature plein écran */
  .ed-sign-ov {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(26, 26, 26, .55);
    display: flex; align-items: flex-end;
  }
  .ed-sign-sheet {
    background: #F7F6F3;
    width: 100%;
    border-radius: 22px 22px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 92vh; overflow-y: auto;
  }
  .ed-sign-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .ed-sign-head b { font-size: 17px; font-weight: 800; color: #1A1A1A; }
  .ed-sign-x {
    background: #FFFFFF; border: 1px solid #E6E6E6; border-radius: 50%;
    width: 34px; height: 34px; font-size: 15px; color: #1A1A1A;
  }
  .ed-sign-cgv {
    display: flex; align-items: flex-start; gap: 8px;
    background: #FFFFFF; border: 1px solid #E6E6E6; border-radius: 14px;
    padding: 12px; margin: 0 0 10px;
    font-size: 13px; color: #3A3A3A; font-weight: 600; line-height: 1.4;
  }
  .ed-sign-cgv input { width: 19px; height: 19px; accent-color: #F45000; flex: none; margin-top: 1px; }
  .ed-sign-cgv a { color: #F45000; font-weight: 700; white-space: nowrap; }
  .ed-sign-hint { font-size: 12px; color: #6B6B6B; margin: 10px 0 6px; }
  .ed-sign-pad {
    display: block;
    background: #FFFFFF;
    border: 1.5px dashed #C9C9C4;
    border-radius: 14px;
    touch-action: none;   /* le doigt dessine, la page ne défile pas */
  }
  .ed-sign-acts { display: flex; gap: 10px; margin-top: 14px; }
  .ed-sign-acts .ed-doc-btn { flex: 1; margin-top: 0; }
  .ed-sign-acts .ed-doc-btn[disabled] { opacity: .5; }

  /* --- Accueil : bandeau « Ma réservation » (client connecté) --- */
  .ed-myres {
    display: flex; align-items: center; gap: 12px;
    background: #1A1A1A;
    border-radius: 18px;
    padding: 14px 16px;
    margin: 14px 16px 2px;
    text-decoration: none !important;
  }
  .ed-myres-ico { font-size: 22px; flex: none; }
  .ed-myres-ico svg { display: block; }   /* SVG charte (ex-emoji) : pas de jeu de baseline */
  .ed-myres-txt { flex: 1; min-width: 0; }
  .ed-myres-txt b { display: block; color: #FFFFFF; font-size: 15px; font-weight: 800; }
  .ed-myres-txt i { display: block; color: #C9C9C4; font-size: 12px; font-style: normal; margin-top: 2px; }
  .ed-myres-arr { color: #F45000; font-size: 26px; font-weight: 700; flex: none; }

  /* --- Tiroir : section compte en tête (Mes réservations…) --- */
  .ed-nav-account {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    margin: 0 0 14px;
    padding: 4px 14px;
  }
  .ed-nav-account .ed-nav-item { border-bottom: 1px solid #F4F4F2; }
  .ed-nav-account .ed-nav-item:last-child { border-bottom: none; }
  .ed-nav-account .ed-nav-strong { color: #F45000 !important; font-weight: 800 !important; }
  .ed-nav-account .ed-nav-exit { color: #8A8A86 !important; font-size: 14px !important; }

  /* Fil d'Ariane (« bulles » qui changent à chaque page) : bruit sur mobile —
     la barre d'étapes et les titres suffisent. */
  ul.bread-crumb { display: none !important; }

  /* --- Page de commande : héro de confirmation + jauge de progression --- */
  .ed-order-hero {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 20px;
    margin: 14px 16px 4px;
    padding: 22px 16px 16px;
    text-align: center;
  }
  .ed-oh-check {
    width: 52px; height: 52px; line-height: 52px;
    margin: 0 auto 10px;
    background: #E8F3EE; color: #0F6E56;
    border-radius: 50%;
    font-size: 26px; font-weight: 800;
  }
  .ed-oh-title { font-size: 18px; font-weight: 800; color: #1A1A1A; line-height: 1.35; margin: 0 0 10px; }
  .ed-oh-ref {
    display: inline-flex; align-items: center; gap: 10px;
    background: #F7F6F3; border: 1.5px dashed #C9C9C4; border-radius: 12px;
    padding: 10px 14px;
    font-size: 19px; font-weight: 800; letter-spacing: .5px; color: #1A1A1A;
  }
  .ed-oh-ref .ed-oh-copy { font-size: 11px; font-weight: 700; color: #F45000; letter-spacing: 0; }
  .ed-oh-ref.ed-copied { border-color: #0F6E56; }
  .ed-oh-ref.ed-copied .ed-oh-copy { color: #0F6E56; }
  .ed-oh-mail { font-size: 12.5px; color: #6B6B6B; margin: 10px 0 0; }
  .ed-oh-mail b { color: #3A3A3A; }
  .ed-oh-steps {
    display: flex; justify-content: space-between;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid #F4F4F2;
  }
  .ed-oh-steps .ed-step-item { flex: 1; text-align: center; }
  /* l'ancien titre (réf 275% + pastilles) devient redondant sous le héro */
  .ed-has-hero > .auto-container:first-of-type h3[style] { display: none !important; }
  .ed-has-hero > .auto-container:first-of-type hr { display: none !important; }

  /* --- CTA collant « prochaine action » (page de commande) --- */
  .ed-sticky-cta {
    position: fixed; left: 16px; right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
    background: #F45000; color: #FFFFFF;
    border: none; border-radius: 999px;
    padding: 15px 20px;
    font-size: 15px; font-weight: 800;
    box-shadow: 0 10px 26px rgba(244, 80, 0, .35);
  }
  body:has(.ed-sticky-cta) .main-footer { padding-bottom: 90px; }
  /* le bouton collant ne doit pas recouvrir la fin de page */
  body:has(.ed-sticky-cta) .register-section { padding-bottom: 84px; }

  /* --- Bandeau « Reprendre ma réservation » (toutes pages) --- */
  .ed-resume-bar {
    display: flex; align-items: center; gap: 8px;
    background: #1A1A1A;
    padding: 10px 14px;
  }
  .ed-resume-link { flex: 1; color: #FFFFFF !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
  .ed-resume-link b { color: #F45000; }
  .ed-resume-x { background: transparent; border: none; color: #8A8A86; font-size: 15px; padding: 4px 6px; }

  /* --- Page de commande : préparer le voyage (centres + détail véhicule) --- */
  .ed-travel { margin: 6px 0 18px; }
  .ed-center-kicker {
    font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: #F45000; margin: 0 0 6px;
  }
  .ed-c-hours { color: #8A8A86 !important; }
  .ed-c-fuel { font-size: 12.5px; color: #3A3A3A; line-height: 1.5; margin: 12px 0 0; }
  .ed-c-fuel b { font-weight: 700; }
  .ed-c-guide { display: inline-block; margin-top: 10px; color: #F45000 !important; font-size: 13.5px; font-weight: 700; }

  /* --- Centre DANS la bulle Pick-up / Drop-off --- */
  /* l'ancien lien « map » (plan PDF du centre) : remplacé par le bloc complet */
  .register-section .booking-request-params a[href*="docs/locations"] { display: none !important; }
  .ed-center-inline {
    border-top: 1px dashed #EDECE8;
    margin-top: 10px; padding-top: 10px;
  }
  .ed-ci-addr { font-size: 13.5px; color: #3A3A3A; line-height: 1.5; margin: 0 0 2px; }
  .ed-ci-hours { font-size: 12px; color: #8A8A86; margin: 0 0 2px; }
  .ed-center-inline .ed-doc-acts { margin-top: 10px; }
  .ed-ci-fuel {
    background: #F7F6F3;
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 12px;
  }
  .ed-ci-fuel-k {
    font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: #C24000; margin: 0 0 4px;
  }
  .ed-ci-fuel-t { font-size: 12.5px; color: #3A3A3A; line-height: 1.5; margin: 0; }
  .ed-ci-fuel .ed-doc-acts { margin-top: 8px; }
  .ed-ci-fuel .ed-doc-btn { margin-top: 8px; }
  .ed-ci-same { font-size: 12.5px; color: #6B6B6B; margin: 8px 0 0; }

  /* Feuille « choisir l'app d'itinéraire » (Plans / Google Maps / Waze) */
  .ed-map-sheet { text-align: center; }
  .ed-map-title { font-size: 15px; font-weight: 800; color: #1A1A1A; margin: 0 0 14px; }
  .ed-map-app {
    display: block;
    background: #FFFFFF; border: 1.5px solid #E6E6E6; border-radius: 14px;
    padding: 15px; margin: 0 0 10px;
    font-size: 15px; font-weight: 700; color: #1A1A1A !important;
    text-decoration: none !important;
  }
  .ed-map-cancel {
    display: block; width: 100%;
    background: transparent; border: none;
    padding: 12px; margin-top: 4px;
    font-size: 15px; font-weight: 700; color: #6B6B6B;
  }
  .ed-vd-card .ed-vdetail { margin-top: 8px; }
}


/* ================================================================
   Article TT (.ed-article) — habillage DESKTOP / TABLETTE (>=768px).
   Le style mobile vit plus haut dans le @media <=767px. 16/07/2026
   ================================================================ */
@media only screen and (min-width: 768px) {
  .ed-article { background: #FFFFFF; padding: 40px 0 70px; }
  .ed-article .auto-container { max-width: 920px; }
  .ed-article h2 {
    font-size: 30px; font-weight: 800; color: #1A1A1A;
    line-height: 1.25; margin: 44px 0 16px; text-transform: none;
  }
  .ed-article h3 {
    font-size: 21px; font-weight: 700; color: #1A1A1A;
    margin: 28px 0 10px; text-transform: none;
  }
  .ed-article p, .ed-article li { font-size: 17px; line-height: 1.75; color: #2A2A2A; }
  .ed-article p { margin: 0 0 15px; }
  .ed-article ul, .ed-article ol { padding-left: 24px; margin: 0 0 16px; }
  .ed-article li { margin-bottom: 8px; }
  .ed-article a { color: #F45000; font-weight: 600; }
  .ed-article strong { color: #1A1A1A; }
  .ed-article table {
    width: 100%; border: 1px solid #E6E6E6; border-radius: 12px;
    border-collapse: separate; border-spacing: 0; overflow: hidden;
    margin: 10px 0 22px;
  }
  .ed-article th, .ed-article td {
    padding: 13px 16px; font-size: 15px; line-height: 1.5;
    text-align: left; border-bottom: 1px solid #F0F0EE; vertical-align: top;
  }
  .ed-article thead th, .ed-article th { background: #F7F6F3; font-weight: 700; color: #1A1A1A; }
  .ed-article tr:last-child td { border-bottom: none; }
}


/* ================================================================
   Fiche véhicule façon app — MODALE DESKTOP (>= 768px). 16/07/2026.
   (Le panneau dépliable mobile .ed-vdetail vit dans le @media <= 767px.)
   ================================================================ */
@media only screen and (min-width: 768px) {
  .inventory-section .car-block.ed-cat-card-desk .inner-box { cursor: pointer; }

  .ed-vd-open {
    display: block; width: 100%; margin-top: 12px; padding: 9px 0;
    border: 1px solid #F45000; background: #FFFFFF; color: #F45000;
    font-weight: 700; font-size: 14px; border-radius: 8px; cursor: pointer;
    transition: background .15s, color .15s;
  }
  .ed-vd-open:hover { background: #F45000; color: #FFFFFF; }

  .ed-vmodal-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(26, 26, 26, .55); z-index: 99999;
    display: flex; align-items: center; justify-content: center; padding: 30px;
  }
  .ed-vmodal-overlay[hidden] { display: none; }

  .ed-vmodal {
    background: #FFFFFF; border-radius: 16px; max-width: 760px; width: 100%;
    max-height: 86vh; overflow: auto; position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .30); padding: 26px 32px 28px;
  }
  .ed-vmodal-close {
    position: absolute; top: 14px; right: 16px; width: 36px; height: 36px;
    border: none; border-radius: 50%; background: #F5F4F1; color: #1A1A1A;
    font-size: 22px; line-height: 1; cursor: pointer;
  }
  .ed-vmodal-close:hover { background: #F45000; color: #FFFFFF; }

  .ed-vmodal-head { display: flex; align-items: center; gap: 20px; margin: 0 0 4px; padding-right: 40px; }
  .ed-vmodal-head img { width: 230px; height: auto; border-radius: 10px; flex-shrink: 0; }
  .ed-vmodal-head h3 { font-size: 22px; font-weight: 800; color: #1A1A1A; margin: 0; line-height: 1.25; }

  .ed-vmodal .ed-vd-desc { color: #54524E; font-size: 15px; line-height: 1.6; margin: 12px 0 14px; }

  .ed-vmodal .ed-vd-facts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 6px;
  }
  .ed-vmodal .ed-vd-facts div { background: #FAF8F5; border-radius: 10px; padding: 10px 14px; }
  .ed-vmodal .ed-vd-facts span {
    display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
    color: #7A7873; margin-bottom: 3px;
  }
  .ed-vmodal .ed-vd-facts b { font-size: 15px; color: #1A1A1A; }

  .ed-vmodal .ed-vd-sec {
    color: #F45000; font-weight: 700; font-size: 13px; text-transform: uppercase;
    letter-spacing: .5px; margin: 18px 0 8px;
  }
  .ed-vmodal .ed-vd-list {
    -webkit-columns: 2; columns: 2; -webkit-column-gap: 28px; column-gap: 28px;
    padding-left: 18px; margin: 0 0 4px;
  }
  .ed-vmodal .ed-vd-list li {
    font-size: 14.5px; line-height: 1.55; color: #2A2A2A; margin-bottom: 5px;
    -webkit-column-break-inside: avoid; break-inside: avoid;
  }
  .ed-vmodal .ed-vd-load { color: #7A7873; font-size: 15px; }
}

/* ============================================================================
   PAGE PAIEMENT (booking-payment-new.phtml, /reservation/paiement) — MOBILE
   Le gabarit desktop impose une tuile orange à HAUTEUR FIXE 250px avec un prix
   en 60px, et un bloc info = IMAGE de fond à hauteur fixe 150px : sur téléphone
   les montants et le texte DÉBORDAIENT des carreaux orange. Ici : hauteur AUTO
   partout, tailles adaptées, cartes plates de la charte (arrondi 16, plat).
   NB : les règles .payment-modes .tab-btns plus haut visent un markup qui
   n'existe pas sur cette page (inertes, conservées telles quelles).
   ============================================================================ */
@media only screen and (max-width: 767px) {
  .payment-modes .payment-type-container { padding: 8px 0 4px; }
  .payment-modes .payment-type-button-container,
  .payment-modes .payment-type-button-container:hover {
    height: auto; min-height: 0;
    width: 100%; max-width: 100%;
    margin: 0;
    background: #F45000;
    border: none;
    border-radius: 16px;
    box-shadow: none;
    -webkit-transform: none; transform: none;
    transition: none;
  }
  .payment-modes .payment-type-button-container .payment-type-button {
    padding: 18px 16px;
  }
  .payment-modes .payment-type-container .payment-type-button-top {
    font-size: 16px; letter-spacing: 0; color: #FFFFFF; line-height: 1.3;
  }
  .payment-modes .payment-type-container .payment-type-button hr {
    width: 100%; height: 1px; background: rgba(0,0,0,0.22); margin: 10px auto;
  }
  .payment-modes .payment-type-container .payment-type-button-mid {
    font-size: 15px; letter-spacing: 0; margin: 2px auto 0;
    color: rgba(255,255,255,0.8);
    -webkit-text-decoration-color: rgba(255,255,255,0.8);
    text-decoration-color: rgba(255,255,255,0.8);
  }
  /* Prix : 60px desktop → 34px, hauteur libre ; l'inline margin-top:40px du
     gabarit (variante sans prix barré) créait un grand vide → neutralisé. */
  .payment-modes .payment-type-container .payment-type-button-bot {
    font-size: 34px; letter-spacing: -0.5px; line-height: 1.15;
    margin: 4px auto 0 !important;
  }
  .payment-modes .payment-type-container .payment-type-button-two {
    font-size: 16px; letter-spacing: 0; line-height: 1.45; margin: 8px auto 0;
  }
  /* Bloc « information » : image de fond à hauteur fixe → carte plate qui
     grandit avec son texte (l'image orange-box-black-border.png est retirée). */
  .payment-modes .payment-type-informations {
    background: #FFF6F1;
    border: 1.5px solid #F45000;
    border-radius: 12px;
    height: auto; min-height: 0;
    margin: 14px auto;
  }
  .payment-modes .payment-type-informations p {
    padding: 12px 14px; font-size: 13px; line-height: 1.5; letter-spacing: 0;
    font-weight: 600; color: #1A1A1A;
  }
  .payment-modes .payment-type-checkbox {
    font-size: 12.5px; line-height: 1.45; letter-spacing: 0;
    font-weight: 600; color: #3A3A3A;
    background-size: 20px auto; padding-left: 28px; min-height: 24px;
  }
  /* Séparateur « OU » entre les deux options : compact et centré */
  .payment-modes .payment-types-separator { margin: 6px auto; }
  .payment-modes .payment-types-separator img { max-width: 90px; height: auto; }
}


/* ================================================================
   Topbar PREMIUM (retour Filipe 16/07) : pilules rondes, devise en
   vrais boutons, « Mon compte » en bouton, téléphone raffiné.
   ================================================================ */
@media only screen and (min-width: 768px) {
  /* Pilules de langue : rondes, aériennes */
  .ed-lng-pill {
    padding: 7px 14px; border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .22);
    font-size: 12px; letter-spacing: .8px;
  }
  .ed-lng-pill:hover { background: rgba(255, 255, 255, .08); border-color: #F45000; color: #FFFFFF; }
  .ed-lng-pill.ed-on { background: #F45000; border-color: #F45000; }

  /* Devise : bouton segmenté plein, rond */
  .ed-cur-seg {
    border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .07); margin-left: 10px;
  }
  .ed-cur-seg a { padding: 7px 16px; font-size: 12px; letter-spacing: .5px; }
  .ed-cur-seg a + a { border-left: 1.5px solid rgba(255, 255, 255, .16); }
  .ed-cur-seg a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .10); }
  .ed-cur-seg a.ed-on, .ed-cur-seg a.ed-on:hover { background: #F45000; color: #FFFFFF; }

  /* Téléphone & horaires : discrets et propres */
  .main-header .top-left { gap: 22px; }
  .main-header .top-left .phone-opening {
    font-size: 13px; color: #C9C7C3; letter-spacing: .2px;
  }
  .main-header .top-left .phone-opening a { font-size: 16px !important; font-weight: 700 !important; }
  .main-header .top-left .phone-opening .icon { color: #F45000; }
  .main-header .top-left .opening-hours,
  .main-header .top-left .phone-opening + * { font-size: 13px; color: #C9C7C3; }

  /* « Mon compte » : un vrai bouton */
  .main-header .top-right .dropdown-option li.account > a.dropdown-toggle {
    display: inline-flex; align-items: center;
    padding: 8px 18px !important; border: 1.5px solid rgba(255, 255, 255, .28) !important;
    border-radius: 999px !important; background: rgba(255, 255, 255, .07) !important;
    color: #FFFFFF !important; font-weight: 700; font-size: 12.5px; letter-spacing: .5px;
    line-height: 1 !important; transition: background .15s, border-color .15s;
  }
  .main-header .top-right .dropdown-option li.account > a.dropdown-toggle:hover {
    background: #F45000 !important; border-color: #F45000 !important; color: #FFFFFF !important;
  }
  .main-header .top-right .dropdown-option li.account > a .icon { color: #F45000; margin-right: 2px; }
  .main-header .top-right .dropdown-option li.account > a:hover .icon { color: #FFFFFF; }

  /* Lien « Déconnexion » à côté du bouton compte */
  .main-header .top-right .sell-car { font-size: 12.5px; color: #C9C7C3; }
  .main-header .top-right .sell-car:hover { color: #F45000; }
}

/* ============================================================================
   TUNNEL ÉTAPE 3 (Coordonnées) — récap véhicule : UN SEUL cadre.
   Avant : la photo avait sa propre bordure (#f0f0f0), posée dans la carte
   .inner-box (bord #E6E6E6, arrondi 16), elle-même encadrée par
   .booking-request-params → trois cadres emboîtés. On ne garde que la carte.
   ============================================================================ */
@media only screen and (max-width: 767px) {
  .booking-section .booking-request-params {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .booking-section .image.booking-informations { border: none !important; }
  /* L'enveloppe grise du récap (fond #fafafa, bord #eee, coins carrés) :
     décadrée — les cartes intérieures (véhicule .inner-box…) suffisent. */
  .booking-section .booking-infos {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ============================================================================
   TOPBAR V3 (16/07 soir) — RESTAURATION du bloc « V2 » perdu lors d'un
   déploiement croisé (deux sessions éditaient ce fichier : l'append V2 topbar
   a été écrasé par un déploiement parallèle ; spec reconstituée depuis la
   mémoire projet). Corrige : pilule active orange-sur-orange (texte invisible
   sur la home), .phone-opening en position:fixed du thème qui RECOUVRAIT les
   pilules, .top-left sans flex. Sélecteurs DOUBLÉS .main-header/.header-top
   (la topbar vit dans .header-top sur la home, .main-header sur les pages).
   ============================================================================ */
@media only screen and (min-width: 768px) {
  .main-header .top-left, .header-top .top-left {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    gap: 22px;
  }
  /* le thème met .phone-opening en position:fixed → il retombe sur x=0 et
     chevauche les pilules de langue */
  .main-header .phone-opening, .header-top .phone-opening {
    position: static !important;
  }
  .main-header .ed-topbar, .header-top .ed-topbar {
    display: -webkit-inline-flex; display: inline-flex;
    -webkit-align-items: center; align-items: center;
    gap: 6px;
  }
  .main-header .ed-lng-pill, .header-top .ed-lng-pill {
    display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF !important;   /* la home met les liens actifs en orange → invisible sur pilule orange */
    text-decoration: none !important;
  }
  .main-header .ed-lng-pill.ed-on, .header-top .ed-lng-pill.ed-on {
    background: #F45000; border-color: #F45000; color: #FFFFFF !important;
  }
  .main-header .ed-cur-seg, .header-top .ed-cur-seg {
    display: inline-flex; overflow: hidden;
  }
  .main-header .ed-cur-seg a, .header-top .ed-cur-seg a {
    color: #FFFFFF !important; text-decoration: none !important;
  }
}

/* ---------- Tiroir mobile : segment devise €/$ sous les pastilles langue ----------
   (la topbar est masquée ≤767px : sans ceci, un client mobile n'a AUCUN accès
   au choix de devise — reste-à-faire n°1 du chantier devise, soldé ici). */
@media only screen and (max-width: 767px) {
  .ed-nav-langs { -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }
  .ed-nav-langs .ed-lang-cur {
    display: inline-flex;
    border: 1.5px solid #E6E6E6; border-radius: 999px;
    overflow: hidden; margin-left: 4px;
  }
  .ed-nav-langs .ed-cur {
    padding: 8px 14px; font-size: 12.5px; font-weight: 700;
    color: #6B6B6B; text-decoration: none;
  }
  .ed-nav-langs .ed-cur + .ed-cur { border-left: 1.5px solid #E6E6E6; }
  .ed-nav-langs .ed-cur-on { background: #F45000; color: #FFFFFF; }
}