/* Toiture Pro — editorial additions on top of styles.css
Adds: article cards, product cards, comparison tables, TOC, article body, pros/cons, author box, newsletter */
/* ============ EDITORIAL CARDS ============ */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.article-card {
background: var(--card);
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
display: flex; flex-direction: column;
transition: all .25s;
cursor: pointer;
}
.article-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--orange);
}
.article-card__img {
aspect-ratio: 16/9;
position: relative;
}
.article-card__img .badge {
position: absolute; top: 1rem; left: 1rem;
background: var(--orange); color: #fff;
padding: .35rem .7rem;
font-size: .7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
border-radius: 3px;
}
.article-card__body {
padding: 1.5rem;
flex: 1;
display: flex; flex-direction: column;
}
.article-card__cat {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--orange);
margin-bottom: .5rem;
}
.article-card h3 {
font-size: 1.25rem;
line-height: 1.2;
margin-bottom: .7rem;
}
.article-card p {
color: var(--ink-soft);
font-size: .92rem;
line-height: 1.55;
margin-bottom: 1rem;
flex: 1;
}
.article-card__meta {
display: flex; align-items: center; justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid var(--rule);
font-size: .82rem;
color: var(--ink-muted);
}
.article-card__meta .read {
color: var(--orange);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
font-size: .78rem;
}
/* Feature article — horizontal layout */
.feature-article {
display: grid;
grid-template-columns: 1.1fr 1fr;
background: var(--card);
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
transition: all .25s;
}
.feature-article:hover {
border-color: var(--orange);
box-shadow: var(--shadow-md);
}
.feature-article__img {
min-height: 360px;
position: relative;
}
.feature-article__body {
padding: clamp(1.5rem, 3vw, 2.5rem);
display: flex; flex-direction: column;
justify-content: center;
}
.feature-article__body h2 {
font-size: clamp(1.6rem, 3vw, 2.4rem);
margin: .8rem 0 1rem;
line-height: 1.05;
}
.feature-article__body p {
color: var(--ink-soft);
font-size: 1.02rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
/* ============ CATEGORY GRID ============ */
.cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.cat-card {
background: var(--card);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 1.75rem;
cursor: pointer;
transition: all .2s;
display: flex; flex-direction: column;
gap: .8rem;
position: relative;
overflow: hidden;
}
.cat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--orange);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s;
}
.cat-card:hover::before { transform: scaleX(1); }
.cat-card:hover {
border-color: var(--orange);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.cat-card__kicker {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--orange);
}
.cat-card h3 {
font-size: 1.35rem;
margin: 0;
}
.cat-card p {
color: var(--ink-soft);
font-size: .93rem;
margin: 0;
flex: 1;
line-height: 1.55;
}
.cat-card__foot {
display: flex; justify-content: space-between; align-items: center;
font-size: .82rem;
color: var(--ink-muted);
padding-top: .8rem;
border-top: 1px solid var(--rule);
margin-top: .5rem;
}
.cat-card__foot .arrow {
color: var(--orange);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
font-size: .76rem;
}
/* ============ PRODUCT CARD ============ */
.product-card {
background: var(--card);
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
display: flex; flex-direction: column;
position: relative;
transition: border-color .2s, box-shadow .2s;
}
.product-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); }
.product-card__img {
aspect-ratio: 4/3;
position: relative;
}
.product-card__badge {
position: absolute; top: 1rem; left: 1rem;
background: var(--orange); color: #fff;
padding: .4rem .8rem;
font-size: .72rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .08em;
border-radius: 3px;
z-index: 2;
}
.product-card__rank {
position: absolute; top: 1rem; right: 1rem;
width: 48px; height: 48px;
background: var(--blue);
color: #fff;
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--display);
font-size: 1.4rem; font-weight: 700;
border: 3px solid #fff;
box-shadow: var(--shadow-sm);
z-index: 2;
}
.product-card__body {
padding: 1.5rem;
display: flex; flex-direction: column;
flex: 1;
gap: .75rem;
}
.product-card__cat {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--ink-muted);
}
.product-card h3 {
font-size: 1.2rem;
line-height: 1.15;
margin: 0;
}
.product-card__rating {
display: flex; align-items: center; gap: .5rem;
font-size: .88rem;
color: var(--ink-soft);
}
.product-card__rating .stars {
color: var(--orange);
letter-spacing: .15em;
font-size: .95rem;
}
.product-card__verdict {
font-size: .92rem;
color: var(--ink-soft);
line-height: 1.55;
margin: 0;
flex: 1;
}
.product-card__bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex; flex-direction: column;
gap: .4rem;
}
.product-card__bullets li {
display: flex; gap: .5rem; align-items: flex-start;
font-size: .87rem;
color: var(--ink-soft);
line-height: 1.4;
}
.product-card__bullets li::before {
content: '✓';
color: var(--orange);
font-weight: 800;
flex-shrink: 0;
}
.product-card__foot {
display: flex; align-items: center; justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid var(--rule);
margin-top: auto;
}
.product-card__price {
font-family: var(--display);
font-size: 1.6rem;
font-weight: 700;
color: var(--blue);
line-height: 1;
}
.product-card__price small {
display: block;
font-family: var(--sans);
font-size: .68rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-muted);
margin-top: .25rem;
}
/* Amazon CTA */
.btn--amz {
background: #ff9900;
border-color: #ff9900;
color: #1a1f2e;
}
.btn--amz:hover { background: #e88900; border-color: #e88900; color: #1a1f2e; }
/* ============ COMPARISON TABLE ============ */
.comp-table-wrap {
overflow-x: auto;
border-radius: var(--radius);
border: 1px solid var(--rule);
background: var(--card);
}
.comp-table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
font-size: .92rem;
}
.comp-table thead th {
background: var(--blue-deep);
color: #fff;
padding: 1.1rem 1rem;
text-align: left;
font-family: var(--display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
font-size: .88rem;
border-bottom: 3px solid var(--orange);
}
.comp-table thead th:first-child { min-width: 180px; }
.comp-table tbody td {
padding: 1rem;
border-bottom: 1px solid var(--rule);
vertical-align: middle;
}
.comp-table tbody tr:last-child td { border-bottom: 0; }
.comp-table tbody tr:nth-child(even) { background: var(--bg-soft); }
.comp-table .pname {
font-weight: 700;
color: var(--ink);
display: block;
}
.comp-table .pcat {
font-size: .78rem;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: .06em;
margin-top: .2rem;
}
.comp-table .rating {
color: var(--orange);
font-weight: 700;
white-space: nowrap;
}
.comp-table .price {
font-family: var(--display);
font-size: 1.2rem;
color: var(--blue);
font-weight: 700;
}
.comp-table .tag {
display: inline-block;
background: var(--orange);
color: #fff;
padding: .2rem .55rem;
border-radius: 3px;
font-size: .7rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.comp-table .tag--ghost {
background: transparent;
color: var(--ink-soft);
border: 1px solid var(--rule);
}
/* ============ ARTICLE BODY ============ */
.article-hero {
background: var(--blue-deep);
color: #fff;
padding: clamp(2rem, 4vw, 3.5rem) 0 0;
position: relative;
overflow: hidden;
}
.article-hero::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(120deg, #0e3a5f 0%, #082844 55%, #1d5285 100%);
}
.article-hero::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 80% 30%, rgba(232, 119, 34, 0.22), transparent 55%);
}
.article-hero__inner { position: relative; z-index: 2; }
.article-hero__kicker { color: var(--orange); }
.article-hero h1 {
color: #fff;
font-size: clamp(2rem, 4.5vw, 3.4rem);
margin: 1rem 0 1.25rem;
max-width: 22ch;
}
.article-hero h1 span { color: var(--orange); }
.article-hero__lede {
color: rgba(255,255,255,.88);
font-size: 1.1rem;
max-width: 55ch;
margin-bottom: 2rem;
}
.article-hero__meta {
display: flex; gap: 1.5rem; flex-wrap: wrap;
font-size: .85rem;
color: rgba(255,255,255,.75);
padding: 1.25rem 0;
border-top: 1px solid rgba(255,255,255,.12);
}
.article-hero__meta strong { color: #fff; font-weight: 600; }
.article-hero__img {
margin: clamp(1.5rem, 3vw, 2.5rem) 0 -3rem;
aspect-ratio: 21/9;
border-radius: var(--radius) var(--radius) 0 0;
overflow: hidden;
position: relative; z-index: 2;
}
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 3rem;
padding-top: 4rem;
}
.article-body {
max-width: 68ch;
font-size: 1.05rem;
line-height: 1.75;
color: var(--ink);
}
.article-body > p { margin-bottom: 1.5em; color: var(--ink-soft); }
.article-body > p:first-of-type::first-letter {
font-family: var(--display);
font-size: 3.6rem;
font-weight: 700;
float: left;
line-height: .95;
padding: .1em .18em 0 0;
color: var(--orange);
}
.article-body h2 {
font-size: 1.9rem;
margin: 2.5rem 0 1rem;
padding-top: 1rem;
border-top: 3px solid var(--orange);
display: inline-block;
padding-right: 2rem;
}
.article-body h3 {
font-size: 1.35rem;
margin: 2rem 0 .8rem;
}
.article-body ul, .article-body ol {
padding-left: 1.25rem;
margin: 0 0 1.5em;
color: var(--ink-soft);
}
.article-body li { margin-bottom: .5em; }
.article-body strong { color: var(--ink); }
.article-body blockquote {
margin: 2rem 0;
padding: 1.25rem 1.75rem;
border-left: 4px solid var(--orange);
background: var(--bg-soft);
font-family: var(--display);
font-size: 1.25rem;
color: var(--ink);
font-weight: 500;
line-height: 1.4;
}
.article-body a.inline {
color: var(--blue);
text-decoration: underline;
text-decoration-color: var(--orange);
text-underline-offset: 3px;
font-weight: 600;
}
/* Table of contents */
.toc {
background: var(--bg-soft);
border: 1px solid var(--rule);
border-left: 4px solid var(--orange);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
margin: 0 0 2.5rem;
}
.toc h5 {
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--ink-muted);
margin: 0 0 .75rem;
font-family: var(--sans);
font-weight: 700;
}
.toc ol {
padding: 0; margin: 0;
list-style: none;
counter-reset: toc;
}
.toc li {
counter-increment: toc;
padding: .35rem 0;
font-size: .95rem;
color: var(--ink-soft);
}
.toc li::before {
content: counter(toc, decimal-leading-zero) ' ';
color: var(--orange);
font-weight: 700;
margin-right: .6rem;
}
.toc a { cursor: pointer; }
.toc a:hover { color: var(--orange); }
/* ============================================================================
POINTS FORTS / POINTS FAIBLES — bloc .proscons
+ harmonisation de la coche .product-card__bullets
----------------------------------------------------------------------------
Toutes les valeurs citées en commentaire ont été MESURÉES dans le navigateur
sur le fichier styles-blog.css réellement modifié (chaîne complète : fonts,
styles, styles-blog, styles-extra, styles-shop, styles-avis, server-render),
à 16 px de police racine, largeur de bloc 720 px.
DOCTRINE — un seul principe, deux applications.
Aucun signe n'est un caractère de texte.
· Le + et le − sont deux rectangles pleins peints en `linear-gradient`
(aplat à deux arrêts identiques) et posés par `background-position:center`.
Ils ne dépendent d'AUCUNE fonctionnalité moderne : linear-gradient +
background-size datent d'IE10 / Safari 6. Le dessin ne peut pas ne pas
s'afficher — c'est pour cela qu'on n'utilise pas de masque ici : un repli
qui perdrait le signe ferait retomber la distinction sur la seule couleur.
· La coche est le SEUL masque du lot (§ 8), parce qu'une diagonale ne se
dessine pas proprement en dégradés, et son repli est une puce ronde —
une puce reste une puce, aucun sens n'est perdu.
CE QUE CELA CORRIGE, DÉFAUT PAR DÉFAUT
· Le glyphe faisait 23 % du cercle → le bras en fait 55 % (mesuré 55,0 %).
· Le « − » faisait 5,59 × 2 px → il fait 13,86 × 3,33 px, soit 4,1 fois plus
d'encre, et il est RIGOUREUSEMENT le bras horizontal du « + ».
· Le décalage de 4 à 4,5 px venait de `place-items:center`, qui centrait la
boîte de ligne du glyphe. Il n'y a plus ni glyphe ni boîte de ligne :
`background-position:center` mesuré à 50 % 50 %, l'erreur est nulle par
construction.
· Barlow Condensed et le U+2212 absent des polices de repli sortent
définitivement de l'équation.
· `content:''` ne génère aucun texte : muet pour un lecteur d'écran, sans
`aria-hidden` (les glyphes '+' et '−' pouvaient être vocalisés).
· Les reçoivent enfin un marqueur, le filet devient plein et le
`margin-bottom:.5em` hérité est neutralisé : le bloc ne paraît plus
inachevé, ce qui était LA plainte du client.
============================================================================ */
/* ── 1. Grille ───────────────────────────────────────────────────────────────
Deux déclarations : la première est le repli si `min()` n'est pas comprise,
la seconde est celle qui compte.
`min(15rem, 100%)` interdit tout débordement horizontal — le plancher ne peut
jamais dépasser la largeur disponible (WCAG 1.4.10) — tout en faisant réagir
la bascule à l'agrandissement de police SEUL (WCAG 1.4.4) : 15rem grandit
avec le réglage de l'utilisateur, la fenêtre non.
Mesuré : 2 colonnes de 350,3 px à 16 px de racine ; 1 colonne dès 32 px
(zoom 200 %) et 64 px (400 %), sans jamais de barre de défilement latérale.
ATTENTION, ÉCART CONSTATÉ AVEC LA COMMANDE : la règle de la l. 1124 est
`@media (max-width: 640px)`, PAS 720 px. Elle est CONSERVÉE telle quelle,
inchangée : postérieure dans le fichier et de même spécificité (0,1,0), elle
impose 1 colonne sous 640 px — exactement ce que l'auto-fit ferait de
lui-même. Aucun conflit, aucun second point de rupture introduit. */
.proscons {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: 1.25rem;
margin: 2rem 0;
/* Interligne des items. SANS UNITÉ : aucun piège de résolution des em dans
une custom property, et la valeur sert DEUX fois — mise en forme du texte
ET hauteur du marqueur — ce qui aligne le signe sur le centre de la
première ligne sans aucun nombre magique (§ 6). */
--pc-lh: 1.5;
/* Accents, thème clair : valeurs d'origine du site, INCHANGÉES.
Mesuré sur --card #ffffff : #3d7a3a = 5,19:1 · #c1392b = 5,40:1 → AA. */
--pc-pro: #3d7a3a;
--pc-con: #c1392b;
/* Encre du signe DANS la pastille pleine : 5,19:1 et 5,40:1 → AA. */
--pc-ink: #ffffff;
}
/* Thème sombre. Les accents d'origine tombaient à 3,27:1 et 3,15:1 sur
--card #141c2e : c'est le TEXTE du h5 qui échouait à AA, pas seulement
l'icône (seuil 4,5:1 — 16,8 px gras reste du « texte normal », le seuil
« grand texte » commençant à 18,66 px gras).
Mesuré après correction : #5cae56 = 6,19:1 · #e37a6a = 5,88:1 sur --card ;
encre #0b1220 sur ces aplats : 6,82:1 et 6,47:1.
Les deux teintes sont APPARIÉES EN LUMINANCE (L 0,332 / 0,313, écart 6 %)
exactement comme le couple clair (0,152 / 0,144, écart 5 %) : aucune des deux
colonnes ne pèse optiquement plus lourd que l'autre — un comparateur ne doit
pas donner plus de poids visuel aux limites qu'aux points forts.
Le thème n'expose aucune variable sémantique --success / --danger : ces deux
valeurs sont donc à mettre à jour en même temps que les teintes claires si la
charte évolue. Elles sont regroupées ici, et nulle part ailleurs. */
:root[data-theme="dark"] .proscons {
--pc-pro: #5cae56;
--pc-con: #e37a6a;
--pc-ink: #0b1220;
}
/* Chaque colonne n'expose qu'UN jeton. Tout le bloc s'y branche, y compris le
filet supérieur de 4 px — il était écrit en dur et ne suivait donc pas le
thème. Les hex #3d7a3a et #c1392b n'apparaissent plus qu'une fois chacun
dans tout le fichier, contre quatre fois auparavant. */
.proscons__col--pro { --pc-tone: var(--pc-pro); }
.proscons__col--con { --pc-tone: var(--pc-con); }
/* ── 2. La carte ─────────────────────────────────────────────────────────────
Volontairement PAS de bandeau d'en-tête teinté ni de compteur d'items : le
premier réintroduisait un déséquilibre optique entre les deux colonnes (une
bande rose lit plus lourd qu'une bande verte de même luminance), le second
modifiait le nom accessible du titre en « Points forts 4 ». La demande
portait sur l'iconographie ; le sentiment de « fini » est obtenu par le
rythme (§ 5), le filet plein et les marqueurs d'item (§ 6).
Pas d'`overflow:hidden` non plus : il clipperait un futur halo de focus. */
.proscons__col {
background: var(--card);
border: 1px solid var(--rule);
border-top: 4px solid var(--pc-tone);
border-radius: var(--radius);
padding: 1.5rem;
}
/* ── 3. L'en-tête ────────────────────────────────────────────────────────────
`line-height` est déclarée ICI et pas héritée : la règle globale `h5`
(styles.css l. 54) impose 1.05, et le calage de la pastille se calcule
dessus — on ne cale pas sur une valeur qu'on ne contrôle pas.
`align-items:flex-start` et NON `center` : si « POINTS FAIBLES / LIMITES »
passe sur deux lignes — ce qui arrive en colonne étroite et à 200 % de zoom —
la pastille reste sur la PREMIÈRE ligne. Mesuré sur un titre à deux lignes :
centre de la pastille à −0,85 px du centre de la première ligne (correction
optique voulue), contre −10,5 px du centre du bloc entier : avec `center`
elle serait tombée 10 px plus bas, entre les deux lignes, et les deux
colonnes se seraient désalignées. */
.proscons__col h5 {
display: flex;
align-items: flex-start;
gap: .55em;
margin: 0 0 1rem;
font-family: var(--display);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--pc-tone);
}
/* ── 4. La pastille pleine de l'en-tête ──────────────────────────────────────
Ø 1.5em = 25,20 px mesuré. Bras 55 % du Ø = 13,86 px (23 % auparavant).
Épaisseur = 24 % du bras = 3,33 px (le « − » faisait 2 px).
Le rapport épaisseur/bras 0,24 est LA constante de la famille : il est
strictement identique sur le marqueur de liste (§ 6) — 2,58 / 10,74 = 0,24
mesuré — et la coche est réglée sur le même poids optique (§ 8). Ce n'est pas
une intention, c'est une valeur vérifiable.
Terminaisons CARRÉES : registre technique de comparateur, pas registre
d'icône applicative. */
.proscons__col h5::before {
content: '';
/* Verrouille l'échelle. Si une règle `font-size:.8rem` de l'ancien ::before
survivait à une substitution partielle, toute la géométrie en em se
calculerait sur 12,8 px au lieu de 16,8 px et la pastille tomberait à
~19 px sans le moindre signe d'erreur. Assurance à coût nul. */
font-size: inherit;
--pc-d: 1.5em; /* diamètre mesuré 25,20 px */
--pc-arm: calc(var(--pc-d) * .55); /* bras du signe mesuré 13,86 px */
--pc-bar: calc(var(--pc-arm) * .24); /* épaisseur mesuré 3,33 px */
flex: 0 0 auto; /* sinon le flex écrase la pastille en ovale */
inline-size: var(--pc-d);
block-size: var(--pc-d);
border-radius: 50%;
background-color: var(--pc-tone);
background-repeat: no-repeat;
background-position: center;
/* Calage sur la première ligne : (hauteur de ligne − Ø) / 2, puis −.05em de
correction optique. Le titre est en capitales, donc sans jambage : l'œil
aligne sur le centre des capitales, plus haut que le centre de la boîte de
ligne. Mesuré : −3,78 px, marge négative assumée (25,2 px de pastille pour
19,3 px de ligne), absorbée par le padding de 1,5rem de la carte. */
margin-block-start: calc((1.15em - var(--pc-d)) / 2 - .05em);
/* Le signe est un FOND : sans cela il disparaît à l'impression, les
arrière-plans n'étant pas imprimés par défaut. Le projet n'a AUCUNE
feuille @media print (vérifié) : c'est le comportement natif qui
s'applique tel quel. */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* PLUS — deux barres, UNE SEULE variable d'épaisseur : l'égalité de graisse est
structurelle, elle ne peut plus dériver. */
.proscons__col--pro h5::before {
background-image:
linear-gradient(var(--pc-ink), var(--pc-ink)), /* barre horizontale */
linear-gradient(var(--pc-ink), var(--pc-ink)); /* barre verticale */
background-size:
var(--pc-arm) var(--pc-bar),
var(--pc-bar) var(--pc-arm);
}
/* MOINS — RIGOUREUSEMENT le bras horizontal du PLUS : même longueur, même
épaisseur, même position (vérifié : les deux `background-size` sont la même
paire de valeurs). Les deux pastilles étant côte à côte à 20 px dans le même
bloc, tout allongement de compensation se compare directement à l'œil et se
lit comme un défaut, pas comme une compensation. On n'ajuste pas ; on assume
une paire. */
.proscons__col--con h5::before {
background-image: linear-gradient(var(--pc-ink), var(--pc-ink));
background-size: var(--pc-arm) var(--pc-bar);
}
/* ── 5. La liste ─────────────────────────────────────────────────────────────
`padding:0; margin:0` neutralise `.article-body ul` (l. 462), qui imposerait
sinon un retrait de 1,25rem et une marge basse de 1.5em. */
.proscons__col ul {
list-style: none;
padding: 0;
margin: 0;
font-size: .93rem;
}
/* Grille à deux colonnes plutôt que flex, pour DEUX raisons :
1. le retrait pendu est exact sur les items qui passent sur deux ou trois
lignes — fréquent, les libellés du catalogue étant longs ;
2. les ne deviennent PAS des conteneurs flex : un élément de type bloc
inséré plus tard dans un item se placerait alors à côté du marqueur au
lieu d'en dessous.
`margin:0` neutralise `.article-body li{margin-bottom:.5em}` (l. 467), qui
s'applique réellement ici — pros_cons() est rendu dans .article-body
(pages/fiche.php l. 103 et 133) — et désaxait chaque filet.
Mesuré après correction : 11,3 px entre le texte et le filet, 10,0 px entre
le filet et le texte suivant. Le filet tombe au milieu, la liste a un rythme.
ATTENTION : `.article-body li` et `.proscons__col li` ont la MÊME
spécificité (0,1,1) — c'est l'ordre source qui tranche. Ce bloc DOIT donc
rester après la l. 467, ce qui est le cas puisqu'il remplace la l. 526. */
.proscons__col li {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
column-gap: .55em;
margin: 0;
padding: .5rem 0;
border-bottom: 1px solid var(--rule); /* PLEIN et non tireté : le pointillé
lisait « maquette non finie » */
color: var(--ink-soft); /* 9,59:1 clair · 9,93:1 sombre */
line-height: var(--pc-lh);
}
.proscons__col li:last-child { border-bottom: 0; padding-bottom: 0; }
/* ── 6. Le marqueur d'item ───────────────────────────────────────────────────
Signe NU, sans pastille : la hiérarchie passe par le REMPLISSAGE (pastille
pleine = en-tête, signe nu = item) et non par un troisième registre. Un
disque teinté sous chaque item répéterait une tache pâle sur toute la hauteur
de la liste et élargirait la colonne de marqueur pour rien.
La boîte fait EXACTEMENT la hauteur d'une ligne — calc(var(--pc-lh) * 1em),
mesuré 22,3125 px pour un interligne de 22,32 px — donc
`background-position:center` tombe sur le centre de la PREMIÈRE ligne quelle
que soit la taille de texte : le calage est DÉRIVÉ, pas réglé au nombre
magique, et reste juste si quelqu'un touche à --pc-lh.
Rapport épaisseur/bras : 0,24, identique à la pastille (mesuré). */
.proscons__col li::before {
content: '';
font-size: inherit;
--pc-w: .95em; /* colonne du marqueur mesuré 14,14 px */
--pc-arm: calc(var(--pc-w) * .76); /* bras mesuré 10,74 px */
--pc-bar: calc(var(--pc-arm) * .24); /* épaisseur mesuré 2,58 px */
inline-size: var(--pc-w);
block-size: calc(var(--pc-lh) * 1em);
background-repeat: no-repeat;
/* −.04em : le centre optique d'une ligne de texte est très légèrement
au-dessus du centre géométrique de sa boîte, qui réserve la place des
jambages. Mesuré : décalage de 0,60 px vers le haut. */
background-position: center calc(50% - .04em);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.proscons__col--pro li::before {
background-image:
linear-gradient(var(--pc-tone), var(--pc-tone)),
linear-gradient(var(--pc-tone), var(--pc-tone));
background-size:
var(--pc-arm) var(--pc-bar),
var(--pc-bar) var(--pc-arm);
}
.proscons__col--con li::before {
background-image: linear-gradient(var(--pc-tone), var(--pc-tone));
background-size: var(--pc-arm) var(--pc-bar);
}
/* État vide — ni marqueur, ni filet. Une vide s'annonce « liste,
0 élément », ce qui ne veut rien dire. Nécessite le PHP livré à part ; sans
lui cette règle ne s'applique jamais et ne casse rien. */
.proscons__col li.proscons__none {
display: block;
border-bottom: 0;
color: var(--ink-muted); /* 4,83:1 clair · 5,44:1 sombre */
font-style: italic;
}
.proscons__col li.proscons__none::before { content: none; }
/* ── 7. Plancher absolu d'épaisseur ──────────────────────────────────────────
`max()` ne peut PAS être écrite directement dans `background-size`. Si la
fonction n'était pas comprise, la déclaration deviendrait invalide AU CALCUL
et `background-size` retomberait sur `auto` : la pastille resterait, le signe
disparaîtrait — et une déclaration en em placée juste avant NE reprendrait
PAS la main, car c'est la règle des custom properties (invalid at
computed-value time) et non celle des valeurs invalides ordinaires.
On isole donc le plancher dans un @supports : s'il n'est pas satisfait, le
bloc entier est ignoré et la géométrie en em pure des § 4 et § 6 subsiste,
intacte et complète. Le repli est le dessin lui-même, jamais son absence.
Mesuré : à 10 px de racine le plancher prend le relais (pastille 22 px,
trait 2,90 px ; marqueur 13 px, trait 2,37 px) — jamais un cheveu. */
@supports (inline-size: max(1px, 1em)) {
.proscons__col h5::before { --pc-d: max(22px, 1.5em); }
.proscons__col li::before { --pc-w: max(13px, .95em); }
.proscons__col h5::before,
.proscons__col li::before { --pc-bar: max(2px, calc(var(--pc-arm) * .24)); }
}
/* ── 8. Contraste forcé (contraste élevé Windows) ────────────────────────────
Le système réécrit `background-color` mais PAS les couleurs contenues dans un
dégradé. `CanvasText` est écrit EN DUR ici, et non via un jeton : une media
query n'ajoute AUCUNE spécificité, donc une surcharge passant par
--pc-pro / --pc-con / --pc-ink serait battue par `:root[data-theme="dark"]
.proscons` (0,3,0 contre 0,1,0) et, en thème sombre + contraste élevé, le
signe resterait peint en couleur. Écrit directement sur le pseudo-élément, à
spécificité égale à la règle de base et en position postérieure, il gagne
dans tous les cas de figure. */
@media (forced-colors: active) {
.proscons__col h5::before {
background-color: Canvas;
border: 1px solid CanvasText; /* la pastille redevient un cercle tracé */
}
.proscons__col--pro h5::before,
.proscons__col--pro li::before {
background-image:
linear-gradient(CanvasText, CanvasText),
linear-gradient(CanvasText, CanvasText);
}
.proscons__col--con h5::before,
.proscons__col--con li::before {
background-image: linear-gradient(CanvasText, CanvasText);
}
}
/* Inline recommendation box — inside article body */
.reco-box {
background: var(--bg-soft);
border: 1px solid var(--rule);
border-top: 4px solid var(--orange);
border-radius: var(--radius);
padding: 1.5rem;
margin: 2rem 0;
display: grid;
grid-template-columns: 140px 1fr auto;
gap: 1.25rem;
align-items: center;
}
.reco-box__img {
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
}
.reco-box__body .kicker {
padding-bottom: .3rem;
margin-bottom: .4rem;
}
.reco-box__body .kicker::after { width: 30px; height: 2px; }
.reco-box__body h4 {
font-size: 1.15rem;
margin-bottom: .3rem;
}
.reco-box__body p {
font-size: .9rem;
color: var(--ink-soft);
margin: 0;
line-height: 1.5;
}
.reco-box__cta {
display: flex; flex-direction: column;
align-items: flex-end;
gap: .5rem;
white-space: nowrap;
}
.reco-box__cta .price {
font-family: var(--display);
font-size: 1.4rem;
font-weight: 700;
color: var(--blue);
line-height: 1;
}
/* Callout box */
.callout {
background: var(--bg-soft);
border-left: 4px solid var(--blue);
padding: 1.25rem 1.5rem;
margin: 2rem 0;
border-radius: 0 var(--radius) var(--radius) 0;
}
.callout strong { color: var(--blue); }
.callout--warn { border-left-color: var(--orange); }
.callout--warn strong { color: var(--orange-deep); }
.callout--soft {
background: color-mix(in oklab, var(--orange) 7%, var(--bg-soft));
border-left-color: var(--orange);
margin: 1.25rem 0 0;
font-size: .95rem;
}
.callout--soft strong { color: var(--orange-deep); }
.content-section { margin-bottom: .5rem; }
.content-section > h2:first-child { margin-top: 2.5rem; }
.content-section:first-child > h2:first-child { margin-top: 0; }
/* ============ ARTICLE SIDEBAR ============ */
.article-sidebar {
position: sticky; top: 100px;
align-self: start;
display: flex; flex-direction: column;
gap: 1.5rem;
}
.sidebar-author {
display: flex; gap: 1rem; align-items: center;
background: var(--card);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 1.25rem;
}
.sidebar-author__avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
color: #fff;
display: grid; place-items: center;
font-family: var(--display);
font-size: 1.3rem; font-weight: 700;
flex-shrink: 0;
}
.sidebar-author strong { display: block; font-size: .98rem; }
.sidebar-author small { color: var(--ink-muted); font-size: .82rem; display: block; margin-top: .2rem; }
/* Newsletter block */
.newsletter {
background: var(--blue-deep);
color: #fff;
padding: 1.75rem;
border-radius: var(--radius);
border-top: 4px solid var(--orange);
}
.newsletter h4 { color: #fff; font-size: 1.2rem; margin-bottom: .6rem; }
.newsletter p { font-size: .92rem; color: rgba(255,255,255,.8); margin-bottom: 1rem; line-height: 1.5; }
.newsletter input {
width: 100%;
padding: .7rem .9rem;
border: 1.5px solid rgba(255,255,255,.2);
background: rgba(0,0,0,.2);
color: #fff;
border-radius: 4px;
margin-bottom: .6rem;
font-family: var(--sans);
font-size: .92rem;
}
.newsletter input::placeholder { color: rgba(255,255,255,.5); }
.newsletter input:focus { outline: none; border-color: var(--orange); }
.newsletter small { font-size: .75rem; color: rgba(255,255,255,.55); display: block; margin-top: .5rem; }
/* Trust strip (below hero) */
.trust {
background: var(--bg-soft);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
padding: 1.5rem 0;
}
.trust__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
align-items: center;
}
.trust-item {
display: flex; gap: .9rem; align-items: center;
}
.trust-item__icon {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(232, 119, 34, 0.12);
color: var(--orange);
display: grid; place-items: center;
font-size: 1.1rem;
flex-shrink: 0;
font-weight: 700;
}
.trust-item strong {
display: block;
font-size: .92rem;
font-family: var(--display);
text-transform: uppercase;
letter-spacing: .02em;
}
.trust-item small {
display: block;
font-size: .78rem;
color: var(--ink-muted);
margin-top: .1rem;
}
/* Author block inside article footer */
.author-box {
display: grid;
grid-template-columns: 80px 1fr;
gap: 1.25rem;
padding: 1.75rem;
background: var(--bg-soft);
border-radius: var(--radius);
margin: 3rem 0 1.5rem;
align-items: center;
}
.author-box__avatar {
width: 80px; height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
color: #fff;
display: grid; place-items: center;
font-family: var(--display);
font-size: 1.6rem; font-weight: 700;
}
.author-box h5 {
font-family: var(--display);
font-size: 1.1rem;
margin: 0 0 .2rem;
text-transform: uppercase;
}
.author-box small { color: var(--ink-muted); font-size: .85rem; display: block; margin-bottom: .6rem; }
.author-box p { font-size: .92rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }
/* Related articles */
.related {
padding: 3rem 0 0;
margin-top: 3rem;
border-top: 1px solid var(--rule);
}
/* Methodology grid */
.method-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.method-card {
padding: 1.75rem;
background: var(--bg-soft);
border-radius: var(--radius);
border-top: 4px solid var(--orange);
counter-increment: mstep;
position: relative;
}
.method-card::before {
content: counter(mstep, decimal-leading-zero);
position: absolute;
top: -.5rem; right: 1.25rem;
font-family: var(--display);
font-size: 2.8rem;
color: var(--orange);
opacity: .25;
font-weight: 700;
line-height: 1;
}
.method-card h4 {
font-size: 1.1rem;
margin-bottom: .5rem;
max-width: 90%;
}
.method-card p {
font-size: .9rem;
color: var(--ink-soft);
margin: 0;
line-height: 1.55;
}
.method-wrap { counter-reset: mstep; }
/* Disclaimer banner */
.disclaimer {
background: #fef6e8;
border: 1px solid #f2d593;
border-radius: var(--radius);
padding: 1rem 1.25rem;
font-size: .88rem;
color: #6d4c0e;
display: flex; gap: .8rem; align-items: flex-start;
}
.disclaimer strong { color: #5a3f0a; }
:root[data-theme="dark"] .disclaimer { background: #2d2415; border-color: #4a3a1e; color: #e8c17a; }
:root[data-theme="dark"] .disclaimer strong { color: #ffd98a; }
/* Header — editorial variant: add search icon */
.header__search {
display: flex; align-items: center;
width: 38px; height: 38px;
border-radius: 50%;
border: 1.5px solid var(--rule);
justify-content: center;
cursor: pointer;
color: var(--ink-soft);
flex-shrink: 0;
}
.header__search:hover { border-color: var(--orange); color: var(--orange); }
/* ============ BEFORE / AFTER SLIDER ============ */
.ba-wrap { max-width: 1100px; margin: 0 auto; }
.ba {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--rule);
box-shadow: var(--shadow-md);
cursor: ew-resize;
user-select: none;
background: #1a1a14;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer--after { z-index: 2; }
.ba__divider {
position: absolute; top: 0; bottom: 0;
width: 3px;
background: #fff;
z-index: 3;
transform: translateX(-50%);
box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 0 18px rgba(0,0,0,.4);
pointer-events: none;
}
.ba__handle {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 48px; height: 48px;
border-radius: 50%;
background: var(--orange);
color: #fff;
display: grid; place-items: center;
font-size: 1.2rem; font-weight: 700;
border: 3px solid #fff;
box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.ba__caption {
text-align: center;
margin: 1rem 0 0;
color: var(--ink-muted);
font-size: .88rem;
font-style: italic;
}
/* ============ ROOF CALCULATOR ============ */
.calc {
background: var(--card);
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.calc__header {
padding: clamp(1.5rem, 3vw, 2.25rem);
border-bottom: 1px solid var(--rule);
background: var(--bg-soft);
border-top: 4px solid var(--orange);
}
.calc__header h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
margin: .8rem 0 .6rem;
line-height: 1.05;
}
.calc__header p { color: var(--ink-soft); margin: 0; max-width: 64ch; }
.calc__grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 0;
}
.calc__inputs {
padding: clamp(1.5rem, 3vw, 2.25rem);
border-right: 1px solid var(--rule);
display: flex; flex-direction: column; gap: 1.5rem;
}
.calc__results {
padding: clamp(1.5rem, 3vw, 2.25rem);
background: linear-gradient(180deg, var(--card) 0%, var(--bg-soft) 100%);
display: flex; flex-direction: column; gap: 1.25rem;
}
.calc__field label {
display: flex; justify-content: space-between; align-items: baseline;
font-size: .85rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--ink-soft);
margin-bottom: .6rem;
}
.calc__field label strong {
font-family: var(--display);
font-size: 1.4rem;
color: var(--orange);
text-transform: none;
letter-spacing: 0;
}
.calc__field input[type="range"] {
width: 100%;
accent-color: var(--orange);
height: 6px;
}
.calc__range-marks {
display: flex; justify-content: space-between;
font-size: .72rem; color: var(--ink-muted);
margin-top: .35rem;
font-family: var(--display);
letter-spacing: .04em;
}
.calc__seg {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
}
.calc__seg button {
border: 1.5px solid var(--rule);
background: var(--card);
border-radius: var(--radius-sm);
padding: .7rem .5rem;
cursor: pointer;
display: flex; flex-direction: column; gap: .15rem;
transition: all .15s;
font-family: inherit;
color: var(--ink);
}
.calc__seg button strong {
font-family: var(--display);
font-size: .92rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.calc__seg button small { font-size: .72rem; color: var(--ink-muted); }
.calc__seg button.on {
border-color: var(--orange);
background: rgba(232, 119, 34, 0.08);
color: var(--orange);
}
.calc__seg button.on small { color: var(--orange); opacity: .85; }
.calc__seg button:hover { border-color: var(--orange); }
.calc__field select {
width: 100%;
padding: .75rem .9rem;
border: 1.5px solid var(--rule);
border-radius: var(--radius-sm);
background: var(--card);
font-family: inherit;
font-size: .95rem;
color: var(--ink);
cursor: pointer;
}
.calc__check {
display: flex !important; align-items: center; gap: .7rem;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: .92rem !important;
font-weight: 500 !important;
color: var(--ink) !important;
cursor: pointer;
}
.calc__check input { width: 18px; height: 18px; accent-color: var(--orange); }
.calc__topline {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
padding: 1.1rem 1.25rem;
background: var(--blue-deep);
color: #fff;
border-radius: var(--radius-sm);
}
.calc__topline > div { display: flex; flex-direction: column; }
.calc__topline small {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .1em;
opacity: .7;
}
.calc__topline strong {
font-family: var(--display);
font-size: 1.6rem;
margin-top: .2rem;
}
.calc__rows { display: flex; flex-direction: column; gap: .65rem; }
.calc__row {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 1rem;
align-items: center;
padding: .85rem 1rem;
background: var(--card);
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
}
.calc__row--total { border-color: var(--orange); background: rgba(232, 119, 34, 0.06); }
.calc__row-icon {
width: 40px; height: 40px;
border-radius: 8px;
background: rgba(232, 119, 34, 0.12);
color: var(--orange);
display: grid; place-items: center;
font-size: 1.05rem;
font-weight: 700;
font-family: var(--display);
}
.calc__row--total .calc__row-icon { background: var(--orange); color: #fff; }
.calc__row-body strong {
display: block;
font-size: .95rem;
font-family: var(--display);
}
.calc__row-body small {
display: block;
font-size: .8rem;
color: var(--ink-muted);
margin-top: .1rem;
line-height: 1.35;
}
.calc__row-val {
font-family: var(--display);
font-size: 1.5rem;
font-weight: 700;
color: var(--blue);
white-space: nowrap;
}
.calc__row-val span {
font-size: .85rem;
color: var(--ink-muted);
margin-left: .15rem;
font-weight: 600;
}
.calc__row--total .calc__row-val { color: var(--orange); font-size: 1.7rem; }
.calc__compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .8rem;
}
.calc__compare > div {
padding: 1rem 1.1rem;
border-radius: var(--radius-sm);
display: flex; flex-direction: column; gap: .15rem;
}
.calc__compare-pro { background: var(--bg-soft); border: 1px solid var(--rule); }
.calc__compare-save { background: #1a4d2e; color: #fff; }
.calc__compare small {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .1em;
opacity: .75;
}
.calc__compare strong {
font-family: var(--display);
font-size: 1.4rem;
}
.calc__compare span { font-size: .82rem; opacity: .8; }
.calc__cta {
display: flex; gap: .75rem; flex-wrap: wrap;
margin-top: .25rem;
}
.calc__cta .btn { flex: 1; min-width: 200px; }
.calc__disclaimer {
font-size: .78rem;
color: var(--ink-muted);
margin: 0;
line-height: 1.5;
padding-top: .6rem;
border-top: 1px dashed var(--rule);
}
@media (max-width: 900px) {
.calc__grid { grid-template-columns: 1fr; }
.calc__inputs { border-right: 0; border-bottom: 1px solid var(--rule); }
.calc__compare { grid-template-columns: 1fr; }
.calc__topline { grid-template-columns: 1fr; }
}
/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
.card-grid { grid-template-columns: repeat(2, 1fr); }
.card-grid--4 { grid-template-columns: repeat(2, 1fr); }
.cat-grid { grid-template-columns: repeat(2, 1fr); }
.feature-article { grid-template-columns: 1fr; }
.feature-article__img { min-height: 260px; }
.article-layout { grid-template-columns: 1fr; }
.article-sidebar { position: static; }
.method-grid { grid-template-columns: repeat(2, 1fr); }
.trust__row { grid-template-columns: repeat(2, 1fr); }
.reco-box { grid-template-columns: 100px 1fr; }
.reco-box__cta { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
}
@media (max-width: 640px) {
.card-grid, .card-grid--2, .card-grid--4 { grid-template-columns: 1fr; }
.cat-grid { grid-template-columns: 1fr; }
.proscons { grid-template-columns: 1fr; }
.method-grid { grid-template-columns: 1fr; }
.trust__row { grid-template-columns: 1fr; }
.article-body > p:first-of-type::first-letter { font-size: 2.8rem; }
.reco-box { grid-template-columns: 1fr; text-align: left; }
}