<style>
       /* ==============================================
          AMÉLIORATIONS RESPONSIVE POUR LE SITE
          ============================================== */
       
       /* Reset et base */
       * {
           box-sizing: border-box;
       }
       
       body {
           margin: 0;
           padding: 0;
           overflow-x: hidden;
       }
       
       img {
           max-width: 100%;
           height: auto;
       }
       
       /* ==============================================
          HEADER RESPONSIVE
          ============================================== */
       
       .tm-site-header {
           padding: 15px;
       }
       
       .tableau {
           width: 100%;
           border-collapse: collapse;
       }
       
       /* Pour les petits écrans */
       @media (max-width: 768px) {
           .tm-site-header .tableau {
               display: block;
           }
           
           .tm-site-header .tableau tr,
           .tm-site-header .tableau td {
               display: block;
               width: 100%;
               text-align: center;
           }
           
           .tm-site-header img {
               max-width: 100px;
               margin: 0 auto 10px;
           }
           
           .tm-site-header h1 {
               font-size: 1.5rem;
               margin: 10px 0;
           }
           
           .tm-tagline {
               font-size: 0.85rem;
               line-height: 1.4;
           }
       }
       
       /* ==============================================
          NAVIGATION RESPONSIVE
          ============================================== */
       
       .tm-main-nav ul {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           gap: 10px;
           padding: 10px;
           list-style: none;
           margin: 0;
       }
       
       .tm-nav-item {
           flex: 1 1 auto;
           min-width: 150px;
           max-width: 200px;
       }
       
       .tm-nav-link {
           display: block;
           padding: 10px;
           text-align: center;
       }
       
       .tm-nav-link img {
           max-width: 40px;
           margin-top: 5px;
       }
       
       @media (max-width: 768px) {
           .tm-nav-item {
               min-width: 120px;
               flex: 1 1 calc(50% - 10px);
           }
           
           .tm-nav-link {
               font-size: 0.9rem;
               padding: 8px;
           }
           
           .tm-nav-link img {
               max-width: 30px;
           }
       }
       
       @media (max-width: 480px) {
           .tm-nav-item {
               flex: 1 1 100%;
               max-width: 100%;
           }
       }
       
       /* ==============================================
          DOCUMENTS HYPE RESPONSIVE
          ============================================== */
       
       .HYPE_document {
           width: 100% !important;
           max-width: 600px;
           margin: 0 auto;
       }
       
       @media (max-width: 768px) {
           .HYPE_document {
               max-width: 400px;
           }
       }
       
       @media (max-width: 480px) {
           .HYPE_document {
               max-width: 100%;
               padding: 0 15px;
           }
       }
       
       /* ==============================================
          TABLEAUX DANS LES POPUPS
          ============================================== */
       
       .popup .tableau {
           width: 100%;
           margin: 0 auto;
       }
       
       @media (max-width: 768px) {
           .popup .tableau tr,
           .popup .tableau td,
           .popup .tableau th {
               display: block;
               width: 100%;
               padding: 10px 15px;
           }
           
           /* Masquer les cellules vides sur mobile */
           .popup .tableau td[style*="width:20px"],
           .popup .tableau td[style*="width:30px"],
           .popup .tableau td[style*="width:40px"] {
               display: none;
           }
       }
       
       /* ==============================================
          IMAGES RESPONSIVE
          ============================================== */
       
       @media (max-width: 768px) {
           img[width] {
               width: 100% !important;
               height: auto !important;
           }
       }
       
       /* ==============================================
          TITRES ET TEXTES
          ============================================== */
       
       h1, h2, h3 {
           word-wrap: break-word;
           hyphens: auto;
       }
       
       @media (max-width: 768px) {
           h1 {
               font-size: 1.5rem;
           }
           
           h2 {
               font-size: 1.3rem;
           }
           
           h3 {
               font-size: 1.1rem;
           }
           
           p, li, td, th {
               font-size: 0.95rem;
               line-height: 1.6;
           }
       }
       
       /* ==============================================
          POPUP / MODAL RESPONSIVE
          ============================================== */
       
       .popup {
           padding: 20px;
           overflow-y: auto;
       }
       
       @media (max-width: 768px) {
           .popup {
               padding: 10px;
           }
           
           .tm-close-popup {
               font-size: 0.85rem;
               padding: 8px 12px;
           }
       }
       
       /* ==============================================
          VIDÉO RESPONSIVE
          ============================================== */
       
       #tm-video-container {
           position: relative;
           width: 100%;
           height: 400px;
           overflow: hidden;
       }
       
       #tm-video {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }
       
       @media (max-width: 768px) {
           #tm-video-container {
               height: 250px;
           }
       }
       
       /* ==============================================
          CARTE (MAP) RESPONSIVE
          ============================================== */
       
       .mapouter,
       .gmap_canvas {
           width: 100%;
       }
       
       .gmap_canvas iframe {
           width: 100%;
           height: 450px;
       }
       
       @media (max-width: 768px) {
           .gmap_canvas iframe {
               height: 300px;
           }
       }
       
       /* ==============================================
          LISTES À PUCES
          ============================================== */
       
       ul {
           padding-left: 20px;
       }
       
       @media (max-width: 768px) {
           ul {
               padding-left: 15px;
           }
           
           .tm-contact-links {
               padding-left: 0;
           }
       }
       
       /* ==============================================
          BOUTONS
          ============================================== */
       
       .tm-btn,
       button {
           padding: 10px 20px;
           font-size: 1rem;
       }
       
       @media (max-width: 768px) {
           .tm-btn,
           button {
               padding: 8px 15px;
               font-size: 0.9rem;
           }
       }
       
       /* ==============================================
          FOOTER
          ============================================== */
       
       .tm-footer {
           padding: 20px;
           text-align: center;
       }
       
       @media (max-width: 768px) {
           .tm-footer {
               font-size: 0.85rem;
               padding: 15px 10px;
           }
           
           .tm-footer span {
               display: block;
               margin-bottom: 10px;
           }
       }
       
       /* ==============================================
          POPUP MENTIONS LÉGALES
          ============================================== */
       
       #popup {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: rgba(0, 0, 0, 0.5);
           justify-content: center;
           align-items: center;
           z-index: 10000;
       }
       
       #popup .modal {
           background: #fff;
           padding: 2em;
           border-radius: 8px;
           max-width: 90%;
           max-height: 90vh;
           overflow-y: auto;
           position: relative;
           margin: 20px;
       }
       
       #closeBtn {
           position: absolute;
           top: 8px;
           right: 8px;
           cursor: pointer;
           background: none;
           border: none;
           font-size: 1.2em;
           padding: 5px 10px;
       }
       
       @media (max-width: 768px) {
           #popup .modal {
               padding: 1.5em;
               font-size: 0.9rem;
               max-width: 95%;
           }
           
           #closeBtn {
               font-size: 1em;
               top: 5px;
               right: 5px;
           }
       }
       
       /* ==============================================
          ESPACEMENT DES MARGES
          ============================================== */
       
       @media (max-width: 768px) {
           div[style*="margin-left: 80px"],
           div[style*="margin-left: 100px"] {
               margin-left: 20px !important;
           }
       }
       
       /* ==============================================
          INSTAGRAM IMAGE
          ============================================== */
       
       @media (max-width: 768px) {
           img[src*="instagram.png"] {
               max-width: 150px;
           }
       }
       
       /* ==============================================
          COLONNES FLEXIBLES
          ============================================== */
       
       .tm-row {
           display: flex;
           flex-wrap: wrap;
           gap: 20px;
       }
       
       .tm-col {
           flex: 1 1 100%;
       }
       
       @media (min-width: 769px) {
           .tm-col {
               flex: 1 1 45%;
           }
       }
       
       /* ==============================================
          CORRECTIONS SPÉCIFIQUES
          ============================================== */
       
       /* Citations en script */
       .quote-script-pacifico {
           font-size: 1.1rem;
           padding: 15px;
           margin: 20px 0;
       }
       
       @media (max-width: 768px) {
           .quote-script-pacifico {
               font-size: 0.95rem;
               padding: 10px;
           }
       }
       
       /* Tableaux de tarifs */
       @media (max-width: 768px) {
           table.tableau td:last-child {
               font-weight: bold;
               text-align: left !important;
               padding-left: 20px;
           }
       }
   </style>