/* Global Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.2;
}

/* header { */
    /* background: linear-gradient(to right, #333, #fff); */
    /* position: relative; */
    /* padding: 1rem 0; */
    /* text-align: center; */
/* } */

/* header::after { */
    /* content: ''; */
    /* background-image: url('../img/Final_Fantasy_X_Logo_titre.png'); */
    /* background-size: contain; */
    /* background-repeat: no-repeat; */
    /* position: absolute; */
    /* top: 10px; */
    /* right: 10px; */
    /* width: 100px; */
    /* height: auto; */
/* } */


header {
    background-color: #333;
    color: #ffffff;
    padding: 1rem 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 1rem;
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
}

main {
    padding: 2rem;
	padding-bottom: 6rem;
}

.main-section {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
    max-width: 800px;
    margin: 2rem auto;
}

.main-section-extra {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
    max-width: 80%;
    margin: 2rem auto;
}

.main-section h2, .main-section-extra h2, .error h2 {
    font-size: 2rem;
    color: #333;
    border-bottom: 2px solid #444;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
    margin-top: 0;
}

.main-section h3, .main-section-extra h3 {
    text-align: center;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}

.main-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.main-grid a {
    color: #333;
    text-decoration: none;
	background-color: #30C5FF;
}

.main-grid a span {
    color: #333;
    text-decoration: none;
	/* background-color: #FF00FF; */
}


.main-item {
    margin: 0;
    background-color: #f9f9f9;
    padding: 0.75rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
	min-height: 50px;
}

.main-item a {
    color: #333;
    text-decoration: none;
}

.main-item:hover {
    background-color: #888;
}

.description {
	font-size: 11px;
}

.description_plus {
	font-size: 10px;
}

.tooltip {
    /* position: relative; */
    /* display: inline-block; */
    /* border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext {
    font-size: 10px;
    visibility: hidden;
    width: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
	margin-left: 5px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Bestiaire */
.ennemi-imgStats {
	/* border: solid red 1px; */
    display: flex;
    align-items: center;
    /* padding-left: 2rem; */
}

/* Styles pour l'image miniature */
.ennemi-imgStats img {
    height: 250px;
    max-width: 450px;
    border-radius: 8px;
    margin: auto;
    cursor: pointer; /* Changer le curseur pour montrer que c'est cliquable */
}

/* Modal */
.modal {
    /*display: none; /* Masqué par défaut */
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); /* Fond noir avec transparence */
    opacity: 0;
    /*transition: opacity 0.5s ease; /* Transition de fondu pour le modal */
	visibility: hidden; /* Rend le modal invisible sans bloquer la transition */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Ajoute la transition pour l'opacité et la visibilité */

}

/* Quand le modal est affiché (lors de l'ouverture), on change son opacité */
/* .modal.show { */
    /* display: block; */
    /* opacity: 1; */
/* } */

.modal.show {
    opacity: 1;
    visibility: visible; /* Rend le modal visible */
}

/* Image à l'intérieur du modal */
.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
    /* max-width: 700px; */
    opacity: 0;
    transition: opacity 0.5s ease; /* Transition de fondu pour l'image */
}

/* Quand le modal est affiché, l'image devient visible */
.modal.show .modal-content {
    opacity: 1;
}

/* Le bouton pour fermer le modal */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


.img-container {
    display: flex;
    flex-direction: column;
    align-items: center;
	margin: auto;
}

.img-container p {
    margin-top: 0.5rem; /* Espace entre l'image et le texte */
    text-align: center;
    font-size: 1.5rem; /* Taille de la police du texte */
	font-weight: bold;
}

/* Section Titles */
.stats h3, .ennemi-localisation h3, .additional-info h3, .ennemi-drops h3, .objet-usage h3, .ennemi-strategy h3, .ennemi-scan h3, .elemental-weaknesses h3, .skill-resistances h3, .techniques-cles h3, .playerStats h3, .player-info h3{
    font-size: 1.5rem;
    color: #333;
    border-bottom: 2px solid #444;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
    margin-top: 0;
}

/* Enemy Information */
.ennemi-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ennemi-localisation, .additional-info {
    width: 48%;
    text-align: center;
}

.info-item-container {
    display: flex;
    justify-content: space-between;
}

