:root{
  --c-accent:#0aa3c2;
  --c-accent-strg:#087a91;
  --c-text:#0f172a;
  --c-bg:#f8fafc;
  --c-border:#cdd7e5;
  --c-gold:#d4a017;
  --c-green:#009900;
  --c-red:#e62e00;
  --c-light:#607085;
  --radius: 8px;
}

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

body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif;
  font-size:14px;
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
}
h1{
  margin:0;
  padding:16px;
  text-align:center;
  background:#fff;
  border-bottom:1px solid var(--c-border);
}

/* --- Structure principale --- */
.container{
  display:grid;
  grid-template-columns: 120px minmax(220px, 20vw) 1fr;
  min-height:calc(100vh - 64px);
}
.column{
  background:var(--c-bg);
  border-right:1px solid var(--c-border);
  padding:16px;
  overflow:auto;
}
.column:nth-child(3){
  border-right:none;
}

/* -------------------------------------------------------------------------- */
/* COLONNE 1 : Boutons lettres (A–Z)                                          */
/* -------------------------------------------------------------------------- */
.letters{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.letter-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:4px 8px;
  border-radius:var(--radius);
  border:1px solid var(--c-border);
  background:#fff;
  text-decoration:none;
  text-align:left;
  color:var(--c-text);
  font-weight:600;  /* même que col.3 */
}

/* sous-spans pour contrôle fin */
.letter-btn .label-letter{ font-weight:600; }
.letter-btn .label-count{ font-weight:400; opacity:.9; } /* (xxx) non bold */

