/* ===================================================
   Habillage Noir & or — Univers Magique
   Ce fichier décide de TOUT ce qui se voit.
   Le index.php ne contient plus que le texte.
   =================================================== */

/* ===== Tes couleurs Noir & or ===== */
:root {
    --charbon: #1A1A1A;
    --or: #C9A24B;
    --blanc-casse: #F5F3EE;
    --texte: #3A3A38;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--blanc-casse);
    color: var(--texte);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

/* ===== Barre du haut (ta marque) ===== */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 40px;
    border-bottom: 1px solid rgba(201, 162, 75, 0.35);
}

header .marque {
    font-family: 'Cormorant', serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--charbon);
    text-decoration: none;
    /* pas de soulignement quand la marque sert de lien vers l'accueil */
}

header .lieu {
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--or);
    text-decoration: none;
}

header a.lieu:hover {
    color: var(--charbon);
}

.nav-haut {
    display: flex;
    align-items: center;
    gap: 26px;
}

.nav-haut a {
    text-decoration: none;
    color: var(--charbon);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.2s;
}

.nav-haut a:hover {
    color: var(--or);
}

/* ===== Hero : la grande section d'accueil ===== */
.hero {
    max-width: 1120px;
    margin: 0 auto;
    padding: 70px 40px 90px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.hero .surtitre {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8A6D24;
    margin-bottom: 22px;
}

.hero h1 {
    font-family: 'Cormorant', serif;
    font-weight: 700;
    font-size: 3.6rem;
    line-height: 1.14;
    /* 1.14 et pas 1.05 : sinon l'accent de "âme" est coupé en haut */
    color: var(--charbon);
    margin: 0 0 24px;
    text-wrap: balance;
    /* équilibre les 3 lignes du titre au lieu de laisser "âme." seul */
}

.hero p {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 46ch;
    margin: 0 0 34px;
}

/* ===== Le bouton ===== */
.btn {
    display: inline-block;
    background: var(--charbon);
    color: var(--blanc-casse);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 15px 34px;
    border: 1px solid var(--charbon);
    transition: all 0.2s ease;
}

.btn:hover {
    background: var(--or);
    border-color: var(--or);
    color: var(--charbon);
}

/* 2e bouton : version contour */
.btn-clair {
    background: transparent;
    color: var(--charbon);
    margin-left: 14px;
}

.btn-clair:hover {
    background: var(--charbon);
    border-color: var(--charbon);
    color: var(--blanc-casse);
}

/* ===== Zone photo : ta vraie image d'accueil ===== */
.visuel {
    aspect-ratio: 4 / 5;
    background: var(--charbon);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}

.visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== Pied de page ===== */
footer {
    text-align: center;
    padding: 26px 20px;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #33322D;
    border-top: 1px solid rgba(201, 162, 75, 0.35);
}

/* Accès discret à l'espace privé (cockpit) */
.acces-prive {
    margin-left: 14px;
    text-decoration: none;
    color: #4A473F;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 1px;
    transition: color 0.2s;
}

.acces-prive:hover {
    color: var(--or);
}

/* ===================================================
   PAGE DÉCOUVRIR
   =================================================== */

/* Le titre en haut de la page */
.entete {
    max-width: 760px;
    margin: 0 auto;
    padding: 64px 24px 20px;
    text-align: center;
}

.entete h1 {
    font-family: 'Cormorant', serif;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1.14;
    color: var(--charbon);
    margin: 0 0 18px;
    text-wrap: balance;
}

.entete p {
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Les blocs texte + photo, en alternance */
.section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 56px 40px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 50px;
    align-items: center;
}

/* "reverse" = la photo passe à droite */
.section.reverse .visuel-bloc {
    order: 2;
}

/* "texte-large" = on donne plus de place au texte qu'à la photo */
.section.texte-large {
    grid-template-columns: 1.1fr 0.9fr;
}

.section h2 {
    font-family: 'Cormorant', serif;
    font-weight: 700;
    font-size: 2.2rem;
    color: var(--charbon);
    margin: 0 0 4px;
}

.section .role {
    margin-bottom: 16px;
}

.section p {
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
}

/* Les petits libellés dorés (Le créateur, Le matériel, La 3D…) */
.entete .surtitre,
.section .surtitre,
.section .role,
.galerie-titre .surtitre,
.section-compte .surtitre {
    color: #8A6D24;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Le cadre des photos */
.visuel-bloc {
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
}

.visuel-bloc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== Galerie des créations 3D ===== */
.galerie {
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px 40px 70px;
}

.galerie-titre {
    text-align: center;
    margin-bottom: 34px;
}

.galerie-titre h2 {
    font-family: 'Cormorant', serif;
    font-weight: 700;
    font-size: 2.2rem;
    color: var(--charbon);
    margin: 0;
}

/* La grille : autant de colonnes que la largeur le permet */
.grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.grille figure {
    margin: 0;
}

.grille img {
    width: 100%;
    height: auto;
    /* auto, sinon le height="600" du HTML étire la vignette */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.grille figcaption {
    text-align: center;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--texte);
}

/* ===================================================
   ACCUEIL — la section "pourquoi créer un compte"
   =================================================== */
.section-compte {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px 40px 90px;
    text-align: center;
    border-top: 1px solid rgba(201, 162, 75, 0.35);
    padding-top: 70px;
}

.section-compte h2 {
    font-family: 'Cormorant', serif;
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--charbon);
    margin: 0 0 14px;
}

.section-compte-intro {
    max-width: 560px;
    margin: 0 auto 46px;
    font-size: 1.02rem;
    line-height: 1.7;
}

.avantages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 34px;
    margin-bottom: 46px;
    text-align: left;
}

.avantage-icone {
    font-size: 1.6rem;
    color: var(--or);
    font-family: 'Segoe UI Symbol', 'Apple Symbols', serif;
    line-height: 1;
}

.avantage h3 {
    font-family: 'Cormorant', serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--charbon);
    margin: 12px 0 8px;
}

.avantage p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
}

.section-compte-note {
    margin: 18px 0 0;
    font-size: 0.82rem;
    color: #8C877C;
}

@media (max-width: 820px) {
    .section-compte {
        padding: 50px 22px 70px;
    }

    .avantages {
        gap: 28px;
        margin-bottom: 34px;
    }
}

/* ===================================================
   PAGE PROFESSIONNELS
   =================================================== */

/* Le bandeau sombre qui appelle à l'action */
.cta {
    background: var(--charbon);
    color: var(--blanc-casse);
    text-align: center;
    padding: 66px 24px;
    margin-top: 20px;
}

.cta h2 {
    font-family: 'Cormorant', serif;
    font-weight: 700;
    font-size: 2.2rem;
    color: var(--or);
    margin: 0 0 12px;
}

.cta p {
    font-weight: 300;
    margin: 0 auto 28px;
    opacity: 0.9;
    max-width: 620px;
    line-height: 1.7;
    /* max-width : sinon la phrase s'étire sur tout l'écran et devient
       pénible à lire sur un grand moniteur */
}

/* Sur fond sombre, le bouton s'inverse : doré plein */
.cta .btn {
    background: var(--or);
    color: var(--charbon);
    border-color: var(--or);
    font-family: inherit;
    cursor: pointer;
}

.cta .btn:hover {
    background: transparent;
    color: var(--or);
}

.merci {
    margin-top: 18px;
    color: var(--or);
    font-weight: 500;
    font-size: 1.05rem;
}

/* ===================================================
   MODALE MAISON (jamais de popup du navigateur)
   =================================================== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 50;
}

/* la classe "ouvert" est ajoutée par le JavaScript */
.modal.ouvert {
    display: flex;
}

.modal-carte {
    background: var(--blanc-casse);
    border: 1px solid var(--or);
    border-radius: 16px;
    padding: 28px 26px 22px;
    max-width: 480px;
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    text-align: left;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.modal-titre {
    font-family: 'Cormorant', serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--charbon);
    margin: 0 0 14px;
    text-align: center;
}

.modal-carte .ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-carte input,
.modal-carte textarea {
    width: 100%;
    padding: 11px 13px;
    margin-top: 12px;
    border: 1px solid #d9d5cc;
    border-radius: 8px;
    background: #fff;
    color: var(--charbon);
    font-family: inherit;
    font-size: 1rem;
}

.modal-carte .ligne input {
    margin-top: 0;
}

.modal-carte input:focus,
.modal-carte textarea:focus {
    outline: none;
    border-color: var(--or);
}

/* Un bouton qui doit ressembler aux liens de la barre du haut */
.lien-nav {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: var(--charbon);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.2s;
}

.lien-nav:hover {
    color: var(--or);
}

/* Le message de confirmation, sur fond clair */
.merci-clair {
    margin-top: 22px;
    padding: 12px 16px;
    border-left: 3px solid var(--or);
    background: #fff;
    color: var(--charbon);
    font-size: 0.95rem;
}

/* La case à cocher de la newsletter */
.case-a-cocher {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #6B665C;
    cursor: pointer;
}

.case-a-cocher input {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--or);
    flex: 0 0 auto;
}

/* Le piège à robots : invisible à l'écran ET pour les lecteurs d'écran,
   mais bien présent dans la page pour les robots qui remplissent tout */
.champ-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Message d'erreur dans la fenêtre de contact */
.modal-erreur {
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 8px;
    background: #FBEAE8;
    border: 1px solid #E4B7B2;
    color: #7A1C15;
    font-size: 0.9rem;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.m-btn[disabled] {
    opacity: 0.6;
    cursor: wait;
}

.m-btn {
    border: none;
    border-radius: 8px;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.18s;
}

.m-annuler {
    background: transparent;
    color: var(--charbon);
    border: 1px solid #cfcabf;
}

.m-annuler:hover {
    border-color: var(--charbon);
}

.m-ok {
    background: var(--charbon);
    color: var(--blanc-casse);
}

.m-ok:hover {
    background: var(--or);
    color: var(--charbon);
}

/* Sur petit écran, Nom et Prénom passent l'un sous l'autre */
@media (max-width: 560px) {
    .modal-carte .ligne {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* La barre du haut : tout doit tenir sur une seule ligne,
       sinon la marque se coupe en deux et les liens s'écrasent */
    header {
        padding: 14px 16px;
        gap: 12px;
    }

    header .marque {
        font-size: 1.05rem;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .nav-haut {
        gap: 14px;
    }

    .nav-haut a,
    .lien-sobre,
    .lien-nav {
        font-size: 0.62rem;
        letter-spacing: 1px;
        white-space: nowrap;
    }

    header .lieu {
        font-size: 0.62rem;
        letter-spacing: 1px;
        white-space: nowrap;
    }
}

/* ===================================================
   PAGES LÉGALES (mentions, confidentialité)
   =================================================== */
.texte-legal {
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 24px 80px;
}

.texte-legal h2 {
    font-family: 'Cormorant', serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--charbon);
    margin: 38px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201, 162, 75, 0.35);
}

.texte-legal h3 {
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8A6D24;
    font-weight: 600;
    margin: 24px 0 8px;
}

.texte-legal p {
    margin: 0 0 14px;
    line-height: 1.75;
}

.texte-legal a {
    color: var(--charbon);
}

.texte-legal a:hover {
    color: var(--or);
}

.date-maj {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid #e0dcd2;
    font-size: 0.8rem;
    color: #8C877C;
}

/* Les liens légaux dans le pied de page */
.liens-legaux {
    display: block;
    margin-top: 10px;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0;
}

.liens-legaux a {
    color: #4A473F;
    text-decoration: none;
}

.liens-legaux a:hover {
    color: var(--or);
}

/* ===================================================
   ESPACE PRIVÉ (espace.php)
   =================================================== */

/* Le bouton "Se déconnecter" dans la barre du haut */
.entete-form {
    margin: 0;
}

.lien-sobre {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--or);
}

