/* ============================================================
   Mocktailspirit — Composants visuels pour guides/pillar pages
   Chargé seulement sur les pages article.twig
   Tous les composants sont mobile-first responsive.
   ============================================================ */

/* ====== 1. STAT CARDS (chiffres clés en carrousel grid) ====== */
.gc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin: 48px 0;
}
.gc-stat {
  background: linear-gradient(135deg, #fff 0%, #fefaf0 100%);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  border: 1px solid rgba(214, 122, 60, 0.15);
  transition: transform .3s, box-shadow .3s;
}
.gc-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(214, 122, 60, 0.18);
}
.gc-stat-val {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--color-primary, #D67A3C);
  margin-bottom: 8px;
}
.gc-stat-label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--color-ink-soft, #52597A);
}

/* ====== 2. RATIO INFOGRAPHIC (3-2-1 spritz, etc.) ====== */
.gc-ratio {
  background: linear-gradient(135deg, #1E3329 0%, #2A4A3A 100%);
  border-radius: 20px;
  padding: 48px 32px;
  margin: 48px 0;
  color: #FFF8EA;
  position: relative;
  overflow: hidden;
}
.gc-ratio::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(214, 122, 60, 0.3) 0%, transparent 60%);
}
.gc-ratio-title {
  position: relative;
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem;
  margin: 0 0 28px;
  color: #FFF8EA;
}
.gc-ratio-bars {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.gc-ratio-row {
  display: grid;
  grid-template-columns: 100px 1fr 80px;
  align-items: center;
  gap: 16px;
}
.gc-ratio-num {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  color: var(--color-primary, #D67A3C);
}
.gc-ratio-bar {
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.gc-ratio-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary, #D67A3C) 0%, #E89860 100%);
  border-radius: 6px;
  animation: gcRatioFill 1.2s cubic-bezier(.3,.9,.4,1) both;
  transform-origin: left;
}
@keyframes gcRatioFill {
  from { transform: scaleX(0); }
}
.gc-ratio-label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

/* ====== 3. STEP FLOW (étapes numérotées avec connecteur) ====== */
.gc-steps {
  margin: 48px 0;
  position: relative;
}
.gc-steps::before {
  content: '';
  position: absolute;
  left: 28px; top: 32px; bottom: 32px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-primary, #D67A3C) 0%, rgba(214, 122, 60, 0.15) 100%);
  border-radius: 2px;
}
.gc-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  margin-bottom: 36px;
  position: relative;
}
.gc-step:last-child { margin-bottom: 0; }
.gc-step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary, #D67A3C);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  box-shadow: 0 6px 18px rgba(214, 122, 60, 0.35);
  z-index: 1;
  flex-shrink: 0;
}
.gc-step-body {
  padding-top: 8px;
}
.gc-step-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-ink, #1E3329);
  margin: 0 0 8px;
}
.gc-step-text {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink-soft, #52597A);
  margin: 0;
}

