@charset "UTF-8";

:root {
    --couleur-principale: rgba(198,146,115,0.5);
    --couleur-fond: rgba(76,81,76,0.9);
    --couleur-texte: #e4e4e4;
    --couleur-accent: #2c4531;
    --couleur-marron: #cdab8f;
    --couleur-orange: rgba(240,234,217,1);
    --border-radius: 8px;
    --blur-intensity: blur(25px);
}

body {
    background: linear-gradient(145deg,
        var(--couleur-fond) 0%,
        var(--couleur-fond) 50%,
        rgba(76,81,76,0.8) 100%);
    backdrop-filter: var(--blur-intensity);
    color: var(--couleur-texte);
    margin: 10px auto;
}

/* Bloc Titre */
h1 { text-align: center; font-size: 24px; margin-block: 0.67em }

a {text-decoration: none;color: #e4e4e4}

.blocs { max-width: 1200px; margin: 0 auto; } 

/* Blocs Prix de reference rareté et Tirage */
.blocA{ 
    justify-content: center;
    display: grid;
    grid-template-columns: 150px 150px;
    grid-template-areas: "prixRef raridade";			
    transition-duration: 0.4s;  
    gap: 1rem 8rem;
    align-items: center;			
    padding: 10px;
    margin: 10px;
    
}

.prixRef {	
    border-radius: var(--border-radius);	
    background: linear-gradient(to left, var(--couleur-principale), rgba(198,146,115,0.4));								
    text-align: center;	
    height: 70px;	
    font-weight: 600;	
    font-size: 16px;	
    color: var(--couleur-texte);
    backdrop-filter: var(--blur-intensity);
    align-items: center;
    grid-area: prixRef;
    display: flex;
    flex-direction: column;	
    justify-content: center;
    border-bottom: 0.1rem solid rgba(255,255,255,0.1);
    border-top: 0.1rem solid rgba(0,0,0,0.2);								
}						
.prixRef div { font-size: 16px; }
.prixRef div.a { color: var(--couleur-accent); font-size: 18px; font-weight: 900; }

.raridade {
    border-radius: var(--border-radius); 
    background: linear-gradient(to right, var(--couleur-principale), rgba(198,146,115,0.4));					 		
    text-align: center; 
    height: 70px; 
    font-weight: 600; 
    font-size: 16px; 
    justify-content: center;
    color: var(--couleur-texte); 
    align-items: center; 
    grid-area: raridade; 
    display: flex;
    flex-direction: column;
    border-bottom: 0.1rem solid rgba(255,255,255,0.1);
    border-top: 0.1rem solid rgba(0,0,0,0.2);
    backdrop-filter: var(--blur-intensity);
}
.raridade div { font-size: 16px; }
.raridade div.a { color: var(--couleur-accent); font-size: 14px; font-weight: 900; }
.raridade div.b { font-size: 14px; font-weight: 500; }

/* Bloc Pièce Commémorative */
.blocPC{
    justify-content: left;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "texto";			
    transition-duration: 0.4s;  
    gap: 0.2rem ;
    align-items: center;			
    padding: 10px;
    margin: 10px auto;
    max-width:800px;
    border-top: 0.1rem solid var(--couleur-principale);    
    border-radius: var(--border-radius);
    background-color: rgba(191,186,183,0.1);
    box-shadow: 0 0 1px rgba(0,0,0,0.20);
    
}
.commemorative, .avers, .revers, .tranche, .description, .atelier {
    line-height: 1.1;
    text-align: left;
    font-size: 15px;
    margin: 0;
    border-bottom: 0.1rem solid var(--couleur-principale);
}

.commemorative h2, .avers h2, .revers h2, .tranche h2, .description h2, .atelier h2 {
    margin: 0;
    font-weight: 600;
    font-size: 16px;    
}

.commemorative p, .avers p, .revers p, .tranche p, .description p, .atelier p {
    margin: 8px 0 8px 8px;    
    font-size: 15px;
    color: var(--couleur-orange);    
}

.avers ul, 
.revers ul,
.description ul,
.tranche ul
		{
				list-style-type: disc;
				margin: 0 4px 12px -4px;     /* haut droite bas gauche */
				color: var(--couleur-orange);
				font-size: 15px;		
		}

.avers strong, .description strong, .revers strong, .tranche strong{      
    font-size: 15px;
    color: var(--couleur-marron);
}

/* Bloc valeur faciale */
.blocVF {
    justify-content: start;
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "valeurfacile" "texte" "pays";
    background-color: rgba(191,186,183,0.1);
    border-radius: var(--border-radius);
    border-top: 0.2rem solid var(--couleur-principale);
    border-bottom: 0.1rem solid var(--couleur-principale);
    gap: 0.2rem;    
    align-items: start;			
    padding: 10px;
    margin: 10px auto;
    max-width:800px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.20);
      
}

.valeurfacile { 
    grid-area: valeurfacile; 
    text-align: left;
    margin:0;
}
.valeurfacile h2 { margin: 0;}

