/* DESIGN MAGAZINE, part 3: Le Mag' « Le sommaire » (9A, validated 02/10 00 h 40). Home of the Mag' and its section
   pages (inc/design-mag-sommaire.php). Typographic magazine: big title, index of the sections, a front page with
   ruled columns, each section as a numbered chapter. Tokens = main.css, same typography as design-article.css.
   Prefix: dzs-. The blocks of mag-plus (tool, « Par où commencer », silo, FAQ) keep their markup and are only
   re-laid here, under .dzs. On a phone: chapters and tools become rails swiped with the thumb. */

.dzs { --dzs-col: 78rem; --dzs-ease: cubic-bezier(0.2, 0.7, 0.1, 1); padding-bottom: clamp(2rem, 5vw, 4rem); }
.dzs-enveloppe { max-width: var(--dzs-col); margin-inline: auto; padding-inline: var(--gutter); }
.dzs .ariane { margin: 1.2rem 0 0; }
.dzs-surtitre { margin: 0; font: 600 0.74rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.dzs-h2 { margin: 0 0 1.4rem; font: 400 clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem)/1.02 var(--serif); letter-spacing: -0.02em; color: var(--anthracite); }
.dzs-lien { width: fit-content; color: var(--anthracite); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--moutarde); padding-bottom: 1px; }
.dzs-lien:hover { color: var(--bleu); }
.dzs a { text-underline-offset: 0.18em; }

/* ---------- Title ---------- */
.dzs-tete { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
.dzs-tete--mag { text-align: center; }
.dzs-tete__sur { margin: 0; display: flex; justify-content: space-between; gap: 1rem; border-block: 1px solid var(--anthracite); padding: 0.55rem 0; font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--bleu); }
.dzs-tete__h1 { margin: 0; color: var(--anthracite); }
.dzs-tete__grand { display: block; font: 400 clamp(4.4rem, 2rem + 11vw, 12.5rem)/0.86 var(--serif); letter-spacing: -0.055em; margin: 0.22em 0 0.08em; }
.dzs-tete__grand em { font-weight: 300; }
.dzs-tete__sous { display: block; font: 500 1rem/1.3 var(--sans); letter-spacing: 0.02em; color: var(--feutre); }
.dzs-tete__chapeau { margin: 1.2rem auto 0; max-width: 44rem; font: 400 clamp(1.1rem, 1rem + 0.4vw, 1.36rem)/1.55 var(--serif); color: var(--anthracite); }
.dzs-tete--rub { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem 4rem; align-items: end; }
.dzs-tete__h1--rub { margin-top: 0.6rem; font: 400 clamp(3rem, 1.6rem + 6vw, 7.6rem)/0.9 var(--serif); letter-spacing: -0.045em; text-wrap: balance; }
.dzs-tete__cnt { margin: 0; text-align: right; font: 300 clamp(3rem, 2rem + 4vw, 5rem)/1 var(--serif); color: var(--bleu); }
.dzs-tete__cnt small { display: block; font: 600 0.72rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); font-style: normal; }
.dzs-tete--rub .dzs-tete__chapeau { grid-column: 1 / -1; margin: 0; max-width: 48rem; }

/* ---------- Index of the sections ---------- */
.dzs-index { position: relative; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 2rem; border-top: 2px solid var(--anthracite); border-bottom: 1px solid var(--trait); padding-block: 0.6rem; scroll-padding-inline: var(--gutter); }
.dzs-index a, .dzs-index__lib { padding: 0.35rem 1rem; border-right: 1px solid var(--trait); white-space: nowrap; }
.dzs-index a { position: relative; text-decoration: none; font: 500 0.95rem/1.3 var(--sans); color: var(--anthracite); }
.dzs-index a:hover, .dzs-index a[aria-current] { color: var(--bleu); }
.dzs-index a[aria-current] { text-decoration: underline 2px var(--moutarde); text-underline-offset: 0.35em; }
.dzs-index sup { font-size: 0.68rem; color: var(--bleu); margin-left: 0.15rem; }
.dzs-index__lib { font: 600 0.66rem/2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); }
.dzs-index .dzs-index__inspi { border-right: 0; color: var(--bleu); font-weight: 600; }

