/* =========================================================
   BER GMB Tools — Stylesheet v1.1.0
   business-ereputation.com
   ─────────────────────────────────────────────────────────
   Philosophie : CSS-first, JS uniquement pour la génération
   et le clipboard. Accordéons via <details>/<summary>.
   ─────────────────────────────────────────────────────────
   Pour surcharger les couleurs dans votre thème :
   .ber-tool-wrap {
     --ber-primary:    #VOTRE_HEX;
     --ber-primary-dk: #VOTRE_HEX_FONCE;
   }
   ========================================================= */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --ber-primary:     #7999cc;
  --ber-primary-dk:  #5c7ab8;
  --ber-accent:      #a8bedd;
  --ber-success:     #16a34a;
  --ber-danger:      #dc2626;
  --ber-bg:          #ffffff;
  --ber-bg-alt:      #f8fafc;
  --ber-border:      #e2e8f0;
  --ber-text:        #1e293b;
  --ber-text-muted:  #64748b;
  --ber-radius:      10px;
  --ber-radius-sm:   6px;
  --ber-shadow:      0 4px 24px rgba(0,0,0,.07);
  --ber-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ber-transition:  .18s ease;
}

/* ── Réinitialisation périmètre ─────────────────────────── */
.ber-tool-wrap *,
.ber-tool-wrap *::before,
.ber-tool-wrap *::after {
  box-sizing: border-box;
}

/* ── Wrapper ────────────────────────────────────────────── */
.ber-tool-wrap {
  font-family: var(--ber-font);
  font-size: 1rem;
  background: var(--ber-bg);
  border: 1px solid var(--ber-border);
  border-radius: var(--ber-radius);
  box-shadow: var(--ber-shadow);
  overflow: hidden;
  margin: 2rem 0;
  max-width: 860px;
}

/* ── Header ─────────────────────────────────────────────── */
.ber-tool-header {
  background: linear-gradient(135deg, var(--ber-primary) 0%, var(--ber-accent) 100%);
  padding: 2rem 2rem 1.6rem;
  color: #fff;
}
.ber-tool-badge {
  display: inline-block;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: 20px;
  margin-bottom: .7rem;
}
.ber-tool-title {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 .4rem !important;
  padding: 0 !important;
  line-height: 1.3;
  border: none !important;
}
.ber-tool-subtitle {
  font-size: .9rem;
  color: rgba(255,255,255,.88);
  margin: 0;
  line-height: 1.5;
}

/* ── Body ───────────────────────────────────────────────── */
.ber-tool-body {
  padding: 2rem;
}

/* ── Formulaire ─────────────────────────────────────────── */
.ber-form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.ber-form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 180px;
}
.ber-form-group label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ber-text);
  margin-bottom: .35rem;
}
.ber-required-star {
  color: var(--ber-danger);
  margin-left: .15rem;
}

/* Champs */
.ber-form-group input[type="text"],
.ber-form-group input[type="url"],
.ber-form-group input[type="tel"],
.ber-form-group input[type="time"],
.ber-form-group select,
.ber-form-group textarea {
  border: 1.5px solid var(--ber-border);
  border-radius: var(--ber-radius-sm);
  padding: .55rem .75rem;
  font-size: .9rem;
  font-family: var(--ber-font);
  color: var(--ber-text);
  background: var(--ber-bg);
  transition: border-color var(--ber-transition), box-shadow var(--ber-transition);
  width: 100%;
}

/* Focus — CSS pur */
.ber-form-group input:focus,
.ber-form-group select:focus,
.ber-form-group textarea:focus {
  outline: none;
  border-color: var(--ber-primary);
  box-shadow: 0 0 0 3px rgba(121,153,204,.18);
}

/* Validation CSS native — champ invalide après interaction */
.ber-form-group input:not(:placeholder-shown):invalid {
  border-color: var(--ber-danger);
  box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}
.ber-form-group input:not(:placeholder-shown):valid {
  border-color: var(--ber-success);
}

