:root {
    --clair: rgb(233, 219, 203);
    --sombre: rgb(27, 21, 22);
    --header: 64px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

header, .section {
    padding: 30px Max(Calc((100vw - 1200px) / 2), 10%);
}

header {
    white-space: nowrap;
    overflow: hidden;
    background-color: var(--sombre);
    color: var(--clair);
    height: var(--header);
    display: flex;
    align-items: center;
    justify-content: space-between;

    * {
        display: inline-block;
        vertical-align: middle;
    }

    a.logo {
        display: flex;
        align-items: center;
        height: 100%;
        img {
            max-height: 36px; /* Slightly smaller than header height (42px) */
            width: auto;
            height: auto;
            margin-right: 8px;
        }
        .logo-nom {
            font-size: 18px; /* Reduce font size to fit in header */
            font-weight: 700;
            white-space: nowrap;
        }
    }

    nav {
        flex: 1;
        text-align: center;
        ul {
            list-style: none;
            display: inline-flex;
            li {
                margin: 0 15px;
            }
        }
    }

    a {
        color: var(--clair);
        text-decoration: none;
    }
}

.banner {
    width:100%;
    height: auto;
    /*max-height:50vh;*/
    object-fit: cover;
    vertical-align: bottom;
}

/*
@media(max-width: 768px) {
    .banner {
        min-height: 50vh;
        max-height:auto;
        max-width:100vw;
    }
}*/

.button {
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 200% 100% !important;
    background-position: 100% 0% !important;
    transition: background-position 0.5s ease;
    font-size:1.2em;
    text-decoration: none;
    color: var(--clair);
    * {
        vertical-align: middle;
    }
    span {
        font-weight:bold;
        color: var(--clair);
    }
    img {
        height: 24px;
        margin-right: 6px;
    }
    
    &.social {
        padding: 12px 20px;
        font-weight: bold;
    }

    &.clair {
        background: linear-gradient(to right, hsl(33, 43%, 60%), hsl(33, 43%, 85%), hsl(33, 43%, 100%));
        color: var(--sombre);
        span {
            text-decoration: none;
            color: var(--sombre);
        }
    }
    &.sombre {
        background: linear-gradient(to right,hsl(350 12.5% 4.4%), hsl(350 12.5% 9.4%), hsl(350 12.5% 20.4%));
    }

    &.discord {
        background: linear-gradient(to right, hsl(235 86% 45%), hsl(235 86% 65%), hsl(235 86% 70%));
    }
    &.youtube {
        background: linear-gradient(to right,hsl(0, 100%, 30%),  hsl(0, 100%, 50%), hsl(0, 100%, 67%));
    }
    &.reddit {
        background: linear-gradient(to right, hsl(16, 100%, 25%), hsl(16, 100%, 50%), hsl(16, 100%, 67%));
    }
    &:hover {
        background-position: 0% 0% !important;
    }
}

/* Un groupe de boutons. Sans cette regle, .button etant lui-meme un flex de
   niveau bloc, les boutons s'empilent bord a bord sur toute la largeur : on ne
   distingue plus ou finit l'un et ou commence le suivant. En ligne, avec un
   ecart, et ils passent a la ligne quand ils ne tiennent plus. */
.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.section {
    h3 {
        font-size:24px;
    }
    h1, h2 {
        position: relative;
        display: inline-block;
        width:100%;
        font-size: 32px;
        margin-bottom: 40px;
        @media (max-width: 768px) {
            font-size: 28px;
            margin-bottom: 30px;
        }
        &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            height: 3px;
            width: 100%;
        }
    }
    p {
        line-height: 1.7;
        margin-bottom: 25px;
        font-size: clamp(18px, 3vw, 22px); /* Much larger responsive font size */
    }
    ol {
        margin: 0 0 25px 1.2em;
        li {
            line-height: 1.7;
            font-size: clamp(18px, 3vw, 22px);
            margin-bottom: 12px;
        }
    }
    code {
        font-size: 0.9em;
        padding: 2px 6px;
        border-radius: 4px;
        background-color: rgba(128, 128, 128, 0.25);
    }
    p a, ol a, td a, .comparatif th a {
        color: inherit;
        overflow-wrap: anywhere;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        &:hover {
            text-decoration-thickness: 3px;
        }
    }
    &.sombre {
        background-color: var(--sombre);
        color: var(--clair);
        h1::after, h2::after {
            background-color: var(--clair);
        }
    }
    &.clair {
        background-color: var(--clair);
        color: var(--sombre);
        h1::after, h2::after {
            background-color: var(--sombre);
        }
    }
    
    & > .illustration {
        flex: 1;
        display: flex;
        justify-content: center;

        img {
            max-width: 100%;
            height: auto;
            object-fit: contain;
        }
    }
}

.intro, .blog {
    width: 100%;
    max-width: 100%; /* Take full width of the screen */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    
    & div:first-child {
        flex: 3;
        padding-right: 30px;
        h1, h2 {
            font-size: clamp(28px, 6vw, 42px); /* Much larger responsive font size */
            margin-bottom: 20px;
            font-weight: bold;
        }
    }
}