/* ====== 4. COMPARISON TABLE (vs do/don't, marques, etc.) ====== */
.gc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 48px 0;
}
.gc-compare-col {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  border: 2px solid;
}
.gc-compare-col.good { border-color: #8CC23A; background: linear-gradient(180deg, rgba(140,194,58,0.06) 0%, #fff 100%); }
.gc-compare-col.bad  { border-color: #E74C3C; background: linear-gradient(180deg, rgba(231,76,60,0.05) 0%, #fff 100%); }
.gc-compare-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  margin: 0 0 18px;
  color: var(--color-ink, #1E3329);
}
.gc-compare-head .ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}
.gc-compare-col.good .ico { background: #8CC23A; }
.gc-compare-col.bad  .ico { background: #E74C3C; }
.gc-compare-list {
  list-style: none;
  margin: 0; padding: 0;
}
.gc-compare-list li {
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--color-ink-soft, #52597A);
  border-bottom: 1px dashed rgba(30,51,41,0.08);
}
.gc-compare-list li:last-child { border-bottom: none; }
.gc-compare-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 16px;
  width: 14px; height: 14px;
  border-radius: 50%;
}
.gc-compare-col.good .gc-compare-list li::before { background: #8CC23A; }
.gc-compare-col.bad  .gc-compare-list li::before { background: #E74C3C; }

/* ====== 5. INTERACTIVE QUIZ (with JS) ====== */
.gc-quiz {
  background: linear-gradient(135deg, #F2EBDC 0%, #FAF4E5 100%);
  border-radius: 20px;
  padding: 40px 32px;
  margin: 56px 0;
  border: 1px solid rgba(214, 122, 60, 0.18);
  box-shadow: 0 4px 20px rgba(30, 51, 41, 0.06);
}
.gc-quiz-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--color-primary, #D67A3C);
  font-weight: 700;
  margin-bottom: 12px;
}
.gc-quiz-question {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--color-ink, #1E3329);
  margin: 0 0 24px;
}
.gc-quiz-options {
  display: grid;
  gap: 12px;
}
.gc-quiz-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  background: #fff;
  border: 1.5px solid rgba(30, 51, 41, 0.12);
  border-radius: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.98rem;
  color: var(--color-ink, #1E3329);
  cursor: pointer;
  transition: all .2s;
}
.gc-quiz-opt:hover:not(:disabled) {
  border-color: var(--color-primary, #D67A3C);
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(214, 122, 60, 0.15);
}
.gc-quiz-opt:disabled { cursor: default; }
.gc-quiz-opt.is-correct {
  background: linear-gradient(135deg, #8CC23A 0%, #A5D04F 100%);
  border-color: #8CC23A;
  color: #fff;
  font-weight: 600;
}
.gc-quiz-opt.is-wrong {
  background: #FCEAE8;
  border-color: #E74C3C;
  color: #952519;
}
.gc-quiz-feedback {
  margin-top: 20px;
  padding: 18px 22px;
  background: #fff;
  border-left: 4px solid var(--color-primary, #D67A3C);
  border-radius: 0 12px 12px 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink-soft, #52597A);
  display: none;
}
.gc-quiz-feedback.visible { display: block; animation: gcFadeIn .4s; }
.gc-quiz-feedback strong { color: var(--color-ink, #1E3329); }
@keyframes gcFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====== 6. PHOTO GRID (galerie 2 ou 3 colonnes) ====== */
.gc-photo-grid {
  display: grid;
  gap: 16px;
  margin: 48px 0;
}
.gc-photo-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.gc-photo-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gc-photo {
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-bg-soft, #F2EBDC);
  position: relative;
  aspect-ratio: 3/2;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.gc-photo:hover { transform: scale(1.02); }
.gc-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s;
}
.gc-photo:hover img { transform: scale(1.08); }
.gc-photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(15,22,18,0.85) 100%);
  color: #FFF8EA;
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
}
@media (max-width: 720px) {
  .gc-photo-grid.cols-2, .gc-photo-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ====== 7. FULL-WIDTH PHOTO BREAK (entre paragraphes) ====== */
.gc-photo-break {
  margin: 60px -40px;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 21/9;
  background: var(--color-bg-soft, #F2EBDC);
}
.gc-photo-break img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.gc-photo-break-caption {
  position: absolute;
  bottom: 24px; left: 32px; right: 32px;
  color: #FFF8EA;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.3rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
@media (max-width: 880px) {
  .gc-photo-break { margin: 40px -16px; aspect-ratio: 16/10; }
}

/* ====== 8. TIMELINE (semaine 1, 2, 3, 4) ====== */
.gc-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 48px 0;
}
.gc-tl-item {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  border-top: 4px solid var(--color-primary, #D67A3C);
  box-shadow: 0 4px 16px rgba(30,51,41,0.06);
}
.gc-tl-week {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--color-primary, #D67A3C);
  font-weight: 700;
  margin-bottom: 8px;
}
.gc-tl-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem;
  margin: 0 0 12px;
  color: var(--color-ink, #1E3329);
}
.gc-tl-text {
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-ink-soft, #52597A);
  margin: 0;
}

/* ====== 9. QUOTE BOX (pull quote sophistiqué) ====== */
.gc-quote {
  margin: 56px 0;
  padding: 40px 36px 40px 70px;
  background: linear-gradient(135deg, #fff 0%, #fefaf0 100%);
  border-left: 4px solid var(--color-primary, #D67A3C);
  border-radius: 0 16px 16px 0;
  position: relative;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--color-ink, #1E3329);
}
.gc-quote::before {
  content: '"';
  position: absolute;
  left: 18px; top: 18px;
  font-family: 'DM Serif Display', serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--color-primary, #D67A3C);
  opacity: 0.4;
}
.gc-quote-author {
  display: block;
  margin-top: 18px;
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-muted, #9098B8);
}

/* ====== 10. BUDGET CALCULATOR / INFOBLOCK ====== */
.gc-budget {
  background: linear-gradient(135deg, #fff 0%, #fefaf0 100%);
  border-radius: 16px;
  padding: 32px;
  margin: 48px 0;
  border: 1px solid rgba(214, 122, 60, 0.15);
}
.gc-budget-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  margin: 0 0 20px;
  color: var(--color-ink, #1E3329);
}
.gc-budget-rows {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}
.gc-budget-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(30,51,41,0.1);
}
.gc-budget-label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  color: var(--color-ink-soft, #52597A);
}
.gc-budget-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-ink, #1E3329);
}
.gc-budget-total {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 16px 0 0;
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  color: var(--color-primary, #D67A3C);
}

/* ====== 11. CALLOUT BOX (tip, warning, info) ====== */
.gc-callout {
  margin: 36px 0;
  padding: 22px 26px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: start;
}
.gc-callout-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: #fff;
}
.gc-callout-body {
  font-family: 'Manrope', sans-serif;
  font-size: 0.96rem;
  line-height: 1.55;
}
.gc-callout-body strong { display: block; margin-bottom: 4px; font-size: 1rem; }
.gc-callout.tip     { background: rgba(140, 194, 58, 0.1); border-left: 3px solid #8CC23A; }
.gc-callout.tip .gc-callout-icon { background: #8CC23A; }
.gc-callout.warn    { background: rgba(232, 177, 76, 0.12); border-left: 3px solid #E8B14C; }
.gc-callout.warn .gc-callout-icon { background: #E8B14C; }
.gc-callout.danger  { background: rgba(231, 76, 60, 0.08); border-left: 3px solid #E74C3C; }
.gc-callout.danger .gc-callout-icon { background: #E74C3C; }
.gc-callout.info    { background: rgba(214, 122, 60, 0.08); border-left: 3px solid var(--color-primary, #D67A3C); }
.gc-callout.info .gc-callout-icon { background: var(--color-primary, #D67A3C); }