:root {
    --bleu-rona: #003B7E;
    --jaune-accent: #FFD100;
    --gris-bg: #F4F4F4;
    --gris-border: #DDDDDD;
    --vert-succes: #2E7D32;
    --rouge-promo: #D32F2F;
    --texte: #333333;
    --admin-dark: #222222;
}
body { background: var(--gris-bg); color: var(--texte); font-family: Arial, Helvetica, sans-serif; margin: 0; }

/* Entête et Navigation Générale */
#header { background: var(--bleu-rona); color: white; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; }
#header.header-admin { background: var(--admin-dark); border-bottom: 4px solid var(--bleu-rona); padding: 15px 40px; }
#header h1 { margin: 0; font-size: 1.8rem; font-weight: 900; letter-spacing: 1px; }
#header.header-admin h1 { font-size: 1.5rem; }
#header h1 a { color: white; text-decoration: none; }

#recherche { flex-grow: 1; margin: 0 50px; display: flex; }
.saisie-recherche { background: white; padding: 12px 20px; border-radius: 4px; width: 100%; border: none; font-size: 1rem; }

.action-navigation-membre { color: white; text-decoration: none; font-weight: bold; margin-right: 25px; font-size: 0.9rem; border: 1px solid white; padding: 5px 10px; border-radius: 4px;}
.action-navigation-membre:hover { background: white; color: var(--bleu-rona); }
#navigation-membre { display: flex; align-items: center; }
.formulaire-navigation-deconnexion { display: inline; margin: 0; }
.action-navigation-deconnexion { background: transparent; color: white; border: 1px solid white; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 0.9rem; cursor: pointer; margin-right: 25px; font-family: inherit; }
.action-navigation-deconnexion:hover { background: white; color: var(--bleu-rona); }

.action-navigation-panier { background: transparent; color: white; border: 2px solid white; padding: 10px 20px; font-weight: bold; font-size: 1rem; cursor: pointer; border-radius: 4px; }
.action-navigation-retour { color: white; text-decoration: underline; font-size: 0.9rem; cursor: pointer; margin-right: 20px;}

#menu { background: #222222; color: white; padding: 12px 40px; font-size: 0.9rem; font-weight: bold; text-transform: uppercase; }
.lien-page { margin-right: 30px; cursor: pointer; color: white; text-decoration: none; }
.lien-page:hover { color: var(--jaune-accent); }

#contenu { max-width: 1400px; margin: 30px auto; display: flex; gap: 25px; padding: 0 20px; }
#contenu.contenu-admin { max-width: 1400px; display: block; }
#contenu.contenu-formulaire { max-width: 800px; display: block; }

#navigation-historique, #navigation-historique-admin { font-size: 0.85rem; color: #666; margin-bottom: 20px; }
#navigation-historique a { color: #666; text-decoration: none; }
#navigation-historique a:hover { text-decoration: underline; }
#navigation-historique span { color: var(--bleu-rona); font-weight: bold; }
#navigation-historique-admin a { color: var(--bleu-rona); text-decoration: none; font-weight: bold; }

/* Panneau latéral (Catalogue) */
#panneau-lateral { width: 250px; background: white; border: 1px solid var(--gris-border); padding: 20px; height: fit-content; }
#panneau-lateral h3 { margin-top: 0; font-size: 1rem; text-transform: uppercase; border-bottom: 2px solid var(--bleu-rona); padding-bottom: 10px; }
#liste-categories { list-style: none; padding: 0; margin: 0; }
.categorie-item { padding: 10px 0; border-bottom: 1px solid var(--gris-border); font-size: 0.9rem; color: #555; cursor: pointer; }
.categorie-item:hover { color: var(--bleu-rona); font-weight: bold; }

#affichage-principal { flex-grow: 1; }

/* Grille Catalogue */
#liste-contrats { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.contrat { background: white; border: 1px solid var(--gris-border); padding: 20px; display: flex; flex-direction: column; transition: border-color 0.2s; cursor: pointer;}
.contrat:hover { border-color: var(--bleu-rona); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.contrat-lien { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.contrat-client { height: 200px; background: #EAEAEA; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 3rem; }
.contrat-reference { font-size: 0.8rem; color: #888; margin-bottom: 5px; }
.contrat h4 { font-size: 1.1rem; margin: 0 0 10px 0; font-weight: normal; line-height: 1.4; color: var(--texte); }
.contrat:hover h4 { color: var(--bleu-rona); text-decoration: underline; }
.contrat-evaluation { color: #f39c12; font-size: 0.9rem; margin-bottom: 15px; }
.contrat-evaluation span { color: #888; font-size: 0.8rem; margin-left: 5px; }

/* Prix */
.contrat-prix { font-size: 2.2rem; font-weight: 900; margin: auto 0 15px 0; color: black; display: flex; align-items: start;}
.contrat-prix-cents { font-size: 1.2rem; margin-top: 5px; margin-left: 2px;}
.contrat-prix-symbole { font-size: 1.2rem; margin-top: 5px; margin-right: 5px;}

/* Boutons Actions Publics */
.action-contrat-ajout { background: var(--bleu-rona); color: white; border: none; padding: 14px; font-size: 1rem; font-weight: bold; text-transform: uppercase; cursor: pointer; width: 100%; border-radius: 4px; transition: background 0.2s; }
.action-contrat-ajout:hover { background: #002855; }
.action-contrat-paiement { background: var(--jaune-accent); color: black; border: none; padding: 20px; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; cursor: pointer; width: 100%; border-radius: 4px; transition: background 0.2s; margin-bottom: 10px; }
.action-contrat-paiement:hover { background: #E6BC00; }

/* Page Produit Détail */
#affichage-contrat-detail { display: flex; gap: 40px; background: white; padding: 40px; border: 1px solid var(--gris-border); }
#affichage-contrat-detail .contrat-client { flex: 1; height: 500px; font-size: 8rem; border: 1px solid var(--gris-border); margin-bottom: 0; }
.contrat-informations-techniques { flex: 1; display: flex; flex-direction: column; }
.contrat-titre { font-size: 2rem; margin: 0 0 15px 0; color: var(--texte); }
#affichage-contrat-detail .contrat-evaluation { border-bottom: 1px solid var(--gris-border); padding-bottom: 20px; margin-bottom: 25px; }
#affichage-contrat-detail .contrat-evaluation span { color: var(--vert-succes); font-weight: bold; font-size: 0.9rem; margin-left: 10px; }
.contrat-zone-transaction { margin-bottom: 30px; }
#affichage-contrat-detail .contrat-prix { font-size: 3.5rem; margin: 0; }
#affichage-contrat-detail .contrat-prix-cents, #affichage-contrat-detail .contrat-prix-symbole { font-size: 1.5rem; margin-top: 10px; }
.contrat-disponibilite { color: var(--vert-succes); font-weight: bold; margin-bottom: 20px; display: flex; align-items: center; gap: 5px;}
.contrat-disponibilite::before { content: "✓"; background: var(--vert-succes); color: white; border-radius: 50%; width: 20px; height: 20px; display: inline-flex; justify-content: center; align-items: center; font-size: 0.8rem;}
.contrat-description { margin-top: 40px; line-height: 1.6; border-top: 1px solid var(--gris-border); padding-top: 20px;}
.contrat-description h3 { font-size: 1.2rem; margin-bottom: 15px;}