.info-item {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    flex: 1;
    text-align: center;
    margin-top: 0;
    padding-top: 0;
    border-radius: 8px;
    color: green;
    background-color: rgba(0, 255, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.strikethrough {
    text-decoration: line-through;
    color: red;
    background-color: rgba(255, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

/* Statistics */
.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-left: auto;
    margin-right: 2rem;
	margin-top: auto;
	margin-bottom: auto;
}

.stats h3 {
    grid-column: span 2;
}

.stat-item {
    display: flex;
    justify-content: space-between;
}

.stat-item span {
    font-weight: bold;
    margin-left: 20px;
}

.overkill {
	/* border: solid 1px black; */
}

.overkill {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #333;
    background-color: #f9f9f9;
    padding: 0.75rem;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Fossile + & Mort + */
.special-resistances {
    margin: 3rem 0 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.resistance-item {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #333;
    background-color: #f9f9f9;
    padding: 0.75rem;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.resistance-item img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

/* Drops */
.ennemi-drops, .objet-usage {
    background-color: #ffffff;
    padding: 2rem 2rem 0.1rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

.drop-pair {
    display: flex;
    justify-content: space-between;
}

.drop-item {
    width: 48%;
}

.drop-item h4 span {
    font-size: 1rem;
    font-weight: lighter;
    color: #333;
}

.ennemi-drops h4, .objet-usage h4 {
    font-size: 1.2rem;
    color: #555;
    margin: 1.5rem 0 0.5rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.3rem;
}

.ennemi-drops ul, .objet-usage ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.ennemi-drops ul li, .objet-usage ul li {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: #333;
}

.ennemi-drops ul li::marker, .objet-usage ul li::marker {
    color: #555;
}

/* Strategy */
.ennemi-strategy, .ennemi-scan {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;	
    line-height: 1.5;
}

.ennemi-strategy p, .ennemi-scan p {
    white-space: pre-line;
    line-height: 1.5;
	text-align: center;
}

/* Sensibilités élémentaires */
.elemental-weaknesses, .skill-resistances {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

.elemental-weaknesses table {
    width: 100%;
    border-collapse: collapse;
}

.elemental-weaknesses th, .elemental-weaknesses td {
    border: 1px solid #ddd;
    padding: 0.75rem;
    text-align: left;
}

.elemental-weaknesses th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.elemental-weaknesses tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

/* Résistances aux compétences */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.skill-item {
    background-color: #f9f9f9;
    padding: 0.75rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 90%;
}

.skill-item span:first-child {
    font-weight: bold;
}

.normal {
    color: green;
    text-shadow: green 1px 0 10px;
}

.resistant {
    color: orange;
    text-shadow: orange 1px 0 10px;
}

.immunized {
    color: red;
    text-shadow: red 1px 0 10px;
}

.absorbed {
    color: blue;
    text-shadow: blue 1px 0 10px;
}

/* Blitzball */
/* .player-info img { */
    /* max-width: 200px; */
    /* height: auto; */
    /* display: block; */
    /* margin: 0 auto 1rem; */
/* } */

.player-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-left: auto;
    margin-right: 2rem;
	max-width: 40%;
}

.player-info-item {
    display: flex;
    justify-content: space-between;
	max-width: 100%;
}

.player-info-item span {
    font-weight: bold;
    margin-left: 20px;
}

/* techniques clés */
.techniques-cles, .playerStats {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

.tc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.tc-item {
    background-color: #f9f9f9;
    padding: 0.75rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /*font-size: 90%;*/
}

.tc-item span:first-child {
    font-weight: bold;
}

/* playerStats */
.playerStats table {
    width: 100%;
    border-collapse: collapse;
}

.playerStats th, .playerStats td {
    border: 1px solid #ddd;
    padding: 0.5rem;
    text-align: center;
}

.playerStats th {
    background-color: #f4f4f4;
}

.playerStats tr:hover {
    background-color: #aaa;
}

/* Chimères */
.chimereStats table {
    border-collapse: collapse;
}

.chimereStats th, .chimereStats td {
    border: 1px solid #ddd;
    padding: 0.5rem;
    text-align: center;
}

.chimereStats th {
    background-color: #f4f4f4;
}

.chimereStats tr:hover {
    background-color: #aaa;
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #333;
    color: #ffffff;
    position: fixed;
    /* position: static; */
    bottom: 0;
    width: 100%;
}


/* Chimères - Maths */
.math {
    font-family: "Times New Roman", Times, serif;
    padding: 0 .1em;
    font-size: 1.2em;
    font-style: normal;
}

.ct{
    text-align: center;
}


/* recapTable */
.recapTable table {
	font-family: Trebuchet MS;
	font-size: 14px;
    width: 100%;
    border-collapse: collapse;
}

.recapTable th, .recapTable td {
    border: 1px solid #ddd;
    padding: 0.5rem;
    text-align: center;
}

.recapTable th {
    background-color: #f4f4f4;
}

.recapTable tr:hover {
    background-color: #aaa;
}

.recapTable a {
  outline: none;
  text-decoration: none;
}

.recapTable a:link {
  color: #005BA2;
}

.recapTable a:visited {
  color: #4809BA;
}

.recapTable a:focus {
  border-bottom: 1px solid;
  background: #30C5FF;
}

.recapTable a:hover {
  border-bottom: 1px solid;
  background: #30C5FF;
}

.recapTable a:active {
  background: #FF4D80;
  color: #4809BA;
}

/* Légende */
.legende {
	/* border : 1px solid; */
	margin-top: 20px;
	/* align-items: center;	 */
    text-align: center;
    vertical-align: center;
    /* margin-right: 8px; */
}

.legende span {
    margin: 10px;
    display: inline-flex;
    align-items: center; /* Centre verticalement l'image et le texte */
    gap: 4px; /* petit espace entre image et texte */
}

.legende img {
	vertical-align: middle;
    width: 24px;
    height: 24px;
}

/* Video */
.videos {
	max-width:300px;
	margin: auto;
}

video, iframe {
	border: 1px solid #000;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	max-width: 300px;
}



/* Emulattak */
.Emulattak {
	font-family: Trebuchet MS;
	font-size: 110%;
	background: #EBC900;
	background: linear-gradient(to bottom, #EBC900 44%, #EB9900 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    /* text-shadow: 2px 2px 0px #000; */
	/* text-shadow: 1px 1px 2px black; */
}


/* Ajout ChatGPT */

/* === PAGE D'ACCUEIL MODERNE === */

.hero {
    background: linear-gradient(120deg, #001F3F, #003366);
    color: #fff;
    text-align: center;
    padding: 4rem 2rem;
    border-bottom: 4px solid #FFCC00;
    /* background-image: url('../img/ffx_background.png'); */
    /* background-position: center; */
    background-image: url('../img/index/wallpaper.jpg');
    background-position: bottom 30% left 50%;
    background-size: cover;
    background-blend-mode: overlay;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
	text-shadow:
	  1px 1px 2px black,
	  0 0 1em black,
	  0 0 0.2em black;
}

.hero p {
	text-shadow:
	  1px 1px 2px black,
	  0 0 1em black,
	  0 0 0.2em black;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.hero img {
    width: 100%;
    max-width: 700px;
    height: auto;
}

@media (max-width: 600px) {
  .hero img {
    max-width: 90%;
  }
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.feature-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    color: #333;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    background-color: #f9f9f9;
}

.feature-card h4 {
	text-align:center;
	font-size: 1.2rem;
    color: #003366;
    border-bottom: 2px solid #003366;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.bigone {
	margin-top: 0px;
	display: grid;
	/* max-width: 40%; */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	/* box-shadow: 0 3px 10px rgba(0,0,0,0.15); */
}

.about, .contact, .tips {
    line-height: 1.6;
    text-align: center;
}

.tip-button {
    margin-top: 1rem;
}

/* Responsive */
@media (max-width: 600px) {
    .hero h2 {
        font-size: 2rem;
    }
    .feature-card {
        padding: 1rem;
    }
}

/* Reverting images */
.img-hor {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

.img-vert {
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}

.img-hor-vert {
  -moz-transform: scale(-1, -1);
  -o-transform: scale(-1, -1);
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1);
}

.img-rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* === Alchimie de Rikku === */

.rikku-lede {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
    color: #555;
}

.rikku-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.rikku-stats li {
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    min-width: 130px;
}

.rikku-stats strong {
    display: block;
    font-size: 1.5rem;
    color: #003366;
    line-height: 1.2;
}

.rikku-stats span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
}

.rikku-workbench {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 1.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

.rikku-slot {
    flex: 1 1 180px;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rikku-slot-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.rikku-slot-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #ccc;
    flex: 0 0 auto;
}

.rikku-slot-result .rikku-slot-label { color: #0072a3; }
.rikku-slot-result .rikku-slot-label::before { background-color: #30C5FF; }

.rikku-glyph {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 10px;
    margin-bottom: 1px;
    border-radius: 50%;
    background-color: #f4f4f4;
    color: #999;
    font-weight: 700;
    font-size: 1.2rem;
    user-select: none;
}

.rikku-glyph-eq { background-color: #e7f8ff; color: #0090c8; }

.rikku-combobox { position: relative; }

.rikku-input {
    width: 80%;
    font-family: inherit;
    font-size: 1rem;
    color: #333;
    background-color: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.7rem 2.4rem 0.7rem 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.rikku-input::placeholder { color: #aaa; }

.rikku-input:hover { border-color: #bbb; }

.rikku-input:focus {
    outline: none;
    background-color: #fff;
    border-color: #30C5FF;
    box-shadow: 0 0 0 3px rgba(48, 197, 255, 0.18);
}

.rikku-clear {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #aaa;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.rikku-clear:hover { color: #c0392b; background-color: #fdecea; }

.rikku-listbox {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    padding: 0.35rem;
    margin: 0;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13);
}

.rikku-listbox li {
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.92rem;
    color: #333;
}

.rikku-listbox li:hover,
.rikku-listbox li.is-active {
    background-color: #eaf8ff;
    color: #0072a3;
}

.rikku-listbox-empty { color: #999; font-style: italic; cursor: default; }
.rikku-listbox-empty:hover { background: none; color: #999; }

.rikku-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.rikku-btn-ghost {
    font-family: inherit;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #666;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.rikku-btn-ghost:hover {
    border-color: #c0392b;
    color: #c0392b;
    background-color: #fff5f4;
}

.rikku-summary {
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    background-color: #f4f4f4;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin: 0;
}

.rikku-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rikku-results {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rikku-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s ease;
}

.rikku-row:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }

.rikku-row-ingredients,
.rikku-row-outcome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rikku-row-glyph,
.rikku-row-arrow {
    color: #bbb;
    font-weight: 700;
    font-size: 0.95rem;
}

.rikku-chip {
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.rikku-chip-ingredient { background-color: #eef0f2; color: #333; }
.rikku-chip-ingredient:hover { background-color: #30C5FF; color: #fff; }

.rikku-chip-result {
    background: #EBC900;
    background: linear-gradient(to bottom, #EBC900 44%, #EB9900 100%);
    color: #333;
    font-weight: 700;
}
.rikku-chip-result:hover { filter: brightness(1.08); }

.rikku-row-solved { outline: 2px solid #30C5FF; outline-offset: 1px; }

.rikku-empty {
    text-align: center;
    color: #777;
    font-style: italic;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 1.5rem;
}

.rikku-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.rikku-page-btn {
    font-family: inherit;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #555;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.rikku-page-btn:disabled { opacity: 0.35; cursor: default; }
.rikku-page-btn:not(:disabled):hover {
    border-color: #30C5FF;
    color: #0072a3;
    background-color: #f3fbff;
}

.rikku-page-info {
    font-size: 0.82rem;
    color: #777;
    background-color: #f4f4f4;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
}

.rikku-noscript {
    display: block;
    background-color: rgba(192, 57, 41, 0.1);
    border: 1px solid #c0392b;
    color: #333;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
    .rikku-workbench { flex-direction: column; align-items: stretch; }
    .rikku-glyph { align-self: center; margin-bottom: 0; }
    .rikku-actions { flex-direction: column; align-items: stretch; }
    .rikku-btn-ghost { text-align: center; }
    .rikku-row { flex-direction: column; align-items: stretch; }
    .rikku-row-outcome { justify-content: flex-end; }
}

/* === Page de contact === */
label {
	display: block;
	margin-top: 1rem;
	font-weight: bold;
}

input, textarea {
	width: 100%;
	padding: 8px;
	margin-top: 4px;
	box-sizing: border-box;
	background: #2a2a2a;
	color: #f0f0f0;
	border: 1px solid #444;
	border-radius: 4px;
}

button {
	margin-top: 1.2rem;
	padding: 10px 20px;
	background: #c0392b;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
}

button:hover { background: #a93226; }

.erreurs { color: red; }

.succes { color: green; }

.honeypot { position: absolute; left: -9999px; }