/* ---------- Front page (À la une, the 3 first articles of a section) ---------- */
.dzs-une { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-top: 2.6rem; border-bottom: 1px solid var(--trait); }
.dzs-une__lead { padding: 0 2.4rem 2rem 0; border-right: 1px solid var(--trait); }
.dzs-une__cote { padding-left: 2.4rem; display: grid; gap: 1.6rem; align-content: start; padding-bottom: 2rem; }
.dzs-une__cote .dzs-sujet + .dzs-sujet { border-top: 1px solid var(--trait); padding-top: 1.6rem; }
.dzs-sujet { min-width: 0; }
.dzs-sujet__photo { display: block; overflow: hidden; border-radius: 4px; background: var(--platre); }
.dzs-sujet__photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.7s var(--dzs-ease); }
.dzs-sujet__photo:hover img { transform: scale(1.03); }
.dzs-sujet__rub { display: block; margin: 1rem 0 0.4rem; font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.dzs-sujet__titre { margin: 0; font: 400 1.45rem/1.15 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.dzs-sujet__titre a { color: var(--anthracite); text-decoration: none; }
.dzs-sujet__titre a:hover { color: var(--bleu); }
.dzs-sujet--lead .dzs-sujet__titre { font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.4rem); line-height: 1.02; letter-spacing: -0.025em; }
.dzs-sujet__ext { margin: 0.7rem 0 0; font: 400 1.04rem/1.55 var(--serif); color: #3d4045; }
.dzs-sujet__meta { display: block; margin-top: 0.6rem; font: 400 0.78rem/1.3 var(--sans); color: var(--feutre); }

/* ---------- Tools band ---------- */
.dzs-outils { background: var(--anthracite); color: var(--blanc); padding-block: clamp(2.4rem, 5vw, 4.2rem); margin-top: clamp(2.4rem, 5vw, 4rem); }
.dzs-outils__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 1.8rem; }
.dzs-outils h2 { margin: 0; font: 400 clamp(1.9rem, 1.2rem + 2vw, 3rem)/1 var(--serif); color: var(--blanc); }
.dzs-outils__tete p { margin: 0; max-width: 26rem; color: #c9c7c0; }
.dzs-outils ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #4a4d52; }
.dzs-outils li { border-bottom: 1px solid #4a4d52; }
.dzs-outils li:not(:nth-child(4n + 1)) { border-left: 1px solid #4a4d52; }
.dzs-outils a { display: grid; gap: 0.45rem; height: 100%; padding: 1.2rem 1.1rem 1.3rem; text-decoration: none; color: var(--blanc); transition: background 0.3s; }
.dzs-outils a:hover { background: #2f3236; }
.dzs-outils small { font: 600 0.66rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--moutarde); }
.dzs-outils b { font: italic 300 1.45rem/1.15 var(--serif); }
.dzs-outils span { font-size: 0.86rem; color: #c9c7c0; }

/* ---------- Chapters ---------- */
.dzs-chapitres { padding-block: clamp(2.4rem, 5vw, 4.4rem) 0; }
.dzs-chap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.4rem 3rem; border-top: 2px solid var(--anthracite); padding-block: 1.5rem 2rem; }
.dzs-chap__n { font: italic 300 3.2rem/1 var(--serif); color: var(--bleu); }
.dzs-chap__nom { margin: 0.3rem 0 0.6rem; font: 400 clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)/1.05 var(--serif); }
.dzs-chap__nom a { color: var(--anthracite); text-decoration: none; }
.dzs-chap__nom a:hover { color: var(--bleu); }
.dzs-chap__phrase { margin: 0; font: 400 1.02rem/1.5 var(--serif); color: #3d4045; }
.dzs-chap__arts { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; scroll-padding-inline: var(--gutter); }
.dzs-chap__arts a { display: grid; gap: 0.6rem; text-decoration: none; color: var(--anthracite); }
.dzs-chap__img { display: block; overflow: hidden; border-radius: 4px; background: var(--platre); }
.dzs-chap__img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.7s var(--dzs-ease); }
.dzs-chap__arts a:hover img { transform: scale(1.03); }
.dzs-chap__arts a:hover .dzs-chap__t { color: var(--bleu); }
.dzs-chap__t { font: 500 1.02rem/1.3 var(--serif); }
.dzs-chap__arts li:first-child .dzs-chap__t { font-size: 1.16rem; }
.dzs-groupe { margin: 2.4rem 0 0.8rem; font: 600 0.74rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--feutre); }
.dzs-inspi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); background: var(--platre); text-decoration: none; color: var(--anthracite); margin: 1rem 0; border-radius: 4px; overflow: hidden; }
.dzs-inspi__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.dzs-inspi__texte { padding: clamp(1.5rem, 4vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.dzs-inspi__titre { font: italic 300 clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem)/1.04 var(--serif); }

/* ---------- Section page: the tool and « Par où commencer » of mag-plus, re-laid ---------- */
.dzs-milieu { margin-top: clamp(2rem, 4vw, 3rem); }
.dzs-milieu .magx-outil { border: 2px solid var(--anthracite); border-radius: 0; }
.dzs-milieu .magx-titre, .dzs-bas .magx-titre { font: 400 clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem)/1.05 var(--serif); letter-spacing: -0.015em; }
.dzs-milieu .magx-debut__liste { border-top: 2px solid var(--anthracite); padding-top: 1.2rem; }
.dzs-milieu .magx-debut__n { font: 300 clamp(4rem, 3rem + 4vw, 7rem)/0.8 var(--serif); color: var(--moutarde); background: none; width: auto; height: auto; }
.dzs-milieu .magx-debut__titre { font: 400 1.35rem/1.15 var(--serif); }

