/* ========================================
   DICTIONNAIRE LUNKAMUUN
======================================== */


/* ========================================
   POLICE
======================================== */

@import url(
    "https://fonts.googleapis.com/css2?family=Faculty+Glyphic&display=swap"
);


/* ========================================
   VARIABLES
======================================== */

:root {

    --violet: #6400bc;
    --violet-fonce: #4d008f;
    --violet-clair: #f1e7f7;

    --orange: #ff763b;
    --orange-clair: #fff0ea;

    --jaune: #ffcd00;
    --jaune-clair: #fff8d9;

    --blanc: #ffffff;

    --fond: #faf7ff;
    --texte: #24152e;
    --gris: #746b7a;
    --gris-clair: #e8e1eb;

    --bordure: #e3d9e9;
}


/* ========================================
   BASE
======================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {

    margin: 0;

    min-height: 100vh;

    font-family:
        "Faculty Glyphic",
        Arial,
        Helvetica,
        sans-serif;

    background:
        linear-gradient(
            180deg,
            #faf7ff 0%,
            #ffffff 100%
        );

    color: var(--texte);
}


/* ========================================
   EN-TÊTE
======================================== */

.dictionary-header {

    width: 100%;

    padding:
        30px 20px 25px;

    background:
        var(--violet);

    color:
        var(--blanc);

    border-bottom:
        6px solid var(--jaune);

    box-shadow:
        0 4px 15px
        rgba(100, 0, 188, 0.18);
}

.header-title {

    max-width:
        1100px;

    margin:
        0 auto;

    text-align:
        center;
}

.title-line {

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        20px;

    font-size:
        clamp(1.8rem, 4vw, 3rem);

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.04em;
}

.title-line span:first-child {
    text-align: right;
}

.title-line span:last-child {
    text-align: left;
}

.flag {

    width:
        80px;

    height:
        52px;

    object-fit:
        cover;

    border-radius:
        8px;

    border:
        3px solid var(--blanc);

    background:
        var(--blanc);

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, 0.2);
}

.subtitle-line {

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        8px;

    font-size:
        0.9rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.12em;

    opacity:
        0.95;
}

.subtitle-line span:first-child {
    text-align: right;
}

.subtitle-line span:last-child {
    text-align: left;
}

.header-separator {
    width:
        80px;
}


/* ========================================
   RECHERCHE
======================================== */

.search-section {

    display:
        flex;

    justify-content:
        center;

    padding:
        35px 20px 15px;
}

.search-box {

    position:
        relative;

    width:
        min(650px, 100%);
}

#searchInput {

    width:
        100%;

    height:
        58px;

    padding:
        0 55px 0 22px;

    border:
        3px solid var(--violet);

    border-radius:
        30px;

    background:
        var(--blanc);

    color:
        var(--texte);

    font-family:
        "Faculty Glyphic",
        Arial,
        sans-serif;

    font-size:
        1.05rem;

    outline:
        none;

    box-shadow:
        0 5px 18px
        rgba(100, 0, 188, 0.12);

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

#searchInput:focus {

    border-color:
        var(--orange);

    box-shadow:
        0 5px 22px
        rgba(255, 118, 59, 0.2);
}

#searchInput::placeholder {
    color:
        #9a919f;
}

#clearButton {

    display:
        none;

    position:
        absolute;

    right:
        13px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        34px;

    height:
        34px;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--orange);

    color:
        var(--blanc);

    font-family:
        Arial,
        sans-serif;

    font-size:
        1.5rem;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        transform 0.15s,
        background 0.15s;
}

#clearButton:hover {

    background:
        var(--violet);

    transform:
        translateY(-50%)
        scale(1.08);
}


/* ========================================
   COMPTEUR
======================================== */

.dictionary-info {

    max-width:
        1100px;

    margin:
        0 auto;

    padding:
        5px 20px 20px;

    text-align:
        center;

    color:
        var(--gris);

    font-size:
        0.9rem;

    font-weight:
        600;
}


/* ========================================
   DICTIONNAIRE
======================================== */

