/* ============================================
   GESTION DES LIVRES — Style principal
   Thème : Bibliothèque élégante & raffinée
   ============================================ */

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

   /* ── Variables ── */
   :root {
       --cream:       #f5f0e8;
       --cream-dark:  #ece5d5;
       --ink:         #1a1408;
       --ink-soft:    #4a3f2f;
       --gold:        #c8923a;
       --gold-light:  #e8b86d;
       --red:         #8b2e2e;
       --border:      rgba(26, 20, 8, 0.12);
       --shadow:      0 4px 24px rgba(26, 20, 8, 0.10);
       --radius:      4px;
       --transition:  0.25s ease;
   }
   
   /* ── Reset & base ── */
   *, *::before, *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   html {
       scroll-behavior: smooth;
   }
   
   body {
       background-color: var(--cream);
       color: var(--ink);
       font-family: 'DM Sans', sans-serif;
       font-weight: 300;
       font-size: 16px;
       line-height: 1.7;
       min-height: 100vh;
   
       /* Texture papier subtile */
       background-image:
           radial-gradient(ellipse at 20% 10%, rgba(200, 146, 58, 0.06) 0%, transparent 60%),
           radial-gradient(ellipse at 80% 90%, rgba(139, 46, 46, 0.05) 0%, transparent 60%);
   }
   
   /* ── Navigation ── */
   nav {
       position: sticky;
       top: 0;
       z-index: 100;
       display: flex;
       align-items: center;
       gap: 0;
       padding: 0 3rem;
       background: var(--ink);
       border-bottom: 3px solid var(--gold);
       box-shadow: 0 2px 20px rgba(26, 20, 8, 0.3);
   }
   
   nav::before {
       content: "📚";
       font-size: 1.2rem;
       margin-right: auto;
       padding: 1rem 0;
       letter-spacing: 0.05em;
   }
   
   nav a {
       display: inline-block;
       padding: 1.1rem 1.6rem;
       color: var(--cream-dark);
       text-decoration: none;
       font-family: 'DM Sans', sans-serif;
       font-weight: 500;
       font-size: 0.85rem;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       border-bottom: 3px solid transparent;
       margin-bottom: -3px;
       transition: color var(--transition), border-color var(--transition);
   }
   
   nav a:hover {
       color: var(--gold-light);
       border-bottom-color: var(--gold-light);
   }
   
   /* ── En-tête principal ── */
   h1 {
       font-family: 'Playfair Display', serif;
       font-size: clamp(2rem, 5vw, 3.5rem);
       font-weight: 700;
       color: var(--ink);
       text-align: center;
       padding: 3rem 2rem 1rem;
       letter-spacing: -0.01em;
       line-height: 1.2;
   }
   
   h1::after {
       content: "";
       display: block;
       width: 60px;
       height: 3px;
       background: var(--gold);
       margin: 1rem auto 0;
       border-radius: 2px;
   }
   
   /* ── Zone d'affichage des vues ── */
   #view {
       max-width: 900px;
       margin: 2.5rem auto 4rem;
       padding: 0 2rem;
       animation: fadeIn 0.35s ease;
   }
   
   @keyframes fadeIn {
       from { opacity: 0; transform: translateY(10px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   /* ── Titres dans les vues ── */
   #view h2 {
       font-family: 'Playfair Display', serif;
       font-size: clamp(1.5rem, 3vw, 2.2rem);
       font-weight: 700;
       color: var(--ink);
       margin-bottom: 1.5rem;
       padding-bottom: 0.75rem;
       border-bottom: 1px solid var(--border);
       position: relative;
   }
   
   #view h2::before {
       content: "";
       position: absolute;
       bottom: -1px;
       left: 0;
       width: 40px;
       height: 2px;
       background: var(--gold);
   }
   
   #view p {
       margin-bottom: 1.25rem;
       color: var(--ink-soft);
       font-size: 1.02rem;
       max-width: 70ch;
   }
   
   /* ── Formulaire contact ── */
   #view form {
       display: flex;
       flex-direction: column;
       gap: 1.2rem;
       max-width: 540px;
       background: white;
       padding: 2.5rem;
       border-radius: var(--radius);
       border: 1px solid var(--border);
       box-shadow: var(--shadow);
   }
   
   #view form label {
       font-size: 0.78rem;
       font-weight: 500;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--ink-soft);
       margin-bottom: -0.6rem;
   }
   
   #view form input,
   #view form textarea {
       width: 100%;
       padding: 0.75rem 1rem;
       border: 1px solid var(--border);
       border-radius: var(--radius);
       background: var(--cream);
       color: var(--ink);
       font-family: 'DM Sans', sans-serif;
       font-size: 0.97rem;
       transition: border-color var(--transition), box-shadow var(--transition);
       outline: none;
       resize: vertical;
   }
   
   #view form input:focus,
   #view form textarea:focus {
       border-color: var(--gold);
       box-shadow: 0 0 0 3px rgba(200, 146, 58, 0.15);
   }
   
   #view form button[type="submit"],
   #view form button {
       align-self: flex-start;
       padding: 0.75rem 2rem;
       background: var(--ink);
       color: var(--cream);
       border: none;
       border-radius: var(--radius);
       font-family: 'DM Sans', sans-serif;
       font-size: 0.85rem;
       font-weight: 500;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       cursor: pointer;
       transition: background var(--transition), transform var(--transition);
   }
   
   #view form button:hover {
       background: var(--gold);
       color: var(--ink);
       transform: translateY(-1px);
   }
   
   /* ── Table liste ── */
   #view table {
       width: 100%;
       border-collapse: collapse;
       background: white;
       border-radius: var(--radius);
       overflow: hidden;
       box-shadow: var(--shadow);
       border: 1px solid var(--border);
   }
   
   #view table thead {
       background: var(--ink);
       color: var(--cream);
   }
   
   #view table th {
       padding: 1rem 1.25rem;
       font-size: 0.75rem;
       font-weight: 500;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       text-align: left;
   }
   
   #view table td {
       padding: 0.9rem 1.25rem;
       border-bottom: 1px solid var(--border);
       color: var(--ink-soft);
       font-size: 0.97rem;
       vertical-align: middle;
   }
   
   #view table tr:last-child td {
       border-bottom: none;
   }
   
   #view table tr:hover td {
       background: var(--cream);
       color: var(--ink);
   }
   
   /* ── Liens "Détail" dans la table ── */
   #view table a {
       display: inline-block;
       padding: 0.3rem 0.9rem;
       background: transparent;
       color: var(--gold);
       border: 1px solid var(--gold);
       border-radius: 2px;
       font-size: 0.78rem;
       font-weight: 500;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       text-decoration: none;
       transition: background var(--transition), color var(--transition);
   }
   
   #view table a:hover {
       background: var(--gold);
       color: white;
   }
   
   /* ── Vue Détail ── */
   #detail {
       background: white;
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: 2.5rem;
       box-shadow: var(--shadow);
       max-width: 560px;
       margin-bottom: 1.5rem;
   }
   
   #detail p {
       display: flex;
       justify-content: space-between;
       padding: 0.65rem 0;
       border-bottom: 1px solid var(--border);
       font-size: 0.97rem;
       color: var(--ink);
       margin: 0;
   }
   
   #detail p:last-child {
       border-bottom: none;
   }
   
   #detail p strong {
       color: var(--ink-soft);
       font-weight: 500;
       font-size: 0.8rem;
       letter-spacing: 0.06em;
       text-transform: uppercase;
   }
   
   /* ── Lien retour ── */
   #view > a,
   #view a[href="#liste"] {
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
       color: var(--ink-soft);
       text-decoration: none;
       font-size: 0.85rem;
       font-weight: 500;
       letter-spacing: 0.06em;
       border-bottom: 1px solid transparent;
       transition: color var(--transition), border-color var(--transition);
       margin-top: 0.5rem;
   }
   
   #view > a:hover,
   #view a[href="#liste"]:hover {
       color: var(--gold);
       border-bottom-color: var(--gold);
   }
   
   /* ── Messages d'erreur ── */
   #view p:has(+ p),
   #detail p:only-child {
       color: var(--red);
       font-style: italic;
   }
   
   /* ── Responsive ── */
   @media (max-width: 640px) {
       nav {
           padding: 0 1rem;
           flex-wrap: wrap;
       }
   
       nav::before {
           width: 100%;
           padding: 0.75rem 0 0.25rem;
       }
   
       nav a {
           padding: 0.75rem 1rem;
           font-size: 0.8rem;
       }
   
       h1 {
           padding: 2rem 1rem 0.5rem;
       }
   
       #view {
           padding: 0 1rem;
           margin: 1.5rem auto 3rem;
       }
   
       #view form {
           padding: 1.5rem;
       }
   
       #detail {
           padding: 1.5rem;
       }
   
       #view table th,
       #view table td {
           padding: 0.7rem 0.75rem;
           font-size: 0.88rem;
       }
   }