/* Rows */
.dzs-liste { margin-top: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--anthracite); padding-top: 1.2rem; }
.dzs-liste .dzs-sujet { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto auto 1fr; column-gap: 2rem; padding-block: 1.5rem; border-bottom: 1px solid var(--trait); align-items: start; }
.dzs-liste .dzs-sujet__photo { grid-row: 1 / 5; }
.dzs-liste .dzs-sujet__photo img { aspect-ratio: 16 / 10; }
.dzs-liste .dzs-sujet__rub { margin-top: 0.2rem; }
.dzs-liste .dzs-sujet__titre { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem); }
.dzs-pagination { margin-top: 2rem; }

/* ---------- Bottom: silo, FAQ, about ---------- */
.dzs-bas { margin-top: clamp(2.4rem, 5vw, 4rem); display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); }
.dzs-bas .famille { margin: 0; padding: 0; background: none; }
.dzs-bas .famille__corps { padding: 0; max-width: none; border-top: 2px solid var(--anthracite); padding-top: 1.2rem; }
.dzs-bas .rubrique-simple { font: 400 clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem)/1.05 var(--serif); }
.dzs-bas .magx-faq { margin: 0; }
.dzs-bas .magx-faq__q { font: 400 1.22rem/1.3 var(--serif); letter-spacing: 0; }
.dzs-apropos__texte { columns: 2 22rem; column-gap: 3rem; border-top: 2px solid var(--anthracite); padding-top: 1.3rem; font: 400 1.06rem/1.65 var(--serif); }
.dzs-apropos__texte > p, .dzs-apropos__texte .texte-long p { break-inside: avoid-column; margin: 0 0 1rem; }
.dzs-apropos__texte .texte-long { max-width: none !important; margin: 0 !important; }
.dzs-apropos__texte > p:first-child::first-letter { float: left; font: 400 4.2rem/0.8 var(--serif); margin: 0.4rem 0.55rem 0 0; color: var(--bleu); }
.dzs-apropos__sign { font: 400 var(--t-sm)/1.4 var(--sans); color: var(--feutre); }

@media (max-width: 1000px) {
  .dzs-outils ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dzs-outils li:nth-child(n) { border-left: 0; }
  .dzs-outils li:nth-child(2n) { border-left: 1px solid #4a4d52; }
}

/* ---------- Phone: designed for the thumb ---------- */
@media (max-width: 720px) {
  .dzs-tete--mag { text-align: left; }
  .dzs-tete__sur { font-size: 0.6rem; letter-spacing: 0.16em; }
  .dzs-tete__grand { font-size: clamp(4rem, 22vw, 6.2rem); }
  .dzs-tete__chapeau { margin-inline: 0; font-size: 1.1rem; }
  .dzs-tete--rub { grid-template-columns: minmax(0, 1fr); }
  .dzs-tete__cnt { text-align: left; }
  .dzs-tete__h1--rub { font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .dzs-index { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .dzs-index::-webkit-scrollbar { display: none; }
  .dzs-une { grid-template-columns: minmax(0, 1fr); margin-top: 1.6rem; }
  .dzs-une__lead { padding: 0 0 1.6rem; border-right: 0; border-bottom: 1px solid var(--trait); }
  .dzs-une__lead .dzs-sujet__photo { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .dzs-une__lead .dzs-sujet__photo img { aspect-ratio: 4 / 3; }
  .dzs-une__cote { padding: 1.4rem 0 1.4rem; }
  .dzs-une__cote .dzs-sujet, .dzs-liste .dzs-sujet { display: grid; grid-template-columns: 7rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1rem; align-items: start; }
  .dzs-une__cote .dzs-sujet__photo, .dzs-liste .dzs-sujet__photo { grid-row: 1 / 4; }
  .dzs-une__cote .dzs-sujet__photo img, .dzs-liste .dzs-sujet__photo img { aspect-ratio: 1; }
  .dzs-une__cote .dzs-sujet__rub, .dzs-liste .dzs-sujet__rub { margin-top: 0; }
  .dzs-une__cote .dzs-sujet__titre, .dzs-liste .dzs-sujet__titre { font-size: 1.12rem; }
  .dzs-une__cote .dzs-sujet__ext, .dzs-liste .dzs-sujet__ext { display: none; }
  .dzs-liste .dzs-sujet { padding-block: 1.1rem; }
  .dzs-outils ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.7rem; border-top: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .dzs-outils li, .dzs-outils li:nth-child(n) { flex: 0 0 72%; scroll-snap-align: start; border: 1px solid #4a4d52; border-radius: 6px; }
  .dzs-chap { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .dzs-chap__tete { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; align-items: baseline; }
  .dzs-chap__n { grid-row: 1 / 3; font-size: 2.5rem; }
  .dzs-chap__arts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.9rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .dzs-chap__arts li { flex: 0 0 74%; scroll-snap-align: start; }
  .dzs-chap__arts::-webkit-scrollbar, .dzs-outils ul::-webkit-scrollbar { display: none; }
  .dzs-inspi { grid-template-columns: minmax(0, 1fr); }
  .dzs-inspi__photo img { aspect-ratio: 16 / 11; }
  .dzs-milieu .magx-outil { margin-inline: calc(var(--gutter) * -1); border-inline: 0; }
  .dzs-apropos__texte { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dzs-sujet__photo img, .dzs-chap__img img, .dzs-outils a { transition: none; }
}