/*
 * Système de design partagé -- une seule feuille de style pour tout le site (page d'accueil,
 * pages de paiement/validation, pages légales) afin que l'identité visuelle reste cohérente
 * partout, et que changer une couleur/un rayon se fasse à un seul endroit.
 */

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

:root{
    --color-primary:#8e3b57;
    --color-primary-dark:#6f2c43;
    --color-primary-light:#fbeef1;
    --color-accent:#b98a4e;
    --color-bg:#faf7f5;
    --color-surface:#ffffff;
    --color-text:#2c2420;
    --color-text-muted:#6e6460;
    --color-border:#e8dfe0;
    --color-danger:#b23a3a;
    --color-success:#2e7d4f;

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-pill:999px;

    --shadow-sm:0 2px 10px rgba(45,20,25,.06);
    --shadow-md:0 10px 30px rgba(45,20,25,.10);
    --shadow-lg:0 24px 60px rgba(45,20,25,.16);

    --font-heading:'Playfair Display', Georgia, serif;
    --font-body:'Inter', 'Segoe UI', sans-serif;

    --container-width:1120px;
}

*{ box-sizing:border-box; }

body{
    font-family:var(--font-body);
    color:var(--color-text);
    background:var(--color-bg);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--font-heading); font-weight:600; letter-spacing:.2px; }

a{ color:var(--color-primary); }

/* ---- En-tête commun (pages secondaires : paiement, légal, bons cadeaux...) ---- */
/* Grille à 3 colonnes (plutôt qu'un logo centré en position:absolute) : le lien retour et le logo
   ne peuvent jamais se chevaucher, même sur un écran étroit où le lien retour est plus long que
   l'espace laissé par un logo purement centré. */
.site-header{
    background:var(--color-surface);
    border-bottom:1px solid var(--color-border);
    padding:18px 24px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    column-gap:12px;
}
.site-header .retour{
    text-decoration:none;
    color:var(--color-primary);
    font-weight:600;
    font-size:.92em;
    letter-spacing:.2px;
    justify-self:start;
    white-space:nowrap;
}
.site-header .retour:hover{ color:var(--color-primary-dark); }
.site-header .logo{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-heading);
    font-size:1.3em;
    color:var(--color-primary);
    letter-spacing:.3px;
    white-space:nowrap;
    grid-column:2;
}
.site-header .logo img{
    height:30px;
    width:auto;
    display:block;
}
/* En dessous de ~600px, le lien retour seul suffit à identifier le site : le logo centré est
   retiré plutôt que de le laisser se faire écraser contre le lien (texte du lien + logo trop
   serrés pour rester lisibles côte à côte sur un petit écran). */
@media (max-width:600px){
    .site-header{ grid-template-columns:1fr; justify-items:start; }
    .site-header .logo{ display:none; }
}

/* ---- Boutons ---- */
.btn, button.btn{
    display:inline-block;
    font-family:var(--font-body);
    font-weight:600;
    letter-spacing:.3px;
    padding:14px 32px;
    background:var(--color-primary);
    color:#fff;
    text-decoration:none;
    border:none;
    border-radius:var(--radius-pill);
    cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:background .25s ease, box-shadow .25s ease, transform .15s ease;
}
.btn:hover, button.btn:hover{
    background:var(--color-primary-dark);
    box-shadow:var(--shadow-md);
    transform:translateY(-1px);
}
.btn:disabled, button.btn:disabled{
    background:#cbb9bf; cursor:not-allowed; box-shadow:none; transform:none;
}
.btn-outline{
    background:transparent; color:var(--color-primary); border:1.5px solid var(--color-primary); box-shadow:none;
}
.btn-outline:hover{ background:var(--color-primary-light); color:var(--color-primary-dark); }
.btn-danger{ background:var(--color-danger); }
.btn-danger:hover{ background:#8f2c2c; }

/* ---- Cartes ---- */
.card{
    background:var(--color-surface);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    padding:24px;
}

/* ---- Formulaires ---- */
label{ font-weight:500; color:var(--color-text); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], textarea, select{
    font-family:var(--font-body);
    width:100%;
    padding:12px 14px;
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-sm);
    background:var(--color-surface);
    color:var(--color-text);
    transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus{
    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px var(--color-primary-light);
}

/* ---- Pages "boîte centrée" (paiement, validation, confirmations) ---- */
.page-centree{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:60px 20px;
    background:var(--color-bg);
}
.boite{
    background:var(--color-surface);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    padding:36px;
    max-width:460px;
    width:100%;
}
.boite h1, .boite h2{ color:var(--color-primary); font-weight:600; text-align:center; margin-top:0; }

/* ---- Pages légales ---- */
.page-legale{ max-width:760px; margin:0 auto; padding:0 20px 60px; }
.page-legale h1{ color:var(--color-primary); font-weight:600; }
.page-legale h2{ color:var(--color-primary); font-weight:600; font-size:1.15em; margin-top:34px; }
.page-legale a{ color:var(--color-primary); }

/* ---- Pied de page commun ---- */
.site-footer{
    background:var(--color-primary-dark);
    color:#f3e6ea;
    text-align:center;
    padding:34px 20px;
    font-size:.92em;
}
.site-footer a{ color:#f3e6ea; text-decoration:none; opacity:.9; }
.site-footer a:hover{ opacity:1; text-decoration:underline; }
.site-footer .liens{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; margin-bottom:14px; }
.site-footer .sep{ opacity:.9; }
.site-footer p{ margin:4px 0; }

.alerte-badge{
    display:inline-block; background:#fdeceb; color:var(--color-danger);
    padding:3px 10px; border-radius:var(--radius-pill); font-size:.78em; font-weight:600;
}
.ok-badge{
    display:inline-block; background:#e7f5ec; color:var(--color-success);
    padding:3px 10px; border-radius:var(--radius-pill); font-size:.78em; font-weight:600;
}