/*==================================================
    GUIDE DES TAILLES
==================================================*/

.size-hero {

    padding: 110px 0 70px;

    background: linear-gradient(
        180deg,
        #F7F5EF 0%,
        #FFFFFF 100%
    );

    text-align: center;

}

.size-hero__content {

    max-width: 850px;

    margin: 0 auto;

}

.size-hero h1 {

    margin: 20px 0;

    font-size: clamp(2.5rem, 5vw, 4rem);

    line-height: 1.1;

    color: var(--color-primary);

}

.size-hero p {

    max-width: 720px;

    margin: 0 auto;

    color: #666;

    line-height: 1.8;

}

.size-page {

    padding: 90px 0 120px;

}

.size-content {

    max-width: 950px;

    margin: 0 auto;

}

.size-section {

    margin-bottom: 70px;

}

.size-section h2 {

    margin-bottom: 20px;

    color: var(--color-primary);

    font-size: 1.7rem;

}

.size-section p {

    margin-bottom: 18px;

    color: #5f5f5f;

    line-height: 1.9;

}

.size-intro {

    margin-bottom: 65px;

}

.size-tip {

    margin: 30px 0;

    padding: 25px 30px;

    background: #F8F7F2;

    border: 1px solid #E9E6DC;

    border-radius: 18px;

}

.size-tip strong {

    display: block;

    margin-bottom: 8px;

    color: var(--color-primary);

}

.size-tip p {

    margin-bottom: 0;

}

.measure-diagram {

    --diagram-accent: #B5522E;

    max-width: 420px;

    margin: 30px auto 40px;

    padding: 25px 20px 15px;

    text-align: center;

    background: #F8F7F2;

    border: 1px solid #E9E6DC;

    border-radius: 18px;

}

.measure-diagram svg {

    width: 100%;

    height: auto;

}

.measure-diagram .diagram-outline {

    fill: #fff;

    stroke: var(--color-primary);

}

.measure-diagram .diagram-accent {

    fill: var(--diagram-accent);

    stroke: var(--diagram-accent);

}

.measure-diagram .diagram-guide {

    stroke: var(--diagram-accent);

    fill: none;

    opacity: .5;

}

.measure-diagram__legend {

    margin: 12px 0 0 !important;

    font-size: .85rem;

    font-weight: 600;

    color: var(--color-primary) !important;

}

.measure-grid {

    display: grid;

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

    gap: 20px;

    margin: 30px 0;

}

.measure-card {

    padding: 28px 25px;

    background: #F8F7F2;

    border: 1px solid #E9E6DC;

    border-radius: 18px;

}

.measure-card__number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    margin-bottom: 18px;

    border-radius: 50%;

    background: var(--color-primary);

    color: #fff;

    font-weight: 700;

}

.measure-card h3 {

    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: 1.15rem;

}

.measure-card p {

    margin-bottom: 0;

    font-size: .95rem;

    line-height: 1.7;

}

.size-note {

    margin-top: 20px;

    font-size: .88rem;

    color: #888 !important;

}

.category-divider {

    display: flex;

    align-items: center;

    gap: 20px;

    margin: 0 0 45px;

}

.category-divider::before,

.category-divider::after {

    content: "";

    flex: 1 1 auto;

    height: 1px;

    background: #E9E6DC;

}

.category-divider h2 {

    flex: 0 0 auto;

    margin: 0;

    padding: 0;

    color: var(--color-primary);

    font-size: 1.3rem;

    white-space: nowrap;

}

.size-calculator {

    margin: 40px 0 70px;

    padding: 40px 35px;

    background: linear-gradient(135deg, #F8F7F2, #F0EEE5);

    border: 1px solid #E9E6DC;

    border-radius: 22px;

}

.size-calculator h2 {

    margin-bottom: 12px;

    color: var(--color-primary);

    font-size: 1.5rem;

}

.size-calculator > p {

    max-width: 560px;

    margin-bottom: 0;

    color: #5f5f5f;

}

.calc-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 28px 0 26px;

}

.calc-tab {

    padding: 11px 20px;

    border: 1px solid #E9E6DC;

    border-radius: 30px;

    background: #fff;

    color: #666;

    font-family: inherit;

    font-weight: 600;

    font-size: .88rem;

    cursor: pointer;

    transition: all .2s ease;

}

.calc-tab:hover {

    border-color: var(--color-primary);

    color: var(--color-primary);

}

.calc-tab.active {

    background: var(--color-primary);

    border-color: var(--color-primary);

    color: #fff;

}

.calc-model-select {

    max-width: 480px;

    margin-bottom: 6px;

}

.calc-model-select label,

.calc-panel label {

    display: block;

    margin-bottom: 8px;

    color: var(--color-primary);

    font-weight: 600;

    font-size: .85rem;

}

.calc-model-select select,

.calc-panel input,

.calc-panel select {

    width: 100%;

    padding: 13px 15px;

    margin-bottom: 20px;

    border: 1px solid #E9E6DC;

    border-radius: 10px;

    background: #fff;

    color: #333;

    font-family: inherit;

    font-size: .95rem;

}

.calc-model-select select:focus,

.calc-panel input:focus,

