/* PAGE PILIER « Quel canapé choisir ? » (page-quel-canape-choisir.php) and the home « Voir tous nos guides »
   card (front-page.php), 30/09. Loaded after main.css on those two pages only. */

/* ---------- Head ---------- */
.pilier__signature { margin: 0.4rem 0 0; font: 500 var(--t-sm)/1.4 var(--sans); color: var(--feutre); }
.pilier__signature a { color: var(--anthracite); }
.pilier__chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0; margin: 0.4rem 0 1.4rem; border-top: 2px solid var(--anthracite); }
.pilier__chiffres > div { display: flex; flex-direction: column-reverse; gap: 0.2rem; padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--trait); }
.pilier__chiffres > div + div { padding-left: 1rem; border-left: 1px solid var(--trait); }
.pilier__chiffres dt { font: 500 var(--t-xs)/1.3 var(--sans); color: var(--feutre); }
.pilier__chiffres dd { margin: 0; font: 600 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1 var(--sans); letter-spacing: -0.02em; color: var(--anthracite); }
.pilier__sommaire a .num { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--moutarde-voile); color: var(--bleu-2); }
.pilier__intro { margin: -0.6rem 0 1.4rem; max-width: 46rem; font: 400 var(--t-md)/1.6 var(--serif); color: var(--feutre); }

/* ---------- The method: one card per step ---------- */
.pilier__etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.2rem); counter-reset: none; }
.pilier-etape { display: flex; flex-direction: column; min-width: 0; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; scroll-margin-top: 90px; }
.pilier-etape__photo { display: block; aspect-ratio: 16 / 8; overflow: hidden; background: var(--platre-2); }
.pilier-etape__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.1, 1); }
.pilier-etape:hover .pilier-etape__photo img { transform: scale(1.03); }
.pilier-etape__corps { display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.1rem, 2.4vw, 1.6rem); flex: 1; }
.pilier-etape--texte { border-top: 3px solid var(--moutarde); }
.pilier-etape__surtitre { margin: 0; display: flex; align-items: center; gap: 0.6rem; font: 650 var(--t-xs)/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bleu); }
.pilier-etape__num { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; border-radius: 999px; background: var(--moutarde); color: var(--anthracite); font: italic 500 var(--t-md)/1 var(--serif); letter-spacing: 0; text-transform: none; }
.pilier-etape__titre { margin: 0.1rem 0 0; font: 650 clamp(1.2rem, 1rem + 0.6vw, 1.45rem)/1.2 var(--sans); letter-spacing: -0.015em; text-wrap: balance; }
.pilier-etape__texte { margin: 0; font: 400 var(--t-md)/1.6 var(--serif); color: var(--feutre); }
.pilier-etape__label { margin: 0.5rem 0 0; font: 650 var(--t-xs)/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--anthracite); }
.pilier-etape__apprendre { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.pilier-etape__apprendre li { position: relative; padding-left: 1.3rem; font: 400 var(--t-sm)/1.45 var(--sans); }
.pilier-etape__apprendre li::before { content: ""; position: absolute; left: 0.1rem; top: 0.5em; width: 0.55rem; height: 0.3rem; border-left: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transform: rotate(-45deg); }
.pilier-etape__phares { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pilier-etape__phares a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--platre); color: var(--anthracite); text-decoration: none; font: 600 var(--t-xs)/1.2 var(--sans); }
.pilier-etape__phares a:hover { border-color: var(--anthracite); }
.pilier-etape__phares .num { color: var(--bleu); }
.pilier-etape__lien { margin-top: auto; padding-top: 0.7rem; }
.pilier-etape__compte { font: 500 var(--t-xs)/1.3 var(--sans); color: var(--feutre); }

/* ---------- Best sofa for each need ---------- */
.pilier__meilleurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2rem); }
.pilier-meilleur { position: relative; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.pilier-meilleur__photo { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; background: var(--blanc); margin-bottom: 0.3rem; }
.pilier-meilleur__photo img { width: 100%; height: 100%; object-fit: cover; }
.pilier-meilleur__besoin { margin: 0; font: 650 var(--t-xs)/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bleu); }
.pilier-meilleur__nom { margin: 0; font: 650 var(--t-lg)/1.25 var(--sans); letter-spacing: -0.01em; }
.pilier-meilleur__nom a { color: var(--anthracite); text-decoration: none; }
.pilier-meilleur__nom a:hover { color: var(--bleu); }
.pilier-meilleur__ligne { margin: 0; display: flex; align-items: center; gap: 0.5rem; font: 500 var(--t-sm)/1.3 var(--sans); color: var(--feutre); }