.lien-sobre:hover {
    color: var(--charbon);
}

/* La petite phrase qui dit quoi faire avec les tuiles */
.aide-tuiles {
    margin-top: 14px;
    font-size: 0.82rem;
    letter-spacing: 1px;
    color: #8C877C;
}

/* Les tuiles de l'accueil administrateur */
.tuiles {
    /* 1080 : de quoi aligner 3 tuiles de 280 px sur une même ligne */
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px 24px 90px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    gap: 20px;
    justify-content: center;
}

.tuile {
    display: block;
    padding: 28px 26px 24px;
    background: #fff;
    border: 1px solid #e8e4da;
    border-top: 3px solid var(--or);
    border-radius: 14px;
    text-decoration: none;
    color: var(--texte);
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tuile:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}

/* Une tuile qui réclame ton attention */
.tuile-alerte {
    background: var(--charbon);
    border-color: var(--or);
    color: var(--blanc-casse);
}

.tuile-icone {
    font-size: 2.1rem;
    line-height: 1;
    color: var(--or);
    /* on veut le dessin sobre, pas l'emoji en couleurs */
    font-family: 'Segoe UI Symbol', 'Apple Symbols', serif;
}

.tuile-titre {
    margin-top: 12px;
    font-family: 'Cormorant', serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--charbon);
}

.tuile-alerte .tuile-titre {
    color: var(--blanc-casse);
}

.tuile-nombre {
    margin-top: 6px;
    font-family: 'Cormorant', serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--or);
}

.tuile-detail {
    margin-top: 6px;
    font-size: 0.82rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8C877C;
}

.tuile-alerte .tuile-detail {
    color: var(--or);
}

/* L'espace client */
.boite-compte {
    max-width: 520px;
    margin: 0 auto;
    padding: 10px 24px 80px;
}

/* :not([type="checkbox"]) — sinon la case à cocher prendrait
   toute la largeur et écraserait son texte */
.boite-compte input:not([type="checkbox"]),
.boite-compte textarea {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid #d9d5cc;
    border-radius: 8px;
    background: #fff;
    color: var(--charbon);
    font-family: inherit;
    font-size: 1rem;
}

.boite-compte input:focus {
    outline: none;
    border-color: var(--or);
}

.boite-compte input[disabled] {
    background: #F0EDE6;
    color: #8C877C;
}

.boite-compte .ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.boite-compte .m-btn {
    width: 100%;
    margin-top: 8px;
}

.aide-petite {
    margin: -6px 0 14px;
    font-size: 0.78rem;
    color: #8C877C;
}

/* Le solde de points, bien en évidence */
.solde-points {
    text-align: center;
    padding: 34px 20px 30px;
    margin-bottom: 26px;
    background: var(--charbon);
    border-radius: 14px;
}

.solde-nombre {
    font-family: 'Cormorant', serif;
    font-weight: 700;
    font-size: 4.2rem;
    line-height: 1;
    color: var(--or);
}

.solde-libelle {
    margin-top: 6px;
    font-size: 0.78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blanc-casse);
    opacity: 0.85;
}

/* Le mot sur la boutique à venir */
.encart-boutique {
    margin: 22px 0 6px;
    padding: 16px 18px;
    border-left: 3px solid var(--or);
    background: #fff;
    font-size: 0.92rem;
    line-height: 1.65;
}

.col-droite {
    text-align: right;
}

/* Une note juste après un tableau a besoin de respirer */
.diag-table + .aide-petite {
    margin-top: 16px;
    line-height: 1.6;
}

/* Les intertitres du formulaire (Qui vous êtes, Adresse…) */
.titre-bloc {
    margin: 26px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0dcd2;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8A6D24;
    font-weight: 600;
}

.titre-bloc:first-of-type {
    margin-top: 6px;
}

/* Le code postal est court : il n'a pas besoin de la moitié de la ligne */
.boite-compte .ligne-cp {
    grid-template-columns: 0.5fr 1fr;
}

/* Le bloc "j'ai oublié mon mot de passe" */
.bloc-oubli {
    margin-top: 18px;
}

.bloc-oubli summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: #6B665C;
}

.bloc-oubli summary:hover {
    color: var(--or);
}

.bloc-oubli .aide {
    margin-top: 14px;
}

/* Le bloc "je n'ai pas encore de compte" */
.bloc-inscription {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #e0dcd2;
}

.bloc-inscription summary {
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--charbon);
    margin-bottom: 16px;
}

.bloc-inscription summary:hover {
    color: var(--or);
}

@media (max-width: 560px) {
    .boite-compte .ligne {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* L'écran de connexion */
.boite-connexion {
    max-width: 420px;
    margin: 0 auto;
    padding: 10px 24px 80px;
}

.boite-connexion input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid #d9d5cc;
    border-radius: 8px;
    background: #fff;
    color: var(--charbon);
    font-family: inherit;
    font-size: 1rem;
}

.boite-connexion input:focus {
    outline: none;
    border-color: var(--or);
}

.boite-connexion .m-btn {
    width: 100%;
}

.aide {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #6B665C;
    margin: 0 0 18px;
}

/* La liste des demandes */
.liste-messages {
    max-width: 820px;
    margin: 0 auto;
    padding: 10px 24px 80px;
}

.fiche-message {
    background: #fff;
    border: 1px solid #e8e4da;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 16px;
}

/* Une demande pas encore lue : filet doré bien visible */
.fiche-message.non-lu {
    border-left: 4px solid var(--or);
}

.fiche-haut {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.fiche-nom {
    font-family: 'Cormorant', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--charbon);
}

.pastille {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--or);
    color: var(--charbon);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* La pastille des points, sur fond sombre pour la distinguer */
.pastille-points {
    background: var(--charbon);
    color: var(--or);
}

.fiche-entreprise {
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8A6D24;
    margin-top: 2px;
}

.fiche-date {
    font-size: 0.78rem;
    color: #8C877C;
    white-space: nowrap;
}

.fiche-contact {
    margin-top: 10px;
    font-size: 0.9rem;
}

.fiche-contact a {
    color: var(--charbon);
}

.fiche-texte {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid #efece4;
    font-size: 0.98rem;
    line-height: 1.7;
}

.fiche-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* Le bloc dépliant des adresses newsletter */
.bloc-abonnes {
    background: #fff;
    border: 1px solid #e8e4da;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.bloc-abonnes summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--charbon);
}

.zone-adresses {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d5cc;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--texte);
    background: #FAF9F6;
    resize: vertical;
}

/* Le bouton rouge : réservé à ce qui efface pour de bon */
.m-supprimer {
    background: transparent;
    color: #8C2F26;
    border: 1px solid #E4B7B2;
}

.m-supprimer:hover {
    background: #8C2F26;
    color: #fff;
    border-color: #8C2F26;
}

/* Un <a> qui doit ressembler à un bouton */
a.m-btn {
    text-decoration: none;
    display: inline-block;
}

@media (max-width: 560px) {
    .fiche-haut {
        flex-direction: column;
        gap: 4px;
    }

    .fiche-actions .m-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ===================================================
   PAGE DE CONTRÔLE (provisoire — à retirer avec
   test-base.php quand la base sera validée)
   =================================================== */
.diag {
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 24px 70px;
}

.diag-ligne {
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #fff;
    border-left: 3px solid var(--or);
    font-size: 0.95rem;
}

.diag-ligne.ko {
    border-left-color: #B3261E;
    color: #7A1C15;
}

.diag-total {
    margin-top: 22px;
    padding: 18px;
    text-align: center;
    background: var(--charbon);
    color: var(--blanc-casse);
    border-radius: 10px;
    font-size: 1.05rem;
}

.diag-note {
    opacity: 0.7;
    font-size: 0.85rem;
}

.diag-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 20px 0 8px;
    flex-wrap: wrap;
}

.diag-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.diag-table th,
.diag-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e8e4da;
}

.diag-table th {
    background: #efece4;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.72rem;
}