.dictionary {

    position:
        relative;

    width:
        min(
            1100px,
            calc(100% - 30px)
        );

    margin:
        0 auto 50px;

    overflow:
        visible;

    background:
        var(--blanc);

    border:
        2px solid var(--bordure);

    border-radius:
        16px;

    box-shadow:
        0 8px 30px
        rgba(100, 0, 188, 0.08);
}


/* ========================================
   TITRES DES COLONNES
======================================== */

.language-header {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    background:
        var(--violet);

    color:
        var(--blanc);

    font-size:
        1rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    border-radius:
        14px 14px 0 0;
}

.language-header > div {

    padding:
        18px 25px;

    text-align:
        center;
}

.language-header > div:first-child {

    border-right:
        2px solid
        rgba(255, 255, 255, 0.3);
}


/* ========================================
   CONTENEUR DES RÉSULTATS
======================================== */

#results,
.results {

    position:
        relative;

    overflow:
        visible;
}


/* ========================================
   RÉSULTATS
======================================== */

.result {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    min-height:
        64px;

    border-bottom:
        1px solid #eee6f3;

    background:
        var(--blanc);

    transition:
        background 0.15s,
        box-shadow 0.15s;

    z-index:
        1;
}

.result:last-child {
    border-bottom:
        none;
}

.result:hover {
    background:
        #fffaf4;
}

.result:has(.word-menu.open) {

    z-index:
        1000;

    background:
        var(--blanc);

    box-shadow:
        0 4px 14px
        rgba(36, 21, 46, 0.06);
}


/* ========================================
   CELLULES
======================================== */

.result-lunkamuun,
.result-francais {

    display:
        flex;

    align-items:
        center;

    padding:
        14px 25px;

    font-size:
        1.05rem;

    line-height:
        1.4;

    overflow-wrap:
        anywhere;
}


/* ========================================
   COLONNE LUNKAMUUN
======================================== */

.result-lunkamuun {

    grid-column:
        2;

    grid-row:
        1;

    justify-content:
        flex-start;

    gap:
        15px;

    font-weight:
        700;

    color:
        var(--violet);

    border-left:
        2px solid #eee6f3;
}


/* ========================================
   MOT LUNKAMUUN
======================================== */

.lunkamuun-word {

    flex:
        0 1 auto;

    min-width:
        0;

    color:
        var(--violet);

    font-weight:
        700;
}


/* ========================================
   TRANSCRIPTION IPA
======================================== */

.lunkamuun-pronunciation {

    margin-left:
        auto;

    flex:
        0 0 auto;

    text-align:
        right;

    color:
        var(--gris);

    font-family:
        "Faculty Glyphic",
        Arial,
        sans-serif;

    font-size:
        0.88rem;

    font-weight:
        400;

    font-style:
        normal;

    white-space:
        nowrap;

    opacity:
        0.85;
}


/* ========================================
   COLONNE FRANÇAISE
======================================== */

.result-francais {

    position:
        relative;

    grid-column:
        1;

    grid-row:
        1;

    gap:
        10px;

    color:
        var(--texte);

    padding-right:
        60px;
}

.result-francais > .word-text {

    flex:
        1;

    min-width:
        0;
}


/* ========================================
   MENU DES SOURCES
======================================== */

.word-menu {

    position:
        absolute;

    right:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    z-index:
        1001;

    flex-shrink:
        0;
}


/* ========================================
   BOUTON [...]
======================================== */

.word-menu-button {

    position:
        relative;

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--violet);

    color:
        var(--blanc);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        1.15rem;

    font-weight:
        800;

    line-height:
        1;

    cursor:
        pointer;

    box-shadow:
        0 2px 6px
        rgba(100, 0, 188, 0.25);

    transition:
        background 0.15s,
        transform 0.15s,
        box-shadow 0.15s;
}

.word-menu-button:hover {

    background:
        var(--orange);

    transform:
        scale(1.06);

    box-shadow:
        0 4px 10px
        rgba(255, 118, 59, 0.25);
}

.word-menu-button:focus {
    outline:
        none;
}

.word-menu-button:focus-visible {

    background:
        var(--orange);

    outline:
        3px solid
        rgba(255, 205, 0, 0.7);

    outline-offset:
        2px;
}


/* ========================================
   MENU DÉROULANT
======================================== */

