/* ============================================================
   ENTRETIEN MATRIMONIAL — Design méditerranéen / terracotta
   Polices : Fraunces (display sérif) + Inter Tight (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root {
    /* Palette terracotta / ocre / olive */
    --c-bg:         #f6efe4;       /* fond sable clair */
    --c-bg-2:       #efe6d4;       /* sable un peu plus foncé */
    --c-paper:      #fdfaf3;       /* papier crème */
    --c-ink:        #2d1d12;       /* encre brun foncé */
    --c-ink-soft:   #5a4434;
    --c-ink-mute:   #8a7560;

    --c-terra:      #c2533a;       /* terracotta primaire */
    --c-terra-dark: #8a3826;
    --c-ocre:       #d4974a;
    --c-olive:      #6b7d3f;
    --c-olive-dark: #4a5a2a;
    --c-rose:       #d4736b;

    /* Couleurs des deux participants */
    --c-p1:         #c2533a;       /* terracotta */
    --c-p1-soft:    #f5dfd8;
    --c-p2:         #6b7d3f;       /* olive */
    --c-p2-soft:    #e2e7d0;

    /* États comparaison */
    --c-match:      #5a8a3f;
    --c-match-bg:   #e3edd4;
    --c-partial:    #c89030;
    --c-partial-bg: #f7e9c8;
    --c-diff:       #b03a2a;
    --c-diff-bg:    #f5d7cf;
    --c-empty:      #8a7560;
    --c-empty-bg:   #ece5d6;

    --radius-sm:    8px;
    --radius:       16px;
    --radius-lg:    24px;

    --shadow-sm:    0 2px 6px rgba(45, 29, 18, 0.06);
    --shadow:       0 8px 24px rgba(45, 29, 18, 0.08);
    --shadow-lg:    0 20px 50px rgba(45, 29, 18, 0.12);

    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Inter Tight', -apple-system, system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--c-bg);
    color: var(--c-ink);
    line-height: 1.55;
    min-height: 100vh;
    /* motif léger en fond */
    background-image:
        radial-gradient(circle at 10% 20%, rgba(194, 83, 58, 0.06) 0, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(107, 125, 63, 0.06) 0, transparent 40%);
    background-attachment: fixed;
}

/* ===================== Layout ===================== */
.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}
.container--quiz { max-width: 760px; }
.container--wide { max-width: 980px; }

/* ===================== Lang toggle ===================== */
.lang-toggle {
    position: absolute;
    top: 20px;
    right: 24px;
    display: flex;
    gap: 4px;
    background: var(--c-paper);
    border-radius: 999px;
    padding: 4px;
    box-shadow: var(--shadow-sm);
}
.lang-toggle a {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: var(--c-ink-mute);
    transition: all 0.2s ease;
}
.lang-toggle a.active {
    background: var(--c-terra);
    color: white;
}

/* ===================== Hero (Home) ===================== */
.hero {
    text-align: center;
    margin-bottom: 48px;
    animation: fadeUp 0.6s ease;
}
.hero__mark {
    font-size: 32px;
    color: var(--c-terra);
    margin-bottom: 16px;
    animation: heartBeat 2s ease-in-out infinite;
}
.hero__eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--c-terra);
    margin-bottom: 12px;
}
.hero__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: var(--c-ink);
}
.hero__title em { font-style: italic; color: var(--c-terra); }
.hero__intro {
    font-size: 17px;
    color: var(--c-ink-soft);
    max-width: 540px;
    margin: 0 auto 24px;
    line-height: 1.65;
}
.hero__count {
    font-size: 14px;
    color: var(--c-ink-mute);
    padding-top: 16px;
    border-top: 1px solid rgba(45, 29, 18, 0.1);
    display: inline-block;
    padding: 12px 24px;
}
.hero__count strong {
    font-family: var(--font-display);
    color: var(--c-terra);
    font-size: 18px;
    font-weight: 600;
}