.calc-panel select:focus {

    outline: none;

    border-color: var(--color-primary);

}

.calc-panel {

    max-width: 480px;

}

.calc-panel .btn {

    border: none;

    cursor: pointer;

}

.calc-result {

    max-width: 560px;

    margin-top: 30px;

    padding: 26px 28px;

    background: #fff;

    border: 2px solid var(--color-primary);

    border-radius: 16px;

}

.calc-result__size {

    margin-bottom: 8px;

    color: var(--color-primary);

    font-size: 2rem;

    font-weight: 800;

}

.calc-result__detail {

    margin-bottom: 14px;

    color: #666;

    font-size: .92rem;

    line-height: 1.7;

}

.calc-result__link {

    color: var(--color-primary);

    font-weight: 600;

    font-size: .88rem;

    text-decoration: underline;

}

.calc-result__error {

    margin: 0;

    color: #B5522E;

    font-size: .92rem;

}

.model-heading {

    margin-bottom: 25px;

}

.model-label {

    display: inline-block;

    margin-bottom: 12px;

    padding: 7px 13px;

    border-radius: 30px;

    background: #F0EEE5;

    color: var(--color-primary);

    font-size: .78rem;

    font-weight: 700;

    letter-spacing: .04em;

    text-transform: uppercase;

}

.model-heading h2 {

    margin-bottom: 10px;

}

.model-heading p {

    margin-bottom: 0;

}

.table-wrapper {

    width: 100%;

    overflow-x: auto;

    border: 1px solid #E9E6DC;

    border-radius: 18px;

    background: #fff;

}

.size-table {

    width: 100%;

    min-width: 650px;

    border-collapse: collapse;

    text-align: center;

}

.size-table caption {

    padding: 20px 15px;

    background: #F8F7F2;

    color: #666;

    font-size: .9rem;

    text-align: left;

}

.size-table th,

.size-table td {

    padding: 15px 13px;

    border-bottom: 1px solid #E9E6DC;

}

.size-table thead th {

    background: var(--color-primary);

    color: #fff;

    font-weight: 700;

}

.size-table tbody th {

    color: var(--color-primary);

    font-weight: 700;

    background: #FBFAF7;

}

.size-table tbody tr:last-child th,

.size-table tbody tr:last-child td {

    border-bottom: 0;

}

.size-table tbody tr:hover {

    background: #FAF9F5;

}

.choice-card {

    display: grid;

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

    gap: 20px;

    margin: 30px 0;

}

.choice-card__item {

    display: flex;

    gap: 15px;

    align-items: flex-start;

    padding: 25px;

    background: #F8F7F2;

    border: 1px solid #E9E6DC;

    border-radius: 18px;

}

.choice-card__item > span {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: var(--color-primary);

    color: #fff;

    font-weight: 700;

}

.choice-card__item strong {

    display: block;

    margin-bottom: 5px;

    color: var(--color-primary);

}

.choice-card__item p {

    margin: 0;

    font-size: .92rem;

    line-height: 1.6;

}

.size-care {

    padding-top: 10px;

}

.care-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    margin-top: 30px;

}

.care-item {

    padding: 25px 18px;

    text-align: center;

    background: #F8F7F2;

    border: 1px solid #E9E6DC;

    border-radius: 18px;

}

.care-item span {

    display: block;

    margin-bottom: 12px;

    color: var(--color-primary);

    font-size: 1.4rem;

    font-weight: 700;

}

.care-item p {

    margin: 0;

    font-size: .88rem;

    line-height: 1.5;

}

.size-contact {

    margin-top: 80px;

    padding: 55px 35px;

    text-align: center;

    background: linear-gradient(
        135deg,
        #6B6E4A,
        #81855D
    );

    border-radius: 25px;

    color: #fff;

}

.size-contact h2 {

    margin-bottom: 15px;

    color: #fff;

}

.size-contact p {

    max-width: 650px;

    margin: 0 auto 30px;

    color: rgba(255,255,255,.9);

    line-height: 1.8;

}

@media (max-width: 900px) {

    .measure-grid {

        grid-template-columns: 1fr;

    }

    .care-grid {

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

    }

}

@media (max-width: 768px) {

    .size-hero {

        padding: 80px 0 50px;

    }

    .size-page {

        padding: 65px 0 80px;

    }

    .size-section {

        margin-bottom: 55px;

    }

    .size-section h2 {

        font-size: 1.45rem;

    }

    .category-divider {

        margin-bottom: 35px;

    }

    .category-divider h2 {

        font-size: 1.15rem;

    }

    .size-calculator {

        padding: 28px 22px;

    }

    .size-tip,

    .measure-card,

    .choice-card__item {

        padding: 22px;

    }

    .choice-card {

        grid-template-columns: 1fr;

    }

    .care-grid {

        grid-template-columns: 1fr 1fr;

    }

    .table-wrapper {

        border-radius: 14px;

    }

    .size-table {

        min-width: 600px;

    }

    .size-table th,

    .size-table td {

        padding: 13px 10px;

        font-size: .9rem;

    }

    .size-contact {

        padding: 40px 25px;

    }

}

@media (max-width: 480px) {

    .care-grid {

        grid-template-columns: 1fr;

    }

}