.word-menu-dropdown {

    display:
        none;

    position:
        absolute;

    right:
        0;

    top:
        calc(100% + 7px);

    z-index:
        9999;

    min-width:
        220px;

    padding:
        5px;

    background:
        rgba(255, 255, 255, 0.98);

    border:
        1px solid #dcd3e2;

    border-radius:
        8px;

    box-shadow:
        0 10px 28px
        rgba(36, 21, 46, 0.20);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.word-menu-dropdown::before {

    content:
        "";

    position:
        absolute;

    top:
        -5px;

    right:
        10px;

    width:
        9px;

    height:
        9px;

    background:
        var(--blanc);

    border-left:
        1px solid #dcd3e2;

    border-top:
        1px solid #dcd3e2;

    transform:
        rotate(45deg);
}

.word-menu.open .word-menu-dropdown {
    display:
        block;
}


/* ========================================
   LIENS DU MENU
======================================== */

.word-menu-dropdown a {

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    min-height:
        38px;

    padding:
        8px 11px;

    border-radius:
        5px;

    color:
        var(--texte);

    background:
        transparent;

    text-decoration:
        none;

    font-family:
        "Faculty Glyphic",
        Arial,
        sans-serif;

    font-size:
        0.9rem;

    font-weight:
        500;

    white-space:
        nowrap;

    transition:
        background 0.1s,
        color 0.1s;
}

.word-menu-dropdown a:hover {

    background:
        var(--violet);

    color:
        var(--blanc);
}

.word-menu-dropdown a::before {

    content:
        "↗";

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        22px;

    margin-right:
        7px;

    color:
        var(--orange);

    font-size:
        0.9rem;

    font-weight:
        800;
}

.word-menu-dropdown a:hover::before {
    color:
        var(--jaune);
}

.word-menu-dropdown a + a {
    margin-top:
        2px;
}


/* ========================================
   ÉCRAN D'ACCUEIL
======================================== */

.welcome {

    padding:
        55px 25px;

    text-align:
        center;
}

.welcome-flag {

    width:
        90px;

    height:
        58px;

    object-fit:
        cover;

    border-radius:
        9px;

    margin-bottom:
        18px;

    box-shadow:
        0 4px 12px
        rgba(100, 0, 188, 0.15);
}

.welcome p {

    max-width:
        700px;

    margin:
        10px auto;

    font-size:
        1.05rem;

    line-height:
        1.6;
}

.lunkamuun-welcome {

    color:
        var(--violet);

    font-weight:
        600;
}


/* ========================================
   AUCUN RÉSULTAT
======================================== */

.no-results {

    padding:
        55px 25px;

    text-align:
        center;
}

.no-results strong {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--violet);

    font-size:
        1.2rem;
}

.no-results p {

    margin:
        0;

    color:
        var(--gris);
}


/* =========================================================
   CONJUGAISON
========================================================= */


/* ========================================
   PAGE
======================================== */

.conjugation-page {

    width:
        min(
            1100px,
            calc(100% - 30px)
        );

    margin:
        0 auto 60px;
}


/* ========================================
   INTRODUCTION
======================================== */

.conjugation-intro {

    padding:
        45px 20px 35px;

    text-align:
        center;
}

.conjugation-intro h1 {

    margin:
        0 0 10px;

    color:
        var(--violet);

    font-size:
        clamp(1.7rem, 4vw, 2.4rem);

    font-weight:
        800;
}

.conjugation-intro p {

    margin:
        7px auto;

    color:
        var(--gris);

    font-size:
        1rem;

    line-height:
        1.6;
}

.conjugation-intro-lunkamuun {

    color:
        var(--violet) !important;

    font-weight:
        600;
}


/* ========================================
   SECTION
======================================== */

.conjugation-section {

    margin-bottom:
        40px;
}

.conjugation-section-title {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin:
        0 0 18px;

    padding:
        0 5px 12px;

    border-bottom:
        2px solid var(--bordure);
}

.section-number {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        42px;

    height:
        42px;

    border-radius:
        10px;

    background:
        var(--violet);

    color:
        var(--blanc);

    font-family:
        Arial,
        sans-serif;

    font-size:
        0.8rem;

    font-weight:
        800;
}

