/* ============================================================
   modern.css — Couche de modernisation "Sobre & premium"
   Chargée APRES le CSS WebSite X5 : surcharge le visuel sans
   toucher au contenu ni à la structure générée.
   Palette : bleu nuit / gris / blanc — polices système.
   ============================================================ */

:root{
  --ta-navy:   #0F172A;   /* bleu nuit (principal) */
  --ta-navy-2: #1E293B;   /* bleu nuit clair */
  --ta-blue:   #2563EB;   /* accent discret */
  --ta-blue-d: #1D4ED8;
  --ta-grey:   #64748B;   /* gris texte secondaire */
  --ta-text:   #1F2937;   /* texte principal */
  --ta-light:  #F8FAFC;   /* fond très clair */
  --ta-border: #E2E8F0;   /* bordures */
  --ta-radius: 12px;
  --ta-shadow: 0 2px 12px rgba(15,23,42,.08);
  --ta-shadow-lg: 0 8px 28px rgba(15,23,42,.14);
  --ta-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Typographie ---------- */
body, h1,h2,h3,h4,h5,h6, p, a, li, td, th, span, label,
input, select, textarea, button,
.text-inner, .text-inner *, #imPgTitle, .label, .slide-description{
  font-family: var(--ta-font) !important;
}
body{
  color: var(--ta-text);
  background: var(--ta-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}
html{ scroll-behavior: smooth; }
::selection{ background: var(--ta-blue); color:#fff; }

/* ---------- Titres ---------- */
#imPgTitle, h1{
  color: var(--ta-navy) !important;
  font-weight: 700 !important;
  font-size: 1.9rem !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  margin: .2em 0 .4em !important;
}
h2, .imHeading2{
  color: var(--ta-navy) !important;
  font-weight: 600 !important;
  font-size: 1.35rem !important;
  letter-spacing: -.01em !important;
  margin-top: 1.2em !important;
}
h3{ color: var(--ta-navy-2) !important; font-weight:600 !important; }

/* ---------- Contenu : largeur de lecture & respiration ---------- */
#imContent{ background: transparent; }
#imContent .text-inner{ line-height: 1.65; }
#imContent ul{ padding-left: 1.2em; }
#imContent li{ margin: .25em 0; }

/* Filets discrets */
hr{ border:none !important; height:1px !important; background: var(--ta-border) !important; margin:1.4em 0 !important; }

/* ---------- Liens de contenu ---------- */
#imContent a:not(.cta-btn):not(.label){
  color: var(--ta-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
#imContent a:not(.cta-btn):not(.label):hover{
  color: var(--ta-navy);
  border-bottom-color: var(--ta-blue);
}

/* ---------- Boutons / CTA ---------- */
.cta-btn, .cta-btn-modal, button.cta-btn{
  display:inline-block !important;
  background: var(--ta-navy) !important;
  color:#fff !important;
  border:none !important;
  border-radius: 10px !important;
  padding: 14px 30px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing:.01em;
  cursor:pointer;
  text-decoration:none !important;
  box-shadow: var(--ta-shadow) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.cta-btn:hover, .cta-btn-modal:hover, button.cta-btn:hover{
  background: var(--ta-blue) !important;
  transform: translateY(-2px);
  box-shadow: var(--ta-shadow-lg) !important;
}

/* CTA contextuels (fin d'article + liens "Faire un devis") */
.seo-cta{
  background:#fff !important;
  border:1px solid var(--ta-border) !important;
  border-left:4px solid var(--ta-blue) !important;
  border-radius: var(--ta-radius) !important;
  padding:1.1em 1.3em !important;
  box-shadow: var(--ta-shadow);
}
#imContent a[href="devis-ou-souscription.html"]{ font-weight:600; }

/* ---------- Tableaux (tarifs) ---------- */
.tableau{
  border:none !important;
  border-radius: var(--ta-radius);
  overflow:hidden;
  box-shadow: var(--ta-shadow);
  margin: 1em 0;
}
.tableau th{
  background: var(--ta-navy) !important;
  color:#fff !important;
  border-color: var(--ta-navy) !important;
  font-weight:600 !important;
}
.tableau td{ border-color: var(--ta-border) !important; }
.tableau tbody tr:nth-child(even) td{ background:#f8fafc; }
.tableau tbody tr:hover td{ background:#eef2ff; }

/* ---------- Menu (header) ---------- */
#imHeader_imMenuObject_04_container .label{
  font-weight:600 !important;
  letter-spacing:.01em;
  transition: opacity .15s ease;
}
#imHeader_imMenuObject_04_container .label:hover{ opacity:.8; }

/* ---------- Hero / Swiper : texte plus lisible ---------- */
.swiper-slide .slide-description{
  font-weight:600 !important;
  letter-spacing:-.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* ---------- Pied de page premium ---------- */
#imFooter{ background: var(--ta-navy) !important; }
#imFooter, #imFooter span, #imFooter a{ color:#cbd5e1 !important; }
#imFooter a{ color:#fff !important; text-decoration:none; }
#imFooter a:hover{ color:#fff !important; text-decoration:underline; }

/* ---------- Formulaires (contact / espace pro) ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
select, textarea{
  border:1px solid var(--ta-border) !important;
  border-radius:8px !important;
  padding:10px 12px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none !important;
  border-color: var(--ta-blue) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
}

/* ---------- Iframes (tarificateur / PDF) ---------- */
iframe{ border-radius: var(--ta-radius); }

/* ---------- Images : coins légèrement arrondis ---------- */
#imContent img{ border-radius: 8px; }

/* ---------- Accessibilité : focus visible ---------- */
a:focus-visible, button:focus-visible{
  outline: 3px solid rgba(37,99,235,.45);
  outline-offset: 2px;
}

/* ---------- Mobile : un peu plus d'air ---------- */
@media (max-width: 768px){
  #imPgTitle, h1{ font-size: 1.55rem !important; }
  h2, .imHeading2{ font-size: 1.2rem !important; }
  .cta-btn{ width:100%; text-align:center; }
}

/* ============================================================
   v2 — Modernisation plus marquée (en-tête, cartes, hero)
   ============================================================ */

/* ---------- En-tête : bandeau bleu nuit + profondeur ---------- */
[style*="rgb(58, 92, 170)"]{ background: var(--ta-navy) !important; }
#imHeader{ box-shadow: 0 2px 16px rgba(15,23,42,.10); position:relative; z-index:20; background:#fff; }
#imHeader_pluginAppObj_03 svg path{ fill: var(--ta-navy) !important; transition: fill .15s ease; }
#imHeader_pluginAppObj_03 a:hover svg path{ fill: var(--ta-blue) !important; }
/* Menu : soulignement accent au survol */
#imHeader_imMenuObject_04_container .label{ position:relative; color: var(--ta-navy) !important; }
#imHeader_imMenuObject_04_container .label::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background: var(--ta-blue); transform: scaleX(0); transform-origin:left; transition: transform .2s ease;
}
#imHeader_imMenuObject_04_container li:hover .label::after{ transform: scaleX(1); }

/* ---------- Hero / Swiper : arrondi, ombre, dégradé lisibilité ---------- */
#pluginAppObj_02, #swiper_pluginAppObj_02, .swiper-container.main{
  border-radius: 16px !important; overflow:hidden !important; box-shadow: var(--ta-shadow-lg);
}
.swiper-slide.described{ position:relative; }
.swiper-slide.described::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(15,23,42,0) 45%, rgba(15,23,42,.6) 100%);
}
.swiper-slide .slide-content-wrapper{ position:relative; z-index:2; }
.swiper-slide .slide-description{ font-size:1.15rem !important; }