/* ===== Sur téléphone : tout en une colonne ===== */
@media (max-width: 820px) {

    /* --- page Professionnels --- */
    .section.texte-large {
        grid-template-columns: 1fr;
    }

    .cta {
        padding: 50px 22px;
    }

    /* --- page Découvrir --- */
    .entete h1 {
        font-size: 2.4rem;
    }

    .section {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 40px 22px;
    }

    .section.reverse .visuel-bloc {
        order: 0;
    }

    .visuel-bloc {
        max-width: 320px;
        margin: 0 auto;
    }

    .galerie {
        padding: 10px 22px 50px;
    }

    header {
        padding: 18px 22px;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 44px 22px 60px;
        text-align: center;
    }

    .hero h1 {
        font-size: 2.6rem;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

    /* les 2 boutons passent l'un sous l'autre : on les recentre */
    .btn-clair {
        margin-left: 0;
        margin-top: 14px;
    }

    .visuel {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* ============================================================
   Réglages et connexions
   Les boutons d'un même service côte à côte. Sans cette règle,
   .boite-compte .m-btn les mettrait chacun sur toute la largeur :
   trois gros boutons empilés pour chaque service.
   ============================================================ */
.actions-cle {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.boite-compte .actions-cle .m-btn {
    width: auto;
    flex: 1 1 auto;
    margin-top: 0;
}

/* .aide-petite remonte de 6 px pour se coller à son champ ;
   sous les boutons, ce décalage la ferait chevaucher : on le rend. */
.actions-cle + .aide-petite {
    margin-top: 14px;
}

/* ---- Le champ multi-lignes de la page Parfums ---- */
/* Reprend exactement l'allure des champs de la page Mon compte. */
.fiche-message textarea {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid #d9d5cc;
    border-radius: 8px;
    background: #fff;
    color: var(--charbon);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
}

.fiche-message textarea:focus {
    outline: none;
    border-color: var(--or);
}

/* ---- Ligne de parfum : le nom a gauche, l'interrupteur a droite ---- */
.ligne-parfum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ligne-parfum .fiche-nom {
    margin: 0;
}

.ligne-parfum form {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.etat-parfum {
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8d887d;
}

/* L'interrupteur : un bouton deguise en bouton bascule.
   C'est un vrai <button>, donc il fonctionne meme sans JavaScript. */
.interrupteur {
    position: relative;
    width: 52px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #cfcbc2;
    cursor: pointer;
    transition: background .2s ease;
}

.interrupteur.on {
    background: var(--or);
}

.interrupteur-rond {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: left .2s ease;
}

.interrupteur.on .interrupteur-rond {
    left: 27px;
}

/* La croix de suppression : discrete, elle ne doit pas attirer le clic */
.croix {
    border: none;
    background: none;
    color: #c3beb3;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    transition: color .2s ease;
}

.croix:hover {
    color: #a4443c;
}

/* ============ Page Produits ============ */

/* Les champs du formulaire produit : un libelle au-dessus de son champ */
.form-produit label {
    display: block;
    margin-bottom: 14px;
    font-size: .84rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8d887d;
}

.form-produit input[type="text"],
.form-produit textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 11px 14px;
    border: 1px solid #d9d5cc;
    border-radius: 8px;
    background: #fff;
    color: var(--charbon);
    font-family: inherit;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: normal;
}

.form-produit textarea {
    resize: vertical;
}

.form-produit input[type="text"]:focus,
.form-produit textarea:focus {
    outline: none;
    border-color: var(--or);
}

.form-produit input[type="file"] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 9px 0;
    font-family: inherit;
    font-size: .9rem;
    color: var(--texte);
    text-transform: none;
    letter-spacing: normal;
}

/* Prix et photo cote a cote sur grand ecran, l'un sous l'autre sur telephone */
.form-duo {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.form-duo label {
    flex: 1 1 220px;
}

/* Les cases a cocher : le libelle reste sur la meme ligne que la case */
.form-produit label.case {
    display: flex;
    align-items: center;
    gap: 9px;
    text-transform: none;
    letter-spacing: normal;
    font-size: .95rem;
    color: var(--texte);
}

.form-produit label.case input {
    width: auto;
    margin: 0;
    accent-color: var(--or);
}

/* L'en-tete d'une fiche produit : photo, nom + prix, interrupteur */
.produit-haut {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee9df;
    flex-wrap: wrap;
}

.produit-photo {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 10px;
    flex: 0 0 auto;
}

.produit-photo-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #f2efe8;
    border: 1px dashed #d9d5cc;
    color: #b0aa9e;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 6px;
}

.produit-titre {
    flex: 1 1 160px;
}

.produit-titre .fiche-nom {
    margin: 0;
}

.produit-prix {
    margin-top: 4px;
    color: var(--or);
    font-size: 1.05rem;
}

.produit-etat {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* Le tarif professionnel, a cote du tarif particulier */
.produit-prix-pro {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border: 1px solid #e0dbd0;
    border-radius: 999px;
    color: #8d887d;
    font-size: .8rem;
    letter-spacing: .03em;
}

/* Trois champs sur une ligne (prix / quantite / unite) */
.form-trio {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.form-trio label {
    flex: 1 1 150px;
}

.form-produit select {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 11px 14px;
    border: 1px solid #d9d5cc;
    border-radius: 8px;
    background: #fff;
    color: var(--charbon);
    font-family: inherit;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: normal;
}

.form-produit select:focus {
    outline: none;
    border-color: var(--or);
}

/* ---- Bloc replie des reglages de calcul ---- */
.bloc-reglages summary {
    font-family: 'Cormorant', Georgia, serif;
    font-size: 1.25rem;
    color: var(--charbon);
    cursor: pointer;
}

.bloc-reglages summary::marker {
    color: var(--or);
}

/* Un label qui ne contient qu'un bouton : on aligne le bouton en bas */
.label-bouton {
    display: flex;
    align-items: flex-end;
}

.label-bouton .m-btn {
    margin-top: 6px;
    width: 100%;
}

/* ---- Recette et cout de revient ---- */
.bloc-recette {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eee9df;
}

.recette-titre {
    font-family: 'Cormorant', Georgia, serif;
    font-size: 1.2rem;
    color: var(--charbon);
    margin-bottom: 12px;
}

.table-recette {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.table-recette td {
    padding: 8px 4px;
    border-bottom: 1px solid #f0ece3;
    font-size: .95rem;
}

.table-recette .qte,
.table-recette .cout {
    text-align: right;
    white-space: nowrap;
    color: var(--texte);
}

.table-recette .cout {
    color: var(--charbon);
}

.table-recette .retirer {
    width: 30px;
    text-align: right;
}

.table-recette .retirer form {
    margin: 0;
}

/* Le recapitulatif : la partie qui compte */
.recap-cout {
    margin-top: 18px;
    padding: 16px 18px;
    background: #faf8f4;
    border: 1px solid #eee9df;
    border-radius: 10px;
}

.recap-ligne {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    font-size: .95rem;
    color: var(--texte);
}

.recap-total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #e6e0d4;
    font-size: 1.05rem;
    color: var(--charbon);
    font-weight: 500;
}

.recap-conseil {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e0dbd0;
    color: var(--or);
}

.recap-conseil .recap-ligne {
    color: var(--or);
}

/* Le verdict : vert si ca va, ambre si c'est juste, rouge si perte */
.verdict {
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: .93rem;
    line-height: 1.55;
}

.verdict-ok {
    background: #eef5ec;
    border: 1px solid #cfe3c9;
    color: #376030;
}

.verdict-juste {
    background: #fdf6e6;
    border: 1px solid #efdcb0;
    color: #7a5b16;
}

.verdict-perte {
    background: #fbecea;
    border: 1px solid #ebc4bf;
    color: #8c2f24;
}

/* ---- Ou va chaque vente ---- */
.repartition {
    margin-top: 16px;
}

.repartition .recette-titre {
    margin-bottom: 14px;
}

.repartition-bloc {
    padding: 12px 0;
    border-top: 1px solid #e6e0d4;
}

.repartition-bloc:first-of-type {
    border-top: none;
    padding-top: 0;
}

.repartition .recap-total {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.pour-moi {
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid #e6e0d4;
    font-size: 1.12rem;
    color: var(--charbon);
    font-weight: 500;
}

.pour-moi span:last-child {
    color: var(--or);
}

/* Le detail du "Pour vous" : en retrait et en italique,
   pour qu'on voie tout de suite que ca ne se soustrait pas. */
.recap-detail {
    padding-left: 14px;
    font-size: .85rem;
    font-style: italic;
    opacity: .75;
}

/* ---- Fiche produit repliable ---- */
/* L'en-tete (photo, nom, prix, interrupteur) reste visible ;
   le reste s'ouvre a la demande. La liste reste lisible avec 30 creations. */
.details-produit summary {
    padding: 4px 0;
    color: var(--or);
    font-size: .86rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.details-produit summary::marker {
    color: var(--or);
}

.details-produit[open] summary {
    margin-bottom: 16px;
}

/* Quand la fiche est repliee, l'en-tete n'a plus besoin de son trait */
.fiche-message .produit-haut {
    margin-bottom: 14px;
    padding-bottom: 14px;
}

/* ============================================================
   Le catalogue public (catalogue.php)
   ============================================================ */

/* Le bandeau vert de confirmation, pendant du .modal-erreur */
.modal-ok {
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 8px;
    background: #EEF5EC;
    border: 1px solid #CFE3C9;
    color: #376030;
    font-size: 0.9rem;
    line-height: 1.5;
}

.catalogue-message {
    max-width: 760px;
    margin: 0 auto 10px;
}

/* La grille : 3 cartes sur ordinateur, 2 sur tablette, 1 sur telephone.
   "auto-fill" fait le calcul tout seul, pas besoin de compter. */
.catalogue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 26px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 10px 22px 60px;
    align-items: start;
}

.catalogue-vide {
    grid-column: 1 / -1;
    text-align: center;
    color: #6d6a63;
    padding: 40px 0;
}

.carte {
    background: #fff;
    border: 1px solid #eee9df;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* La photo est carree quelle que soit l'image envoyee :
   object-fit recadre au lieu de deformer. */
.carte-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    display: block;
    background: #faf8f4;
}

.carte-photo-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0aa9e;
    font-size: .85rem;
    border-bottom: 1px dashed #e6e0d4;
}

.carte-corps {
    padding: 16px 18px 18px;
}

.carte-nom {
    font-family: 'Cormorant', serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--charbon);
    margin: 0 0 8px;
    line-height: 1.25;
}

.carte-prix {
    font-size: 1.25rem;
    color: var(--or);
    font-weight: 500;
}

.carte-dispo {
    font-size: .8rem;
    color: #6d6a63;
    margin-top: 3px;
}

/* Le formulaire replie : la fleche du navigateur est remplacee
   par un petit chevron a nous, pour rester dans la charte. */
.carte-demande {
    margin-top: 14px;
    border-top: 1px solid #eee9df;
    padding-top: 12px;
}

.carte-demande summary {
    cursor: pointer;
    list-style: none;
    color: var(--or);
    font-size: .88rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.carte-demande summary::-webkit-details-marker {
    display: none;
}

.carte-demande summary::after {
    content: ' ▾';
}

.carte-demande[open] summary::after {
    content: ' ▴';
}

.form-demande {
    margin-top: 14px;
}

.form-demande label {
    display: block;
    margin-bottom: 10px;
    font-size: .85rem;
    color: var(--texte);
}

.form-demande input,
.form-demande select,
.form-demande textarea {
    width: 100%;
    margin-top: 4px;
    padding: 9px 11px;
    border: 1px solid #ddd7cb;
    border-radius: 7px;
    background: #fff;
    font-family: inherit;
    font-size: .95rem;
    color: var(--charbon);
}

.form-demande input:focus,
.form-demande select:focus,
.form-demande textarea:focus {
    outline: none;
    border-color: var(--or);
}

.form-demande .btn {
    width: 100%;
    margin-top: 4px;
}

.form-note {
    font-size: .78rem;
    color: #6d6a63;
    line-height: 1.5;
    margin: 10px 0 0;
}

/* Le piege a robots : invisible a l'ecran, mais present dans la page.
   display:none serait detecte par certains robots, on le sort du cadre. */
.pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Sur telephone, une carte par ligne et un peu moins de marge */
@media (max-width: 620px) {
    .catalogue {
        gap: 20px;
        padding: 10px 16px 44px;
    }
}

/* Dans une carte, les champs sont plus etroits : on autorise
   deux colonnes des 140px, sinon prenom/nom passent l'un sous l'autre. */
.form-demande .form-duo label {
    flex: 1 1 140px;
}

/* Le lien vers la confidentialite reste dans la charte,
   pas en bleu souligne du navigateur */
.form-note a {
    color: var(--or);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-note a:hover {
    color: var(--charbon);
}

/* Le choix des quantites, parfum par parfum (catalogue public) */
.choix-titre {
    font-size: .85rem;
    color: var(--texte);
    margin-bottom: 8px;
}

.choix-parfums {
    border: 1px solid #eee9df;
    border-radius: 8px;
    background: #faf8f4;
    padding: 6px 12px;
    margin-bottom: 14px;
}

/* "label.choix-ligne" et pas ".choix-ligne" tout court : sinon la regle
   .form-demande label (display:block) l'emporte, et la case quantite
   ne se cale plus a droite du nom du parfum. */
.form-demande label.choix-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    margin: 0;
    border-bottom: 1px solid #efe9dd;
    font-size: .9rem;
}

.form-demande label.choix-ligne:last-child {
    border-bottom: none;
}

/* La case quantite reste petite : c'est un chiffre, pas une phrase */
.form-demande .choix-ligne input {
    width: 56px;
    margin-top: 0;
    padding: 6px 8px;
    text-align: center;
    flex: 0 0 auto;
}

.form-demande .choix-simple input {
    width: 80px;
    text-align: center;
}

/* ============================================================
   Le panier (panier.php) + la pastille du menu
   ============================================================ */

/* La pastille doree qui compte les pieces, a cote de "Panier" */
.pastille {
    display: inline-block;
    min-width: 19px;
    padding: 1px 5px;
    margin-left: 4px;
    border-radius: 10px;
    background: var(--or);
    color: #fff;
    font-size: .7rem;
    line-height: 17px;
    text-align: center;
    letter-spacing: 0;
}

.panier {
    max-width: 780px;
    margin: 0 auto;
    padding: 10px 22px 60px;
}

.panier-vide {
    text-align: center;
    color: #6d6a63;
    padding: 14px 0;
}

/* Une ligne = photo | nom | quantite | sous-total | croix */
.panier-ligne {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e6e0d4;
}

.panier-photo {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 8px;
    flex: 0 0 auto;
    background: #faf8f4;
}

.panier-photo-vide {
    border: 1px dashed #ddd7cb;
}

.panier-nom {
    flex: 1 1 auto;
    min-width: 0;
}

.panier-titre {
    font-family: 'Cormorant', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--charbon);
    line-height: 1.25;
}

.panier-parfum {
    font-size: .85rem;
    color: var(--or);
    margin-top: 2px;
}

.panier-unitaire {
    font-size: .78rem;
    color: #6d6a63;
    margin-top: 2px;
}

.panier-qte {
    flex: 0 0 auto;
    text-align: center;
}

.panier-qte input {
    width: 52px;
    padding: 6px 8px;
    border: 1px solid #ddd7cb;
    border-radius: 7px;
    background: #fff;
    font-family: inherit;
    font-size: .95rem;
    text-align: center;
    color: var(--charbon);
}

/* Un bouton qui a l'air d'un lien : pas de cadre, pas de fond */
.lien-discret {
    display: block;
    margin: 4px auto 0;
    background: none;
    border: none;
    padding: 0;
    color: var(--or);
    font-family: inherit;
    font-size: .74rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lien-discret:hover {
    color: var(--charbon);
}

.panier-sous-total {
    flex: 0 0 auto;
    min-width: 80px;
    text-align: right;
    font-size: 1.05rem;
    color: var(--charbon);
}

.panier-retirer {
    flex: 0 0 auto;
}

.panier-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0 4px;
    font-size: 1.35rem;
    font-family: 'Cormorant', serif;
    color: var(--charbon);
}

.panier-total span:last-child {
    color: var(--or);
    font-weight: 600;
}

.panier-note {
    font-size: .82rem;
    color: #6d6a63;
    line-height: 1.6;
    margin: 4px 0 0;
}

.panier-vider-form {
    margin-top: 14px;
    text-align: right;
}

.panier-vider-form .lien-discret {
    display: inline-block;
    margin: 0;
}

/* Le bloc coordonnees, en bas du panier */
.panier-commande {
    margin-top: 30px;
    padding: 22px 24px 24px;
    background: #fff;
    border: 1px solid #eee9df;
    border-radius: 12px;
}

.panier-commande h2 {
    font-family: 'Cormorant', serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--charbon);
    margin: 0 0 6px;
}

.panier-commande .btn {
    width: 100%;
    margin-top: 6px;
}

/* Sur telephone, la ligne du panier passe sur deux etages */
@media (max-width: 620px) {
    .panier-ligne {
        flex-wrap: wrap;
    }

    .panier-nom {
        flex: 1 1 60%;
    }

    .panier-sous-total {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* ============================================================
   La modale "Ajouter au panier" du catalogue public
   ============================================================ */

/* Elle s'ouvre avec le "#" du lien : ":target" veut dire
   "l'element vise par l'adresse". Aucun JavaScript necessaire. */
.modal-choix:target {
    display: flex;
}

.modal-choix .modal-carte {
    position: relative;
    max-width: 420px;
}

.modal-fermer {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 1.7rem;
    line-height: 1;
    color: #b0aa9e;
    text-decoration: none;
}

.modal-fermer:hover {
    color: var(--charbon);
}

.modal-prix {
    text-align: center;
    color: var(--or);
    font-size: 1.05rem;
    margin: -8px 0 18px;
}

/* Le bouton "Annuler" est un lien : il faut lui rendre
   l'allure d'un bouton (les liens ne s'alignent pas pareil). */
.modal-actions a.m-annuler {
    display: inline-block;
    text-decoration: none;
    line-height: 1.4;
}

/* Dans la modale, les cases quantite gardent leur cadre clair */
.modal-choix .choix-parfums {
    background: #fff;
}

/* Le bouton de la carte prend toute la largeur, comme avant */
.carte-bouton {
    display: block;
    width: 100%;
    margin-top: 14px;
    text-align: center;
}

/* Le tarif professionnel */
.pastille-pro {
    background: var(--charbon);
}

.bandeau-pro {
    display: inline-block;
    margin-top: 6px;
    padding: 8px 16px;
    border: 1px solid var(--or);
    border-radius: 8px;
    background: #fff;
    font-size: .9rem;
    color: var(--charbon);
}

/* Le prix public barre, a cote du prix pro */
.carte-prix-public {
    margin-left: 8px;
    font-size: .9rem;
    color: #a9a396;
    text-decoration: line-through;
}

/* Les liens dans les bandeaux restent dans la charte,
   pas en bleu souligne du navigateur */
.catalogue-message a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

/* ============================================================
   Les pages de texte legal (CGV, mentions, confidentialite)
   ============================================================ */
.texte-legal {
    max-width: 780px;
    margin: 0 auto;
    padding: 10px 24px 70px;
    font-size: .95rem;
    line-height: 1.75;
}

.texte-legal h2 {
    font-family: 'Cormorant', serif;
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--charbon);
    margin: 34px 0 10px;
    padding-top: 18px;
    border-top: 1px solid #e6e0d4;
}

.texte-legal h2:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 10px;
}

.texte-legal p {
    margin: 0 0 12px;
}

.texte-legal ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.texte-legal li {
    margin-bottom: 8px;
}

.texte-legal a {
    color: var(--or);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.texte-legal a:hover {
    color: var(--charbon);
}

/* Le bloc encadre : identite du vendeur, coordonnees du mediateur */
.bloc-identite {
    padding: 14px 18px;
    background: #faf8f4;
    border: 1px solid #eee9df;
    border-radius: 10px;
    line-height: 1.7;
}

/* Le formulaire de retractation, a recopier par le client */
.bloc-formulaire {
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e6e0d4;
    border-radius: 10px;
}

/* Ce qui reste a completer par Gregory : impossible a rater */
.a-completer {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    background: #FBEAE8;
    border: 1px dashed #E4B7B2;
    color: #7A1C15;
    font-weight: 500;
}

/* La case CGV du panier : obligatoire, jamais pre-cochee */
.case-cgv {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 16px;
    font-size: .86rem;
    line-height: 1.55;
}

.case-cgv input {
    width: auto;
    margin-top: 3px;
    flex: 0 0 auto;
}

.case-cgv a {
    color: var(--or);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Les frais de port dans le panier */
.panier-sous {
    padding: 6px 0;
    font-size: .95rem;
}

.panier-poids {
    color: #6d6a63;
    font-size: .82rem;
}

/* La grille de frais de port, dans l'espace prive */
.zone-grille {
    width: 100%;
    margin-top: 6px;
    padding: 11px 13px;
    border: 1px solid #d9d5cc;
    border-radius: 8px;
    background: #fff;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--charbon);
}

/* La phrase qui leve le doute sur les lots, dans la modale */
.choix-aide {
    font-size: .78rem;
    color: #6d6a63;
    line-height: 1.5;
    margin: -4px 0 8px;
}

/* ============================================================
   Cartes du catalogue : toutes la meme hauteur
   ------------------------------------------------------------
   Les noms n'ont pas la meme longueur : sur deux lignes, une carte
   s'etire et son bouton descend plus bas que celui d'a cote.
   Resultat : une grille bancale.
   ============================================================ */

/* On annule le "align-items: start" : les cartes d'une meme
   rangee prennent la hauteur de la plus grande. */
.catalogue {
    align-items: stretch;
}

/* Le corps devient une colonne souple, pour pouvoir pousser
   le bas de la carte vers le bas. */
.carte-corps {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Prix + disponibilite + bouton collent au bas de la carte,
   quelle que soit la longueur du nom au-dessus. */
.carte-prix {
    margin-top: auto;
    padding-top: 6px;
}

/* La description complete dans la modale (coupee sur la carte) */
.modal-texte {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--texte);
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e0d4;
}

/* Le bouton de la boutique, sous les deux autres dans le grand bandeau.
   En or : c'est l'action qui rapporte, elle doit se voir en premier. */
.btn-boutique {
    display: block;
    max-width: 420px;
    margin-top: 14px;
    margin-left: 0;
    text-align: center;
    background: var(--or);
    border-color: var(--or);
    color: var(--charbon);
}

.btn-boutique:hover {
    background: var(--charbon);
    border-color: var(--charbon);
    color: var(--blanc-casse);
}

/* ============================================================
   Accueil : les 3 avantages encadres, et de l'air sous les boutons
   ============================================================ */

/* Les boutons ne doivent plus toucher les 3 blocs du dessous */
.avantages {
    margin-top: 40px;
    gap: 22px;
}

/* Chaque avantage dans son cadre, comme les cartes du catalogue */
.avantage {
    background: #fff;
    border: 1px solid #eee9df;
    border-radius: 12px;
    padding: 22px 24px 24px;
}

/* ============================================================
   Les commandes (page privee)
   ------------------------------------------------------------
   La page reutilise les fiches des Demandes : on n'ajoute ici
   que ce qui lui est propre — le detail, les totaux, le statut.
   ============================================================ */

/* Les deux vues : "En cours" / "Toutes" */
.cmd-filtres {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
}

.cmd-filtre {
    padding: 6px 16px;
    border: 1px solid #ddd6c6;
    border-radius: 999px;
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--texte);
    text-decoration: none;
    background: #fff;
}

.cmd-filtre.actif {
    background: var(--charbon);
    border-color: var(--charbon);
    color: var(--blanc-casse);
}

/* La pastille du statut, a cote du numero */
.cmd-statut {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #efece4;
    color: #6d6a63;
}

/* Une couleur par etape : on lit l'etat d'un coup d'oeil */
.cmd-recue {
    background: #f6e9c9;
    color: #7a5c12;
}

.cmd-fabrication {
    background: #e6ddf5;
    color: #4b3a75;
}

.cmd-expediee {
    background: #d9e9dd;
    color: #2f5d3f;
}

.cmd-terminee {
    background: #e8e6e0;
    color: #6d6a63;
}

.cmd-annulee {
    background: #f2dcdc;
    color: #8a3131;
}

.cmd-payee {
    background: var(--charbon);
    color: var(--or);
}

/* Le detail de la commande, tel qu'il a ete enregistre */
.cmd-lignes {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 10px;
    font-size: .9rem;
}

.cmd-lignes td {
    padding: 5px 0;
    border-bottom: 1px solid #f0ece3;
    vertical-align: top;
}

.cmd-qte {
    width: 46px;
    color: var(--or);
    font-weight: 500;
}

.cmd-parfum {
    color: #6d6a63;
}

/* Prix unitaire et sous-total alignes a droite : les chiffres
   se comparent a l'oeil quand ils finissent au meme endroit. */
.cmd-pu,
.cmd-sous {
    text-align: right;
    white-space: nowrap;
    padding-left: 14px !important;
}

.cmd-pu {
    width: 80px;
    color: #6d6a63;
    font-size: .82rem;
}

.cmd-sous {
    width: 90px;
    font-weight: 500;
}

.cmd-totaux {
    text-align: right;
    font-size: .88rem;
    line-height: 1.8;
}

.cmd-total-final {
    font-size: 1.05rem;
    color: var(--charbon);
    border-top: 1px solid #e6e0d4;
    padding-top: 6px;
    margin-top: 4px;
}

/* Le port qu'on n'a pas su calculer : ca doit se voir */
.cmd-alerte {
    color: #8a3131;
    font-size: .82rem;
    line-height: 1.5;
    text-align: right;
}

/* Le choix du statut, dans la barre d'actions */
.cmd-choix {
    padding: 7px 12px;
    border: 1px solid #ddd6c6;
    border-radius: 6px;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
    color: var(--texte);
}

/* Le nom du client sous le numero. On ne reprend pas le style
   "entreprise" des Demandes : en dore majuscules, un nom de
   personne se lit moins bien que le numero de sa commande. */
.cmd-client {
    font-size: .92rem;
    color: var(--texte);
    margin-top: 3px;
}

/* ============================================================
   Le reglement d'une commande
   ============================================================ */

/* La ligne "regle le ... par carte", sous les totaux */
.cmd-reglement {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--or);
    background: #faf8f4;
    font-size: .82rem;
    line-height: 1.6;
    color: #4A473F;
}

/* Paiement lance mais jamais confirme : ca demande une verification */
.cmd-reglement-attente {
    border-left-color: #8a3131;
    color: #8a3131;
}

.cmd-reglement code {
    font-size: .78rem;
    color: var(--texte);
}

/* La page de reglement, cote client */
.paiement {
    max-width: 620px;
    margin: 0 auto;
    padding: 10px 24px 70px;
}

.paiement .cmd-lignes {
    font-size: .95rem;
}

/* L'alerte "le paiement est tombe en panne", en tete des Commandes */
.cmd-panne {
    line-height: 1.6;
    margin-bottom: 18px;
}

.cmd-panne-action {
    margin-top: 10px;
}

/* ============================================================
   Bon de fabrication (bon.php)
   ------------------------------------------------------------
   Cette page est faite pour le PAPIER. A l'ecran elle ressemble
   deja a la feuille qui sortira de l'imprimante ; au moment
   d'imprimer, seule la barre du haut disparait.
   ============================================================ */

.page-bon {
    background: #fff;
}

/* La barre d'outils : a l'ecran seulement */
.bon-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 24px 0;
}

.bon-barre a {
    color: var(--or);
    text-decoration: none;
    font-size: .78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* La feuille */
.bon {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 24px 60px;
    color: #1A1A1A;
}

.bon-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 2px solid var(--charbon);
    padding-bottom: 14px;
}

.bon-surtitre {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8A6D24;
}

.bon-numero {
    font-family: 'Cormorant', serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 4px;
}

.bon-marque {
    font-family: 'Cormorant', serif;
    font-size: 1.2rem;
    text-align: right;
    line-height: 1.35;
}

.bon-marque span {
    font-family: 'Montserrat', sans-serif;
    font-size: .74rem;
    color: #4A473F;
}

/* Les trois encadres : client, reglement, commande */
.bon-blocs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 20px 0 26px;
}

.bon-bloc p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.7;
}