.conjugation-section-title h2 {

    margin:
        0;

    color:
        var(--texte);

    font-size:
        1.35rem;

    font-weight:
        800;
}

.conjugation-section-title div span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--gris);

    font-size:
        0.82rem;
}


/* ========================================
   GRILLE DES TEMPS
======================================== */

.tense-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        18px;

    align-items:
        start;
}


/* ========================================
   CARTES DE TEMPS
======================================== */

.tense-card {

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        var(--blanc);

    border:
        1px solid var(--bordure);

    border-radius:
        13px;

    box-shadow:
        0 5px 20px
        rgba(100, 0, 188, 0.06);

    transition:
        transform 0.15s,
        box-shadow 0.15s;
}

.tense-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(100, 0, 188, 0.11);
}


/* ========================================
   EN-TÊTE D'UNE CARTE
======================================== */

.tense-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        16px 18px;

    background:
        var(--violet-clair);

    border-bottom:
        1px solid var(--bordure);
}

.tense-header h3 {

    margin:
        0;

    color:
        var(--violet-fonce);

    font-size:
        1.05rem;

    font-weight:
        800;
}

.tense-header span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--gris);

    font-size:
        0.76rem;
}


/* ========================================
   DESCRIPTION
======================================== */

.tense-description {

    margin:
        0;

    padding:
        13px 18px 3px;

    color:
        var(--gris);

    font-size:
        0.82rem;

    line-height:
        1.5;
}

.tense-description strong {
    color:
        var(--violet);
}


/* ========================================
   TABLE DE CONJUGAISON
======================================== */

.conjugation-table {
    width:
        100%;
}

.conjugation-row {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    min-height:
        43px;

    border-bottom:
        1px solid #eee6f3;
}

.conjugation-row:last-child {
    border-bottom:
        none;
}

.conjugation-row > span {

    display:
        flex;

    align-items:
        center;

    padding:
        8px 13px;

    font-size:
        0.82rem;
}

.conjugation-row > span:first-child {

    color:
        var(--gris);

    font-weight:
        500;
}

.conjugation-row > span:last-child {

    color:
        var(--violet);

    border-left:
        1px solid #eee6f3;

    font-weight:
        700;
}

.conjugation-row:not(.conjugation-head):hover {
    background:
        #fffaf4;
}


/* ========================================
   EN-TÊTE DU TABLEAU
======================================== */

.conjugation-row.conjugation-head {

    min-height:
        38px;

    background:
        #faf7fc;
}

.conjugation-row.conjugation-head > span {

    color:
        var(--texte);

    font-family:
        "Faculty Glyphic",
        Arial,
        sans-serif;

    font-size:
        0.68rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}

.conjugation-row.conjugation-head > span:last-child {
    color:
        var(--violet);
}


/* ========================================
   EXEMPLE
======================================== */

.example-box {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin:
        0;

    margin-top:
        auto;

    padding:
        13px 16px;

    background:
        var(--jaune-clair);

    border-top:
        1px solid
        rgba(255, 205, 0, 0.5);
}

.example-label {

    padding:
        4px 7px;

    border-radius:
        5px;

    background:
        var(--jaune);

    color:
        var(--texte);

    font-family:
        Arial,
        sans-serif;

    font-size:
        0.62rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.04em;
}

.example-box strong {

    color:
        var(--violet);

    font-size:
        0.88rem;
}

.example-box > span:not(.example-label) {

    color:
        var(--gris);

    font-size:
        0.73rem;
}

.example-box small {

    flex-basis:
        100%;

    color:
        var(--gris);

    font-size:
        0.75rem;

    line-height:
        1.4;
}


/* ========================================
   NOTE FINALE
======================================== */

.conjugation-note {

    margin:
        30px 0 0;

    padding:
        18px 21px;

    background:
        var(--orange-clair);

    border-left:
        5px solid var(--orange);

    border-radius:
        9px;
}

.conjugation-note strong {

    color:
        var(--violet-fonce);

    font-size:
        0.92rem;
}