/* ---------- Blocs "feature" transformés en cartes (icône + texte) ---------- */
#imContent .text-inner:has(img.fleft){
  background:#fff;
  border:1px solid var(--ta-border);
  border-radius: var(--ta-radius);
  padding: 1.3em 1.4em !important;
  box-shadow: var(--ta-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  height:100%;
}
#imContent .text-inner:has(img.fleft):hover{
  transform: translateY(-4px);
  box-shadow: var(--ta-shadow-lg);
}
#imContent .text-inner:has(img.fleft) h2,
#imContent .text-inner:has(img.fleft) h3{ margin-top:.2em !important; }
#imContent img.fleft{ border-radius:8px; }

/* ---------- Plus d'air entre les sections ---------- */
#imContent > .imPageRow{ min-height: 14px; }
#imContent .text-inner{ padding: 2px 0; }

/* ---------- Carte générique pour les gros blocs de texte ---------- */
#imContent .imHTMLObject{ line-height:1.7; }

/* ---------- Liens "boutons" secondaires (style pilule) ---------- */
.seo-cta a, #imContent a[href="devis-ou-souscription.html"]:not(.cta-btn){
  font-weight:600;
}

/* ---------- Masquer les icônes réseaux sociaux de l'en-tête ---------- */
#imHeader_pluginAppObj_03_wrapper,
#imHeader_pluginAppObj_03{ display:none !important; }

/* ============================================================
   Menu mobile (hamburger) — vrai tiroir moderne
   ============================================================ */
