/* ============================================================
   Growlee · ressources (/ressources/, /ressources/<guide>/, /tarifs/, /outils/qr-code-avis-google/), DA « Sur le comptoir ».
   Complète growlee-landing-commerce.css et growlee-legal.css, chargées avant : même cadre que les pages
   légales (titre, sommaire, mesure de lecture), plus le fil d'Ariane, la FAQ, l'encart d'essai, les sources,
   les liens « À lire aussi » et la liste du hub.
   Aucune valeur hexadécimale ici : uniquement les jetons var(--gl-*) (vérifié par test_brand_assets).
   ============================================================ */

/* ---------- Fil d'Ariane ---------- */
.gl-guide-crumbs { margin-bottom: 20px; }
.gl-guide-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font: 600 14px/1.4 var(--gl-font); color: var(--gl-grey); }
.gl-guide-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.gl-guide-crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--gl-chalk); }
.gl-guide-crumbs a { color: var(--gl-black); text-decoration: underline 2px var(--gl-rule); text-underline-offset: 4px; }
.gl-guide-crumbs a:hover { text-decoration-color: var(--gl-green); }
.gl-guide-crumbs [aria-current] { overflow-wrap: anywhere; }

.gl-legal-head .gl-guide-actions { margin-top: 28px; }

/* Sommaire des guides : sans points de conduite, le numéro reste séparé du titre et aligné à droite. */
.gl-guide-page .gl-legal-toc li a { justify-content: space-between; gap: 16px; }

/* Les guides n'ont pas de ticket numéroté : le titre seul. */
.gl-guide-page .gl-legal-article h2 { gap: 0; }

/* ---------- FAQ : même accordéon que la landing ---------- */
.gl-guide-faq .gl-faq-list { margin-top: 0; }
.gl-guide-faq .gl-faq-list details p { padding-right: 0; }

/* ---------- Encart d'essai : sans case, comme la fin des pages légales ---------- */
.gl-guide-cta { margin-top: 56px; }
.gl-guide-cta-titre { font: 800 22px/1.2 var(--gl-font); letter-spacing: -.01em; }
.gl-guide-cta p:not(.gl-guide-cta-titre) { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.gl-guide-cta .gl-actions { margin-top: 18px; }

/* Lien « sources préférées » de Google : une ligne de texte, sans badge ni bouton (pas de script tiers). */
.gl-guide-pref { margin-top: 32px; font-size: 15px; line-height: 1.5; color: var(--gl-grey); }
.gl-guide-hub .gl-guide-pref { margin-top: 48px; }

/* ---------- Sources ---------- */
.gl-guide-sources { margin-top: 48px; }
.gl-guide-sources h2, .gl-guide-related h2 { margin-bottom: 12px; font: 800 18px/1.2 var(--gl-font); }
.gl-guide-sources li { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--gl-grey); }

/* ---------- À lire aussi & liste du hub : la carte (.gl-menu, growlee-landing-commerce.css) ---------- */
.gl-guide-related { margin-top: 48px; }
/* Le soulignement des liens de texte (growlee-legal.css) ne s'applique pas à la carte. */
.gl-legal-body .gl-guide-related a { font-weight: inherit; text-decoration: none; }

/* ---------- Hub ---------- */
.gl-guide-hub { padding: 48px 0 var(--section-y); }
.gl-guide-hub-group + .gl-guide-hub-group { margin-top: 56px; }
.gl-guide-hub-group h2 { font: 800 28px/1.15 var(--gl-font); letter-spacing: -.02em; }
.gl-guide-hub-intro { margin-top: 8px; max-width: 38em; font-size: var(--fs-body); color: var(--gl-grey); }
.gl-guide-menu { margin-top: 24px; }

/* ---------- Outil gratuit (QR code avis Google) : formulaire à gauche, aperçu et fichiers à droite ---------- */
.gl-outil { padding: 48px 0 8px; }
.gl-outil-grille {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px;
  align-items: start;
}
.gl-outil-form { grid-column: 1 / 7; }
.gl-outil-form h2 { margin-bottom: 4px; font: 800 26px/1.15 var(--gl-font); letter-spacing: -.02em; }
.gl-outil-actions { margin-top: 4px; }
.gl-outil-note { font-size: 14px; line-height: 1.45; color: var(--gl-grey); }
.gl-outil-resultat { grid-column: 8 / 13; }
.gl-outil-apercu { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0 0 24px; }
.gl-outil-apercu img { display: block; width: 240px; height: 240px; background: var(--gl-white); image-rendering: pixelated; }
.gl-outil-apercu figcaption { font-size: 14px; line-height: 1.45; color: var(--gl-grey); }
.gl-outil-conseil { margin: -8px 0 24px; max-width: 32em; font-size: 15px; line-height: 1.5; }
.gl-outil-attente { padding-top: 40px; }
.gl-outil-attente-titre { margin-bottom: 8px; font: 800 20px/1.25 var(--gl-font); }
.gl-outil-attente p:not(.gl-outil-attente-titre) { font-size: 16px; line-height: 1.5; color: var(--gl-grey); }

@media (max-width: 1023px) {
  .gl-outil-form, .gl-outil-resultat { grid-column: 1 / -1; }
  /* Sur mobile, le QR créé passe au-dessus du formulaire : pas besoin de défiler pour le voir. */
  .gl-outil-grille-resultat .gl-outil-resultat { order: -1; }
  .gl-outil-attente { padding-top: 0; }
}

@media (max-width: 599px) {
  .gl-guide-crumbs { margin-bottom: 14px; }
  .gl-legal-head .gl-guide-actions { margin-top: 20px; }
  .gl-guide-cta { margin-top: 40px; }
  .gl-guide-cta-titre { font-size: 20px; }
  .gl-guide-hub { padding-top: 28px; }
  .gl-guide-hub-group + .gl-guide-hub-group { margin-top: 40px; }
  .gl-guide-hub-group h2 { font-size: 23px; }
  .gl-outil { padding-top: 28px; }
  .gl-outil-form h2 { font-size: 23px; }
}

@media print {
  .gl-guide-actions, .gl-guide-cta, .gl-guide-related, .gl-outil { display: none !important; }
}