/* -------------------------------------------------------------------------- */
/* COLONNE 2 : Sélecteur + boutons de plages                                 */
/* -------------------------------------------------------------------------- */
.selecter{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.selecter .meta{
  color:#var(--c-light);
}
select{
  padding:6px 10px;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  background:#fff;
  font-weight:600;
}

.ranges a,
.ranges span{
  display:block;
  width:100%;
  padding:4px 8px;
  margin:6px 0;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--c-text);
  background:#fff;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* -------------------------------------------------------------------------- */
/* COLONNE 3 : En-tête, liste et navigation                                   */
/* -------------------------------------------------------------------------- */
.header3{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.badge{
  display:inline-flex;
  height:32px;
  align-items:center;
  border:2px solid var(--c-accent);
  color:var(--c-accent);
  background:#fff;
  border-radius:var(--radius);
  font-weight:900;
}

.badge-letter{
	width:32px;
	justify-content:center;
}

.totmin
{
	width:100%;
	margin-bottom: 8px;
	padding-left: 4px;
    padding-right: 4px;
    justify-content:space-between;
}

.range-title{
  font-weight:900;
  font-size:18px;
}

ul.list{
  list-style:none;
  margin:0;
  padding:0 0 0 0;
}
ul.list li{
  margin:0 0 6px 0;
}
a.item{
  display: grid;
  gap: 8px;
  align-items: center;
  background:#fff;
  padding:4px 8px;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--c-text);
  font-weight:600;
}

a.item i{
	display: block; 
	font-weight:400;
	margin-top: -6px;
	opacity: 0.8;
}

a.item span{
	white-space: nowrap;
}

/* Boutons navigation (Précédent / Suivant) */
.btn-txt, .btn-img{
  height:28px;
  display:inline-block;
  border-radius:var(--radius);
  background:var(--c-accent);
}

.btn-admin{
  height:28px;
  display:inline-block;
  border-radius:var(--radius);
  background:var(--c-red);
}

.btn-txt, .btn-admin{
  padding:4px 8px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
}

.btn-img{
  padding:4px 4px;
  width:28px;
}

/* Bouton Login → style identique à GO */
button {
    align-items:center;
    justify-content:center;
    text-decoration:none;
	border:1px solid var(--c-accent);
}

.btn-txt[aria-disabled="true"]{
  border-color:var(--c-border);
  background:var(--c-border);
  pointer-events:none;
}

.bullStatutOk{
	color:var(--c-green);
	font-weight:900;
}

.bullStatutKo{
	color:var(--c-red);
	font-weight:900;
}

.ranges .active,
.letter-btn.active,
.btn-model.active,
.btn-model.active small
{
  background:var(--c-accent);
  color:#fff;
  border-color:var(--c-accent);
}

.letter-btn:hover,
.letter-btn.active:hover,
.ranges a:hover,
.ranges .active:hover,
a.item:hover,
.btn-txt:hover,
.btn-img:hover,
.btn-model:hover,
.btn-model .active:hover,
.btn-model:hover small,
.btn-model .active:hover small,
.btn-admin:hover
{
  border-color:var(--c-gold);
  background:var(--c-gold);
  color:#fff;
}

sup.note
{
	color:var(--c-accent);
	font-style: italic;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */
@media(max-width:1100px){
  .container{grid-template-columns:120px minmax(460px, 55vw) 1fr;}
}
@media(max-width:900px){
  .container{grid-template-columns:1fr;}
  .column{border-right:none;border-bottom:1px solid var(--c-border);}
}

/* =========================================================
   PAGE FICHE MINÉRAL — composants réutilisables
   (s'ajoute à la fin du style atlas, sans le casser)
   ========================================================= */

/* ---- Mise en page générale de la fiche ---- */
.fiche-container{
  max-width: 1200px;
  margin: 16px auto;
  padding: 0 16px;
}

.fiche-header{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.fiche-title{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
.fiche-title h2{
  margin:0;
  padding: 0 0 0 8px;
  font-size:24px;
  line-height:1;
}

/* ---- Grille 2 colonnes : résumé (gauche) / contenu (droite) ---- */
.fiche-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:16px;
}
@media (max-width: 980px){
  .fiche-grid{ grid-template-columns: 1fr; }
}

/* ---- Cartes génériques réutilisables ---- */
.card{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:10px;
  margin-top:10px
}

.card + .card{ margin-top:12px; }

.card h3{
  margin:0 0 10px 0;
  font-size:18px;
}

/* Largeur uniforme des colonnes "étiquette" */
.card .table td:first-child {
  width: 25%;          /* ajuste selon ton rendu */
  vertical-align: top;
  white-space: nowrap;   /* évite les retours à la ligne */
}

.card .table tr:first-child td {
  border-top: 1px solid var(--c-border);
}

/* Table "Atomes" */
.card .table.atomes td:first-child {
  width: auto;
  vertical-align: middle;
}

.card .table.atomes td:not(:first-child),
.card .table.atomes th:not(:first-child) {
  text-align: right;
}

.card .table.atomes tr.total td {
  font-weight: 700;          /* texte en gras */
  background: #f8fafc;       /* léger fond différent (optionnel) */
}

/* ==================== COLLAPSIBLE ==================== */
/* En-tête de carte */
.card.collapsible > h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
  margin-bottom: .5rem;
}

/* Bouton +/− (style identique aux boutons de navigation) */
.card-toggle, .table-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius:var(--radius);
  background: var(--c-accent);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.card-toggle {
	width: 28px;
	height: 28px;
	border: 1px solid var(--c-accent);
}

.table-toggle {
	width: 32px;
	height: 32px;
	border: 2px solid var(--c-bg);
}

/* Survol : fond et bord dorés, texte blanc */
/* Jaune uniquement au survol (ou pendant le clic) */
.card-toggle:hover,
.card-toggle:active {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: #fff;
}

.table-toggle:hover,
.table-toggle:active {
  background: var(--c-gold);
  color: #fff;
}

/* Focus clavier accessible, mais on reste en style "bleu" */
.card-toggle:focus, .table-toggle:focus {
  outline: none;
}

/* Optionnel : anneau discret uniquement quand le focus vient du clavier */
.card-toggle:focus-visible .table-toggle:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

/* Contenu repliable */
.card-body {
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

/* État replié */
.card.collapsed .card-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* État ouvert */
.card:not(.collapsed) .card-body {
  opacity: 1;
}

/* Réduction du spacing quand replié */
.card.collapsed > h2 {
  margin-bottom: 0;
}

.card-content {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.card-content img {
	border-radius:var(--radius);
}

.card-geologie {
	display: flex;
	gap: 0px;
	align-items: flex-start;
	border: 1px solid var(--c-border);
	border-top: none;
}

.card-geologie iframe {
	display: block;
	margin: 0;
	padding: 0;
}

.card-text {
	flex: 1; /* le texte prend tout l’espace dispo */
}

.card-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
}

.card-figure img {
	width: 100%;
	height: auto;
	display: block;
}

.card-figure figcaption {
	margin-top: 4px;
	font-size: 0.9em;
	font-style: italic;
	color: #555;
	text-align: center;
}

/* ==================== FIN COLLAPSIBLE ==================== */

/* ---- Badges (réutilisables) ---- */
.badge.blue{
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.badge.green{
  border-color: var(--c-green);
  color: var(--c-green);
}
.badge.red{
  border-color: var(--c-red);
  color: var(--c-red);
}

/* ---- Bloc formule chimique (rendu propre) ---- */
.formula{
  font-weight:500;
}
.formula sup, .formula sub{ font-size: 75%; line-height: 0; }

/* ---- Tableau réutilisable (par ex. occurrences, synonymes, refs) ---- */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:10px;
}

.table th{
  background:var(--c-accent);
  color:#fff;
  font-weight:700;
  padding:4px 8px;
  text-align:center;
  vertical-align: middle;
  border-bottom:1px solid var(--c-border);
  border-left:1px solid var(--c-border);
}

.table td{
  padding:4px 8px;
  border-bottom:1px solid var(--c-border);
  border-left:1px solid var(--c-border);
  text-align:left;
  vertical-align: top;
}
.table td:last-child{
  border-right:1px solid var(--c-border);
}

.table th.strg{
  background:var(--c-accent-strg);
}

.table tr:not(.row-link):hover td:not(.td-valence-stricte):not(.td-valence-chimique){
  background:#f9fafb;
}

/* ---- Barre d’outils simple (boutons actions) ---- */
.toolbar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}

/* ---- Alerte/info (réutilisable) ---- */
.alert{
  padding:10px 12px;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  background:#fff;
  font-size:14px;
}
.alert.info{ border-color: var(--c-accent); background:#0aa3c20d; }
.alert.ok  { border-color: var(--c-green);  background:#0099000e; }
.alert.ko  { border-color: var(--c-red);    background:#e62e000d; }

.card h2:first-child {
  margin: 0;
  padding: 0 0 0 8px;
  font-size:20px;
  color:var(--c-accent);
}

.link-name {
    display: inline-flex;
    align-items: center;     /* centre verticalement icône + texte */
    gap: 6px;            /* petit espace entre icône et texte */
}

.link-icon {
    display: inline-block;
    flex-shrink: 0;          /* l'icône ne rétrécit pas */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	border-radius:3px;
}

.icon16 {
	width: 16px;
    height: 16px;
}

.icon24 {
	width: 24px;
    height: 24px;
}

.icon32 {
	width: 32px;
    height: 32px;
}

/* ==================== GALLERIE ==================== */

.galerie-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.galerie-item, .galerie-source {
    background: #fafafa;
    border: 1px solid var(--c-border);
    border-radius:var(--radius);
    padding: 10px;
    box-sizing: border-box; /* IMPORTANT sinon 33% déborde */
}

.galerie-item {
    flex: 0 0 calc((100% / 3) - 8px);
}

.galerie-source {
	flex: 0 0 calc((100% / 2) - 8px);
}

.galerie-source img {
	border-radius:var(--radius);
	border: 1px solid var(--c-border);
}

.galerie-item img {
    width: 100%;
    height: auto;
    border-radius:var(--radius);
    object-fit: cover;
}

.galerie-info {
    font-size: 0.9rem;
}

.gallery-info-table {
    margin-top: 10px;
    font-size: 0.9rem;
	background: #fff;
	color: #333;
}

.gallery-info-table td {
    padding: 6px 8px;
}

.img-zoom-link {
    display: inline-block;
}

.img-zoom-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* IMAGE */
.img-zoom-wrapper img {
    display: block;
    width: 100%;
    max-height: 300px;
    height: auto;
}

/* OVERLAY BLANC SURVOL */
.img-zoom-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0); /* invisible au repos */
    transition: background 0.2s ease;
}

.img-zoom-wrapper:hover::after {
    background: rgba(255, 255, 255, 0.20); /* voile blanc 10% */
}

/* ICÔNE AGRANDIR */
.zoom-icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    background-image: url("/images/UI/Agrandir-48x48.png");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.img-zoom-wrapper:hover .zoom-icon {
    opacity: 1; /* l'icône apparaît au survol */
}

/* Affichage progressif dans mineraux-image.php */
.image-fade {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.image-fade.loaded {
    opacity: 1;
}

/* ==================== FIN GALLERIE ==================== */

/* ==================== JAUGE ==================== */
.progress-container {
    position: relative;
	background:#fff;
	border:1px solid var(--c-border);
	border-radius:var(--radius);
    height: 32px; /* ← OBLIGATOIRE */
	margin-top: 10px;
    overflow: hidden;
}

.progress-fill {
    left: 0;
    top: 0;
    height: 100%;
    background: var(--c-gold);
    transition: width 0.3s ease;
}

.progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 28px; /* doit matcher la height ci-dessus */
    line-height: 28px;
    text-align: center;
    font-weight: bold;
    color: #000;
    pointer-events: none;
}
/* ==================== FIN JAUGE ==================== */

/* ============================================================
   BODY-HEADER – Corrections alignements et tailles
   ============================================================ */

.body-header{
	position: sticky;
    top: 0;
    z-index: 9999;
    width:100%;
    background:var(--c-bg);
    display:flex;
    align-items:stretch;
    justify-content:space-between;
	padding:0 16px 0 16px;
	border-bottom:1px solid var(--c-border);
}

/* Bloc droit vertical */
.bh-col2, .bh-col3, .bh-col4{
    display:flex;
	justify-content:center;
    gap:6px;
}

.bh-col3, .bh-col4{
    flex-direction:column;
	border-left:1px solid var(--c-border);
	align-items:flex-end;
	justify-content:center;
	flex:none;
}

.bh-col2{
    flex:1;
}

.bh-col3{
    padding-left:12px;
    padding-right:12px;
}

.bh-col4{
	padding-left:12px;
}

.stat-value{
	font-weight:600;
}

/* ---------------------- Ligne supérieure ---------------------- */
.bh-topline{
    display:flex;
    align-items:center;
    gap:8px;
    height:28px;
	width:100%;
}

.bh-topline .link-name{
    width:100%;
}

/* Drapeaux en ligne */
.bh-lang{
    display:flex;
    align-items:center;
    gap:6px;
}

/* Bouton drapeau (hauteur fixe 28px, icône centrée, NON déformée) */
.btn-flag{
    height:28px;
    padding:4px 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    cursor:pointer;
}

.btn-flag img{
    display:block;
    height:auto;
    max-height:18px; /* garde les proportions originales */
    width:auto;
}

/* ---------------------- Ligne inférieure ---------------------- */
.bh-searchline{
    display:flex;
    align-items:center;
    gap:6px;
}

.bh-searchline input{
    height:28px;
    padding:0 8px;
    border:1px solid var(--c-border);
    border-radius:var(--radius);
}

/* Bouton GO */
.btn-go{
    cursor:pointer;
}
.btn-go:hover{
    background:var(--c-gold);
    border-color:var(--c-gold);
}

/* ---- 1) Chevron ▼ sur le sélecteur langue ---- */
.img-select-display {
    position: relative;
    padding-right: 22px; /* espace pour le chevron */
}

.img-select-display::after {
    content: "▼";         /* flèche vers le bas */
    font-size: 10px;
    color: var(--c-light);
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* ne bloque pas le clic */
}

/* ---- 2) Focus Search : remplacer bleu par ton gold ---- */
.bh-searchline input:focus {
    outline: 2px solid var(--c-gold);
    border-color: var(--c-gold);
}

/* ========== Select Pays ========== */
.img-select{
    flex: 1;          /* ← prend toute la place dispo */
    min-width: 0;     /* ← ESSENTIEL pour éviter les débordements */
    position: relative;
    font-size: 14px;
    cursor: pointer;
}

.img-select-display{
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    padding:4px 6px;
    display:flex;
    align-items:center;
    gap:6px;
    height:28px;
}

.img-select-display img{
    max-height:16px;
    width:auto;
}

.img-select-options{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:32px;
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--radius);
    overflow:hidden;
    z-index:20;
}

.img-select-options div{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 6px;
}

.img-select-options div:hover{
    background:var(--c-gold);
    color:#fff;
}

.img-select-options img{
    max-height:16px;
    width:auto;
}

/* ==================== MODELES 3D ==================== */

/* Bloc global */
.model-3d-block {
    margin-top: 8px;
}

/* Ligne du haut */
.model-3d-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Model viewer */
.mv-box {
    width: 300px;
    height: 300px;
    background: #d0d0d0;
    border-radius:var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

/* Boutons */
.model-buttons {
    display: flex;
    flex-direction: column;
	flex: 1; 
    gap: 6px;
    overflow-y: auto;
    padding-right: 4px;
}

.btn-model {
    display:block;
	width:100%;
	padding:4px 8px;
	margin:0;
	border:1px solid var(--c-border);
	border-radius:var(--radius);
	text-decoration:none;
	color:var(--c-text);
	background:#fff;
	font-weight:600;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	cursor: pointer;
	text-align: left;
}

.btn-model small {
    color: #666;
}

/* ==================== FIN MODELES 3D ==================== */

.message {
	font-weight:600;
	margin-left:42px;
}

/* Valence stricte */
.td-valence-stricte {
    background-color: #9eebfa; /* bleu soutenu */
    font-weight: 700;
}

/* Valence chimique (extension) */
.td-valence-chimique {
    background-color: #cff5fc; /* bleu clair */
}

/* Orbitale incomplète */
.td-incomplete {
    color: var(--c-red);
    font-weight: 700;
}

tbody tr.tbl-element > td:nth-child(n+4) {
    text-align: center;
}

/* Colonnes internes */
.item-photo, .item-modele {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.card .table td.item-image {
	width:273px;
}

.card .table td.item-type {
	width:16px;
	padding:4px 0px 0px 8px;
}

.card .table td.item-nom {
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding:4px 0px;
	font-weight: 600;
}

.photo-icon, .modele-icon, .type-icon {
  width: 16px;
  height: 16px;
  vertical-align: top;
  margin: 1px 4px 0px 0px;
}

.item-nom {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-formule {
  text-align: left;
  font-weight: 400;
}

.item-num, .item-gap, .table td.item-num, .table td.item-gap {
  text-align: right;
  font-weight: 400;
}

.item-gap {
  font-style:italic;
  opacity:0.65;
}

.item-statut {
  text-align: right;
  white-space: nowrap;
}

tr.row-link {
	cursor: pointer;
}

tr.row-link:hover {
	background-color: var(--c-gold);
	color:white;
}