/* ============================================================
   Section 07 — comment · Figma node 5374:25278 (1168×735 @ y=5761)
   Desktop 1440 : eyebrow centré → titre 54 centré (2 lignes) →
   colonne texte gauche + schéma (fond pointillé + carte dégradée)
   → pill de conclusion chevauchant le bas du fond pointillé.
   ============================================================ */

.comment {
  font-family: var(--font-sans);
  padding-inline: clamp(20px, 8.33vw, 120px);
  /* la pill de conclusion remonte de 68px dans le fond pointillé :
     ce padding restitue la hauteur totale du node (735px) */
  padding-bottom: 34px;
  color: var(--color-ink);
}

.comment__container {
  max-width: 1168px; /* = var(--container-content), largeur mesurée du node */
  margin-inline: auto;
}

/* ---- En-tête (centré) ---------------------------------------- */

.comment__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Eyebrow : pilule blanche + pilule dégradée interne + texte dégradé
   (même pattern que .pourquoi__eyebrow / .interieur__eyebrow) */
.comment__eyebrow {
  margin: 0;
  display: inline-flex;
  padding: 3px;
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  border-radius: 70px; /* hors tokens: mesuré Figma (token pill = 80px) */
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
}

.comment__eyebrow-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 70px; /* hors tokens: mesuré Figma */
  /* hors tokens: mesuré Figma (dégradé pêche → lilas) */
  background: linear-gradient(90deg, #fff1ed 0%, #f0efff 100%);
}

.comment__eyebrow-text {
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  font-weight: var(--text-eyebrow--font-weight);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(90deg, var(--color-accent-coral) 0%, var(--color-primary-vivid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.comment__title {
  margin: 19px 0 0;
  max-width: 1135px;
  font-size: clamp(32px, 4.5vw, var(--text-h2));
  line-height: 1.04; /* 56px @ 54px */
  font-weight: var(--text-h2--font-weight);
  letter-spacing: var(--text-h2--letter-spacing);
  color: #2d2d2d; /* hors tokens: mesuré Figma */
}

/* ---- Rangée texte + schéma ----------------------------------- */

.comment__grid {
  display: flex;
  align-items: flex-start;
  margin-top: 59px;
}

.comment__text {
  flex: 1 1 auto;
  min-width: 260px;
  padding: 137px 27px 0 16px; /* mesuré Figma : titre à y+137, texte à x=152 (container +16) */
}

.comment__subtitle {
  margin: 0;
  max-width: 396px;
  font-size: var(--text-h5);
  line-height: var(--text-h5--line-height);
  font-weight: var(--text-h5--font-weight);
  letter-spacing: var(--text-h5--letter-spacing);
  color: var(--color-ink);
}

.comment__desc {
  margin: 40px 0 0; /* 16px + ligne vide de 24px dans la maquette */
  max-width: 361px;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body--font-weight);
  color: rgb(38 41 46 / 0.7); /* --color-ink @70% (opacité 70% mesurée) */
}

/* ---- Schéma : fond pointillé + carte exportée + ligne verticale */

.comment__diagram {
  position: relative;
  flex: 0 1 745px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background-image: url("../assets/comment/motif-points.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 119px 119px; /* tuile mesurée Figma */
}

/* Carte du schéma (dégradé + texture + diagramme fusionnés dans
   l'export — voir manifest). Marges en % de la largeur (745px) pour
   rester fluide : 10px haut / 51px gauche / 93px bas à 1440. */
.comment__diagram-img {
  display: block;
  width: 81.74%;   /* 609/745 */
  height: auto;
  margin: 1.34% 0 12.48% 6.85%; /* 10px / 93px / 51px @ 745px */
  border-radius: var(--radius-md);
}

/* Ligne verticale pointillée au bord gauche du fond pointillé
   (asset horizontal 511×2 pivoté de 90°) */
.comment__divider {
  position: absolute;
  left: 3px;
  top: 0;
  width: 511px;
  height: 2px;
  transform-origin: 0 0;
  transform: rotate(90deg);
  pointer-events: none;
}

/* ---- Pill de conclusion (centrée, chevauche le fond pointillé) */

.comment__note {
  position: relative;
  z-index: 1;
  margin: -68px 0 0; /* remonte dans la zone pointillée (mesuré Figma) */
  display: flex;
  justify-content: center;
}

.comment__note-pill {
  position: relative;
  left: 10px; /* décalage mesuré Figma (pill centrée à +10.5px du centre) */
  display: inline-flex;
  padding: 6px 11px;
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  border-radius: 70px; /* hors tokens: mesuré Figma */
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: var(--text-body-sm--font-weight);
  color: rgb(38 41 46 / 0.7); /* --color-ink @70% */
}

.comment__note-pill strong {
  font-weight: 500;
}

/* ---- Responsive (adaptation proposée, maquette desktop-only) -- */

@media (max-width: 1024px) {
  .comment__grid {
    flex-direction: column;
    gap: 40px;
    margin-top: 48px;
  }

  .comment__text {
    padding: 0;
  }

  .comment__diagram {
    flex: none;
    width: 100%;
    max-width: 745px;
  }

  .comment__divider {
    display: none;
  }

  .comment__note {
    margin-top: 32px;
  }

  .comment__note-pill {
    left: 0;
  }
}

@media (max-width: 768px) {
  .comment__note-pill {
    border-radius: var(--radius-xl);
  }
}