/************************************************************
** PARAMS
*************************************************************/
:root {
    --primary-font: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --text-main: #37352f;
    --text-muted: #6b6a65;
    --border-color: #ddd;
    --input-border-color: #888;
    --accent-color: #7f1a9b;
    --error-color: red;
    --accent-color-bg: linear-gradient(to bottom right, #4822b6, #b92cc8);
    --accent-color-bg-muted: linear-gradient(to bottom right, #eee, #f383ff);
    --bg-input: #ffffff;
    --box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

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

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

div {
    margin: 0;
    padding: 0;
    overflow-x: auto;
}

input[type="text"],
textarea,
table {
    max-width: 100%; /* Empêche tout débordement accidentel */
}

td {
    vertical-align: top;
}

/************************************************************
** MAIN STYLES
*************************************************************/
/* --- Formatting --- */
strong { font-weight: 600; }
a { text-decoration: none; color: var(--accent-color); cursor:pointer; }
a:hover { text-decoration: underline; color: var(--text-muted) }
big { font-size: 1.5em; }
small { font-size: 0.75em; }

/* --- Titles --- */
h1, h2, h3 { font-weight: 600; margin-bottom: 1rem; }
h1 { font-size: 2.5rem; line-height: 1.2; }
h2 { color: var(--accent-color) }

/* --- Text --- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted) }

/* --- Positioning --- */
.clearfix { clear: both; }

/* --- Useful colors --- */
.bg-color {
    background: var(--accent-color-bg);
    color: white;
    padding: 0 10px;
}

.bg-color a {
    color: white;
}

/* --- Containers --- */
html { background: #eee; }

body {
    background: linear-gradient(to bottom, #f9f9f9, #eee);
    font-family: var(--primary-font);
    color: var(--text-main);
    line-height: 1.6;
}

p { margin-bottom: 1.2rem; }

/* --- Tables --- */
#ies-report table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--box-shadow);
}

#ies-report th {
    background-color: #f4f4f4;
    color: var(--text-muted);
    font-weight: 600;
    text-align: left;
    padding: 6px 10px;
    font-size: 0.9rem;
    border-bottom: 2px solid var(--border-color);
}

#ies-report td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

/* --- Forms --- */
input[type="text"],
textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--input-border-color);
    border-radius: 6px;
    font-family: var(--primary-font);
    font-size: 1rem;
    background-color: var(--bg-input);
    transition: border-color 0.5s ease;
    box-shadow: var(--box-shadow);
}

textarea {
    height:200px;
}

input[type="text"] {
    text-align: center;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

input::placeholder,
textarea::placeholder {
  font-style: italic;
}

select, select:focus {
    background:transparent;
    border: 0;
    color: white;
}

select option {
    background: #333;
    color: var(--text-main);
    padding: 5px;
    color: white;
}

/* --- Button colors --- */
.btn-primary,
.btn-secondary {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--accent-color);
}

.btn-secondary:hover,
.btn-primary {
    background: var(--accent-color-bg);
    color: white;
    text-decoration: none;
}

.btn-primary {
    font-weight: 600;
}

.btn-secondary {
    color: var(--accent-color);
}

.btn-secondary:hover,
.btn-primary:hover {
    color: white;
    text-decoration: none;
    box-shadow: 0px 0px 5px var(--text-main);
    transition: box-shadow 0.2s ease;
}

/* input[type="submit"].btn-primary:hover,
.btn-secondary:hover {
    background: var(--accent-color-bg-muted);
    color: var(--accent-color);
} */

.highlighted { color: var(--accent-color); }

/* --- Tooltip --- */

.tooltip {
    cursor: help;
}

/* Masqué par défaut */
.tooltip::after {
    content: attr(data-info);
    width: 300px;
    position: fixed;
    left: var(--tooltip-x);
    top: var(--tooltip-y);
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    font-size: 0.9em;
    z-index: 10;
}

/* Affichage au survol (PC) ET au clic/focus (Mobile) */
.tooltip:hover::after, .tooltip:active::after {
    opacity: 1;
}

/* --- Loader --- */
.loader {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  position: relative;
}
.loader::after,
.loader::before {
  content: '';
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--text-main);
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader 2s linear infinite;
}
.loader::after {
  animation-delay: 1s;
}

@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/************************************************************
** IES PARTS
*************************************************************/

#ies-top {
    position: fixed;
    width: 100%;
    background: rgba(50,50,50,0.9);
    top: 0;
    color: white;
    font-size: 0.8rem;
    padding: 6px 10px;
    height: 36px;
    overflow: hidden;
}

#ies-top .logo {
    opacity: 0.8;
}

#ies-top .logo:hover {
    opacity: 1;
    transition: opacity 0.2s ease;
}

#ies-top .logo img {
    height: 20px;
    margin: 2px 0
}

#ies-top .logo a {
    color: white;
}

#ies-top a:hover {
    text-decoration: none;
}

#ies-top div {
    float:left;
    width: unset;
}

#ies-top .ies-version {
    vertical-align: top;
    font-size: 0.75em;
}

#ies-top-navigation {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

#ies-top .navigation ul {
    list-style-type: none;
    list-style-position: inside;
    margin: 3px 0 0 -20px;;
}

#ies-top .navigation li {
    float:left;
    text-align: center;
    margin-right: 8px;
    font-size: 0.7rem;
}

#ies-top .navigation li a {
    display: block;
    padding: 1px 8px;
    font-weight: 600;
    border-radius: 40px;
}


