/* DESIGN 03/10 (inc/design-0310.php): Romain's decisions of 03/10. Every rule under body.d10-<subject>, each subject
   switched off alone by its option (canape_d10_<subject>_off), the whole sheet by canape_d10_off. Last sheet of the head. */

/* ---------- acc: « Avis canapé et comparatif » of the home cover at 12 px (was 10,24 px on phones, 11,2 px on computers) ---------- */
.d10-acc .une.ha-couverture .une__requete.une__requete { font-size: 12px; letter-spacing: 0.1em; text-wrap: balance; }
.d10-acc .une.ha-couverture form.place > label { font-size: 12px; }

/* ---------- mob: pillar, the reading tools drawn as their final pills before design-pilier.js runs (no shift) ---------- */
.d10-mob.dzp-manuel .pilier__tete .outils-lecture:not(.dzp-pilules) { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0 0.4rem; }
.d10-mob.dzp-manuel .pilier__tete .outils-lecture:not(.dzp-pilules) :is(.resume-ia__liste, .partage__liste) { display: none; }
.d10-mob.dzp-manuel .pilier__tete .outils-lecture:not(.dzp-pilules) :is(.resume-ia__titre, .partage__titre) {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0.5rem 0.95rem; border: 1px solid var(--anthracite); border-radius: 4px;
  background: #fff; font: 600 0.85rem/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--anthracite); }
/* pillar on a computer: the blocks that design-pilier.js rebuilds keep their final place from the first paint
   (the method list beside its rail, the quiz head in its left column) */
@media (min-width: 1001px) {
  .d10-mob.dzp-manuel .pilier__methode > .enveloppe > .pilier__etapes { grid-column: 2; }
  .d10-mob.dzp-manuel .quiz-selection .quiz > :is(.rubrique-simple, .quiz__titre, .quiz__aide) { grid-column: 1; }
}

/* ---------- isp: Inspiration, no text on a photo, the text in a band under the photo, the photo whole ---------- */
/* cover: the outlined « Inspiration » over the photos goes, the masthead sits under the collage */
.d10-isp .im-mast--avant { display: none !important; }
.d10-isp .im-collage { margin-bottom: calc(clamp(4rem, 15.5vw, 13rem) * 0.8 + 4rem); }
.d10-isp .im-collage > .im-mast { inset: calc(100% + 1.4rem) 0 auto 0; z-index: 1; }
@media (max-width: 720px) {
  .d10-isp .im-collage { margin-bottom: calc(4.2rem * 0.8 + 3.4rem); }
  .d10-isp .im-collage > .im-mast { inset: calc(100% + 1rem) 0 auto 0; }
}
/* « À la une »: the rank under the picture, before the name */
.d10-isp .im-podium i { position: static; font-size: 1.6rem; line-height: 1; color: var(--bronze); text-shadow: none; margin-top: 0.3rem; }
@media (max-width: 720px) { .d10-isp .im-podium i { font-size: 1.3rem; } }
/* « Notre parti pris »: the whole picture, the quote in the dark band under it */
.d10-isp .im-bande { height: auto; overflow: visible; }
.d10-isp .im-bande-img { position: static; top: auto; height: auto; transform: none !important; translate: none !important; will-change: auto; }
.d10-isp .im-bande-img picture { display: block; height: auto; }
.d10-isp .im-bande-img img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
.d10-isp .im-citation { position: static; inset: auto; margin-inline: auto; padding: clamp(1.4rem, 4vw, 2.6rem) var(--gutter) clamp(1.8rem, 5vw, 3rem); }
.d10-isp .im-citation :is(blockquote, p) { text-shadow: none; }
/* « Par couleur »: a whole picture per shade, its name and swatch in the band under it (no more cut strips) */
.d10-isp .im-nuancier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1rem; height: auto; min-height: 0; }
.d10-isp .im-nuancier a, .d10-isp .im-nuancier:hover a { display: flex; flex-direction: column; flex: none; height: auto; overflow: visible; background: none; color: var(--anthracite); transition: none; }
.d10-isp .im-nuancier a::after { display: none; }
.d10-isp .im-nuancier picture { position: static; display: block; aspect-ratio: 4 / 5; background: var(--platre-2); border-top: 6px solid var(--c); }
.d10-isp .im-nuancier img { position: static; inset: auto; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.d10-isp .im-nuancier a:not(:has(img))::before { content: ""; display: block; aspect-ratio: 4 / 5; background: var(--c); }
.d10-isp .im-nu-vert { display: none; }
.d10-isp .im-nu-lab, .d10-isp .im-nuancier a:hover .im-nu-lab { position: static; opacity: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding: 0.7rem 0 0; }
.d10-isp .im-nu-lab b { display: flex; align-items: center; gap: 0.5rem; font: 400 1.25rem/1.1 var(--serif); }
.d10-isp .im-nu-lab b::before { content: ""; flex: none; width: 0.85rem; height: 0.85rem; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }
.d10-isp .im-nu-lab span { font-size: 0.8rem; color: var(--feutre); white-space: normal; }
.d10-isp .im-nuancier a:hover .im-nu-lab b, .d10-isp .im-nuancier a:focus-visible .im-nu-lab b { color: var(--bronze); }
@media (max-width: 720px) { .d10-isp .im-nuancier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 0.8rem; } .d10-isp .im-nu-lab b { font-size: 1.1rem; } }
/* article « Le défilé »: the whole photo, number, name and width in a band under it */
.d10-isp .ia-df-ph { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; }
.d10-isp .ia-df-ph > :is(picture, img) { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
.d10-isp .ia-df-ph :is(picture, img) { object-fit: contain; }
.d10-isp .ia-df-ph::after { display: none; }
.d10-isp .ia-df-cap, .d10-isp .ia-df-cote { position: static; inset: auto; z-index: auto; color: var(--anthracite); text-shadow: none; background: var(--platre); }
.d10-isp .ia-df-cap { grid-column: 1; grid-row: 2; align-items: baseline; gap: 0.8rem; padding: 0.8rem 1.4rem 0.9rem; }
.d10-isp .ia-df-cap .ia-df-n { font-size: 2.6rem; line-height: 0.9; color: var(--bronze); }
.d10-isp .ia-df-cap b { font-size: 1.25rem; }
.d10-isp .ia-df-cote { grid-column: 2; grid-row: 2; align-self: stretch; width: 9rem; padding: 0 1.4rem 0 0; }
.d10-isp .ia-df-cote i, .d10-isp .ia-df-cote i::before { background: var(--anthracite); }
@media (max-width: 860px) {
  .d10-isp .ia-df-ph { aspect-ratio: auto; max-height: none; height: auto; }
  .d10-isp .ia-df-ph > :is(picture, img), .d10-isp .ia-df-ph > picture img { aspect-ratio: 2 / 3; max-height: 80svh; width: 100%; }
  .d10-isp .ia-df-cap { padding: 0.7rem 16px 0.8rem; }
  .d10-isp .ia-df-cap .ia-df-n { font-size: 2.2rem; }
  .d10-isp .ia-df-cap b { font-size: 1.1rem; }
  .d10-isp .ia-df-cote { width: 6.5rem; padding-right: 16px; }
}
/* the other article formats (thumbnail numbers, width label, rank label): under their picture, ink */
.d10-isp :is(.ia-gf-planche, .ia-fe-pastilles) span { position: static; display: block; padding-top: 2px; text-align: center; color: var(--anthracite); text-shadow: none; }
.d10-isp .ia-fe-cote { position: static; display: inline-block; margin-top: 0.5rem; padding: 0; background: none; }
.d10-isp .ia-ch-rg { position: static; display: inline-block; padding: 0.5rem 0 0; background: none; }
.d10-isp .ia-ch-ph img { aspect-ratio: 2 / 3; object-fit: contain; }

/* ---------- mq: /test-canape-<marque>/ in the magazine template of the brand review (avis-marque.php classes) ---------- */
.d10-mq .guide-q__tete .ariane { margin: 0.8rem 0 0.4rem; }
.d10-mq .chapeau { max-width: 44rem; }
.d10-mq .chapeau:not(.est-deplie) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.d10-mq .chapeau:not(.est-deplie) p { display: inline; margin: 0; }
.d10-mq .chapeau__suite { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--anthracite); font: 600 0.85rem/1.2 var(--sans);
  text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }
.d10-mq .avis-mag__surtitre { flex-wrap: wrap; row-gap: 0.2rem; }
.d10-mq .d10-mq-maj { color: var(--feutre); letter-spacing: 0.08em; white-space: nowrap; }
.d10-mq .guide-q__tete > :is(.af-bulles, .dk-bulles, nav[class*="af-"]) { margin-top: 1.4rem; }
.d10-mq-podium { margin: 0 0 2.2rem; }
.d10-mq-podium .rubrique { margin-bottom: 0.4rem; }
.d10-mq-sous { margin: 0 0 1.2rem; font: 400 var(--t-sm)/1.45 var(--sans); color: var(--feutre); }

/* ---------- bc: fiches But and Conforama, the 2nd button UNDER the merchant button (Éditorial: 4 px, 44 px and more) ---------- */
.d10-bc .achat__cta:has(.d10-pref) { flex-wrap: wrap; }
.d10-bc :is(.achat__cta, .resume-fiche__action) > .d10-pref { order: 5; flex: 1 1 100%; }
.d10-bc .resume-fiche__action:has(.d10-pref) { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.d10-bc .d10-pref { display: flex; align-items: center; justify-content: flex-start; gap: 0.7rem; width: 100%; max-width: 30rem; min-height: 52px; margin: 0.5rem 0 0;
  padding: 0.35rem 0.9rem 0.35rem 0.6rem; border: 1px solid var(--trait); border-left: 4px solid var(--moutarde); border-radius: 4px; background: #fff; color: var(--anthracite);
  box-shadow: none; text-decoration: none; font: 600 0.92rem/1.15 var(--sans); text-transform: none; letter-spacing: 0.005em; }
.d10-bc .resume-fiche__action > .d10-pref { margin-top: 0; }
.d10-bc .d10-pref:hover { border-color: var(--anthracite); border-left-color: var(--moutarde); background: #fff; color: var(--anthracite); }
.d10-bc .d10-pref__vign { display: inline-flex; flex: none; }
.d10-bc .d10-pref__vign img { width: 40px; height: 30px; object-fit: contain; border-radius: 2px; background: #e6e5e8; box-shadow: 0 0 0 2px #fff; }
.d10-bc .d10-pref__vign img + img { margin-left: -8px; }
.d10-bc .d10-pref .cta__texte { flex: 1 1 auto; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem; min-width: 0; padding: 0; white-space: normal; text-transform: none; color: var(--anthracite); }
.d10-bc .d10-pref .cta__chez { display: inline; font: italic 400 1.05em/1.1 var(--serif); color: var(--bleu); letter-spacing: 0; }
.d10-bc .d10-pref .cta__fleche { flex: none; width: 18px; height: 18px; padding: 0; margin: 0; background: none; color: var(--bleu); }
.d10-bc .d10-equiv-env { margin-top: 1.6rem; }
@media (max-width: 429px) { .d10-bc .d10-pref__vign img:nth-child(3) { display: none; } }

/* ---------- fs: fiche T1 on a computer, the scenes column stays in its track (photos and caption were cut by 72 px) ---------- */
@media (min-width: 901px) {
  .d10-fs .fiche.ft .ft-scenes { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .d10-fs .fiche.ft .ft-scenes .ft-ia { white-space: normal; text-wrap: balance; }
}