/* ---------- Brands and comparisons ---------- */
.pilier__duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.pilier__duo h2 { margin: 0.6rem 0 1rem; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.08; }
.pilier__duo .pilier__intro { margin: 0 0 1.2rem; }
.pilier__marques { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--anthracite); }
.pilier__marques li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--trait); font: 600 var(--t-sm)/1.3 var(--sans); }
.pilier__marques li:nth-child(odd) { padding-right: 1.2rem; }
.pilier__marques li:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--trait); }
.pilier__marques a { color: var(--anthracite); }
.pilier__marques .num { color: var(--bleu); font-weight: 500; }
.pilier__comparatifs { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 0 1.4rem; background: var(--anthracite); color: var(--platre); border-radius: 18px; overflow: hidden; text-decoration: none; }
.pilier__comparatifs > :not(.pilier__comparatifs-photo) { margin: 0 1.4rem; }
.pilier__comparatifs-photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 0.6rem; }
.pilier__comparatifs-photo img { width: 100%; height: 100%; object-fit: cover; }
.pilier__comparatifs .une-guides__surtitre { color: var(--moutarde); }
.pilier__comparatifs strong { font: 650 var(--t-xl)/1.15 var(--sans); letter-spacing: -0.02em; color: var(--blanc); }
.pilier__comparatifs > span:not([class]) { font: 400 var(--t-md)/1.55 var(--serif); color: #c9c7c1; }
.pilier__comparatifs .lien-fleche { color: var(--blanc); }
.pilier__comparatifs:hover .lien-fleche { color: var(--moutarde); }

@media (max-width: 1000px) {
  .pilier__meilleurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilier__duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pilier__etapes { grid-template-columns: minmax(0, 1fr); }
  .pilier__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilier__chiffres > div + div { padding-left: 0; border-left: 0; }
  .pilier__chiffres > div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--trait); }
}
@media (max-width: 600px) {
  .pilier__meilleurs { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .pilier-meilleur { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.25rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--trait); }
  .pilier-meilleur__photo { grid-row: 1 / span 4; margin: 0; }
  .pilier__marques { grid-template-columns: minmax(0, 1fr); }
  .pilier__marques li:nth-child(n) { padding-left: 0; padding-right: 0; border-left: 0; }
}

/* ---------- Home: the 5 other guides in one card, link to the pillar page (front-page.php) ---------- */
.une-guide--plus { padding: clamp(1rem, 2vw, 1.3rem); background: var(--anthracite); color: var(--platre); border-radius: var(--r-img); gap: 0.7rem; }
.une-guide--plus .une-guide__surtitre { color: var(--moutarde); }
.une-guide--plus .une-guide__titre { color: var(--blanc); font-size: var(--t-lg); line-height: 1.2; }
.une-plus__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.une-plus__liste a { position: relative; z-index: 1; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; gap: 0.6rem; color: var(--platre); text-decoration: none; font: 600 var(--t-sm)/1.25 var(--sans); }
.une-plus__liste a:hover { color: var(--moutarde); }
.une-plus__liste img, .une-plus__vide { width: 2.6rem; height: 2rem; object-fit: cover; border-radius: 5px; background: var(--foret); }
.une-plus__tout { position: relative; z-index: 1; margin-top: auto; padding-top: 0.6rem; border-top: 1px solid rgba(250, 250, 248, 0.18); color: var(--blanc); font: 650 var(--t-sm)/1.3 var(--sans); text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.une-plus__tout::after { content: "→"; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--moutarde); color: var(--anthracite); transition: transform 0.3s ease; }
.une-plus__tout:hover::after { transform: translateX(3px); }
.une-guides__pied { margin: clamp(1.4rem, 3vw, 2rem) 0 0; }
@media (max-width: 600px) {
  .une-guides__grille .une-guide--plus { display: flex; flex-direction: column; border-top: 0; padding: 1.1rem; }
}