.bon-titre {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8A6D24;
    margin-bottom: 6px;
}

.bon-titre-large {
    border-bottom: 1px solid #d8d2c4;
    padding-bottom: 6px;
    margin-bottom: 4px;
}

.bon-vide {
    color: #8b877e;
}

.bon-ref {
    font-size: .74rem;
    color: #4A473F;
}

/* "PAS ENCORE PAYEE" doit sauter aux yeux, meme en noir et blanc */
.bon-alerte {
    display: inline-block;
    padding: 3px 8px;
    border: 2px solid #8a3131;
    color: #8a3131;
    letter-spacing: 1px;
}

.bon-lignes {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.bon-lignes td {
    padding: 11px 0;
    border-bottom: 1px solid #e6e0d4;
    vertical-align: top;
}

/* La case a cocher : dessinee avec un caractere, elle sort sur
   toutes les imprimantes, meme celles qui ignorent les couleurs. */
.bon-case {
    width: 30px;
    font-size: 1.3rem;
    line-height: 1;
    color: #1A1A1A;
}

.bon-qte {
    width: 46px;
    font-weight: 600;
}

.bon-produit {
    font-size: 1rem;
}

/* Le parfum en gras : c'est LA chose a ne pas confondre */
.bon-parfum {
    display: block;
    font-size: 1.05rem;
}

.bon-prix {
    text-align: right;
    white-space: nowrap;
    font-size: .86rem;
    color: #4A473F;
}

.bon-totaux {
    text-align: right;
    font-size: .86rem;
    line-height: 1.7;
}

.bon-total-final {
    font-size: 1.1rem;
    font-weight: 600;
    border-top: 1px solid #d8d2c4;
    padding-top: 5px;
    margin-top: 4px;
    display: inline-block;
    min-width: 160px;
}

.bon-mot {
    margin-top: 22px;
    padding: 12px 14px;
    border: 1px solid #d8d2c4;
}

.bon-mot p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
}

