/* ===================================================
   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-texte {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--texte);
    margin: 0 0 12px;
}

.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 descriptions n'ont pas la meme longueur : sans ces regles,
   chaque carte s'etire a sa guise et les boutons se retrouvent
   a des hauteurs differentes. 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;
}

/* La description est coupee a 3 lignes, avec les "..." du navigateur.
   Le texte entier reste lisible dans la modale, au clic. */
.carte-texte {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Prix + disponibilite + bouton collent au bas de la carte,
   quelle que soit la longueur du texte 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);
}