:root {
    /* Couleurs de l'ancien site */
    --logoRed: #d93731;
    --logoWhite: #fff;
    --logoBlack: #000;
    --backColor: #ecf0f1;
    --background-light: #fafafa;
    
    /* Couleurs générées par ChatGPT*/
    --bf-input-bg: #0f0f0f; /* fond sombre doux (footer/header) */
    --bf-input-fg-muted: rgba(255,255,255,.75);
    --bf-input-border: rgba(255,255,255,.18);
    --bf-input-border-focus: #d41f26; /* rouge marque */
    --bf-input-shadow-focus: rgba(212,31,38,.35);
    --bf-input-error: #ff4d4f;
    --bf-input-success: #2ecc71;
    --bf-radius: 12px;
    /* Texte (sur fond clair) */
    --bf-muted: rgba(0,0,0,.65);
    --bf-subtle: rgba(0,0,0,.48);
    /*Slideshow*/
    --slide-interval: 5000ms; /* durée entre les slides */
    --fade-duration: 900ms; /* durée de la transition */
    --nav-bg: rgba(0,0,0,.45);
    --dot-size: 12px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

html {
    -webkit-text-size-adjust: 100%;
}

body, h1, h2, h3, h4, h5, h6, p, figure {
    margin: 0;
}

ul[role="list"], ol[role="list"] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page {
    max-width: 1200px;
    margin: 0 auto;
    font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    /* Supprimer à la fin du site le min-height*/
    min-height: 20rem;
}

.page__title {
    color: var(--logoRed);
    padding-bottom: 2rem;
    text-align: center;
}

.product__pricetag {
    /* Minimal & moderne (remplace le jaune) */
    margin-top: auto; /* aligne les prix sur une même ligne (dans un conteneur en colonne) */
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .45rem;
    background: transparent;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: .65rem 0 .25rem;
    border-radius: 0;
    font-variant-numeric: tabular-nums;
    color: var(--logoRed);
}

    .product__pricetag span:first-child {
        font-size: .95rem;
        font-weight: 400;
        color: rgba(0,0,0,0.60);
    }

    .product__pricetag span:last-child {
        font-size: 1.45rem;
        font-weight: 800;
        line-height: 1;
        color: var(--logoRed);
    }

/* ===== Product card (base) ===== */
.product-card__body {
    /* Aligne les sections (titre / format / prix / statut) et permet le "margin-top:auto" du prix */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
}

/* Réserve toujours 2 lignes (même si le titre est court) -> prix alignés */
.product-card__title {
    line-height: 1.25;
    min-height: calc(1.25em * 2);
}

/* Aligner prix + statut sur une même ligne horizontale (cartes de même hauteur) */
.product-card__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.product__pricetag {
    margin-top: auto; /* pousse le prix en bas */
}

.button {
    display: inline-block;
    width: 100%;
    max-width: 240px;
    padding: .75rem 1rem;
    text-align: center;
    background: linear-gradient(135deg, #d41f26, #a80e12);
    color: #ffffff;
    text-decoration: none;
    font-weight: 300;
    letter-spacing: .5px;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    cursor: pointer;
}

.button:hover {
    background: linear-gradient(135deg, #e73239, #b3191d);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.button:focus-visible {
    background: linear-gradient(135deg, #e73239, #b3191d);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    outline: 3px solid rgba(255,255,255,0.85);
    outline-offset: 3px;
}

.button:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* ---------- WRAPPER ---------- */
.form-field {
    display: grid;
    gap: .4rem;
}

/* ---------- LABEL ---------- */
.form-label {
    font-size: .9rem;
    color: var(--bf-input-fg-muted);
    margin: 0;
}

/* ---------- VARIANTES D’ETAT ---------- */
.input--error {
    border-color: var(--bf-input-error);
    box-shadow: 0 0 0 .12rem rgba(255,77,79,.25);
}

.input--success {
    border-color: var(--bf-input-success);
    box-shadow: 0 0 0 .12rem rgba(46,204,113,.25);
}

/* ---------- TAILLES ---------- */
.input--sm {
    padding: .55rem .8rem;
    font-size: .95rem;
    border-radius: 10px;
}

.input--lg {
    padding: 1rem 1.15rem;
    font-size: 1.1rem;
    border-radius: 14px;
}

/* ---------- FOND CLAIR (pages blanches) ---------- */
.theme-light .input {
    background: var(--logoWhite);
    color: #1a1a1a;
    border-color: rgba(0,0,0,.2);
}

    .theme-light .input::placeholder {
        color: rgba(0,0,0,.45);
    }

/* ---------- INPUT AVEC ICONE ---------- */
.input-wrap {
    position: relative;
    display: grid;
}

.input--icon-left {
    padding-left: 2.5rem;
}

.input--icon-right {
    padding-right: 2.5rem;
}

.input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    opacity: .8;
    pointer-events: none;
}

.input-icon--left {
    left: .85rem;
}

.input-icon--right {
    right: .85rem;
}

/* si tu utilises <img> comme icône */
.input-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: invert(1) opacity(.9);
}

.theme-light .input-icon img {
    filter: none;
}

/* ---------- MESSAGE AIDE / ERREUR ---------- */
.form-help {
    font-size: .82rem;
    color: var(--bf-input-fg-muted);
    margin: 0;
}

.form-help--error {
    color: var(--bf-input-error);
}

.form-help--success {
    color: var(--bf-input-success);
}