#ies-top div.parameters {
    float:right;
    width: unset;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

/************/
/** HEADER **/
/************/
#ies-header {
    /* gradient from  purple to  dark purple */
    /* background: linear-gradient(45deg, #583d03 0%, #2c0436 100%); */
    padding: 0px;
    padding-top: 100px;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

#ies-header img {
    width: 300px;
}

/*************/
/** OPTIONS **/
/*************/
#ies-controls {
    padding: 20px 50px;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

#ies-controls .ies-input-helper {
    position: absolute;
    right: 0;
    margin: 12px;
    color: var(--text-muted);
    border: 2px solid var(--text-muted);
    background: white;
    padding: 0px 7px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75em;
}

#ies-controls-modes {
    padding: 20px 0;
}

#ies-controls .ies-mode-description {
    margin-bottom: 20px;
    font-size: 0.85rem;
}

#ies-controls .ies-controls-wrapper {
    margin: auto;
    max-width: 600px;
    position: relative;
    padding: 5px 0;
}

#ies-controls label {
    font-weight: 600;
    position: absolute;
    margin-left: 20px;
    margin-top: -9px;
    padding: 0 5px;
    font-size: 0.7em;
    background:linear-gradient(to bottom, transparent 0%, transparent 50%, white 50%, white 100%);
    color: var(--input-border-color);
}

#ies-controls .ies-controls-wrapper:has(input:focus) label,
#ies-controls .ies-controls-wrapper:has(textarea:focus) label {
    color: var(--accent-color);
    transition: color 0.5s ease;
}

#ies-controls .ies-error {
    color: var(--error-color);
    font-size: 0.85em;
    display:none;
}

#ies-controls input.error,
#ies-controls textarea.error {
    border-color: var(--error-color);
}

#ies-controls .ies-controls-wrapper:has(input.error) label,
#ies-controls .ies-controls-wrapper:has(textarea.error) label {
    color: var(--error-color);
    transition: color 0.5s ease;
}

#ies-controls .ies-controls-wrapper:has(input.error) .ies-error,
#ies-controls .ies-controls-wrapper:has(textarea.error) .ies-error {
    display:block;
}

/*************/
/** LOADING **/
/*************/
#ies-loading {
    padding: 50px;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

#ies-loading .ies-loading-main {
    font-weight: 600;
}

#ies-loading .ies-loading-error {
    color: var(--accent-color);
    font-size: 0.7em;
}

#ies-error {
    padding: 50px;
    font-weight: 600;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

/************/
/** REPORT **/
/************/
#ies-report,
#ies-faq,
#ies-whoami {
    padding: 20px;
    max-width: 900px;
    margin: auto;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    max-height: 10px;
}

#ies-report .report-block {
    padding-top: 30px;
}

#ies-report td.col-0 {
    width: 20%;
    font-weight: 600;
}

#ies-report-availability .col-1,
#ies-report-general-evaluation .col-1,
#ies-report-sustainability .col-1 {
    white-space: nowrap;
}

#ies-report-battle_mode-ies .col-max.col-max-1,
#ies-report-sustainability .row-4,
#ies-report-general-evaluation .row-5 {
    font-weight: 600;
}

#ies-report-innovation .col-3,
#ies-report .ies-table .col-3,
#ies-report-battle_mode-innovation .col-2,
#ies-report-battle_mode-innovation .col-4,
#ies-report-battle_mode-ies .col-2,
#ies-report-battle_mode-ies .col-4,
#ies-report-collection .col-3,
#ies-report-collection .col-4 {
    text-align: right;
}

#ies-report-innovation tr:last-child .col-1,
#ies-report-battle_mode-innovation tr:last-child,
#ies-report-battle_mode-ies tr:last-child,
#ies-report .ies-table tr:last-child {
    font-weight: 600;
}

#ies-report-collection td.col-0 {
    width: 2%;
    font-weight: 600;
}

#ies-report .ies-table td.col-2,
#ies-report .ies-table td.col-4 {
    font-size: 0.8em;
}

/************/
/** STATS **/
/************/
#ies-stats {
    font-size: 0.7em;
    color: var(--text-muted);
    padding: 50px;
    pointer-events: none;
    opacity: 0;
}

#ies-stats table {
    border-collapse: collapse;
    margin: auto;
    opacity: 0.7;
}

#ies-stats th,
#ies-stats td {
    text-align: right;
    padding: 3px 6px;
}

#ies-stats tr:first-child th,
#ies-stats tr:last-child td {
    font-weight: bold;
}

/************/
/** BOTTOM **/
/************/
#ies-bottom {
    margin-top: 50px;
    bottom: 0;
    font-size: 0.8rem;
    padding: 20px;
    line-height: 2em;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

/**********/
/** MODE **/
/**********/
/* index */
.mode_index #ies-header,
.mode_index #ies-controls,
.mode_index #ies-bottom,
.mode_index #ies-top .parameters,
/* loading */
.mode_loading #ies-header,
.mode_loading #ies-loading,
.mode_loading #ies-report,
/* error */
.mode_error #ies-header,
.mode_error #ies-error,
/* report */
.mode_report #ies-top-navigation,
.mode_report #ies-report,
.mode_report #ies-bottom,
.mode_report #ies-stats,
/* faq */
.mode_faq #ies-faq,
.mode_faq #ies-bottom,
/* whoami */
.mode_whoami #ies-whoami,
.mode_whoami #ies-bottom
{
    position: static;
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 1s ease, visibility 0s;
    max-height: none;
}