/* ===================== Form card ===================== */
.form-card {
    background: var(--c-paper);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    box-shadow: var(--shadow);
    animation: fadeUp 0.7s ease 0.1s both;
    position: relative;
    overflow: hidden;
}
.form-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-terra), var(--c-ocre), var(--c-olive));
}

.field { margin-bottom: 24px; }
.field:last-of-type { margin-bottom: 28px; }

.field__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-ink-soft);
    margin-bottom: 10px;
}

.field input[type=text] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid rgba(45, 29, 18, 0.12);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 16px;
    background: white;
    color: var(--c-ink);
    transition: all 0.2s ease;
}
.field input[type=text]:focus {
    outline: none;
    border-color: var(--c-terra);
    box-shadow: 0 0 0 3px rgba(194, 83, 58, 0.12);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width: 540px) {
    .grid-2 { grid-template-columns: 1fr; }
}

/* Radio pills */
.radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.radio-pill {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.radio-pill input { display: none; }
.radio-pill span {
    padding: 10px 20px;
    border: 1.5px solid rgba(45, 29, 18, 0.12);
    border-radius: 999px;
    background: white;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-ink-soft);
    transition: all 0.2s ease;
}
.radio-pill input:checked + span {
    background: var(--c-terra);
    border-color: var(--c-terra);
    color: white;
    box-shadow: 0 4px 12px rgba(194, 83, 58, 0.3);
}

/* ===================== Buttons ===================== */
.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-primary {
    background: var(--c-ink);
    color: var(--c-paper);
    width: 100%;
    box-shadow: 0 4px 14px rgba(45, 29, 18, 0.2);
}
.btn-primary:hover {
    background: var(--c-terra);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(194, 83, 58, 0.3);
}
.btn-primary .btn-arrow { transition: transform 0.2s ease; }
.btn-primary:hover .btn-arrow { transform: translateX(4px); }

.btn-secondary {
    background: white;
    color: var(--c-ink);
    border: 1.5px solid rgba(45, 29, 18, 0.12);
}
.btn-secondary:hover {
    background: var(--c-bg-2);
    border-color: var(--c-ink-mute);
}

/* ===================== Footer ===================== */
.footer {
    text-align: center;
    margin-top: 48px;
    color: var(--c-terra);
    opacity: 0.5;
    font-size: 12px;
    letter-spacing: 0.5em;
}

/* ===================== Quiz page ===================== */
.quiz-head {
    margin-bottom: 32px;
    animation: fadeUp 0.4s ease;
}
.quiz-head__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}
.quiz-head__cat {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    color: var(--c-terra);
}
.quiz-head__counter {
    font-size: 13px;
    color: var(--c-ink-mute);
    letter-spacing: 0.05em;
}
.quiz-head__counter strong {
    color: var(--c-ink);
    font-weight: 600;
}

.progress {
    height: 6px;
    background: rgba(45, 29, 18, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--c-terra), var(--c-ocre));
    border-radius: 999px;
    transition: width 0.5s ease;
}

/* Question card */
.question-card {
    background: var(--c-paper);
    padding: 36px 32px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    animation: fadeUp 0.5s ease 0.1s both;
}
.question-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--c-terra), var(--c-ocre));
}
.question-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--c-ink-mute);
    margin-bottom: 12px;
}
.question-card__text {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.3;
    color: var(--c-ink);
    letter-spacing: -0.01em;
}

/* Answer blocks */
.answers-form { animation: fadeUp 0.5s ease 0.2s both; }

.answer-block {
    background: var(--c-paper);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 16px;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}
.answer-block:focus-within {
    border-color: rgba(194, 83, 58, 0.25);
}
.answer-block--p1 { box-shadow: 0 2px 12px rgba(194, 83, 58, 0.08); }
.answer-block--p2 { box-shadow: 0 2px 12px rgba(107, 125, 63, 0.08); }

.answer-block__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-soft);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    font-family: var(--font-display);
}
.badge--p1 { background: var(--c-p1); }
.badge--p2 { background: var(--c-p2); }