.blog div:first-child {
    flex: 2;
}

/* Sur telephone, ces deux sections ne se separaient jamais en deux lignes :
   le texte et l'illustration ont tous les deux une base nulle (flex: 3 et
   flex: 1), donc flex-wrap ne se declenche pas -- il n'y a pas de largeur
   minimale a depasser. L'illustration tombait a 67 px de large sur un
   telephone de 375 px, pour un fichier de 403 px charge en entier. On empile,
   et on borne l'image pour qu'elle ne mange pas l'ecran une fois seule. */
@media (max-width: 768px) {
    .intro, .blog {
        flex-direction: column;
        align-items: stretch;

        & div:first-child {
            padding-right: 0;
        }

        & > .illustration {
            margin-top: 30px;

            img {
                width: min(60%, 260px);
            }
        }
    }
}

.intro {
    margin: 0; /* Remove horizontal margin */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    .buttons {
        display: flex;
        gap: 30px; /* Increased gap between buttons */
        margin-top: 30px;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between; /* This spreads them apart */
    }

    .button {
        padding: 16px 28px;
    }
}

.section.latest-video {
    flex-grow:1;

    .video-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 aspect ratio (9 ÷ 16 = 0.5625 ou 56.25%) */
        height: 0;
        overflow: hidden;
        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    }
}

.socials {
    & > div {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        gap: 30px;
        & > div:first-child{
            flex: 3;
            min-width: 300px;
            line-height: 1.6;
            p {
                padding: 0;
                white-space: pre-line; /* Preserve line breaks in the text */
            }
        }
        
        & > div:last-child {
            flex: 2;
            min-width: 300px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            & > .button {
                padding: 12px 20px;
                font-weight: bold;
            }
        }
    }
}

/* Galerie de screens. Deux pieges ici :

   - un gap en pourcentage sur une grille de hauteur auto : la hauteur du
     conteneur est calculee avec un ecart de ligne nul, puis les 5 % sont
     resolus contre cette hauteur au moment de placer les lignes. Les quatre
     ecarts poussaient donc la derniere rangee ~270 px sous le bas de la
     section, par-dessus la section suivante. Un ecart en pixels n'a pas cette
     circularite.
   - les images sont en loading="lazy" : sans width/height dans le HTML elles
     ne reservent aucune place et la page saute quand elles arrivent. Les
     attributs sont poses cote HTML, height:auto les laisse se redimensionner. */
.section.screens {
    .screens-container {
        display:grid;
        grid-template-columns: 1fr 1fr;
        padding-bottom:40px;
        gap: 24px;
        img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            border-radius: 4px;
        }

        /* Sur telephone, deux colonnes ne laissent qu'environ 160 px par
           capture : on n'y distingue plus rien. Une seule colonne. */
        @media (max-width: 600px) {
            grid-template-columns: 1fr;
        }
    }
}

.preview-blog {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    .blog {
        img {
            max-width:100%;
            height:auto;
        }
        .desc {
            padding:10px;
            display:flex;
            flex-direction:column;
            background-color:rgb(160, 89, 25);
            h3 {
                font-size: 24px;
                margin-bottom: 10px;
                color: var(--clair);
            }
            p {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                max-width: 100%;
                white-space: normal;
            }
            .button {
                margin-left: auto;
                color:var(--sombre);
                max-width: fit-content;
            }
        }
    }
}

footer {
    border-top:1px solid var(--sombre);
    color: var(--sombre);
    background-color: var(--clair);
    padding: 40px Max(Calc((100vw - 1200px) / 2), 5%);
    
    .footer-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 30px;
        
        @media (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }
    
    .footer-column {
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        h3 {
            font-size: 18px;
            margin-bottom: 20px;
            position: relative;
            color: var(--sombre);

            a {
                color: var(--sombre);
                text-decoration: none;
                font-weight: bold;
            }
        }
        
        p {
            line-height: 1.6;
        }
        
        ul {
            list-style: none;
            
            li {
                &:not(:last-child) {
                    margin-bottom: 10px;
                }
                
                a {
                    color: var(--sombre);
                    text-decoration: none;
                    transition: opacity 0.2s;
                    
                    &:hover {
                        opacity: 0.8;
                    }
                }
            }
        }
        &:last-child {
            justify-content: space-between;
            text-align:right;
        }
    }
}


/* --------------------------------------------------------------------------
   En-tête sur téléphone.

   L'en-tête est en white-space: nowrap / overflow: hidden et figé à 64 px :
   ce qui ne tient pas sur une ligne est rogné, et c'était le bouton Discord
   qui partait en premier. Plutôt que de rogner, on le laisse passer sur deux
   lignes -- le logo et le bouton, puis la navigation en dessous.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    header {
        height: auto;
        white-space: normal;
        overflow: visible;
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 12px 5%;

        a.logo {
            flex: 1;
            min-width: 0;

            .logo-nom {
                font-size: 16px;
                white-space: normal;
                overflow-wrap: anywhere;
            }
        }

        nav {
            order: 3;
            flex: 1 1 100%;
            text-align: center;

            ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                row-gap: 6px;

                li {
                    margin: 0 10px;
                }
            }
        }

        .button {
            flex: none;
            font-size: 1em;
            padding: 8px 14px;
        }
    }
}

/* Sous 480 px, même sur deux lignes le libellé du bouton ne tient plus à côté
   du nom du clan : il ne reste que l'icône Discord, qui porte déjà son texte
   de remplacement. */