.ber-form-group textarea { resize: vertical; }

.ber-field-help {
  font-size: .78rem;
  color: var(--ber-text-muted);
  margin: .3rem 0 0;
  line-height: 1.4;
}
.ber-field-help a {
  color: var(--ber-primary);
  text-decoration: none;
}
.ber-field-help a:hover {
  text-decoration: underline;
}

/* ── <details> / <summary> — zéro JS, indexable ────────── */
.ber-details {
  margin: 1rem 0;
  border: 1.5px solid var(--ber-border);
  border-radius: var(--ber-radius-sm);
  background: var(--ber-bg-alt);
  overflow: hidden;
}

.ber-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ber-text);
  cursor: pointer;
  user-select: none;
  transition: background var(--ber-transition);
}
.ber-summary::-webkit-details-marker { display: none; }
.ber-summary::marker { display: none; }

/* Chevron CSS — pas d'image, pas de JS */
.ber-summary::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--ber-primary);
  transition: transform var(--ber-transition);
  flex-shrink: 0;
}
.ber-details[open] > .ber-summary::before {
  transform: rotate(90deg);
}

.ber-summary:hover {
  background: #eef2fa;
}

.ber-details-content {
  padding: 1rem 1.1rem;
  border-top: 1.5px solid var(--ber-border);
  font-size: .85rem;
  color: var(--ber-text);
  animation: berSlideIn .2s ease;
}

/* Animation CSS pure à l'ouverture */
@keyframes berSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ber-details-content ol {
  margin: 0;
  padding-left: 1.3rem;
}
.ber-details-content ol li {
  margin-bottom: .45rem;
  line-height: 1.5;
}
.ber-details-content code {
  background: #e2e8f0;
  padding: .1rem .3rem;
  border-radius: 3px;
  font-size: .8rem;
}

/* Variante compacte pour le snippet HTML */
.ber-details--sm .ber-summary {
  padding: .5rem .85rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ber-primary);
}

/* ── Horaires ────────────────────────────────────────────── */
.ber-hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .5rem;
  margin-top: .25rem;
}
.ber-hour-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ber-day-label {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  min-width: 96px;
  cursor: pointer;
}
.ber-day-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--ber-primary);
  cursor: pointer;
}
.ber-hour-inputs {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.ber-hour-inputs input[type="time"] {
  padding: .3rem .4rem;
  font-size: .8rem;
  border: 1.5px solid var(--ber-border);
  border-radius: var(--ber-radius-sm);
  background: var(--ber-bg);
  color: var(--ber-text);
  width: auto;
  transition: border-color var(--ber-transition);
}
.ber-hour-inputs input[type="time"]:focus {
  outline: none;
  border-color: var(--ber-primary);
}
.ber-hour-inputs span {
  color: var(--ber-text-muted);
  font-size: .8rem;
}

/* ── Pied de formulaire ──────────────────────────────────── */
.ber-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ber-border);
}
.ber-note {
  font-size: .78rem;
  color: var(--ber-text-muted);
  margin: 0 auto 0 0;
}

