/* Correctifs propres aux pages Marque HARRY. */

body.harry-page-brand .harry-brand-analysis-content .harry-brand-analysis-subtitle {
  margin: 1.35rem 0 0.45rem;
  color: var(--harry-text-main, #111827);
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--harry-font-subtitle);
  font-weight: 800;
  line-height: 1.3;
}

body.harry-page-brand .harry-brand-analysis-content .harry-brand-analysis-subtitle:first-child {
  margin-top: 0;
}

body.harry-page-brand .harry-brand-analysis-content .harry-brand-analysis-paragraph {
  margin: 0 0 0.9rem;
  color: var(--harry-text-muted, #4B5563);
  font-size: var(--harry-font-copy);
  line-height: 1.65;
}

/* Les listes HTML de l'analyse reprennent la typographie des paragraphes. */
body.harry-page-brand .harry-brand-analysis-content ul,
body.harry-page-brand .harry-brand-analysis-content ol {
  margin: 0 0 0.9rem;
  padding-left: 1.5rem;
  list-style-position: outside;
}

body.harry-page-brand .harry-brand-analysis-content ul,
body.harry-page-brand .harry-brand-analysis-content ul > li {
  list-style-type: disc;
}

body.harry-page-brand .harry-brand-analysis-content ol,
body.harry-page-brand .harry-brand-analysis-content ol > li {
  list-style-type: decimal;
}

body.harry-page-brand .harry-brand-analysis-content li {
  display: list-item;
  margin: 0;
  color: var(--harry-text-muted, #6D7375);
  font-size: var(--harry-font-copy);
  line-height: 1.7;
}

body.harry-page-brand .harry-brand-analysis-content li + li {
  margin-top: 0.35rem;
}

body.harry-page-brand .harry-brand-analysis-content li::marker {
  color: var(--harry-brand-teal, #0D9488);
  font-size: 0.85em;
  font-weight: 700;
}

body.harry-page-brand .harry-brand-analysis-content strong {
  color: var(--harry-text-main, #2D3032);
  font-weight: 700;
}

/* Analyse repliée sur trois lignes, sur ordinateur comme sur mobile. */
body.harry-page-brand .harry-brand-analysis-content {
  position: relative;
  max-height: 5.1em;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.harry-page-brand .harry-brand-analysis-content::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.7em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body.harry-page-brand .harry-brand-analysis-wrapper.harry-is-expanded .harry-brand-analysis-content {
  max-height: 200rem;
}

body.harry-page-brand .harry-brand-analysis-wrapper.harry-is-expanded .harry-brand-analysis-content::after {
  opacity: 0;
}

body.harry-page-brand .harry-brand-analysis-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  color: var(--harry-brand-teal, #0D9488);
  font-size: var(--harry-font-copy);
  font-weight: 800;
  cursor: pointer;
}

body.harry-page-brand .harry-brand-analysis-toggle-icon {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 0.25s ease;
}

body.harry-page-brand .harry-brand-analysis-wrapper.harry-is-expanded .harry-brand-analysis-toggle-icon {
  transform: rotate(180deg);
}

/* Le modèle WordPress peut sortir ces sections du <main> : on leur rend
   alors le même conteneur que le reste de la page. */
body.harry-page-brand .harry-brand-faq-section {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
  box-sizing: border-box;
}

/* Le bloc de modèle Footer est lui aussi un enfant direct du body sur le
   modèle Marque. Il doit occuper toute la largeur ; son contenu reste limité
   par .harry-footer-container. */
body.harry-page-brand > footer.wp-block-template-part {
  width: 100%;
  max-width: none;
  align-self: stretch;
}

body.harry-page-brand > footer.wp-block-template-part > .harry-site-footer {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  body.harry-page-brand .harry-brand-analysis-content {
    max-height: 5.1em;
  }

  body.harry-page-brand .harry-brand-analysis-wrapper.harry-is-expanded .harry-brand-analysis-content {
    max-height: 200rem;
  }
}

/* Même présentation que harry-page-summary : cadre pointillé et signature HARRY. */
body.harry-page-brand .harry-brand-summary {
  position: relative;
  width: 100%;
  margin: 1.75rem 0 3.25rem !important;
  padding: clamp(1.4rem, 2.8vw, 1.85rem) clamp(1.3rem, 3.2vw, 2rem);
  border: 2px dashed #CDD9DA;
  border-radius: 16px;
  background: var(--harry-white);
}

/* Interruption discrète du pointillé pour accueillir la signature HARRY. */
body.harry-page-brand .harry-brand-summary::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -6px;
  left: 1.35rem;
  width: 52px;
  height: 10px;
  background: var(--harry-white);
}

body.harry-page-brand .harry-brand-summary::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -3px;
  left: 1.6rem;
  width: 11px;
  height: 6px;
  border-radius: 999px;
  background: var(--harry-brand-teal);
  box-shadow: 15px 0 0 var(--harry-accent-yellow), 30px 0 0 var(--harry-score-positive);
}

/* Un Groupe WordPress « contraint » ne doit pas rétrécir le résumé. */
body.harry-page-brand .harry-brand-summary > * {
  width: 100%;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body.harry-page-brand .harry-brand-summary > :first-child,
body.harry-page-brand .harry-brand-summary > :first-child {
  margin-top: 0 !important;
}

body.harry-page-brand .harry-brand-summary > p:first-child,
body.harry-page-brand .harry-brand-summary > p:first-child {
  margin-bottom: 1rem;
  color: var(--harry-text-main);
  font-family: "Space Grotesk", "DM Sans", sans-serif;
  font-size: var(--harry-font-copy);
  font-weight: 700;
  line-height: 1.45;
}

body.harry-page-brand .harry-brand-summary > ul,
body.harry-page-brand .harry-brand-summary > ol,
body.harry-page-brand .harry-brand-summary > ul,
body.harry-page-brand .harry-brand-summary > ol {
  margin: 0;
}


@media (max-width: 868px) {
  body.harry-page-brand .harry-brand-summary {
    margin-bottom: 2.75rem !important;
    padding: 1.25rem 1.1rem;
    border-radius: 14px;
  }
}

body.harry-page-brand .harry-brand-summary p,
body.harry-page-brand .harry-brand-summary .harry-brand-analysis-paragraph {
  margin: 0 0 1rem;
  color: var(--harry-text-main);
  font-size: var(--harry-font-copy);
  line-height: 1.75;
}

body.harry-page-brand .harry-brand-summary > p:first-child,
body.harry-page-brand .harry-brand-summary > p:first-child {
  margin-bottom: 1rem;
  color: var(--harry-text-main);
  font-family: "Space Grotesk", "DM Sans", sans-serif;
  font-size: var(--harry-font-copy);
  font-weight: 700;
  line-height: 1.45;
}

body.harry-page-brand .harry-brand-summary strong {
  color: var(--harry-text-main);
  font-weight: 700;
}