@media (max-width: 480px) {
    header .button {
        padding: 8px 12px;

        img {
            margin-right: 0;
        }

        span {
            display: none;
        }
    }
}

/* --- Pages de guide -------------------------------------------------------
   Tableaux comparatifs et fiches de sommaire. Les couleurs sont tirees de la
   section parente (.clair / .sombre) pour ne pas dupliquer la palette. */

.section .comparatif {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    font-size: clamp(16px, 2.2vw, 19px);
    line-height: 1.6;

    th, td {
        text-align: left;
        vertical-align: top;
        padding: 12px 16px 12px 0;
        border-bottom: 1px solid currentColor;
    }

    thead th {
        font-size: 0.95em;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom-width: 3px;
    }

    tbody th {
        width: 30%;
        padding-right: 24px;
    }

    tr:last-child th, tr:last-child td {
        border-bottom: none;
    }
}

/* Un tableau ne doit jamais faire deborder la page : c'est lui qui defile. */
.section > .comparatif {
    display: block;
    overflow-x: auto;
}

.section .fiches {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 25px;

    .fiche {
        display: block;
        height: 100%;
        padding: 20px 24px;
        border: 1px solid currentColor;
        border-radius: 8px;
        color: inherit;
        text-decoration: none;
        transition: transform 0.15s, box-shadow 0.15s;

        h3 {
            margin-bottom: 10px;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        p {
            font-size: clamp(16px, 2.2vw, 18px);
            margin-bottom: 0;
        }

        &:hover, &:focus-visible {
            transform: translateY(-2px);
            box-shadow: 0 4px 0 currentColor;
        }
    }
}

/* --- Pages de devblog -----------------------------------------------------
   Fil d'Ariane, ligne de date et mention de source : trois elements discrets
   qui ne doivent pas concurrencer le texte. */

.section {
    .fil-ariane {
        font-size: 16px;
        margin-bottom: 12px;
        opacity: 0.75;
    }

    .meta-article {
        font-size: 16px;
        margin-bottom: 25px;
        opacity: 0.75;
    }

    .source {
        font-size: 16px;
        line-height: 1.6;
        margin-top: 30px;
        margin-bottom: 0;
        opacity: 0.75;
    }

    .liste-simple {
        list-style: disc;
        margin: 0 0 25px 1.2em;

        li {
            line-height: 1.7;
            font-size: clamp(18px, 3vw, 22px);
            margin-bottom: 12px;
        }
    }

    .fil-ariane a, .source a, .liste-simple a {
        color: inherit;
        text-underline-offset: 3px;
    }
}

/* Trente lignes : on resserre pour que le tableau reste lisible d'un coup d'oeil. */
.section .tableau-devblogs {
    font-size: clamp(15px, 2vw, 17px);

    th, td {
        padding: 8px 16px 8px 0;
    }

    tbody th {
        width: auto;
        padding-right: 16px;
    }
}

/* Visuels des devblogs : les images d'origine de Siege Camp, centrées dans la
   colonne de texte, avec leur légende. Le crédit d'ensemble vit dans .source,
   en bas de page. */
.section .visuel {
    /* Les captures animées d'origine plafonnent à 900 px : au-delà on les
       étirerait, et mélanger pleines largeurs et largeurs natives donnerait un
       rythme en dents de scie d'un visuel à l'autre. La légende suit l'image,
       pas la colonne. */
    max-width: 900px;
    margin: 0 auto 30px;

    img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 4px;
    }

    figcaption {
        font-size: 16px;
        line-height: 1.5;
        margin-top: 10px;
        opacity: 0.75;
    }
}

/* Deux visuels de front quand ils se répondent ; ils repassent l'un sous
   l'autre en dessous de 700 px de colonne. */
.section .visuels {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;

    .visuel {
        flex: 1 1 320px;
        margin: 0;
    }
}


/* Vignette d'une fiche de devblog : elle prend toute la largeur de la carte,
   sous son bord arrondi, d'ou les marges negatives qui annulent le padding.
   Les fiches sans image — celles des guides — ne bougent pas. */
.section .fiches .fiche .vignette {
    display: block;
    width: calc(100% + 48px);
    /* L'attribut height="360" du HTML s'applique comme hint de presentation :
       sans height:auto ici, la vignette gardait ses 360 px de haut quelle que
       soit sa largeur et debordait vers le bas de la carte. */
    height: auto;
    margin: -20px -24px 16px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 7px 7px 0 0;
}