.bon-pied {
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid #d8d2c4;
    font-size: .7rem;
    color: #4A473F;
    text-align: center;
}

/* ===== Ce qui change au moment d'imprimer ===== */
@media print {

    /* La barre d'outils n'a rien a faire sur le papier */
    .bon-barre {
        display: none;
    }

    .bon {
        max-width: none;
        padding: 0;
    }

    /* Le fond blanc et les traits nets, quelle que soit
       l'imprimante : sans ca, certains navigateurs "economisent"
       les bordures et la feuille devient illisible. */
    body {
        background: #fff;
    }

    .bon-tete,
    .bon-lignes td,
    .bon-mot,
    .bon-pied {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Une ligne de fabrication ne doit jamais etre coupee en deux
       par un saut de page */
    .bon-lignes tr,
    .bon-bloc {
        break-inside: avoid;
    }

    @page {
        margin: 14mm;
    }
}

/* Le bloc "a sortir du stock" du bon de fabrication */
.bon-matieres {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.bon-matieres td {
    padding: 7px 0;
    border-bottom: 1px dotted #ddd6c6;
    font-size: .92rem;
}

/* Les quantites alignees a droite : on lit la colonne d'un coup */
.bon-quantite {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

.bon-note {
    font-size: .76rem;
    color: #4A473F;
    margin: -8px 0 16px;
}

/* ============================================================
   Les paiements (paiements.php)
   ============================================================ */

/* Les gros chiffres en haut de page */
.pai-comptes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}

.pai-compte {
    flex: 1 1 150px;
    background: #fff;
    border: 1px solid #eee9df;
    border-radius: 12px;
    padding: 16px 18px;
}

.pai-chiffre {
    font-family: 'Cormorant', serif;
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--charbon);
    line-height: 1.1;
}

/* Ce qui est ressorti de la caisse s'ecrit autrement */
.pai-moins {
    color: #8a3131;
}

.pai-libelle {
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6d6a63;
    margin-top: 6px;
}

.pai-liste {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #eee9df;
    border-radius: 12px;
    overflow: hidden;
}

.pai-liste th {
    text-align: left;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8A6D24;
    padding: 12px 16px;
    border-bottom: 1px solid #eee9df;
}

.pai-liste td {
    padding: 12px 16px;
    border-bottom: 1px solid #f4f0e8;
    font-size: .88rem;
    vertical-align: top;
}

.pai-liste tr:last-child td {
    border-bottom: none;
}

/* Une carte refusee ne doit pas se lire comme une vente */
.pai-ratee td {
    color: #8b877e;
}

.pai-ratee .pai-montant {
    text-decoration: line-through;
}

.pai-quand span,
.pai-moyen span {
    display: block;
    font-size: .76rem;
    color: #6d6a63;
}

.pai-droite {
    text-align: right;
    white-space: nowrap;
}

.pai-montant {
    font-weight: 600;
    font-size: .95rem;
}

.pai-vide {
    color: #6d6a63;
    font-style: italic;
}

/* ============================================================
   Mes commandes (cote client)
   ============================================================ */
.mes-commandes {
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 24px 70px;
}

.carte-commande {
    background: #fff;
    border: 1px solid #eee9df;
    border-radius: 12px;
    padding: 18px 20px 20px;
    margin-bottom: 18px;
}

/* La ligne du bas : ce qu'il peut faire de cette commande */
.cmd-actions-client {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

/* Cote client, "reglee le ..." se lit comme une phrase,
   pas comme l'encadre technique de l'espace prive. */
.cmd-actions-client .cmd-reglement {
    margin: 0;
    border: none;
    background: none;
    padding: 0;
}

/* Diagnostic Abby : la colonne des apercus de valeurs */
.diag-form {
    margin-bottom: 20px;
}

.diag-apercu {
    text-align: right;
    color: #6d6a63;
    font-size: .82rem;
    word-break: break-all;
}

/* Le depot manuel d'un PDF de facture (secours) */
.facture-depot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #ddd6c6;
    font-size: .82rem;
    color: #6d6a63;
}

.facture-depot input[type="file"] {
    font-size: .8rem;
    max-width: 100%;
}

/* "Ce que votre client voit", sur la fiche commande */
.cmd-cote-client {
    margin-top: 8px;
    font-size: .8rem;
    color: #6d6a63;
}

/* L'invitation a creer un compte, apres une commande en visiteur */
.compte-invite {
    background: #fff;
    border: 1px solid #e6dcc2;
    border-radius: 12px;
    padding: 20px 22px 22px;
    margin: 24px 0;
}

.compte-invite-titre {
    font-family: 'Cormorant', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--charbon);
    margin-bottom: 8px;
}

.compte-invite p {
    font-size: .92rem;
    line-height: 1.7;
    margin: 0 0 14px;
}

.compte-invite-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 !important;
}

/* Le 2e bouton ne doit pas heriter de la marge du bouton clair */
.compte-invite-liens .btn-clair {
    margin-left: 0;
}

/* ============================================================
   Le point relais Mondial Relay
   ============================================================ */
.relais-bloc {
    margin: 18px 0;
    padding: 16px 18px 18px;
    border: 1px solid #e6dcc2;
    border-radius: 12px;
    background: #fffdf9;
}

.relais-titre {
    font-family: 'Cormorant', serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--charbon);
}

.relais-aide {
    font-size: .82rem;
    color: #6d6a63;
    margin: 4px 0 12px;
}

/* La carte de Mondial Relay a besoin d'une hauteur pour s'afficher */
#relais-widget {
    min-height: 420px;
}

.relais-choisi {
    margin-top: 12px;
    padding: 10px 12px;
    border-left: 3px solid var(--or);
    background: #fff;
    font-size: .88rem;
}

/* Quand leur carte ne repond pas : on rassure, on ne bloque pas */
.relais-secours {
    font-size: .85rem;
    line-height: 1.6;
    color: #8a3131;
    margin: 0;
}

