/* Chantier 1409 : page « La marque HelloServ ». Chargée après signal.css + accueil.css + landing.css.
   Cases à angles droits et filets fins comme le reste de la DA ; le rouge ne sert qu'au voyant et aux interdits. */

.sg-mq-hero .sg-hero-grille { padding-bottom: clamp(72px, 10vh, 120px); }
.sg-mq-hero h1 { grid-column: 1 / 8; --h1-n: 7; } /* --h1-n : colonne du H1, n°1507 (accueil.css) */
/* Le logo lui-même en visuel du hero, à droite, centré sur le bloc de texte */
.sg-mq-hero-logo { grid-column: 9 / 13; grid-row: 1 / span 3; align-self: center; }
.sg-mq-hero-logo img { display: block; width: 100%; height: auto; }
.sg-mq-ancre { font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-3); }
.sg-mq-ancre:hover { color: var(--ink); }

.sg-section.sg-mq { padding: var(--esp-section) 0; }
.sg-mq .sg-sec-tete { margin-bottom: var(--esp-m); }

/* Grilles de cases */
.sg-mq-grille { display: grid; gap: 16px; }
.sg-mq-grille.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-mq-grille.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-mq-grille.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sg-mq-suite { margin-top: 16px; }

.sg-mq-case { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line-2); background: var(--bg-2); }
/* Dans une grille, chaque case occupe deux rangées partagées : aperçus et légendes s'alignent d'une case à l'autre */
.sg-mq-grille > .sg-mq-case { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.sg-mq-vue { flex: 1; display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 200px; padding: 36px; color: var(--ink); }
.sg-mq-vue.sombre { background: var(--bg); }
.sg-mq-vue.clair { background: #fff; color: var(--bg); }
.sg-mq-vue.grand { min-height: 300px; }
.sg-mq-vue img { display: block; max-width: 100%; height: auto; }
.sg-mq-vue.bandeau { padding: 28px; }
.sg-mq-vue.bandeau img { outline: 1px solid var(--line-2); }
.sg-mq-case figcaption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; padding: 12px 16px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-3); }
.sg-mq-case figcaption b { color: var(--ink); font-weight: 600; }
.sg-mq-case figcaption a { color: var(--ink-2); text-decoration: none; }
.sg-mq-case figcaption a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Couleurs : une pastille par couleur, valeurs en mono */
.sg-mq-couleurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* 1569 : 4 couleurs, un seul rouge */ gap: 16px; margin: 0; padding: 0; list-style: none; }
.sg-mq-couleurs li { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line-2); background: var(--bg-2); padding: 0 0 14px; font-size: 13px; }
.sg-mq-couleurs .pastille { height: 112px; margin-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.sg-mq-couleurs b, .sg-mq-couleurs code { padding: 0 16px; }
.sg-mq-couleurs b { color: var(--ink); font-weight: 600; }
.sg-mq-couleurs code { font: 12px/1.5 var(--f-mono); color: var(--ink-2); }
.sg-mq-note { margin-top: 20px; max-width: 72ch; font-size: 14px; color: var(--ink-3); }
.sg-mq-note a { color: var(--ink-2); }

/* Typographie */
.sg-mq-vue.typo { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 14px; min-height: 240px; }
.sg-mq-vue.typo .ech { font-size: clamp(44px, 5vw, 64px); line-height: 1; }
.sg-mq-vue.typo .ech.titre { font-family: var(--f-display); font-weight: 800; font-stretch: 125%; letter-spacing: -.01em; }
.sg-mq-vue.typo .ech.texte { font-family: var(--f-text); font-weight: 400; }
.sg-mq-vue.typo .usage { font-size: 13px; color: var(--ink-3); }

/* Zone de protection : pointillé = limite à respecter, carré = un voyant (logo à 380 px : voyant de 14,7 px) */
.sg-mq-zone { position: relative; display: inline-block; padding: var(--z); outline: 1px dashed rgba(226, 18, 57, .6); }
.sg-mq-zone.logo { --z: 29.4px; }
.sg-mq-zone.symbole { --z: 25px; }
.sg-mq-zone > img, .sg-mq-zone > svg { display: block; }
.sg-mq-zone::before { content: ""; position: absolute; inset: var(--z); outline: 1px solid var(--line-2); }
.sg-mq-zone .cote { position: absolute; left: 0; top: 0; width: var(--z); height: var(--z); background: rgba(226, 18, 57, .16); border: 1px solid rgba(226, 18, 57, .6); }

/* Tailles réelles */
.sg-mq-vue.tailles { justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; gap: 40px; min-height: 0; }
.sg-mq-vue.tailles span { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sg-mq-vue.tailles small { font-size: 12px; color: var(--ink-3); }
.sg-mq-suite figcaption span { color: var(--ink-3); }

/* Interdits : la croix rouge est le seul accent */
.sg-mq-interdits .sg-mq-vue { min-height: 150px; padding: 24px; overflow: hidden; }
.sg-mq-interdits figcaption b::before { content: "\2715"; margin-right: 8px; color: var(--rose); }
.sg-mq-vue.charge { background: repeating-linear-gradient(45deg, #2a6df4 0 14px, #f4c22a 14px 28px); }
.sg-mq-deplace { position: relative; display: block; }
.sg-mq-deplace i { position: absolute; left: 98px; top: -9px; width: 7px; height: 7px; background: var(--rose); }

/* Le nom et la mention de marque */
.sg-mq-nom { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); }
.sg-mq-nom h2 { grid-column: 1 / 6; font: 760 var(--h2)/1.05 var(--f-display); font-stretch: 112%; letter-spacing: -.03em; }
.sg-mq-nom > div { grid-column: 7 / 13; }
.sg-mq-nom p { margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.sg-mq-nom .sg-btn { margin-top: 8px; }

/* Fichiers */
.sg-mq-fichiers { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.sg-mq-fichiers li { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; color: var(--ink-2); }
.sg-mq-fichiers code { font: 13px/1.6 var(--f-mono); color: var(--ink); }
.sg-mq-fin { margin-top: 40px; }

@media (max-width: 1100px) {
  .sg-mq-grille.g3, .sg-mq-grille.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-mq-couleurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-mq-hero-logo { display: none; } /* le logo est dans l'en-tête et dès la section suivante */
  .sg-mq-hero h1 { grid-column: 1 / -1; --h1-n: 12; }
  .sg-mq-nom h2, .sg-mq-nom > div { grid-column: 1 / -1; }
  .sg-mq-nom h2 { margin-bottom: 24px; }
}
@media (max-width: 720px) {
  .sg-mq-grille.g2, .sg-mq-grille.g3 { grid-template-columns: 1fr; }
  .sg-mq-couleurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-mq-vue, .sg-mq-vue.grand { min-height: 180px; padding: 24px; }
  .sg-mq-zone.logo { --z: 4.65vw; }
  .sg-mq-zone.logo > img { width: 60vw; }
  .sg-mq-interdits .sg-mq-vue img { max-width: 100%; }
  .sg-mq-vue.tailles { gap: 24px; }
  .sg-mq-fichiers li { grid-template-columns: 1fr; gap: 2px; }
}