/* OBLIGATOIRE dans : */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Sans-serif, "Trebuchet MS", Tahoma, Arial; font-size: 16px; /* Base pour desktop */ background-image: url('../PlantesMedicinalesImages/bgwhite.jpg'); background-size: cover; background-attachment: fixed; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; line-height: 1.6; } #wrap { background-color: #ffffff; width: 100%; max-width: 1200px; margin: 0 auto; flex: 1; box-shadow: 0 0 20px rgba(0,0,0,0.1); } #innerwrap { display: flex; flex: 1; justify-content: center; } #masthead { background-color: #FFF; text-align: center; } #mainnav { background-color: #60668B; height: 50px; position: relative; } /* NAVBAR RESPONSIVE */ ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; height: 100%; overflow: hidden; background-color: #669999; } #mainnav li { float: none; flex: 1; max-width: 200px; text-align: center; } #mainnav ul li a { display: flex; align-items: center; justify-content: center; color: white; text-align: center; padding: 14px 8px; text-decoration: none; height: 100%; transition: background 0.3s; } li a:hover { background-color: #006600; border-radius: 5px; } /* HAMBURGER POUR MOBILE */ .nav-toggle { display: none; } .hamburger { display: none; position: absolute; right: 15px; top: 15px; color: white; font-size: 24px; cursor: pointer; z-index: 1001; padding: 5px; background: none; border: none; } #main { width: 100%; padding: 20px; text-align: center; } #main h1, #main h2, #main h3 { color: #004d00; } #footer { clear: both; background-color: #004d00; width: 100%; text-align: center; padding: 20px 10px; color: white; } #footer p { font-size: 75%; margin: 10px 0; color: #fff; } #footer p a { font-size: 80%; color: #fff; } p, h1, h2, h3, h4 { margin-bottom: 20px; } button { padding: 12px 24px; font-size: 16px; background-color: #004d1a; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 20px; transition: background 0.3s; } button:hover { background-color: #005e24; } .search-container { margin-bottom: 20px; text-align: center; } .search-container input[type=text] { padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; width: 100%; max-width: 400px; } .lexique-container { display: grid; grid-template-columns: 1fr; grid-gap: 20px; margin: 20px; padding: 0 10px; } .lexique-container h2 { grid-column: 1 / -1; text-align: center; } .lexique-container .term { background-color: #f1f1f1; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } /*Ajout recement*/ .lexique-container .term { word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto; word-wrap: break-word; /* Compatibilité ancienne */ max-width: 100%; } .lexique-container .term p { word-break: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; max-width: 100%; } /* ============================================ */ /* MEDIA QUERIES - RESPONSIVE */ /* ============================================ */ /* MOBILE < 768px - POLICE 18px GRANDE ET LISIBLE */ @media (max-width: 768px) { body { font-size: 18px; /* GRAND ET LISIBLE SUR TÉLÉPHONE */ padding: 10px; line-height: 1.7; } h1 { font-size: 2.2rem; margin-bottom: 1.5rem; } h2 { font-size: 1.8rem; margin-bottom: 1.2rem; } h3 { font-size: 1.5rem; margin-bottom: 1rem; } .hamburger { display: block; font-size: 28px; } ul { display: none; position: absolute; top: 50px; left: 0; right: 0; background-color: #669999; flex-direction: column; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.2); width: 100%; } .nav-toggle:checked ~ ul { display: flex; } #mainnav li { width: 100%; } #mainnav ul li a { font-size: 1.1rem; padding: 20px 15px; } #main { padding: 15px 10px; } #footer { padding: 15px 10px; font-size: 16px; } .lexique-container { margin: 15px 5px; gap: 20px; } .search-container input[type=text] { font-size: 18px; padding: 15px; } } @media (max-width: 768px) { .lexique-container .term p { word-break: break-all !important; /* Plus agressif */ line-height: 1.4; } } /* DESKTOP > 1025px */ @media (min-width: 1025px) { body { font-size: 16px; } #wrap { max-width: 1200px; } .lexique-container { grid-template-columns: repeat(3, 1fr); gap: 25px; } }