.conjugation-note p {

    margin:
        7px 0 0;

    color:
        var(--gris);

    font-size:
        0.84rem;

    line-height:
        1.5;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .tense-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 650px) {


    /* ----------------------------
       EN-TÊTE
    ---------------------------- */

    .dictionary-header {

        padding:
            25px 15px 20px;
    }


    .title-line {

        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .title-line span:first-child,
    .title-line span:last-child {

        text-align:
            center;
    }


    .subtitle-line {

        grid-template-columns:
            1fr;

        gap:
            4px;
    }


    .subtitle-line span:first-child,
    .subtitle-line span:last-child {

        text-align:
            center;
    }


    .header-separator {
        display:
            none;
    }


    .flag {

        margin:
            5px auto;
    }


    /* ----------------------------
       DICTIONNAIRE
    ---------------------------- */

    .dictionary {

        width:
            calc(100% - 16px);

        border-radius:
            10px;
    }


    .language-header {

        font-size:
            0.8rem;

        border-radius:
            8px 8px 0 0;
    }


    .language-header > div {

        padding:
            14px 8px;
    }


    /* ----------------------------
       RÉSULTATS
    ---------------------------- */

    .result {

        min-height:
            58px;
    }


    .result-lunkamuun,
    .result-francais {

        padding:
            12px 10px;

        font-size:
            0.9rem;
    }


    .result-francais {

        padding-right:
            45px;
    }


    /* ----------------------------
       TRANSCRIPTION
    ---------------------------- */

    .result-lunkamuun {

        gap:
            8px;
    }


    .lunkamuun-pronunciation {

        font-size:
            0.74rem;

        margin-left:
            auto;
    }


    /* ----------------------------
       BOUTON [...]
    ---------------------------- */

    .word-menu {

        right:
            7px;
    }


    .word-menu-button {

        width:
            29px;

        height:
            29px;

        font-size:
            1rem;
    }


    /* ----------------------------
       MENU
    ---------------------------- */

    .word-menu-dropdown {

        min-width:
            190px;

        right:
            -4px;
    }


    .word-menu-dropdown a {

        min-height:
            36px;

        padding:
            8px 9px;

        font-size:
            0.85rem;
    }


    .welcome {

        padding:
            40px 18px;
    }


    /* =================================================
       CONJUGAISON
    ================================================= */

    .conjugation-page {

        width:
            calc(100% - 16px);

        margin-bottom:
            35px;
    }


    .conjugation-intro {

        padding:
            30px 10px 25px;
    }


    .conjugation-intro h1 {

        font-size:
            1.55rem;
    }


    .conjugation-section-title {

        gap:
            10px;
    }


    .section-number {

        width:
            36px;

        height:
            36px;

        border-radius:
            8px;

        font-size:
            0.7rem;
    }


    .conjugation-section-title h2 {

        font-size:
            1.1rem;
    }


    .conjugation-section-title div span {

        font-size:
            0.72rem;
    }


    /* ----------------------------
       CARTES
    ---------------------------- */

    .tense-grid {

        grid-template-columns:
            1fr;

        gap:
            13px;
    }


    .tense-card {

        border-radius:
            11px;
    }


    .tense-header {

        padding:
            14px 13px;
    }


    .tense-header h3 {

        font-size:
            0.95rem;
    }


    .tense-header span {

        font-size:
            0.7rem;
    }


    .conjugation-row {

        grid-template-columns:
            0.9fr 1.1fr;

        min-height:
            45px;
    }


    .conjugation-row > span {

        padding:
            8px 10px;

        font-size:
            0.78rem;
    }


    .conjugation-row.conjugation-head > span {

        font-size:
            0.63rem;
    }


    .tense-description {

        padding:
            12px 13px 3px;

        font-size:
            0.76rem;
    }


    .example-box {

        padding:
            13px;

        gap:
            6px;
    }


    .example-box strong {

        font-size:
            0.86rem;
    }


    .example-box > span:not(.example-label) {

        font-size:
            0.72rem;
    }


    .example-box small {

        font-size:
            0.73rem;
    }


    .conjugation-note {

        padding:
            15px;

        margin-top:
            25px;
    }


    .conjugation-note p {

        font-size:
            0.78rem;
    }

}