/*
Theme Name: CATHY Theme
Theme URI: https://example.com/cathy
Author: Cathy Buffet
Description: Thème portfolio sur-mesure, minimaliste et entièrement personnalisable via le Customizer.
Version: 1.1.0
Text Domain: cathy
*/

/* NOTE: Ce thème utilise TailwindCSS via CDN (chargé en footer pour ne pas bloquer le rendu). */

:root {
  --color-primary: #EBA937;
  --color-secondary: #F2D7D0;
  --color-tertiary: #E3D7E5;
  --color-dark: #1A1A1A;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--color-dark);
  background-color: #ffffff;
}

h1, h2, h3, h4, .font-serif {
  font-family: 'Playfair Display', serif;
}

/* Corrections WordPress admin bar */
.admin-bar nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar nav { top: 46px; } }

/* =========================================
   CONTACT FORM 7 STYLES
   ========================================= */
.wpcf7 { max-width: 100%; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; gap: 0; } }
.form-row { margin-bottom: 1.5rem; }
.wpcf7 label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #6b7280; display: block;
  margin-bottom: 0.5rem; font-family: 'Inter', sans-serif;
}
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
  width: 100%; background-color: #f3f4f6; border: 1px solid transparent;
  border-radius: 0; padding: 1rem; font-family: 'Inter', sans-serif;
  color: #1f2937; font-size: 0.95rem; box-sizing: border-box; transition: all 0.2s ease;
}
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7-form-control.wpcf7-select:focus {
  outline: none; background-color: #ffffff; border-color: #d1d5db;
  box-shadow: 0 0 0 3px rgba(235, 169, 55, 0.15);
}
.wpcf7-form-control.wpcf7-submit {
  width: 100%; background-color: #1A1A1A; color: #ffffff; padding: 1.25rem;
  font-weight: 700; font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.1em; border: none; cursor: pointer;
  transition: background-color 0.3s ease; margin-top: 1rem;
}
.wpcf7-form-control.wpcf7-submit:hover { background-color: #333333; }
.wpcf7-not-valid-tip { font-size: 0.75rem; color: #dc2626; margin-top: 0.25rem; }
.wpcf7-response-output {
  border: 2px solid #EBA937 !important; padding: 1rem !important;
  font-size: 0.9rem; text-align: center;
}

/* =========================================
   LAZY VIDEO — placeholder avant chargement
   ========================================= */
video.cathy-lazy-video {
  background-color: #f3f4f6; /* Fond neutre pendant le chargement */
}

/* =========================================
   STYLE RECETTE & PROSE OVERRIDES
   ========================================= */

/* Ingrédients */
.recipe-ingredients { font-size: 0.95rem; line-height: 2; }
.recipe-ingredients ul { list-style: none; padding: 0; margin: 0; }
.recipe-ingredients li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.recipe-ingredients li::before {
  content: '•'; color: #EBA937; font-weight: bold; font-size: 1.5em;
  position: absolute; left: 0; top: -0.2em;
}

/* Instructions */
.recipe-instructions ol { list-style: none; counter-reset: recipe-step; padding: 0; }
.recipe-instructions ol li {
  counter-increment: recipe-step; position: relative;
  padding-left: 3rem; margin-bottom: 1.5rem;
}
.recipe-instructions ol li::before {
  content: counter(recipe-step); background-color: #EBA937; color: white;
  width: 1.8rem; height: 1.8rem; border-radius: 50%; text-align: center;
  line-height: 1.8rem; font-weight: bold; font-size: 0.8rem;
  position: absolute; left: 0; top: 0; font-family: 'Inter', sans-serif;
}
.recipe-instructions h4 {
  font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: bold;
  margin-top: 1.5rem; margin-bottom: 0.5rem; color: #1A1A1A;
}

/* PROSE overrides */
.prose { font-size: 1.1rem; line-height: 1.8; color: #374151; }
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: 'Playfair Display', serif; color: #1A1A1A;
  font-weight: 700; margin-top: 2em; margin-bottom: 0.5em;
}
.prose h2 { font-size: 2rem; }
.prose h3 { font-size: 1.5rem; }
.prose a { color: #EBA937; text-decoration: none; font-weight: 600; }
.prose a:hover { text-decoration: underline; }
.prose strong { color: #1A1A1A; font-weight: 700; }
.prose ul, .prose ol { margin-bottom: 1.5em; padding-left: 1.5em; }
.prose li { margin-bottom: 0.5em; }
.prose p { margin-bottom: 1.5em; }

/* =========================================
   ACCESSIBILITÉ — focus visible
   ========================================= */
:focus-visible {
  outline: 2px solid #EBA937;
  outline-offset: 3px;
}