:root{
    --c-primary: #624592; /* couleur violette (spawn 2024) */
    --c-primary-light: #755C9F; /* couleur violette (spawn 2024) claire */
    --c-primary-dark: #32234b; /* couleur violette (spawn 2025) */
    --c-primary-dark-alt: #372752; /* couleur violette (all4games 2026)
    --c-secondary: #3BBDE6; /* couleur bleu clair */
    --c-secondary-hv: #39bbe2a9; /* couleur bleu clair opacité 40*/
    --c-lavender: #C0ABC0; /*couleur lavende */
    --c-purple: #7F2A81; /*couleur fushia */
    --c-translucent-white: #ffffff24;
    --c-white: white;
    --c-black: black;
    --c-dark-blue: #11304C; /* couleur bleu foncé ICEC */

    --bor-radius: 10px;
    --bor-radius-btn: 50px;

    --fnt-default: "DINosaur", sans-serif;
    --fnt-w-light: 300;
    --fnt-w-regular: 400;
    --fnt-w-bold: 400;
}
[data-theme="dark"] {
  --color-bg: #1A1A1A;                /* Fond principal : noir doux */
  --color-bg-alt: #2A2A2A;            /* Fond secondaire : gris foncé */
  --color-text: #F0F0F0;              /* Texte principal : très clair */
  --color-text-always: #1E1E1E;
  --color-text-secondary: #BBBBBB;    /* Texte secondaire : gris clair */
  --color-accent-primary: #FFD700;    /* Accent jaune légèrement atténué */
  --color-accent-secondary: #3399FF;  /* Accent secondaire : bleu lumineux */
  --color-success: #66E0A1;           /* Vert clair */
  --color-error: #FF7373;             /* Rouge clair légèrement rosé */
  --border-color: #333;
}
[data-theme="light"] {
  --color-bg: #white;                /* Fond principal : noir doux */
  --color-bg-alt: #A1D6DF33;            /* Fond secondaire : gris foncé */
  --color-text: #11304C;              /* Texte principal : très clair */
  --color-text-always: #1E1E1E;
  --color-text-secondary: #BBBBBB;    /* Texte secondaire : gris clair */
  --color-accent-primary: #FFD700;    /* Accent jaune légèrement atténué */
  --color-accent-secondary: #3399FF;  /* Accent secondaire : bleu lumineux */
  --color-success: #66E0A1;           /* Vert clair */
  --color-error: #FF7373;             /* Rouge clair légèrement rosé */
  --border-color: #333;
}
p{
    font-size: 1.25em;
    color: var(--color-text);     
}
p span.blue, p.blue{
    color: var(--c-secondary);
}
.black{
    color: var(--c-black);
}
.dark-alt{
    color: var(--c-primary-dark-alt);
}
.dark{
    background-color: var(--c-primary-dark-alt);
}
.lavender{
    background-color: var(--c-lavender)!important;
}
.purple{
    background-color: var(--c-purple)!important;
}
.white{
    background-color: var(--c-white)!important;
}
h1{
    font-weight: normal;
    margin: 0;
    color: var(--color-text);
    max-width: 900px; /*******420px;********/
    text-align: left;
}
h2{
    color: var(--color-text);
    text-transform: uppercase;
    font-weight: 700;
    text-align: left;
}
h3{
    font-weight: bold;
    color: var(--color-text);
    text-transform: uppercase;
}
body{
    font-family: var(--fnt-default), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--c-white);
    color: var(--c-white);
}
body {
  font-family: var(--fnt-default), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1.25em;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

u {
    text-underline-position: from-font;
}
b {
    font-weight: 800;
}
.align-center{
    text-align: center;
    margin-left: auto!important;
    margin-right: auto!important;
}
.align-left{
    text-align: left;
    margin-right: auto;
    margin-left: auto;
}
.img-container{
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
    border-radius: 30px;
    overflow: hidden;
}
.img-container img,
.social img
{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.img-container,
.img-container img
{
    border-radius: 30px;
}
.img-logo{
    object-fit: contain;
    width: 150%;
    display: block;
    height: auto;
}
@media (max-width: 550px) {
    .img-logo{
        width: 100%;
        /*display: inline-block;*/
    }
}
.fade,
.fade img{
    animation-name: fade;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: fade;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

@keyframes fade {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
.presentation{
    max-width: 1022px;
    opacity: 0%;
    animation-name: fade;
    animation-duration: 3s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: fade;
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 3s;
    -webkit-animation-fill-mode: forwards;
}

.headline-container{
    width: 667px;
    max-width: 100%;
}
.icone {
    max-width: 160px; 
    height: 53px; 
    transform: translateY(10px);
}

/* --- SECTION HERO --- */
.hero {
  display: flex;
  background-color: #A1D6DF33;
  justify-content: center;
  align-items: center;
  text-align: left;
  height: auto;
  padding: 40px 20px;
  flex-direction: column;
}

/* ---- RESPONSIVE ---- */
@media (min-width: 768px) {
  .hero {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .hero-text {
    padding-right: 40px;
  }
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 337px;
}


.img { 
  background-size: cover;
  background-position: center;
}

.hero-text {
  color: var(--c-dark-blue);
  padding: 60px 80px 60px 0px;
  max-width: 900px;
  margin: 0 auto;
  color: var(--color-text);
}

.hero-text .date {
  font-size: 1.05rem;
  color: var(--c-dark-blue);
  color: var(--color-text);
  margin-bottom: 16px;
}

.hero-text .hosted {
  font-size: 1rem;
  color: var(--c-dark-blue);    
  color: var(--color-text);
  line-height: 1.6;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .image-grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .image-grid .img {
    height: 220px;
  }

  .hero {
    height: auto;
    padding: 50px 30px;
  }
}

.copyright p{
    font-weight: 400;
    font-size: 0.75em;
}

#info {
    padding: 40px;
}