/* Le relais sur une fiche commande */
.cmd-relais {
    margin-top: 10px;
    padding: 8px 12px;
    background: #faf8f4;
    border-left: 3px solid var(--or);
    font-size: .84rem;
    line-height: 1.6;
}

.cmd-relais-manquant {
    border-left-color: #8a3131;
    color: #8a3131;
}

.cmd-relais-id {
    color: #6d6a63;
    font-size: .78rem;
}


/* ============================================================
   Le numero de suivi du colis (05/09/2026)
   ------------------------------------------------------------
   Cote gestion : une ligne a part sous la fiche commande, pour
   ne pas se melanger aux boutons de statut. Elle passe a la
   ligne sur telephone, ou l'on colle justement le numero.
   ============================================================ */
.cmd-suivi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: #faf8f4;
    border-left: 3px solid var(--or);
}

.cmd-suivi-titre {
    font-size: .8rem;
    font-weight: 600;
    color: #6d6a63;
}

.cmd-suivi-champ {
    flex: 1 1 180px;
    min-width: 0;
}

.cmd-suivi-date {
    font-size: .76rem;
    color: #6d6a63;
}

/* Cote client : le bouton se voit, le numero se lit a cote au
   cas ou la page du transporteur s'ouvrirait vide. */
.cmd-suivi-client {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.cmd-suivi-numero {
    font-size: .82rem;
    color: #6d6a63;
    /* Un numero de colis se recopie : on le laisse selectionnable
       et on l'ecrit en chiffres a chasse fixe, ou 0 et O, 1 et l
       ne se confondent plus. */
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
    user-select: all;
}


/* ============================================================
   Le widget Mondial Relay, remis a la charte Noir & or
   ------------------------------------------------------------
   Leur widget s'insere DANS la page (ce n'est pas une iframe) :
   ses elements sont donc habillables.
   ⚠️ Leur feuille de style est chargee par leur script, donc APRES
   la notre : a priorite egale, c'est la leur qui gagne. D'ou les
   deux precautions ci-dessous, et elles sont necessaires :
     · chaque regle est prefixee par .relais-bloc (plus precise) ;
     · les couleurs portent !important.
   Noms de classes releves dans leur widget le 17/08/2026. S'ils
   les changent, l'habillage retombe sur leur style d'origine —
   la carte, elle, continuera de fonctionner.
   ============================================================ */

.relais-bloc .MR-Widget {
    font-family: 'Montserrat', sans-serif;
    border: 1px solid #e6dcc2;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

/* Le bandeau gris "Selectionnez votre Point Relais" */
.relais-bloc .MR-Widget .MRW-Title {
    background: var(--charbon) !important;
    color: var(--blanc-casse) !important;
    font-family: 'Cormorant', serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 12px 16px;
    border: none !important;
}

.relais-bloc .MR-Widget .MRW-Search {
    background: #faf8f4 !important;
    padding: 14px 16px;
    border-bottom: 1px solid #eee9df;
}

/* Les champs Ville et CP */
.relais-bloc .MR-Widget .MRW-Search input[type="text"] {
    font-family: 'Montserrat', sans-serif;
    font-size: .9rem;
    padding: 8px 10px;
    border: 1px solid #ddd6c6 !important;
    border-radius: 6px;
    background: #fff !important;
    color: var(--texte) !important;
}

.relais-bloc .MR-Widget .MRW-Search input[type="text"]:focus {
    outline: none;
    border-color: var(--or) !important;
}

/* Les deux boutons magenta */
.relais-bloc .MR-Widget .MRW-BtGo,
.relais-bloc .MR-Widget .MRW-BtGeoGo {
    background: var(--charbon) !important;
    border: 1px solid var(--charbon) !important;
    border-radius: 6px !important;
    color: var(--blanc-casse) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: .74rem !important;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 9px 16px !important;
    cursor: pointer;
    transition: all .2s ease;
}

.relais-bloc .MR-Widget .MRW-BtGo:hover,
.relais-bloc .MR-Widget .MRW-BtGeoGo:hover {
    background: var(--or) !important;
    border-color: var(--or) !important;
    color: var(--charbon) !important;
}

/* "Autour de ma position" en second role : contour seulement */
.relais-bloc .MR-Widget .MRW-BtGeoGo {
    background: transparent !important;
    color: var(--charbon) !important;
}

/* La liste des relais trouves */
.relais-bloc .MR-Widget .PR-List-Item {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f4f0e8 !important;
    border-left: 3px solid transparent !important;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--texte) !important;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.relais-bloc .MR-Widget .PR-List-Item:hover {
    background: #faf8f4 !important;
    border-left-color: var(--or) !important;
}

/* Le relais que le client vient de choisir */
.relais-bloc .MR-Widget .PR-List-Item-Selected,
.relais-bloc .MR-Widget .PR-List-Item.Selected {
    background: #faf8f4 !important;
    border-left-color: var(--or) !important;
}

/* Le nom du relais : c'est ce qu'on lit en premier */
.relais-bloc .MR-Widget .PR-Name {
    font-family: 'Cormorant', serif !important;
    font-size: 1.15rem !important;
    font-weight: 600;
    color: var(--charbon) !important;
    margin-bottom: 2px;
}

.relais-bloc .MR-Widget .MRW-Errors {
    padding: 12px 16px;
    color: #8a3131 !important;
    font-size: .85rem;
}

.relais-bloc .MR-Widget .MRW-Map {
    border-top: 1px solid #eee9df;
}

/* Les lignes d'adresse sous le nom du relais : leur CSS les vise
   directement, il faut donc les viser aussi. */
.relais-bloc .MR-Widget .PR-List-Item div {
    color: var(--texte) !important;
    font-size: .82rem;
    line-height: 1.5;
}

.relais-bloc .MR-Widget .PR-List-Item .PR-Name {
    color: var(--charbon) !important;
}

/* Le bloc "etiquettes de colis" de la page Livraison */
.livraison-etiquettes {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e6dcc2;
}

.livraison-etiquettes .aide {
    margin-bottom: 14px;
}

/* La reponse brute d'une API, dans les pages de diagnostic */
.diag-brut {
    background: #faf8f4;
    border: 1px solid #eee9df;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--texte);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 340px;
    overflow: auto;
    margin: 0;
}

/* Le tableau des sous-traitants, dans la page Confidentialite */
.tableau-legal {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 18px;
    font-size: .92rem;
}

.tableau-legal td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid #eee9df;
    vertical-align: top;
    line-height: 1.6;
}

/* La premiere colonne (le nom de l'entreprise) ne doit pas se couper */
.tableau-legal td:first-child {
    white-space: nowrap;
    padding-right: 18px;
}

.tableau-legal td:nth-child(2) {
    color: #6d6a63;
    padding-right: 18px;
}

/* Sur telephone, un tableau a 3 colonnes devient illisible :
   chaque ligne se met en blocs les uns sous les autres. */
@media (max-width: 620px) {
    .tableau-legal,
    .tableau-legal tr,
    .tableau-legal td {
        display: block;
        width: 100%;
    }

    .tableau-legal tr {
        padding: 10px 0;
        border-bottom: 1px solid #eee9df;
    }

    .tableau-legal td {
        border: none;
        padding: 2px 0;
    }
}

/* Le lien discret « Annuler ma commande », dans l'espace client */
.cmd-annuler-form {
    margin: 0;
}

.cmd-annuler-form .lien-discret {
    color: #8a3131;
}

/* ===================================================
   La page d'UNE création  (/creation/nom-de-la-piece)
   =================================================== */

/* Le fil d'Ariane : « Accueil › Le catalogue › Bougie… ».
   Il rassure le visiteur, et Google le lit aussi. */
.fil-ariane {
    max-width: 1100px;
    margin: 22px auto 0;
    padding: 0 32px;
    font-size: .82rem;
    color: #8a867d;
}

.fil-ariane a {
    color: #6d6a63;
    text-decoration: none;
}

.fil-ariane a:hover {
    color: var(--or);
}

/* Deux colonnes sur ordinateur : la photo, puis le texte.
   Sur téléphone, elles se mettent l'une sous l'autre (plus bas). */
.fiche {
    max-width: 1100px;
    margin: 18px auto 60px;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: start;
}

.fiche-visuel img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    background: #faf8f4;
    border: 1px solid #eee9df;
}

.fiche-photo-vide {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #e6e0d4;
    border-radius: 14px;
    color: #b0aa9e;
    background: #fff;
}

.fiche-texte h1 {
    font-family: 'Cormorant', serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--charbon);
    margin: 6px 0 14px;
    line-height: 1.15;
}

.fiche-prix {
    font-size: 1.7rem;
    color: var(--or);
    font-weight: 500;
}

.fiche-description {
    margin: 18px 0;
    line-height: 1.75;
    white-space: normal;
}

.fiche-dispo {
    font-size: .9rem;
    color: #6d6a63;
    background: #fff;
    border: 1px solid #eee9df;
    border-radius: 10px;
    padding: 12px 14px;
}

.fiche-form {
    margin-top: 22px;
}

.fiche-bouton {
    margin-top: 16px;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}

.fiche-retour {
    margin-top: 28px;
    font-size: .88rem;
}

.fiche-retour a {
    color: #6d6a63;
    text-decoration: none;
}

.fiche-retour a:hover {
    color: var(--or);
}

/* Le nom d'une carte du catalogue est devenu un lien :
   il doit rester un titre à l'œil, pas un lien bleu souligné. */
.carte-nom a {
    color: inherit;
    text-decoration: none;
}

.carte-nom a:hover {
    color: var(--or);
}

/* Le petit lien sous le bouton « Ajouter au panier » */
.carte-fiche-lien {
    display: inline-block;
    margin-top: 10px;
    font-size: .82rem;
    color: #6d6a63;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 75, .5);
}

.carte-fiche-lien:hover {
    color: var(--or);
}

/* Sur téléphone, la photo passe au-dessus du texte */
@media (max-width: 820px) {
    .fiche {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 20px;
    }

    .fil-ariane {
        padding: 0 20px;
    }

    .fiche-texte h1 {
        font-size: 1.9rem;
    }
}

/* Le bouton d'achat de la fiche ne prend pas toute la largeur de
   la colonne : à 550 px de large, ça ferait un bandeau, pas un bouton. */
.fiche-form.form-demande .btn {
    width: auto;
    min-width: 260px;
}

/* ============================================================
   Le menu du haut sur un téléphone
   ------------------------------------------------------------
   Constaté le 18/08 : sur un écran de 375 px, la barre du haut
   mesurait 504 px. Toutes les pages débordaient donc vers la
   droite, et Google le voit (il classe les sites d'après leur
   version téléphone). On autorise simplement le menu à passer
   à la ligne au lieu de pousser la page.
   ============================================================ */
@media (max-width: 560px) {
    header {
        flex-wrap: wrap;
    }

    .nav-haut {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px 14px;
    }
}

/* Le petit lien « Voir la fiche » ne doit pas s'étirer sur toute
   la largeur de la carte : son trait doit s'arrêter avec le mot. */
.carte-fiche-lien {
    align-self: flex-start;
    width: fit-content;
}

/* L'adresse publique d'une création, dans la page de gestion :
   discrète, mais toujours sous la main pour la copier. */