.answer-block textarea {
    width: 100%;
    border: 1.5px solid rgba(45, 29, 18, 0.1);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--c-ink);
    background: white;
    resize: vertical;
    min-height: 80px;
    transition: all 0.2s ease;
}
.answer-block--p1 textarea:focus {
    outline: none;
    border-color: var(--c-p1);
    box-shadow: 0 0 0 3px rgba(194, 83, 58, 0.12);
}
.answer-block--p2 textarea:focus {
    outline: none;
    border-color: var(--c-p2);
    box-shadow: 0 0 0 3px rgba(107, 125, 63, 0.12);
}

.form-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    align-items: center;
}
.form-actions .btn-primary { width: auto; flex: 0 0 auto; }

/* ===================== Comparison page ===================== */
.comp-head {
    text-align: center;
    margin-bottom: 36px;
    animation: fadeUp 0.5s ease;
}
.comp-head__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 4.5vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.comp-head__sub {
    color: var(--c-ink-soft);
    font-size: 16px;
}

/* Stats */
.stats {
    background: var(--c-paper);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: var(--shadow);
    animation: fadeUp 0.5s ease 0.1s both;
}
.stats__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: 20px;
    color: var(--c-ink-soft);
    margin-bottom: 18px;
    text-align: center;
}
.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 600px) {
    .stats__grid { grid-template-columns: repeat(2, 1fr); }
}
.stat {
    text-align: center;
    padding: 18px 8px;
    border-radius: var(--radius);
}
.stat--match   { background: var(--c-match-bg); }
.stat--partial { background: var(--c-partial-bg); }
.stat--diff    { background: var(--c-diff-bg); }
.stat--empty   { background: var(--c-empty-bg); }

.stat__num {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 36px;
    line-height: 1;
    margin-bottom: 6px;
}
.stat--match .stat__num   { color: var(--c-match); }
.stat--partial .stat__num { color: var(--c-partial); }
.stat--diff .stat__num    { color: var(--c-diff); }
.stat--empty .stat__num   { color: var(--c-empty); }

.stat__lbl {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-ink-soft);
}

/* Action bar */
.action-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 24px 0;
    flex-wrap: wrap;
}

/* Category heading */
.comp-cat {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    color: var(--c-terra);
    margin: 36px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(194, 83, 58, 0.2);
}

.comp-cat-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Comparison item */
.comp-item {
    background: var(--c-paper);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.comp-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.comp-item--match   { border-left-color: var(--c-match); }
.comp-item--partial { border-left-color: var(--c-partial); }
.comp-item--diff    { border-left-color: var(--c-diff); }
.comp-item--empty   { border-left-color: var(--c-empty); }

.comp-item__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.comp-item__num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--c-ink-mute);
}
.comp-item__status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 999px;
}
.comp-item__status--match   { background: var(--c-match-bg);   color: var(--c-match); }
.comp-item__status--partial { background: var(--c-partial-bg); color: var(--c-partial); }
.comp-item__status--diff    { background: var(--c-diff-bg);    color: var(--c-diff); }
.comp-item__status--empty   { background: var(--c-empty-bg);   color: var(--c-empty); }

.comp-item__q {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
    color: var(--c-ink);
    margin-bottom: 16px;
}

.comp-item__answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 640px) {
    .comp-item__answers { grid-template-columns: 1fr; }
}

.comp-ans {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: white;
}
.comp-ans--p1 { background: var(--c-p1-soft); }
.comp-ans--p2 { background: var(--c-p2-soft); }

.comp-ans__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-ink-soft);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.comp-ans__name .badge {
    width: 22px; height: 22px; font-size: 11px;
}
.comp-ans__text {
    font-size: 15px;
    color: var(--c-ink);
    line-height: 1.5;
    word-wrap: break-word;
}
.muted {
    color: var(--c-ink-mute);
    font-style: italic;
    font-size: 14px;
}

/* ===================== Animations ===================== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* ===================== Print ===================== */
@media print {
    .no-print, .lang-toggle { display: none !important; }
    body { background: white; }
    .container { max-width: 100%; padding: 12px; }
    .comp-item { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
    .stats { box-shadow: none; border: 1px solid #ddd; }
}