/* ==========================================================================
   GROUPE LTL — en-tete, pied de page et carrousel
   ==========================================================================
   PRINCIPE : cette feuille ne stylise que les composants dont le balisage
   m'appartient (prefixe lx-). Elle ne surcharge aucune classe du gabarit,
   a une seule exception documentee plus bas.
   Palette : orange #ff9600 · marine #123A5E
   ========================================================================== */

:root{
  --lx-orange:#ff9600;
  --lx-orange-fonce:#e08400;
  --lx-marine:#123A5E;
  --lx-marine-nuit:#0d2b46;
  --lx-encre:#1d2733;
  --lx-gris:#6b7681;
  --lx-pale:#f7f9fb;
  --lx-bord:#e6ebf0;
}

/* Meme largeur que le .container de Bootstrap, pour un alignement exact */
.lx-conteneur{ max-width:1170px; margin:0 auto; padding:0 15px; }

/* ==========================================================================
   EN-TETE
   ========================================================================== */
.lx-entete{ position:relative; z-index:900; }

.lx-bandeau{ background:var(--lx-marine); color:rgba(255,255,255,.72); font-size:13px; }
.lx-bandeau-int{ display:flex; justify-content:space-between; align-items:center; height:40px; }
.lx-bandeau a{ color:rgba(255,255,255,.75); text-decoration:none; transition:color .16s ease; }
.lx-bandeau a:hover{ color:var(--lx-orange); }
.lx-bandeau-gauche a{ margin-right:22px; }
.lx-bandeau-droite{ display:flex; align-items:center; gap:20px; }
.lx-bandeau i{ opacity:.7; margin-right:5px; }
.lx-pastille-vive{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#3ddc84; margin-right:6px; vertical-align:middle;
  animation:lx-pulse 2.4s infinite;
}
@keyframes lx-pulse{
  0%{ box-shadow:0 0 0 0 rgba(61,220,132,.55); }
  70%{ box-shadow:0 0 0 7px rgba(61,220,132,0); }
  100%{ box-shadow:0 0 0 0 rgba(61,220,132,0); }
}
.lx-lien-portail{
  background:rgba(255,255,255,.10); padding:5px 14px; border-radius:20px;
  transition:background-color .16s ease;
}
.lx-lien-portail:hover{ background:rgba(255,150,0,.22); }