.produit-lien-public {
    display: inline-block;
    margin: 2px 0 4px;
    font-size: .72rem;
    color: #8a867d;
    text-decoration: none;
    word-break: break-all;
}

.produit-lien-public:hover {
    color: var(--or);
    text-decoration: underline;
}

/* Les intertitres de la fiche client dépliée (Clients) */
.fiche-sous-titre {
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8A6D24;
    font-weight: 600;
    margin: 18px 0 8px;
}

.fiche-sous-titre:first-child {
    margin-top: 6px;
}

/* ============================================================
   Les récompenses de fidélité (page Récompenses)
   ============================================================ */

/* Les listes déroulantes doivent ressembler aux champs texte,
   sinon le formulaire a l'air bricolé. */
.form-produit select {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 11px 14px;
    border: 1px solid #d9d5cc;
    border-radius: 8px;
    background: #fff;
    color: var(--charbon);
    font-family: inherit;
    font-size: .95rem;
    text-transform: none;
    letter-spacing: normal;
}

.form-produit select:focus {
    outline: none;
    border-color: var(--or);
}

/* ⚠️ Indispensable : « .form-produit label » impose display:block,
   ce qui annule l'attribut hidden. Sans cette ligne, le champ
   qu'on croit caché reste affiché. */
.form-produit label[hidden] {
    display: none;
}