@media (max-width: 768px){
  /* Overlay sombre derrière le tiroir */
  #imHeader_imMenuObject_04-menu-opened .hamburger-menu-background{
    background: rgba(15,23,42,.55) !important;
  }
  /* Le tiroir : pleine hauteur, bleu nuit, à droite */
  #imHeader_imMenuObject_04-menu-opened #imHeader_imMenuObject_04_container-menu-opened,
  #imHeader_imMenuObject_04-menu-opened #imHeader_imMenuObject_04_container-menu-opened ul{
    background: var(--ta-navy) !important;
    width: 84vw !important; max-width: 330px !important;
    min-height: 100vh !important;
    box-shadow: -12px 0 40px rgba(0,0,0,.35) !important;
  }
  #imHeader_imMenuObject_04-menu-opened #imHeader_imMenuObject_04_container-menu-opened ul{
    padding: 60px 0 24px !important; box-shadow:none !important;
  }
  /* Items pleine largeur, empilés */
  #imHeader_imMenuObject_04-menu-opened li{
    display: block !important; width: 100% !important; margin: 0 !important;
  }
  #imHeader_imMenuObject_04-menu-opened .label-wrapper,
  #imHeader_imMenuObject_04-menu-opened ul > li > .label-wrapper,
  #imHeader_imMenuObject_04-menu-opened ul ul > li > .label-wrapper{
    width: 100% !important; height: auto !important; padding: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
  }
  #imHeader_imMenuObject_04-menu-opened .label-inner-wrapper{ display:block !important; height:auto !important; }
  #imHeader_imMenuObject_04-menu-opened .label,
  #imHeader_imMenuObject_04-menu-opened .label-wrapper button,
  #imHeader_imMenuObject_04-menu-opened ul > li > .label-wrapper .label{
    display: block !important; width: 100% !important; height: auto !important;
    color: #fff !important; font-size: 1.08rem !important; font-weight: 600 !important;
    text-align: left !important; padding: 16px 26px !important; letter-spacing:.01em;
  }
  #imHeader_imMenuObject_04-menu-opened .label:hover{ background: rgba(255,255,255,.08) !important; }
  #imHeader_imMenuObject_04-menu-opened .label::after{ display:none !important; }
  /* Bouton fermer (X) en blanc, en haut à droite du tiroir */
  #imHeader_imMenuObject_04-menu-opened .hamburger-menu-close-button{
    color:#fff !important; position:absolute !important; top:10px; right:12px; z-index:3;
  }
  /* Bouton hamburger plus net */
  .hamburger-button .hamburger-bar{ background: var(--ta-navy) !important; }
}

/* ============================================================
   Mobile : suppression barre bleue inutile + bouton "MENU" texte
   ============================================================ */
@media (max-width: 768px){
  /* 1. Masquer la barre bleue du haut (table 981px qui ne sert à rien) */
  #imHeader_imTableObject_02_wrapper{ display:none !important; }

  /* 2. Hamburger -> bouton "☰ MENU" texte, en pilule bleu nuit */
  .hamburger-button{
    width:auto !important; height:auto !important;
    display:inline-flex !important; align-items:center !important;
    background: var(--ta-navy) !important;
    color:#fff !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    box-shadow: var(--ta-shadow) !important;
    font-weight:700; font-size:.95rem; letter-spacing:.05em;
  }
  .hamburger-button .hamburger-bar{ display:none !important; }
  .hamburger-button::before{ content:"\2630"; font-size:1.25rem; line-height:1; margin-right:9px; }
  .hamburger-button::after{ content:"MENU"; }
  .hamburger-button:hover{ background: var(--ta-blue) !important; }
}

/* ---------- Retirer l'image de fond du gabarit ---------- */
#imPageExtContainer{
  background-image: none !important;
  background-color: var(--ta-light) !important;
}

/* ============================================================
   Hero statique (remplace le carrousel)
   ============================================================ */
.ta-hero{
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #1D4ED8 150%);
  border-radius: 18px;
  padding: 52px 28px;
  text-align: center;
  color: #fff;
  box-shadow: var(--ta-shadow-lg);
  position: relative; overflow: hidden;
}
.ta-hero-inner{ max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.ta-hero-eyebrow{
  text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700;
  color: #93c5fd; margin: 0 0 .6em;
}
.ta-hero-title{
  color: #fff !important; font-size: 2.05rem !important; font-weight: 800 !important;
  line-height: 1.15 !important; letter-spacing: -.02em; margin: 0 0 .4em !important;
}
.ta-hero-sub{ color: #cbd5e1; font-size: 1.12rem; margin: 0 0 1.6em; }
/* Bouton du hero : blanc sur fond bleu nuit (contraste max) */
.ta-hero .cta-btn{
  background: #fff !important; color: var(--ta-navy) !important;
  font-size: 1.05rem !important; padding: 15px 32px !important;
}
.ta-hero .cta-btn:hover{ background: #e2e8f0 !important; }
/* Liens véhicules (pastilles) */
.ta-hero-links{ margin-top: 1.6em; display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.ta-hero-links a{
  color: #fff !important; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  padding: 8px 16px; font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.ta-hero-links a:hover{ background: rgba(255,255,255,.22); transform: translateY(-1px); }
@media (max-width: 600px){
  .ta-hero{ padding: 38px 18px; border-radius: 14px; }
  .ta-hero-title{ font-size: 1.55rem !important; }
  .ta-hero-sub{ font-size: 1rem; }
}

/* ---------- Masquer le bandeau bleu du haut sur TOUTES les pages ---------- */
#imHeader_imTableObject_02_wrapper{ display:none !important; }