/* =========================================================
   GEODIRECTE – VERSION 2026 MINIMALISTE ULTRA COMPACTE
   ========================================================= */

/* ================== RESET ================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.0; /* ultra compact */
  background: #f5f7fa;
  color: #333;
  overflow-x: hidden;
}

/* ================== TYPOGRAPHIE ================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0.6em 0;
  font-weight: 600;
  line-height: 1.2;
  color: #0066cc;
}

p, ul, ol {
  margin: 0.6em 0;
  line-height: 1.4;
  font-size: 18px; /* augmente la taille ici */
}

ul, ol {
  padding-left: 18px;
}


/* ================== CONTAINER ================== */

.container {
  max-width: 1100px;
  margin: 8px auto 25px;
  padding: 10px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

/* ================== TABLE ================== */

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  padding: 3px 5px; /* ultra serré */
  text-align: center;
  border: 0;
}

/* ================== CELLULE DEGRADE ================== */

table {
  border-collapse: collapse;
}

td.degrade-cellule {
  padding: 15px;
  font-family: Arial, sans-serif;
  font-size: 1.2em;
  border: 0;
}


body.domain-com td.degrade-cellule {
  background: linear-gradient(to right, #A2C6ED, #ffffff);
}

body.domain-pro td.degrade-cellule {
  background: linear-gradient(to right, #DFA97F, #ffffff);
}

body.domain-io td.degrade-cellule {
  background: linear-gradient(to right, #B3E375, #ffffff);
}

html[dir="rtl"] body.domain-com td.degrade-cellule {
  background: linear-gradient(to left, #A2C6ED, #ffffff);
}

html[dir="rtl"] body.domain-pro td.degrade-cellule {
  background: linear-gradient(to left, #DFA97F, #ffffff);
}

html[dir="rtl"] body.domain-io td.degrade-cellule {
  background: linear-gradient(to left, #B3E375, #ffffff);
}

/* ================== BORDURE FINE ================== */

.bordure-fine {
  border: 1.5px solid #bdbdbd;
}




/* ================== CELLULE BLEUTE  ================== */

.cellule-bleute:hover {
  background-color: #eef5fd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all 0.15s ease;
}

/* ================== ANIMATION ================== */

@keyframes vibrate {
  0%,100% { transform: translate(0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 1px); }
}

td.vibre:hover img {
  animation: vibrate 0.2s ease-in-out 3;
}

img {
  max-width: 100%;
  height: auto;
  transition: transform 0.15s ease;
}

/* ================== BOUTONS ================== */

.btn {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #d0d7e2;
  background: linear-gradient(to bottom, #ffffff, #eef2f7);
  color: #2c3e50;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.btn:hover {
  background: #e6edf5;
}

.btn:active {
  transform: translateY(1px);
}

.btn.large {
  padding: 6px 14px;
  font-size: 0.9rem;
}

.btn.full {
  width: 100%;
  text-align: center;
}

/* ================== VERSION SWITCH ================== */

.version-switch {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  font-size: 0.8rem;
}

.version-option {
  text-decoration: none;
  color: #444;
}

.version-option:hover {
  color: #0066cc;
}

.version-option.active {
  font-weight: bold;
  cursor: default;
}

/* ================== INPUTS ================== */

input.loupe,
input.pluscode,
input.latlon {
  width: 100%;
  border: 1px solid #d6dce5;
  border-radius: 8px;
  font-size: 14px;
  padding: 6px 10px 6px 34px;
  background-color: #ffffff;
  transition: border 0.15s ease, box-shadow 0.15s ease;
}

input.loupe {
  background-image: url('img/png/icon_loupe24g.png');
  background-repeat: no-repeat;
  background-position: 8px center;
}

input.pluscode {
  background-image: url('img/png/icon_pluscode24.png');
  background-repeat: no-repeat;
  background-position: 8px center;
}

input.latlon {
  background-image: url('img/png/icon_globe24.png');
  background-repeat: no-repeat;
  background-position: 8px center;
}

input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74,144,226,0.15);
}

/* ================== TOOLTIP ================== */

.tooltip-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  width: min(60vw, 400px);
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  transition: opacity 0.15s ease;
  pointer-events: none;
  text-align: start;
  z-index: 1000;
}

.tooltip-wrapper:hover:not(.editing) .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ================== SUMMARY ================== */

summary {
  cursor: pointer;
  font-size: 13px;
  margin: 2px 0;
}

.menu-style1 summary,
.menu-style3 summary {
  font-weight: 600;
  color: #0066cc;
}

.menu-style3 summary {
  text-align: center;
}

.menu-style2 summary {
  background: #A2C6ED;
  padding: 14px 8px;
  border-radius: 6px;
}

/* ================== LIENS ================== */

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}