/* Le prix en points, à côté du nom de la récompense */
.badge-points {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    border: 1px solid var(--or);
    border-radius: 999px;
    background: #fdfaf3;
    color: #8A6D24;
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Enregistrer, l'interrupteur et la croix sur la même ligne */
.fiche-actions.ligne-recompense {
    align-items: center;
}

/* ============================================================
   Les points de fidélité dans le panier
   ============================================================ */

.fid-panier {
    margin: 18px 0;
    padding: 18px 20px;
    border: 1px solid var(--or);
    border-radius: 10px;
    background: #fdfaf3;
}

.fid-titre {
    font-family: 'Cormorant', serif;
    font-size: 1.15rem;
    color: var(--charbon);
    margin-bottom: 4px;
}

.fid-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.fid-form label {
    flex: 1 1 220px;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8d887d;
}

.fid-form select {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid #d9d5cc;
    border-radius: 8px;
    background: #fff;
    color: var(--charbon);
    font-family: inherit;
    font-size: .92rem;
    text-transform: none;
    letter-spacing: normal;
}

.fid-form select:focus {
    outline: none;
    border-color: var(--or);
}

/* La ligne « récompense » dans le récapitulatif du panier */
.fid-ligne {
    color: #8A6D24;
}

/* Quand la récompense choisie a dû être écartée */
.fid-refus {
    color: #9b2c2c;
}

/* Rappel du nombre de points manquants (page Mes points) */
.fid-manque {
    color: #8d887d;
    font-size: .82rem;
}

/* La récompense utilisée, sur une fiche commande */
.cmd-fidelite {
    margin: 10px 0;
    padding: 8px 12px;
    border-left: 3px solid var(--or);
    background: #fdfaf3;
    font-size: .88rem;
    color: #6b6862;
}

/* Le petit formulaire « geste » (points ajoutés à la main), fiche client */
.form-geste {
    margin: 10px 0 4px;
    padding: 14px 16px;
    border: 1px solid #e8e4da;
    border-radius: 10px;
    background: #fbfaf7;
}

.form-geste .fiche-actions {
    margin-top: 4px;
    align-items: center;
}

.form-geste .aide {
    margin: 0;
}

/* Le petit repère « étiquetage renseigné » à côté d'un parfum */
.badge-clp {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid #d9d5cc;
    border-radius: 999px;
    background: #fff;
    color: #b3aea3;
    font-family: 'Montserrat', sans-serif;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: 1px;
    vertical-align: middle;
}

.badge-clp-ok {
    border-color: var(--or);
    background: #fdfaf3;
    color: #8A6D24;
}

/* Les zones de texte de l'étiquetage : du texte brut, lisible */
.form-produit textarea[name^="phrases"] {
    font-family: 'Montserrat', sans-serif;
    font-size: .82rem;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
}

/* Le bloc « Étiquetage réglementaire » prend toute la largeur sous la
   ligne du parfum. Sans ça, il hérite du flex de .ligne-parfum et tous
   les champs se retrouvent côte à côte, illisibles. */
.ligne-parfum > .details-produit {
    flex: 1 0 100%;
}

/* Les formulaires du CLP redeviennent des formulaires normaux :
   seule la ligne du parfum (nom + interrupteur + croix) reste en ligne. */
.ligne-parfum .details-produit form {
    display: block;
    align-items: initial;
    gap: 0;
}

/* ------------------------------------------------------------
   Les textes-exemples des champs      (ajouté le 23/08/2026)
   ------------------------------------------------------------
   Un champ vide affiche un exemple — « 793172 138 » sur le n° de
   lot, « 8,90 » sur un prix. Sans cette règle, le navigateur le
   dessine presque noir : plus rien ne distingue un simple exemple
   d'une valeur vraiment enregistrée.

   Sur le registre de fabrication c'est un piège grave — on croirait
   ses dix matières renseignées alors qu'elles sont vides. Gris clair
   ET italique : deux indices au lieu d'un, pour que ça se voie aussi
   sur un écran mal réglé ou en plein soleil.
   ------------------------------------------------------------ */
input::placeholder,
textarea::placeholder {
    color: #8a8478;
    font-style: italic;
    /* Firefox baisse l'opacité de son côté : on l'en empêche,
       sinon le gris devient illisible */
    opacity: 1;
}

/* ------------------------------------------------------------
   La coche « lot renseigné »            (ajouté le 23/08/2026)
   ------------------------------------------------------------
   Un vert sourd, pas un vert d'écran d'ordinateur : il doit se
   poser à côté du charbon et de l'or sans crier. Il ne dit qu'une
   chose — « celle-là est faite ». Le reste de la charte ne bouge pas.
   ------------------------------------------------------------ */
.lot-ok {
    margin-left: 8px;
    color: #3f7d52;
    font-family: 'Montserrat', sans-serif;
    font-size: .8em;
    font-weight: 600;
    /* Le titre est en Cormorant : sans ça la coche partirait de travers */
    vertical-align: middle;
}

/* ------------------------------------------------------------
   La ligne « n° de lot » du parfum       (ajouté le 23/08/2026)
   ------------------------------------------------------------
   .ligne-parfum est un flex : sans ce flex:1 0 100%, ce formulaire
   irait se coincer à côté de l'interrupteur. On lui donne sa propre
   ligne, sous le nom du parfum, comme le fait déjà le bloc CLP.
   ------------------------------------------------------------ */
.ligne-parfum > .form-lot {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #eae6dd;
}

.ligne-parfum > .form-lot label {
    flex: 0 0 auto;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8d887d;
}

.ligne-parfum > .form-lot input[type="text"] {
    flex: 1 1 auto;
    min-width: 120px;
    padding: 9px 12px;
    border: 1px solid #d9d5cc;
    border-radius: 8px;
    background: #fff;
    color: var(--charbon);
    font-family: inherit;
    font-size: 1rem;
}

.ligne-parfum > .form-lot input[type="text"]:focus {
    outline: none;
    border-color: var(--or);
}

/* Sur téléphone la ligne devient une colonne : sinon le champ
   se retrouve à 40 px de large et on n'y tape plus rien. */
@media (max-width: 620px) {
    .ligne-parfum > .form-lot {
        flex-wrap: wrap;
    }

    .ligne-parfum > .form-lot input[type="text"] {
        flex: 1 0 100%;
    }
}

/* ------------------------------------------------------------
   La composition figée d'un lot          (ajouté le 23/08/2026)
   ------------------------------------------------------------
   C'est du texte aligné en colonnes : il lui FAUT une police à
   chasse fixe, sinon les points de conduite partent en biais et
   la fiche imprimée devient illisible. Seul endroit du site où
   Montserrat cède la place — et c'est assumé.
   ------------------------------------------------------------ */
.registre-compo {
    margin: 14px 0 0;
    padding: 14px 16px;
    overflow-x: auto;
    border-radius: 8px;
    background: #faf9f6;
    border: 1px solid #eae6dd;
    color: var(--charbon);
    font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', monospace;
    font-size: .82rem;
    line-height: 1.7;
    white-space: pre;
}

/* ------------------------------------------------------------
   La composition sur le PAPIER            (ajouté le 23/08/2026)
   ------------------------------------------------------------
   Beaucoup de navigateurs n'impriment ni les fonds ni les cadres
   pour « économiser l'encre ». Sur une fiche de lot, l'encadré
   disparaîtrait et le tableau flotterait au milieu de la page.
   On le rend donc lisible SANS fond : un simple filet au-dessus
   et au-dessous suffit, et l'encre est économisée pour de vrai.
   ------------------------------------------------------------ */
@media print {
    .registre-compo {
        padding: 10px 0;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid #1A1A1A;
        border-bottom: 1px solid #1A1A1A;
        border-radius: 0;
        background: #fff;
        font-size: .8rem;
    }
}

/* ------------------------------------------------------------
   La page de garde du registre           (ajouté le 23/08/2026)
   ------------------------------------------------------------
   Une seule feuille, à glisser devant le classeur papier. Elle
   ne ressemble à aucune autre page du site : c'est voulu, elle
   est faite pour être vue posée sur une table, pas lue à l'écran.
   ------------------------------------------------------------ */
.couv {
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 48px 40px;
    text-align: center;
    color: #1A1A1A;
}

.couv-marque {
    font-family: 'Cormorant', Georgia, serif;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.couv-artisan {
    margin-top: 4px;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8d887d;
}

/* Le filet d'or : la seule couleur de la feuille. Il découpe la
   page en trois — qui, quoi, pourquoi. */
.couv-filet {
    width: 90px;
    height: 2px;
    margin: 38px auto;
    background: var(--or);
}

.couv-titre {
    margin: 0;
    font-family: 'Cormorant', Georgia, serif;
    font-size: 3.6rem;
    font-weight: 600;
    line-height: 1.08;
}

.couv-sous {
    margin: 18px 0 0;
    font-size: .82rem;
    line-height: 2;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8d887d;
}

.couv-dates {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    font-size: .9rem;
}

/* Le trait à remplir au stylo. Une bordure, pas des tirets :
   sur le papier, un underscore répété se disloque. */
.couv-trait {
    display: inline-block;
    width: 130px;
    margin-left: 8px;
    border-bottom: 1px solid #b9b3a6;
}

.couv-bas {
    margin-top: 70px;
    padding-top: 22px;
    border-top: 1px solid #eae6dd;
}

.couv-identite {
    margin: 0 0 16px;
    font-size: .85rem;
    line-height: 1.7;
}

.couv-mention {
    margin: 0 0 12px;
    font-size: .74rem;
    line-height: 1.8;
    color: #6f6a60;
}

@media print {

    /* Une couverture, c'est UNE feuille : on remonte le contenu et
       on laisse la page respirer, sans jamais déborder sur une 2e. */
    .couv {
        max-width: none;
        padding: 30px 20px 0;
    }

    .couv-bas {
        margin-top: 48px;
    }
}

/* ------------------------------------------------------------
   Le registre vu depuis les commandes    (ajouté le 23/08/2026)
   ------------------------------------------------------------
   Une colonne de plus dans le détail d'une vente : soit le lot est
   inscrit (vert, discret), soit le lien attend. Le but est qu'un
   coup d'œil suffise — pas d'avoir à ouvrir le registre pour savoir.
   ------------------------------------------------------------ */
.cmd-registre {
    white-space: nowrap;
    text-align: right;
    font-size: .78rem;
}

.cmd-lot-ok {
    color: #3f7d52;
}

.cmd-lot-lien {
    color: var(--or);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 75, .45);
}

.cmd-lot-lien:hover {
    border-bottom-color: var(--or);
}

@media print {

    /* Sur un bon de commande imprimé, ce rappel n'a rien à faire */
    .cmd-registre {
        display: none;
    }
}

/* ------------------------------------------------------------
   La case « va en diffuseur »            (ajouté le 23/08/2026)
   ------------------------------------------------------------
   Elle vit sur la même ligne que le n° de lot du parfum. Sans ce
   nowrap, la case et son texte se séparent en fin de ligne et on
   se retrouve avec une case orpheline sous le champ.
   ------------------------------------------------------------ */
.ligne-parfum > .form-lot .case-diffuseur {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
    font-size: .82rem;
    color: var(--texte);
    text-transform: none;
    letter-spacing: normal;
}

.ligne-parfum > .form-lot .case-diffuseur input {
    width: auto;
    margin: 0;
}

/* ------------------------------------------------------------
   La case newsletter du pied de page  (ajouté le 23/08/2026)
   ------------------------------------------------------------
   Une bande charbon juste avant le pied : elle doit se voir sans
   crier, et surtout ne pas ressembler à une publicité. D'où le
   fond sombre — c'est le seul endroit clair du site qui bascule,
   et c'est ce contraste qui la fait remarquer.
   ------------------------------------------------------------ */
.lettre {
    margin-top: 60px;
    padding: 46px 24px;
    background: var(--charbon);
    color: #F5F3EE;
    text-align: center;
}

.lettre-dedans {
    max-width: 560px;
    margin: 0 auto;
}

.lettre-titre {
    margin: 0 0 10px;
    font-family: 'Cormorant', Georgia, serif;
    font-size: 1.9rem;
    font-weight: 600;
    color: #F5F3EE;
}

.lettre-texte {
    margin: 0 0 22px;
    font-size: .92rem;
    line-height: 1.7;
    color: #cfcabd;
}

/* Le champ et le bouton sur une ligne, qui s'empilent sur téléphone */
.lettre-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* L'étiquette est là pour les lecteurs d'écran, pas pour l'œil :
   le champ porte déjà « vous@exemple.fr ». On ne la supprime pas
   (display:none la rendrait muette aussi pour eux). */
.lettre-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lettre-form input[type="email"] {
    flex: 1 1 240px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #4a4a48;
    border-radius: 8px;
    background: #232322;
    color: #F5F3EE;
    font-family: inherit;
    font-size: 1rem;
}

.lettre-form input[type="email"]:focus {
    outline: none;
    border-color: var(--or);
}

.lettre-form input[type="email"]::placeholder {
    color: #8d887d;
    font-style: italic;
    opacity: 1;
}

/* Sur fond sombre, le bouton noir du site disparaîtrait : on le
   repasse en or, seule exception à la charte des boutons. */
.lettre-form .m-btn {
    flex: 0 0 auto;
    background: var(--or);
    border-color: var(--or);
    color: #1A1A1A;
}

.lettre-reponse {
    margin: 0 0 18px;
    font-size: .92rem;
}

.lettre-ok {
    color: #8fd0a4;
}

.lettre-erreur {
    color: #f0a9a9;
}

.lettre-mention {
    margin: 18px 0 0;
    font-size: .76rem;
    line-height: 1.7;
    color: #9d988d;
}

.lettre-mention a {
    color: #cfcabd;
}

@media (max-width: 520px) {

    /* Le bouton passe sous le champ et prend toute la largeur :
       à 40 px de large, il serait impossible à viser au pouce. */
    .lettre-form input[type="email"],
    .lettre-form .m-btn {
        flex: 1 0 100%;
    }
}

/* ===================================================
   LA GRAVURE PERSONNALISÉE          (29/08/2026)
   Deux endroits, deux buts :
   · dans le panier, le client RELIT son texte ;
   · sur le bon, l'atelier le RECOPIE sans se tromper.
   =================================================== */

.panier-gravure {
    background: #faf6ec;
    border: 1px solid rgba(201, 162, 75, 0.55);
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 8px;
}

.panier-gravure-t {
    font-size: 0.62rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #8a6d21;
    font-weight: 700;
    margin-bottom: 5px;
}

.panier-gravure-l {
    font-family: 'Cormorant', serif;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
}

.panier-gravure-a {
    font-size: 0.72rem;
    color: #6b6b6b;
    margin-top: 6px;
}

/* La mention légale sur la fiche produit : visible sans crier */
.fiche-avertit {
    background: #faf6ec;
    border-left: 3px solid var(--or, #C9A24B);
    padding: 10px 13px;
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 12px 0;
}

/* Les trois champs de gravure, alignés comme les quantités */
.choix-gravure {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

/* --- Le bon de fabrication --- */
/* ⚠️ Encadré NOIR épais, pas doré : ce bon s'imprime souvent en
   noir et blanc, et c'est la seule information qu'on ne peut ni
   deviner ni rattraper après coup. */
.bon-gravure {
    border: 2px solid #1A1A1A;
    border-radius: 4px;
    padding: 8px 11px;
    margin-top: 7px;
    display: inline-block;
}

.bon-gravure-t {
    font-size: 0.6rem;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 4px;
}

.bon-gravure-l {
    font-family: 'Cormorant', serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
}

/* L'objectif sur « Mes points » : ce qu'il reste à faire,
   pas ce qui manque.                        (30/08/2026) */
.fid-objectif {
    background: #faf6ec;
    border-left: 3px solid var(--or, #C9A24B);
    padding: 12px 15px;
    margin: 14px 0 18px;
    font-size: 0.95rem;
    line-height: 1.6;
    border-radius: 0 6px 6px 0;
}

/* ===================================================
   LES COULEURS : pastille + modification (30/08/2026)
   =================================================== */

/* La pastille. Sans teinte, un damier gris : on voit
   immédiatement laquelle n'a pas encore été réglée. */
.coul-pastille {
    /* ⚠️ Un <span> est « inline » par défaut, et sur un inline la
       largeur et la hauteur sont IGNORÉES : la pastille se réduisait
       à un trait vertical. C'est cette ligne qui la fait exister. */
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(26, 26, 26, 0.22);
    flex: 0 0 26px;
    margin-right: 10px;
    background-image:
        linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),
        linear-gradient(45deg, #ddd 25%, #f4f4f4 25%, #f4f4f4 75%, #ddd 75%);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
}

.coul-modif {
    flex-basis: 100%;
    margin-top: 8px;
}

.coul-modif summary {
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a8579;
    cursor: pointer;
}

.coul-modif summary:hover { color: var(--or, #C9A24B); }

.coul-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 10px;
}

.coul-form label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b6b6b;
    font-weight: 600;
}

.coul-form input[type="text"] {
    display: block;
    border: 1px solid #d8d2c6;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.9rem;
    margin-top: 4px;
}

/* Le sélecteur natif : on lui donne la même hauteur que le champ
   texte, sinon les deux ne s'alignent pas. */
.coul-form input[type="color"] {
    display: block;
    width: 58px;
    height: 38px;
    padding: 2px;
    border: 1px solid #d8d2c6;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    margin-top: 4px;
}

/* La phrase d'aide passait sous les champs : le formulaire est en
   flex, elle ne l'est pas. Une marge la remet à sa place. */
.coul-modif .aide-petite {
    display: block;
    margin-top: 12px;
}

/* La pastille ailleurs que sur la page Couleurs */

/* Dans le panier : petite, collée au nom */
.coul-pastille.coul-mini {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: -2px;
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
}

/* Sur le bon d'atelier : plus grosse, on la voit de loin */
.coul-pastille.coul-bon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-right: 7px;
    display: inline-block;
    vertical-align: -3px;
    border-color: #1A1A1A;
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}

.bon-couleur {
    display: inline-flex;
    align-items: center;
}

/* ⚠️ LE POINT QUI DÉCIDE DE TOUT À L'IMPRESSION.
   Par défaut, les navigateurs n'impriment PAS les fonds de couleur —
   ils économisent l'encre, même quand l'imprimante est en couleur.
   Sans cette règle, la pastille sort BLANCHE sur le bon d'atelier,
   et Kevin ne sait pas quelle bobine charger. */
@media print {
    .coul-pastille {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border: 1px solid #1A1A1A;
    }
}

/* ===================================================
   LE CHOIX DE LA COULEUR : des pastilles, pas un menu
   =================================================== */
.coul-choix {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 14px;
}

.coul-choix-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #d8d2c6;
    border-radius: 22px;
    padding: 5px 12px 5px 6px;
    cursor: pointer;
    background: #fff;
    font-size: 0.85rem;
    transition: border-color .12s;
}

/* Le bouton radio est caché, mais il existe : le formulaire marche
   sans une ligne de JavaScript, et le clavier peut naviguer. */
.coul-choix-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.coul-choix-item:hover { border-color: #C9A24B; }

/* La sélection se voit à l'anneau doré ET au texte plus gras :
   jamais à la seule couleur. */
.coul-choix-item:has(input:checked) {
    border-color: #C9A24B;
    box-shadow: inset 0 0 0 1px #C9A24B;
}

.coul-choix-item:has(input:checked) .coul-choix-nom { font-weight: 600; }

/* Au clavier : on doit voir où l'on est. */
.coul-choix-item:has(input:focus-visible) {
    outline: 2px solid #C9A24B;
    outline-offset: 2px;
}

.coul-pastille.coul-choix-rond {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-right: 0;
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}

/* ⚠️ Ces règles-là existent uniquement pour GAGNER contre celles des
   formulaires publics (`.form-demande label`, `.form-demande input`),
   qui sont plus spécifiques que les miennes et remettaient les
   étiquettes en display:block — la pastille perdait alors sa taille
   et ne laissait qu'un trait vertical.

   On ne change pas les règles d'origine : elles servent à tous les
   autres champs du site. On passe juste devant, ici seulement. */
.coul-choix label.coul-choix-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 0;
    width: auto;
    padding: 5px 12px 5px 6px;
}

.coul-choix label.coul-choix-item input[type="radio"] {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    opacity: 0;
}

.coul-choix label.coul-choix-item .coul-pastille {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
}


/* ============================================================
   Les liens glissés dans un texte d'aide
   ------------------------------------------------------------
   ⚠️ Il n'existe aucune règle générale « a { } » dans cette
   feuille : un lien posé dans un paragraphe sort donc en BLEU
   SOULIGNÉ, la couleur d'usine du navigateur. C'était le cas
   des 14 liens rangés dans un « .aide ».
   Cette règle les remet à la charte, tous en même temps.
   ============================================================ */
.aide a {
    color: #8A6D21;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color .2s;
}

.aide a:hover,
.aide a:focus-visible {
    color: #C9A24B;
}