/* ==========================================================================
   GROUPE LTL — composants des pages publiques
   Feuille unique. Remplace les blocs <style> qui etaient dupliques dans
   chaque page. Toutes les classes sont prefixees ltl- selon la convention
   deja etablie dans groupeltl.css.
   Palette : orange #ff9600 · marine #123A5E
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BLOCS DE SECTION
   -------------------------------------------------------------------------- */
.ltl-bloc{ padding:64px 0; }
.ltl-bloc-gris{ background:#f6f8fa; }
.ltl-bloc-marine{ background:#123A5E; color:rgba(255,255,255,.86); }
.ltl-bloc-marine h2,
.ltl-bloc-marine h3,
.ltl-bloc-marine h4{ color:#fff; }

.ltl-surtitre{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:#ff9600; margin-bottom:8px;
}
.ltl-titre-bloc{ margin:0 0 12px; }
.ltl-intro{ max-width:760px; margin:0 auto 40px; color:#6b7681; text-align:center; }

/* --------------------------------------------------------------------------
   2. LISTES A CROCHET
   -------------------------------------------------------------------------- */
.ltl-liste{ list-style:none; padding:0; margin:18px 0 0; }
.ltl-liste li{
  position:relative; padding:9px 0 9px 26px;
  border-bottom:1px solid #edf1f5; font-size:14.5px; line-height:1.6;
}
.ltl-liste li:last-child{ border-bottom:0; }
.ltl-liste li:before{
  content:""; position:absolute; left:2px; top:16px; width:10px; height:6px;
  border-left:2px solid #ff9600; border-bottom:2px solid #ff9600;
  transform:rotate(-45deg);
}
.ltl-bloc-marine .ltl-liste li{ border-bottom-color:rgba(255,255,255,.14); }

/* --------------------------------------------------------------------------
   3. PHOTOS ET LEGENDES
   -------------------------------------------------------------------------- */
.ltl-photo{
  border-radius:8px; overflow:hidden; box-shadow:0 10px 30px rgba(18,58,94,.14);
}
.ltl-photo img{ width:100%; height:auto; display:block; }
.ltl-legende{
  font-size:12.5px; color:#8a949e; margin-top:9px; font-style:italic;
}

/* --------------------------------------------------------------------------
   4. CARTES  (une seule definition pour tout le site)
   -------------------------------------------------------------------------- */
.ltl-carte,
.ltl-inclus,
.ltl-plateforme,
.ltl-appareil,
.ltl-deux-voies{
  background:#fff; border:1px solid #e3e9ef; border-radius:8px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.ltl-carte:hover,
.ltl-inclus:hover,
.ltl-appareil:hover,
.ltl-deux-voies:hover{
  box-shadow:0 12px 32px rgba(18,58,94,.11); transform:translateY(-2px);
}
.ltl-carte{ padding:26px 24px; }
.ltl-inclus{ padding:28px 26px; }
.ltl-plateforme{ padding:32px 28px; }
.ltl-appareil{ padding:30px 28px; }
.ltl-deux-voies{ padding:34px 30px; }

.ltl-carte h4,
.ltl-inclus h4{ margin:0 0 9px; font-size:17px; }
.ltl-carte p,
.ltl-inclus p{ color:#6b7681; margin:0; font-size:14.5px; line-height:1.65; }

.ltl-plateforme--vedette,
.ltl-deux-voies--accent{
  border:2px solid #ff9600; box-shadow:0 12px 34px rgba(255,150,0,.14);
}

/* Numero rond des cartes numerotees */
.ltl-inclus-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,150,0,.13); color:#ff9600; font-weight:700;
  margin-bottom:16px;
}

/* Etiquette d'accent */
.ltl-etiquette{
  display:inline-block; background:#ff9600; color:#fff; font-size:11px;
  font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  padding:4px 12px; border-radius:20px; margin-bottom:14px;
}

/* --------------------------------------------------------------------------
   5. PLATEFORMES ET APPAREILS
   -------------------------------------------------------------------------- */
.ltl-plateforme h3,
.ltl-appareil h3,
.ltl-deux-voies h3{ margin:0 0 4px; font-size:21px; }
.ltl-plateforme-role,
.ltl-appareil-modele,
.ltl-deux-voies-sous{
  font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:#ff9600; margin-bottom:16px;
}
.ltl-plateforme p,
.ltl-appareil p,
.ltl-deux-voies p{ color:#6b7681; line-height:1.7; }
.ltl-quand{
  background:#f6f8fa; border-radius:6px; padding:15px 17px; margin-top:20px;
  font-size:13px; color:#5a6570; line-height:1.6;
}
.ltl-quand strong{ color:#123A5E; display:block; margin-bottom:5px; }

.ltl-appareil-photo,
.ltl-voies-photo{
  display:flex; align-items:flex-end; justify-content:center; gap:18px;
  min-height:170px; margin-bottom:20px;
}
.ltl-appareil-photo img{ max-height:170px; width:auto; max-width:100%; }
.ltl-voies-photo img{ max-height:150px; width:auto; }
.ltl-voies-photo .ltl-voies-large{
  border-radius:6px; box-shadow:0 6px 20px rgba(18,58,94,.14);
}

/* --------------------------------------------------------------------------
   6. ENCADRES
   -------------------------------------------------------------------------- */
.ltl-permis,
.ltl-note-appareils{
  background:#123A5E; color:rgba(255,255,255,.86);
  border-radius:8px; padding:24px 28px; line-height:1.7;
}
.ltl-permis h4,
.ltl-note-appareils h4{ color:#fff; margin:0 0 9px; }
.ltl-permis p{ color:rgba(255,255,255,.86); margin:0; }
.ltl-permis strong,
.ltl-note-appareils strong{ color:#ff9600; }
.ltl-maquette{
  border-radius:8px; overflow:hidden; box-shadow:0 16px 42px rgba(0,0,0,.26);
  margin-bottom:26px;
}
.ltl-maquette img{ width:100%; height:auto; display:block; }

/* --------------------------------------------------------------------------
   7. TABLEAU COMPARATIF
   -------------------------------------------------------------------------- */
.ltl-compare{
  width:100%; border-collapse:collapse; background:#fff;
  border-radius:8px; overflow:hidden; box-shadow:0 6px 22px rgba(18,58,94,.08);
}
.ltl-compare th{
  background:#123A5E; color:#fff; padding:15px 18px; font-size:13px;
  font-weight:600; text-transform:uppercase; letter-spacing:.6px; text-align:left;
}
.ltl-compare td{
  padding:15px 18px; border-bottom:1px solid #edf1f5;
  font-size:14.5px; vertical-align:top; line-height:1.6;
}
.ltl-compare tr:last-child td{ border-bottom:0; }
.ltl-compare tr:nth-child(even) td{ background:#fafbfc; }
.ltl-compare td:first-child{ color:#8a949e; }
.ltl-compare td:last-child{ color:#123A5E; font-weight:600; }

/* --------------------------------------------------------------------------
   8. FORFAIT
   -------------------------------------------------------------------------- */
.ltl-forfait{
  background:#fff; border:2px solid #ff9600; border-radius:10px;
  padding:36px 34px; box-shadow:0 16px 44px rgba(18,58,94,.13);
}
.ltl-forfait h3{ margin:0 0 6px; font-size:26px; }
.ltl-forfait-sous{ color:#6b7681; margin-bottom:22px; }
.ltl-prix{ display:flex; align-items:baseline; gap:9px; margin-bottom:4px; }
.ltl-prix-avant{
  font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:#8a949e;
}
.ltl-prix-montant{ font-size:44px; font-weight:700; color:#123A5E; line-height:1; }
.ltl-prix-unite{ font-size:14px; color:#6b7681; }
.ltl-note{ font-size:12.5px; color:#8a949e; font-style:italic; margin-top:16px; line-height:1.6; }

/* --------------------------------------------------------------------------
   9. GALERIE
   -------------------------------------------------------------------------- */
.ltl-galerie{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.ltl-galerie a{
  position:relative; display:block; overflow:hidden; border-radius:8px;
  background:#eef2f6; aspect-ratio:1/1;
}
.ltl-galerie img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.ltl-galerie a:hover img{ transform:scale(1.06); }
.ltl-galerie-legende{
  position:absolute; left:0; right:0; bottom:0; padding:24px 11px 9px;
  background:linear-gradient(to top,rgba(18,58,94,.93),rgba(18,58,94,0));
  color:#fff; font-size:11.5px; font-weight:600; line-height:1.3;
  opacity:0; transition:opacity .25s ease;
}
.ltl-galerie a:hover .ltl-galerie-legende{ opacity:1; }

/* --------------------------------------------------------------------------
   10. BLOC FONCTION  (icone + texte)
   -------------------------------------------------------------------------- */
.ltl-fonction{ display:flex; gap:17px; margin-bottom:26px; }
.ltl-fonction-icone{
  flex:0 0 46px; height:46px; border-radius:10px; background:rgba(255,150,0,.13);
  display:flex; align-items:center; justify-content:center;
}
.ltl-fonction-icone img{ width:26px; height:26px; }
.ltl-fonction h4{ margin:0 0 5px; font-size:16px; }
.ltl-fonction p{ margin:0; font-size:14px; color:#6b7681; line-height:1.6; }
.ltl-bloc-marine .ltl-fonction p{ color:rgba(255,255,255,.82); }

/* --------------------------------------------------------------------------
   11. SIGNATURE WANASSIST  (discrete, page Service gere)
   -------------------------------------------------------------------------- */
.ltl-signature{
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:26px 30px; margin-top:44px;
  border-top:1px solid rgba(255,255,255,.12);
}
.ltl-signature-pastille{
  background:#fff; border-radius:12px; padding:14px 18px;
  box-shadow:0 6px 20px rgba(0,0,0,.18); flex:0 0 auto;
}
.ltl-signature img{ height:66px; width:auto; display:block; }
.ltl-signature-texte{
  font-size:12.5px; color:rgba(255,255,255,.55); line-height:1.6; max-width:320px;
}
.ltl-signature-texte strong{
  display:block; color:rgba(255,255,255,.78); font-weight:600;
  letter-spacing:.4px; margin-bottom:3px;
}

/* --------------------------------------------------------------------------
   12. MOBILE
   -------------------------------------------------------------------------- */
@media (max-width:991px){
  .ltl-galerie{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767px){
  .ltl-bloc{ padding:42px 0; }
  .ltl-photo{ margin-bottom:22px; }
  .ltl-carte, .ltl-inclus, .ltl-plateforme,
  .ltl-appareil, .ltl-deux-voies{ margin-bottom:20px; }
  .ltl-forfait{ padding:28px 24px; margin-bottom:26px; }
  .ltl-prix-montant{ font-size:36px; }
  .ltl-appareil-photo, .ltl-voies-photo{ min-height:130px; }
  .ltl-appareil-photo img{ max-height:130px; }
  .ltl-voies-photo img{ max-height:120px; }
  .ltl-compare{ display:block; overflow-x:auto; }
  .ltl-compare td, .ltl-compare th{ padding:12px 13px; font-size:13.5px; }
  .ltl-signature{ flex-direction:column; text-align:center; gap:14px; }
  .ltl-signature-texte{ max-width:none; }
}
@media (max-width:575px){
  .ltl-galerie{ grid-template-columns:repeat(2,1fr); gap:10px; }
}