.texte { 		
    grid-area: texte; 
    text-align: left;
    font-size: 14px;
    margin:0;
    
}

.pays { 
    grid-area: pays;
    display: flex;
    align-items: center;
    justify-content: start;  /* ← à gauche */
    gap: 10px;
    margin: 0.4rem 0 0 0;          /* ← centrer que le conteneur pays */
    
}

.pays h3 { margin: 0;}
.pays img {position:relative; top: 1px;margin:0}

/* Bloc Piece Avers et piece Revers et isnscptions  animation: zoumer 0.3s ease-out; */
.moeda {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    column-gap: 30px; 
    padding: 10px; 
    max-width: 820px;
    margin: 20px auto;
    
}
.moeda > a {
    display: contents; 
}

.moeda > a > div:hover { background-color: rgba(191,186,183,0.15); transform: translateY(-3px) scale(1.01); 
													box-shadow: 0 6px 20px rgba(0,0,0,0.20); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.moeda > a > div:active{background-color:rgba(191,186,183,0.2);}
.moeda > a > div:inactive{background-color:rgba(191,186,183,0.1);}

.moeda > a > div {
    height: 100%;
    font-size: clamp(0.7rem, 0.9rem, 1rem); 
    text-align: center;
    align-items: center; 
    background-color: rgba(191,186,183,0.1);
    border-right: 1rem solid var(--couleur-principale); 
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(0,0,0,0.20);
}
.moeda > a > div > img {
    float: left; 
    width: auto; 
    height: auto;
    border-radius: var(--border-radius) 0px 0px var(--border-radius);
}

.dim {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    max-width: 400px;
    margin: 50px auto;
    background-color: rgba(191,186,183,0.1);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.dim > div:first-child {
    display: flex;
    align-items: center; /* Centre l'image verticalement */
}

.dim > div:first-child img {
    width: 100%;
    height: 100%;
    max-height: 100%; /* Limite la hauteur à celle du conteneur */
    object-fit: cover; /* Couvre l'espace sans déformer */
    display: block;
}

.dim > .text {
    padding: 20px;
    color: var(--couleur-orange);
    border-right: 1rem solid var(--couleur-principale);
    display: grid;
    place-items: center;
    gap: 15px;
    min-height: 0; /* Important pour le contenu grid */
}

.spec-item {
    text-align: center;
    width: 100%;
}

.spec-item h2,
.spec-item p {
    margin: 0;
    font-size: 15px;
}

.spec-item h2 {
    font-weight: 600;
}

.spec-item p {
    font-weight: 400;
}

div.cebolinha {
    border-left: 1rem solid var(--couleur-principale);
    font-size: 15px;
    background-color: rgba(191,186,183,0.1);
    max-width: 720px;
    padding: 20px;
    margin: auto;
    border-radius: var(--border-radius);
    text-align: left;
}

.coin-text {
    overflow-wrap: break-word;
    word-break: break-word;
}

table { 
    border-collapse: collapse; 
    max-width: 1024px; 
    margin: 20px auto;
}
td { 
    padding: 8px; 
    text-align: left; 
    border-bottom: 1px solid #ddd; 
}

.busca {
    display: grid; 
    grid-template-columns: auto auto auto auto; 
    grid-gap: 15px; 
    max-width: 700px;
    margin: 20px auto;
}
.busca > div {
    height: auto;
    font-size: 16px; 
    text-align: center;
    align-items: center;
    margin-top: 20px;
}
.busca > div > a { 
    color: #2ec27e;
    text-decoration: none;
}

@keyframes zoumer {
    0% {
        transform: scale(0.95) translateY(20px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@media (max-width: 720px) {
    .blocA {
        gap: 1rem 2rem;
        align-items: center;
        padding: 10px;
        margin: 10px;
    }
    .blocVF {
        width: calc(100vw - 30px); /* Adapté aux petits écrans */        
        margin: 10px auto; /* Maintenant ça peut centrer */
    }
    
    .blocPC {
        width: calc(100vw - 30px); /* Adapté aux petits écrans */
        max-width: none; /* Laisser s'adapter */
        margin: 10px auto; /* Maintenant ça peut centrer */        
    }
		.blocPC p,
		.blocPC li {
			min-width: 0; 
  		overflow-wrap: anywhere;
		}
		  
    .moeda { 
        grid-template-columns: auto;
        grid-gap: 30px;
    }
    
    .busca { 
        max-width: 400px; 
        grid-template-columns: auto auto auto auto;
    }
    .dim {margin: 20px;}
    div.cebolinha { max-width: 80%; }
    table { width: 80%; }
}

@media (max-width: 900px) and (orientation: landscape) {
    .blocPC {
        width: calc(100vw - 40px); /* MÊME calcul - 10px + 10px */
        margin: 10px auto;
        max-width: 800px; /* mais limité à 800px maximum */
    }
    
    .blocVF {
        width: calc(100vw - 40px); /* MÊME calcul - 10px + 10px */
        margin: 10px auto;
        max-width: 800px; /* mais limité à 800px maximum */
    }
}