/* ================================
   Design system
   ================================ */
:root {
    --c-bg: #FAF7F1;
    --c-primary: #2E5E4E;
    --c-primary-700: #244B3E;
    --c-primary-050: #E8F0EC;
    --c-text: #0F172A;
    --c-muted: #6B7280;
    --c-border: #2E5E4E;
    --c-error: #B91C1C;
    --radius: 10px;
    --radius-lg: 12px;
    --radius-sm: 8px;
    --ring: 0 0 0 3px rgba(46, 94, 78, .15);
    --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
}

/* ================================
   Conteneur & grille
   ================================ */
.c-form {
    padding: 24px;
    border-radius: var(--radius-lg);
    color: var(--c-text);
}

.c-form .c-field {
    margin-bottom: 18px;
}

.c-label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--c-primary);
}

.wpcf7-list-item-label {
    color: var(--c-primary);
}

.c-required {
    color: var(--c-error);
}

.c-hint {
    display: block;
    font-size: .875rem;
    color: var(--c-muted);
    margin-top: 6px;
}

/* Grilles génériques */
.c-grid {
    display: grid;
    gap: 18px;
}

.c-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.c-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.c-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive générique */
@media (max-width:1200px) {
    .c-grid--4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:980px) {

    .c-grid--2,
    .c-grid--3,
    .c-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* Sécurité: pas de <br> dans les labels CF7 */
#form-contact-pension label>br {
    display: none !important;
}

/* ================================
   Champs (inputs/select/textarea)
   ================================ */
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form select,
.c-form textarea,
.c-form .flatpickr-input {
    width: 100%;
    max-width: 100%;
    padding: 13px 16px;
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    font-size: 16px;
    line-height: 1.35;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s;
}

.c-form input::placeholder,
.c-form textarea::placeholder {
    color: #9CA3AF;
}

.c-form input:focus,
.c-form select:focus,
.c-form textarea:focus,
.c-form .flatpickr-input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: var(--ring);
}

.c-form textarea {
    min-height: 160px;
    resize: vertical;
}

.c-form :focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-color: var(--c-primary);
}

/* Radios/checkbox (use_label_element) */
.c-form input[type="radio"],
.c-form input[type="checkbox"] {
    accent-color: var(--c-primary);
}

.c-field .wpcf7-form-control.wpcf7-radio,
.c-field .wpcf7-form-control.wpcf7-checkbox {
    display: grid;
    gap: 10px;
}

.c-field .wpcf7-list-item {
    margin: 0;
}

.c-field label>input[type="radio"],
.c-field label>input[type="checkbox"] {
    margin-right: 8px;
    transform: translateY(1px);
}

label.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* Select (flèche custom) */
.c-form select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--c-primary) 50%),
        linear-gradient(135deg, var(--c-primary) 50%, transparent 50%),
        linear-gradient(to right, transparent, transparent);
    background-position: calc(100% - 20px) calc(1.1em), calc(100% - 15px) calc(1.1em), 100% 0;
    background-size: 5px 5px, 5px 5px, 2.8em 2.8em;
    background-repeat: no-repeat;
    padding-right: 44px;
}

/* ================================
   Flatpickr
   ================================ */
.flatpickr-calendar {
    z-index: 999999 !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: #fff !important;
}

.flatpickr-day.inRange {
    background: var(--c-primary-050) !important;
    border-color: transparent !important;
    color: inherit !important;
}

.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
    border-color: var(--c-primary) !important;
}

.flatpickr-months,
.flatpickr-weekdays {
    color: var(--c-text);
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 700;
}

/* ================================
   CF7 – erreurs / messages
   ================================ */
.wpcf7-not-valid {
    border-color: var(--c-error) !important;
}

.wpcf7-not-valid-tip {
    color: var(--c-error);
    margin-top: 6px;
    font-size: .875rem;
}

/* Masquer tips & éviter rouge avant submit */
.wpcf7 .wpcf7-not-valid-tip {
    display: none !important;
    height: 0;
    margin: 0;
}

.wpcf7 .wpcf7-form-control.wpcf7-not-valid {
    border-color: var(--c-border) !important;
    box-shadow: none !important;
}

/* Après submit invalide */
.wpcf7 form.invalid .wpcf7-not-valid-tip {
    display: block !important;
    height: auto;
    margin-top: 6px;
}

.wpcf7 form.invalid .wpcf7-form-control.wpcf7-not-valid {
    border-color: var(--c-error) !important;
    box-shadow: none !important;
}

/* Quand corrigé après submit invalide */
.wpcf7 form.invalid .wpcf7-form-control:not(.wpcf7-not-valid) {
    border-color: var(--c-border) !important;
}

/* ================================
   Groupe animaux + chambres
   ================================ */
.c-grid--rooms {
    display: grid;
    gap: 20px;
}

.c-grid--rooms .c-field {
    align-self: start;
}

.c-field--rooms {
    min-width: 0;
}

/* empêche l’overflow du select */
.c-field--rooms select {
    width: 100%;
}

@media (min-width:980px) {

    /* 4 colonnes: animal | nb | seul | chambres (large) */
    .c-grid--rooms {
        grid-template-columns: 1fr .9fr .9fr 1.6fr;
    }

    /* Si "Seul ?" est masqué -> 3 colonnes, chambres encore plus large */
    .c-grid--rooms.no-seul {
        grid-template-columns: 1fr 1fr 1.8fr;
    }
}

@media (max-width:979px) {
    .c-grid--rooms {
        grid-template-columns: 1fr;
    }
}

/* ================================
   Submit
   ================================ */
.c-actions .c-btn.c-btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: var(--radius);
    font-weight: 700;
    border: 2px solid var(--c-primary);
    color: #fff;
    background: var(--c-primary);
    cursor: pointer;
    transition: transform .06s ease, box-shadow .2s ease, background .2s;
}

.c-actions .c-btn.c-btn--primary:hover {
    background: var(--c-primary-700);
}

.c-actions .c-btn.c-btn--primary:active {
    transform: translateY(1px);
}

.c-rooms__title {
    font-weight: 700;
    margin-bottom: 8px;
}

.c-rooms__list {
    display: grid;
    gap: 8px;
}

.c-rooms__list .c-check {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.js-rooms-groups .js-rooms-cats label span,
.js-rooms-groups .js-rooms-dogs label span {
    color: var(--c-primary);
}