/* Presentation d'offre a la place d'une page vide (js/offer-showcase.js).
   Autonome : les pages « Mes ... » n'ont pas toutes les memes feuilles de
   style, les couleurs ont donc chacune leur valeur de repli. */

.fdo {
  --fdo-accent: #2f7bf5;
  --fdo-accent-2: #7aa7ff;
  --fdo-text: var(--text, #eef4ff);
  --fdo-muted: var(--muted, #9aa6cc);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  grid-template-areas: "copy visual" "features features" "trust trust";
  gap: 1.6rem 2rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: 20px;
  border: 1px solid rgba(120, 160, 235, 0.18);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--fdo-accent) 22%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(16, 31, 63, 0.92), rgba(9, 17, 37, 0.92));
  color: var(--fdo-text);
  text-align: left;
  overflow: hidden;
  animation: fdo-in 0.45s ease both;
}
.fdo--vps { --fdo-accent: #0ea5e9; --fdo-accent-2: #67d4ff; }
.fdo--services { --fdo-accent: #2f7bf5; --fdo-accent-2: #a78bfa; }
.fdo--domains { --fdo-accent: #22c55e; --fdo-accent-2: #86efac; }
.fdo--mail { --fdo-accent: #f59e0b; --fdo-accent-2: #fcd34d; }
@keyframes fdo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fdo, .fdo * { animation: none !important; } }

.fdo-copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.fdo-eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fdo-accent-2); padding: 0.25rem 0.65rem; border-radius: 999px;
  background: color-mix(in srgb, var(--fdo-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--fdo-accent) 35%, transparent);
}
.fdo h2 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.fdo-pitch { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--fdo-muted); max-width: 46ch; }
.fdo-price { margin: 0.2rem 0 0; font-size: 1rem; color: var(--fdo-text); }
.fdo-price strong { font-size: 1.25rem; color: var(--fdo-accent-2); }
.fdo-free { font-weight: 700; color: #6ff0b4; }
.fdo-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.fdo-btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  padding: 0.75rem 1.25rem; border-radius: 12px; font-weight: 700; font-size: 0.95rem;
  color: var(--fdo-text); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.fdo-btn:hover { transform: translateY(-1px); border-color: var(--fdo-accent); }
.fdo-btn--primary {
  border-color: transparent; color: #fff;
  background: linear-gradient(90deg, var(--fdo-accent), color-mix(in srgb, var(--fdo-accent) 70%, #ffffff));
  box-shadow: 0 10px 26px -12px var(--fdo-accent);
}
.fdo-btn:focus-visible { outline: 2px solid var(--fdo-accent-2); outline-offset: 2px; }

.fdo-features { grid-area: features; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; }
.fdo-features li {
  display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 0.9rem; border-radius: 14px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
}
.fdo-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  color: var(--fdo-accent-2); background: color-mix(in srgb, var(--fdo-accent) 15%, transparent);
}
.fdo-ico svg { width: 20px; height: 20px; }
.fdo-features strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; }
.fdo-features span { font-size: 0.84rem; line-height: 1.45; color: var(--fdo-muted); }
.fdo-trust { grid-area: trust; margin: 0; display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--fdo-muted); }
.fdo-trust svg { width: 16px; height: 16px; color: var(--fdo-accent-2); }

/* Illustrations */
.fdo-visual {
  grid-area: visual; align-self: center; border-radius: 16px; padding: 1rem;
  background: rgba(4, 10, 24, 0.7); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8);
  transform: rotate(-1.2deg);
}
.fdo-term-bar { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.7rem; font-size: 0.75rem; color: var(--fdo-muted); }
.fdo-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.fdo-term-bar i:nth-child(2) { background: #febc2e; }
.fdo-term-bar i:nth-child(3) { background: #28c840; }
.fdo-term-bar span { margin-left: 0.4rem; }
.fdo-terminal pre { margin: 0; font: 0.84rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; color: #cfe3ff; white-space: pre-wrap; }
.fdo-terminal b { color: var(--fdo-accent-2); }
.fdo-terminal .ok { color: #6ff0b4; }
.fdo-terminal .cursor { display: inline-block; width: 8px; height: 1em; vertical-align: -2px; background: var(--fdo-accent-2); animation: fdo-blink 1s steps(1) infinite; }
@keyframes fdo-blink { 50% { opacity: 0; } }

.fdo-stack { display: flex; flex-direction: column; gap: 0.6rem; }
.fdo-stack-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.fdo-stack-row svg { width: 22px; height: 22px; color: var(--fdo-accent-2); }
.fdo-stack-row span { flex: 1; font-weight: 600; }
.fdo-stack-row em { font-style: normal; font-size: 0.75rem; color: #6ff0b4; display: flex; align-items: center; gap: 0.35rem; }
.fdo-stack-row em i { width: 7px; height: 7px; border-radius: 50%; background: #35c96b; box-shadow: 0 0 0 4px rgba(53, 201, 107, 0.15); }

.fdo-domain-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 1rem; }
.fdo-domain-bar svg { width: 16px; height: 16px; color: #6ff0b4; }
.fdo-domain-bar b { color: var(--fdo-accent-2); }
.fdo-domain-tlds { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.fdo-domain-tlds span { padding: 0.35rem 0.7rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; background: color-mix(in srgb, var(--fdo-accent) 14%, transparent); color: var(--fdo-accent-2); }

.fdo-mail { display: flex; flex-direction: column; gap: 0.5rem; }
.fdo-mail-row { display: flex; gap: 0.6rem; align-items: center; padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.fdo-mail-row > i { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(135deg, var(--fdo-accent), var(--fdo-accent-2)); }
.fdo-mail-row strong { display: block; font-size: 0.85rem; }
.fdo-mail-row span { font-size: 0.78rem; color: var(--fdo-muted); }
.fdo-mail-from { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; font-size: 0.85rem; font-weight: 700; color: var(--fdo-accent-2); }
.fdo-mail-from svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .fdo { grid-template-columns: 1fr; grid-template-areas: "copy" "visual" "features" "trust"; }
  .fdo-visual { transform: none; }
  .fdo-btn { flex: 1 1 auto; }
}

/* Dans une liste en grille (Mes services, Mes VPS) : toute la largeur. */
.has-showcase { display: block !important; }
.has-showcase > .fdo { width: 100%; }

/* Mes boites mail : panneaux masques quand la presentation s'affiche. Sans
   !important, le display des panneaux (grid/flex) l'emporterait sur [hidden]. */
.mailspace-content > [hidden] { display: none !important; }