/* ── Boutons ─────────────────────────────────────────────── */
.ber-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1.2rem;
  border-radius: var(--ber-radius-sm);
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--ber-font);
  cursor: pointer;
  border: none;
  transition: background var(--ber-transition), color var(--ber-transition),
              box-shadow var(--ber-transition), transform var(--ber-transition);
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/* Micro-interaction CSS — lift au hover */
.ber-btn:hover  { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.ber-btn:active { transform: translateY(0);    box-shadow: none; }

/* Focus visible — accessibilité clavier */
.ber-btn:focus-visible {
  outline: 3px solid var(--ber-primary);
  outline-offset: 2px;
}

.ber-btn-primary {
  background: var(--ber-primary);
  color: #fff;
}
.ber-btn-primary:hover { background: var(--ber-primary-dk); color: #fff; }

.ber-btn-secondary {
  background: #f1f5f9;
  color: var(--ber-text);
  border: 1.5px solid var(--ber-border);
}
.ber-btn-secondary:hover { background: var(--ber-border); }

.ber-btn-outline {
  background: transparent;
  color: var(--ber-primary);
  border: 1.5px solid var(--ber-primary);
}
.ber-btn-outline:hover { background: var(--ber-primary); color: #fff; }

/* État copié — classe ajoutée par JS */
.ber-btn.ber-copied {
  background: var(--ber-success);
  color: #fff;
  border-color: var(--ber-success);
}

/* ── Zone de résultat ────────────────────────────────────── */
.ber-output {
  margin-top: 1.8rem;
  padding-top: 1.8rem;
  border-top: 2px dashed var(--ber-border);
  animation: berFadeIn .3s ease;
}
/* hidden attribute — CSS override pour animation */
.ber-output[hidden] { display: none; }

@keyframes berFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ber-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.ber-output-header h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--ber-text) !important;
  border: none !important;
  padding: 0 !important;
}
.ber-result-card h3 {
  font-size: .95rem !important;
  font-weight: 700 !important;
  margin: 0 0 .8rem !important;
  color: var(--ber-text) !important;
  border: none !important;
  padding: 0 !important;
}

/* Code */
.ber-code-block {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--ber-radius-sm);
  padding: 1.2rem;
  font-size: .8rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  font-family: 'Fira Code', 'Consolas', monospace;
  margin: 0;
  tab-size: 2;
}
.ber-code-small { font-size: .74rem; margin: .5rem 0; }

.ber-output-tip {
  font-size: .8rem;
  color: var(--ber-text-muted);
  background: #eef4fb;
  border-left: 3px solid var(--ber-primary);
  padding: .6rem .9rem;
  border-radius: 0 var(--ber-radius-sm) var(--ber-radius-sm) 0;
  margin-top: .75rem;
  line-height: 1.5;
}

/* ── Grille résultat review ──────────────────────────────── */
.ber-review-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.ber-result-card {
  background: var(--ber-bg-alt);
  border: 1.5px solid var(--ber-border);
  border-radius: var(--ber-radius-sm);
  padding: 1.2rem;
}
.ber-link-box {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.ber-link-box input[type="text"] {
  flex: 1;
  border: 1.5px solid var(--ber-border);
  border-radius: var(--ber-radius-sm);
  padding: .45rem .7rem;
  font-size: .78rem;
  font-family: monospace;
  color: var(--ber-text-muted);
  background: #fff;
  min-width: 0;
}

/* ── QR ──────────────────────────────────────────────────── */
.ber-qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#ber-qr-display { margin: .5rem 0 .8rem; }
#ber-qr-img {
  width: 180px;
  height: 180px;
  border: 3px solid var(--ber-border);
  border-radius: 8px;
  display: block;
  /* Skeleton loader CSS avant chargement */
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
  background-size: 200% 100%;
  animation: berSkeleton 1.4s infinite;
}
#ber-qr-img[src] { animation: none; background: none; }

@keyframes berSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ber-qr-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ber-text);
  margin: .4rem 0 0;
}
.ber-embed-toggle-wrap { margin-top: .8rem; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .ber-tool-body  { padding: 1.2rem; }
  .ber-tool-header{ padding: 1.4rem 1.2rem 1.1rem; }
  .ber-form-row   { flex-direction: column; }
  .ber-hours-grid { grid-template-columns: 1fr; }
  .ber-review-result-grid { grid-template-columns: 1fr; }
  .ber-output-header { flex-direction: column; align-items: flex-start; }
  .ber-form-footer { flex-direction: column; align-items: stretch; }
  .ber-btn        { justify-content: center; }
}

/* ── Accessibilité mouvement réduit ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ber-details-content,
  .ber-output,
  .ber-btn,
  #ber-qr-img {
    animation: none;
    transition: none;
  }
}