/* ==========================================================================
   monopoly.css — Monopoly
   Thème : tons rouges/jaunes/verts du plateau emblématique, papier monnaie
   ========================================================================== */

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

body {
    font-family: 'Kabel', 'Futura', 'Arial Black', sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background: #c5e1c5;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 30px, rgba(0,0,0,.02) 30px 31px),
        radial-gradient(ellipse at top, #d8eed8 0%, #b8d8b8 100%);
    min-height: 100vh;
}

.mono-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px;
}

.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #003d7a;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid #003d7a;
}

/* HERO ====================================================================== */
.mono-hero {
    background: #c91a1a;
    color: #fff;
    padding: 50px 30px;
    text-align: center;
    border: 6px double #fff;
    margin-bottom: 30px;
    box-shadow: 0 6px 0 #1a1a1a, 0 12px 22px rgba(0,0,0,.3);
    position: relative;
    transform: rotate(-1deg);
}

.mono-hero h1 {
    font-size: 4em;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 4px 4px 0 #1a1a1a, 8px 8px 0 rgba(0,0,0,.3);
    line-height: 1;
    margin-bottom: 15px;
}

.mono-hero .tagline {
    font-size: 1.3em;
    font-weight: 700;
    letter-spacing: 2px;
    background: #fff;
    color: #c91a1a;
    padding: 6px 18px;
    display: inline-block;
    border: 2px solid #1a1a1a;
}

.mono-hero .icons {
    font-size: 2.5em;
    letter-spacing: 0.4em;
    margin-top: 20px;
}

/* SECTIONS — style "carte propriété" ======================================= */
.section {
    background: #fff;
    margin-bottom: 26px;
    padding: 0;
    border: 3px solid #1a1a1a;
    box-shadow: 6px 6px 0 #1a1a1a;
    overflow: hidden;
}

.section h2 {
    background: #1a1a1a;
    color: #fff;
    padding: 14px 22px;
    margin: 0;
    font-size: 1.6em;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 4px solid #c91a1a;
}

.section .content { padding: 24px 28px; }

.section h3 {
    color: #c91a1a;
    text-transform: uppercase;
    margin-top: 22px;
    margin-bottom: 10px;
    font-size: 1.25em;
    letter-spacing: 1px;
    border-bottom: 2px dotted #c91a1a;
    padding-bottom: 4px;
}

.section p { margin-bottom: 12px; }
.section ul, .section ol { margin: 8px 0 14px 28px; }
.section li { margin-bottom: 5px; }

/* BANDEAU COULEURS DU PLATEAU =============================================== */
.color-strip {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    height: 8px;
    margin-bottom: 0;
}
.color-strip span:nth-child(1) { background: #955436; } /* marron */
.color-strip span:nth-child(2) { background: #aae0fa; } /* bleu clair */
.color-strip span:nth-child(3) { background: #d93a96; } /* rose */
.color-strip span:nth-child(4) { background: #f7941d; } /* orange */
.color-strip span:nth-child(5) { background: #ed1b24; } /* rouge */
.color-strip span:nth-child(6) { background: #fef200; } /* jaune */
.color-strip span:nth-child(7) { background: #1fb25a; } /* vert */
.color-strip span:nth-child(8) { background: #0072bb; } /* bleu foncé */

/* CARTES PROPRIÉTÉ ========================================================= */
.props-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 20px 0;
}
.prop-card {
    background: #fff;
    border: 2px solid #1a1a1a;
    box-shadow: 3px 3px 0 #1a1a1a;
    overflow: hidden;
}
.prop-card .header {
    color: #fff;
    text-align: center;
    padding: 10px 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
    line-height: 1.1;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prop-card.brown .header { background: #955436; }
.prop-card.lblue .header { background: #aae0fa; color: #1a1a1a; }
.prop-card.pink .header { background: #d93a96; }
.prop-card.orange .header { background: #f7941d; }
.prop-card.red .header { background: #ed1b24; }
.prop-card.yellow .header { background: #fef200; color: #1a1a1a; }
.prop-card.green .header { background: #1fb25a; }
.prop-card.blue .header { background: #0072bb; }
.prop-card .body { padding: 10px 12px; font-size: 0.85em; text-align: center; }
.prop-card .price {
    font-weight: 900;
    color: #1a1a1a;
    margin-top: 6px;
    font-size: 1.05em;
}

/* TABLE ===================================================================== */
.section table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 0.95em;
}
.section th {
    background: #c91a1a;
    color: #fff;
    padding: 10px 12px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.section td {
    padding: 10px 12px;
    border-bottom: 1px solid #ccc;
}
.section tr:nth-child(even) td { background: #fff8e8; }

/* CARTES CHANCE / CAISSE COMMUNAUTÉ ======================================== */
.chance, .caisse {
    background: #fef200;
    border: 3px solid #1a1a1a;
    padding: 16px 20px;
    margin: 14px 0;
    transform: rotate(-1deg);
    box-shadow: 4px 4px 0 #1a1a1a;
    position: relative;
}
.caisse { background: #ffa6c8; transform: rotate(1deg); }
.chance::before {
    content: 'CHANCE';
    background: #1a1a1a;
    color: #fef200;
    padding: 3px 10px;
    font-weight: 900;
    font-size: 0.75em;
    position: absolute;
    top: -12px; left: 12px;
    letter-spacing: 1px;
}
.caisse::before {
    content: 'CAISSE DE COMMUNAUTÉ';
    background: #1a1a1a;
    color: #ffa6c8;
    padding: 3px 10px;
    font-weight: 900;
    font-size: 0.75em;
    position: absolute;
    top: -12px; left: 12px;
    letter-spacing: 1px;
}

footer {
    text-align: center;
    padding: 30px 0 12px;
    color: #1a1a1a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media (max-width: 720px) {
    .mono-hero h1 { font-size: 2.5em; letter-spacing: 2px; }
    .section .content { padding: 18px 16px; }
}