.lx-barre{ background:#fff; border-bottom:1px solid var(--lx-bord); }
.lx-barre.lx-colle{
  position:fixed; top:0; left:0; right:0; z-index:950;
  box-shadow:0 6px 26px rgba(18,58,94,.13); animation:lx-descend .3s ease;
}
@keyframes lx-descend{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
.lx-barre-int{ display:flex; align-items:center; justify-content:space-between; height:82px; }
.lx-barre.lx-colle .lx-barre-int{ height:66px; }
.lx-logo img{ height:46px; width:auto; display:block; transition:height .25s ease; }
.lx-barre.lx-colle .lx-logo img{ height:38px; }

.lx-nav{ display:flex; align-items:center; gap:26px; }
.lx-menu{ display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:2px; }
.lx-menu > li{ position:relative; }
.lx-menu > li > a{
  display:block; padding:12px 15px; color:var(--lx-encre); text-decoration:none;
  font-size:15px; font-weight:600; border-radius:6px;
  transition:color .16s ease, background-color .16s ease;
}
.lx-menu > li > a:hover{ color:var(--lx-orange); background:var(--lx-pale); }
.lx-menu > li.lx-actif > a{ color:var(--lx-orange); }
.lx-menu > li.lx-actif > a:after{
  content:""; display:block; height:3px; width:22px; border-radius:2px;
  background:var(--lx-orange); margin:7px auto -4px;
}
.lx-menu i.fa-angle-down{ font-size:13px; margin-left:5px; opacity:.55; }

.lx-sous-menu{
  position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:330px; background:#fff; border-radius:12px; padding:10px;
  box-shadow:0 22px 60px rgba(18,58,94,.18); border:1px solid var(--lx-bord);
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.lx-sous-menu:before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
.lx-deroulant:hover .lx-sous-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.lx-sous-menu a{ display:block; padding:11px 14px; border-radius:8px; text-decoration:none; transition:background-color .15s ease; }
.lx-sous-menu a:hover{ background:var(--lx-pale); }
.lx-sous-menu strong{ display:block; color:var(--lx-encre); font-size:14.5px; font-weight:600; }
.lx-sous-menu span{ display:block; color:var(--lx-gris); font-size:12.5px; margin-top:2px; }
.lx-sous-menu a:hover strong{ color:var(--lx-orange); }

.lx-cta{
  display:inline-block; background:var(--lx-orange); color:#fff !important; text-decoration:none;
  font-size:14.5px; font-weight:600; padding:12px 22px; border-radius:6px; white-space:nowrap;
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lx-cta:hover{
  background:var(--lx-orange-fonce); transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(255,150,0,.34); color:#fff !important;
}

.lx-burger{ display:none; background:none; border:0; padding:10px; cursor:pointer; width:44px; height:44px; }
.lx-burger span{
  display:block; height:2px; width:22px; background:var(--lx-encre); border-radius:2px;
  margin:5px auto; transition:transform .25s ease, opacity .2s ease;
}
.lx-burger.lx-ouvert span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.lx-burger.lx-ouvert span:nth-child(2){ opacity:0; }
.lx-burger.lx-ouvert span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.lx-mobile-seul{ display:none; }

/* ==========================================================================
   CARROUSEL
   Les diapositives sont empilees dans une meme cellule de grille : le
   conteneur prend la hauteur de la plus haute et rien ne se chevauche.
   ========================================================================== */
.lx-carrousel{
  position:relative; background-color:#eef1f4;
  background-size:cover; background-position:center; overflow:hidden;
}
.lx-carrousel:before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.80) 46%,rgba(255,255,255,.44) 100%);
}
.lx-diapos{ position:relative; z-index:2; display:grid; }
.lx-diapo{
  grid-area:1 / 1;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s ease, visibility .5s;
}
.lx-diapo.lx-visible{ opacity:1; visibility:visible; pointer-events:auto; }

.lx-diapo-int{
  display:flex; align-items:center; gap:48px;
  padding:64px 15px; min-height:420px; width:100%;
}
.lx-diapo-texte{ flex:1 1 46%; max-width:520px; }
.lx-diapo-texte h2{ font-size:38px; line-height:1.14; margin:0 0 16px; color:var(--lx-encre); font-weight:600; }
.lx-diapo-accroche{ font-size:16.5px; line-height:1.7; color:#4a5563; margin:0 0 18px; }
.lx-diapo-note{ font-size:14px; line-height:1.65; color:var(--lx-gris); margin:0 0 22px; }
.lx-diapo-points{
  list-style:none; padding:0; margin:0 0 26px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 22px;
}
.lx-diapo-points li{ position:relative; padding-left:25px; font-size:15px; color:#3a4653; font-weight:500; }
.lx-diapo-points li:before{
  content:""; position:absolute; left:2px; top:7px; width:10px; height:6px;
  border-left:2px solid var(--lx-orange); border-bottom:2px solid var(--lx-orange);
  transform:rotate(-45deg);
}
.lx-diapo-bouton{ font-size:15px; padding:13px 28px; }
.lx-diapo-image{ flex:1 1 54%; position:relative; text-align:center; }
.lx-diapo-image img{ max-width:100%; max-height:320px; width:auto; height:auto; display:inline-block; }
.lx-image-maquette{ border-radius:8px; box-shadow:0 18px 46px rgba(18,58,94,.20); }

.lx-pastille-prix{
  position:absolute; left:4%; bottom:8%;
  width:112px; height:112px; border-radius:50%; background:var(--lx-orange); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow:0 10px 28px rgba(255,150,0,.38); line-height:1.25;
}
.lx-pastille-prix em{ font-style:normal; font-size:10.5px; opacity:.92; padding:0 8px; }
.lx-pastille-prix strong{ font-size:26px; font-weight:700; margin:1px 0; }

.lx-fleche{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.86); color:var(--lx-marine); font-size:22px; line-height:1;
  cursor:pointer; box-shadow:0 4px 16px rgba(18,58,94,.16);
  opacity:0; transition:opacity .25s ease, background-color .18s ease;
}
.lx-carrousel:hover .lx-fleche,
.lx-fleche:focus{ opacity:1; }
.lx-fleche:hover{ background:var(--lx-orange); color:#fff; }
.lx-fleche-prec{ left:18px; }
.lx-fleche-suiv{ right:18px; }

.lx-puces{
  position:absolute; left:0; right:0; bottom:20px; z-index:5;
  display:flex; justify-content:center; gap:9px;
}
.lx-puce{
  width:10px; height:10px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(18,58,94,.26); transition:background-color .2s ease, width .2s ease;
}
.lx-puce.lx-active{ background:var(--lx-orange); width:26px; border-radius:5px; }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.lx-pied{ background:var(--lx-marine); color:rgba(255,255,255,.66); padding:60px 0 0; font-size:14px; }
.lx-pied-grille{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:44px; }
.lx-pied h4{
  color:#fff; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.4px; margin:0 0 18px;
}
.lx-pied ul{ list-style:none; margin:0; padding:0; }
.lx-pied li{ margin-bottom:10px; }
.lx-pied a{ color:rgba(255,255,255,.66); text-decoration:none; transition:color .16s ease; }
.lx-pied a:hover{ color:var(--lx-orange); }
.lx-pied p{ line-height:1.75; margin:0 0 18px; }
.lx-pied-marque{ padding-right:20px; }
.lx-pied-logo{ height:42px; width:auto; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.9; }
.lx-permis{ display:flex; flex-wrap:wrap; gap:8px; }
.lx-permis span{
  background:rgba(255,255,255,.09); border-radius:20px; padding:6px 14px;
  font-size:11.5px; letter-spacing:.6px; color:rgba(255,255,255,.82);
}
.lx-pied-contact i{ width:18px; opacity:.6; }
.lx-pied-social{ margin-top:18px; }
.lx-pied-social a{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; background:rgba(255,255,255,.09); transition:background-color .18s ease;
}
.lx-pied-social a:hover{ background:var(--lx-orange); color:#fff; }
.lx-logo-bsp{ height:56px; width:auto; margin-top:20px; opacity:.75; }
.lx-pied-bas{
  border-top:1px solid rgba(255,255,255,.10); padding:20px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px; color:rgba(255,255,255,.45);
}
.lx-paiements img{ height:20px; width:auto; margin-left:8px; vertical-align:middle; opacity:.7; }

/* ==========================================================================
   GRILLE A HAUTEURS EGALES  (classe posee par moi dans mes propres blocs)
   ========================================================================== */
.ltl-rangee-egale{ display:flex; flex-wrap:wrap; }
.ltl-rangee-egale > [class*="col-"]{ display:flex; flex-direction:column; float:none; }
.ltl-rangee-egale > [class*="col-"] > *{ flex:1 1 auto; }
.ltl-rangee-egale:before,
.ltl-rangee-egale:after{ display:none !important; }

/* ==========================================================================
   UNIQUE SURCHARGE DU GABARIT
   Les tuiles de services sont des colonnes flottantes. A hauteurs inegales,
   elles s'accrochent a leurs voisines et la grille se decale. Correctif
   limite aux largeurs ou les colonnes se cotoient reellement.
   ========================================================================== */
/* Le gabarit fixe #header a 600px de haut avec un fond gris, hauteur prevue
   pour son ancien carrousel. Nos contenus etant plus courts, le reliquat
   apparait en bande vide. Le theme lui-meme passe en height:auto sur mobile ;
   on fait de meme sur grand ecran. */
#header{ height:auto !important; }

@media (min-width:768px){
  #services .row{ display:flex; flex-wrap:wrap; }
  #services .row:before,
  #services .row:after{ display:none !important; }
  #services .row > [class*="col-"]{ float:none; }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width:1100px){
  .lx-menu > li > a{ padding:12px 11px; font-size:14px; }
  .lx-nav{ gap:16px; }
}
@media (max-width:991px){
  .lx-burger{ display:block; }
  .lx-masque-mobile{ display:none; }
  .lx-barre-int{ height:70px; position:relative; }
  .lx-nav{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:12px 24px 24px;
    border-bottom:1px solid var(--lx-bord); box-shadow:0 20px 40px rgba(18,58,94,.14);
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .3s ease, opacity .25s ease, visibility .25s;
  }
  .lx-nav.lx-ouvert{ max-height:80vh; overflow-y:auto; opacity:1; visibility:visible; }
  .lx-menu{ flex-direction:column; align-items:stretch; gap:0; }
  .lx-menu > li > a{ padding:15px 4px; border-bottom:1px solid var(--lx-pale); border-radius:0; }
  .lx-menu > li.lx-actif > a:after{ display:none; }
  .lx-sous-menu{
    position:static; transform:none; opacity:1; visibility:visible; min-width:0;
    box-shadow:none; border:0; padding:0 0 8px 14px; background:transparent;
  }
  .lx-sous-menu a{ padding:10px 12px; }
  .lx-sous-menu span{ display:none; }
  .lx-mobile-seul{ display:block; }
  .lx-cta{ display:block; text-align:center; margin-top:16px; padding:14px; }

  .lx-diapo-int{ flex-direction:column; text-align:center; gap:30px; padding:48px 15px; min-height:0; }
  .lx-diapo-texte{ max-width:none; flex:none; }
  .lx-diapo-texte h2{ font-size:29px; }
  .lx-diapo-points{ display:inline-grid; text-align:left; }
  .lx-diapo-image{ flex:none; width:100%; }
  .lx-diapo-image img{ max-height:210px; }
  .lx-pastille-prix{ left:auto; right:4%; bottom:auto; top:0; width:86px; height:86px; }
  .lx-fleche{ display:none; }

  .lx-pied-grille{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:639px){
  .lx-bandeau-int{ height:auto; padding:8px 0; flex-direction:column; gap:6px; font-size:12px; }
  .lx-bandeau-gauche a{ margin:0 10px; }
  .lx-bandeau-droite{ gap:14px; }
  .lx-logo img{ height:38px; }
  .lx-diapo-texte h2{ font-size:24px; }
  .lx-diapo-points{ grid-template-columns:1fr; }
  .lx-diapo-image img{ max-height:165px; }
  .lx-pastille-prix{ width:72px; height:72px; }
  .lx-pastille-prix strong{ font-size:19px; }
  .lx-pastille-prix em{ font-size:9px; }
  .lx-pied-grille{ grid-template-columns:1fr; gap:30px; }
  .lx-pied{ padding-top:44px; }
  .lx-pied-bas{ flex-direction:column; gap:12px; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .lx-diapo{ transition:none; }
  .lx-pastille-vive{ animation:none; }
}


/* ============================================================
   12. SELECTEUR DE LANGUE
   ============================================================ */
.lx-bandeau .lx-langue{
    border:1px solid rgba(255,255,255,.35);
    border-radius:3px;
    padding:2px 9px !important;
    margin-right:4px;
    font-weight:600;
    letter-spacing:.2px;
}
.lx-bandeau .lx-langue:hover{ border-color:#fff; }
.lx-bandeau .lx-langue .fa{ margin-right:5px; }

/* Marqueur discret sur les liens du pied qui menent a une page francaise
   depuis la version anglaise. */
.lx-en-fr{
    display:inline-block;
    margin-left:6px;
    padding:0 4px;
    font-size:9px;
    line-height:14px;
    font-weight:700;
    letter-spacing:.5px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:2px;
    opacity:.6;
    vertical-align:middle;
}
.lx-note-legale{
    margin-top:14px;
    font-size:12px;
    line-height:1.5;
    opacity:.55;
}

@media (max-width:991px){
    .lx-mobile-langue a{ font-weight:600; }
    .lx-mobile-langue .fa{ margin-right:8px; }
}