/* ============================================================
AI COMPANION ATLAS — COMPOSANTS D'AVIS ET DE GUIDE (review.css)
Calque « page longue » du design system : mise en page deux
colonnes, encart de note, verdicts, tableaux, pour/contre.
Il n'existe pas sur la home — celle-ci n'utilise que atlas.css.
PRINCIPE — aucune couleur en dur dans le HTML.
Tout passe par les variables de atlas.css (--brand, --gold,
--card, --border…) plus les trois tokens semantiques declares
ci-dessous. Changer la palette du theme repalettise donc aussi
les pages d'avis, sans toucher a une seule page.
TYPOGRAPHIE — le corps de texte n'a pas de classe : titres,
paragraphes, listes et liens nus sont pris en charge par
assets/prose.css, qui cible en descendant de .entry-content.
Ne pas ajouter de classe a un : le filet degrade et les
marges sont deja la. C'est pour cette raison que les pages
d'avis utilisent le modele de page standard et NON
« Full width — custom HTML » (qui n'a pas de .entry-content).
Charge APRES atlas.css : a egalite de specificite, ce fichier
gagne. Les liens du design system ne sont pas touches par le
reset (style.css ne colore que les liens sans classe).
============================================================ */
:root{
/* Tokens semantiques — communs aux badges, listes et tableaux.
Le jaune reutilise volontairement --gold du design system. */
--ok:#3ddc84; --ok-rgb:61,220,132;
--warn:#f2b937; --warn-rgb:242,185,55;
--ko:#ff6b81; --ko-rgb:255,107,129;
--review-max:1152px; /* largeur totale, alignee sur .wrap */
--review-side:20rem; /* colonne de droite en desktop */
}
/* ------------------------------------------------------------
1. MISE EN PAGE
Le padding vertical vient de .entry-content : ne pas en
remettre ici, il se cumulerait.
align-items:start est ce qui permet aux deux colonnes de ne
pas s'etirer ; la sidebar est reetiree explicitement plus bas
pour donner au sticky une plage ou coller.
------------------------------------------------------------ */
.atlas-review-layout{
max-width:var(--review-max);
margin:0 auto;
padding:0 1rem;
display:grid;
grid-template-columns:1fr;
gap:2.5rem;
align-items:start;
}
.atlas-review-content{ min-width:0; }
@media(min-width:1024px){
.atlas-review-layout{ grid-template-columns:minmax(0,1fr) var(--review-side);gap:3rem; }
.atlas-review-layout > .atlas-review-sidebar{ align-self:stretch; }
.atlas-review-layout .atlas-score-card{
position:sticky;top:5rem;
max-height:calc(100vh - 6rem);
overflow-y:auto;
}
}
/* ------------------------------------------------------------
2. EN-TETE — eyebrow, titre, signature
------------------------------------------------------------ */
.atlas-review-eyebrow{
display:inline-flex;align-items:center;gap:.45rem;
font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
color:var(--brand);margin-bottom:.9rem;
}
.atlas-review-title{
font-family:var(--font-display);
font-size:clamp(1.9rem,4.5vw,2.75rem);
font-weight:700;line-height:1.15;letter-spacing:-.03em;
color:var(--fg);margin:0 0 1.25rem;
}
.atlas-review-byline{
display:flex;align-items:center;gap:.85rem;
padding-bottom:1.5rem;margin-bottom:1.75rem;
border-bottom:1px solid var(--border);
}
.atlas-review-avatar{
width:2.75rem;height:2.75rem;border-radius:10px;background:var(--grad);flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--btn-fg);
}
/* Variante « marque » : un pictogramme au lieu d'une initiale (plume sur la
page auteur, « pen name »). Reservee aux signatures qui sont celles de la
publication et non d'une personne : un monogramme y ressemblerait a un
avatar par defaut, l'esthetique exacte du faux profil qu'on veut ecarter.
Le SVG doit etre en trace (fill:none) et suivre la grille 24x24 du site. */
.atlas-review-avatar.is-mark svg{
width:1.45rem;height:1.45rem;
fill:none;stroke:var(--btn-fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.atlas-review-byline-text{ font-size:.78rem;color:var(--fg-muted);line-height:1.45; }
.atlas-review-byline-text strong{
display:block;font-family:var(--font-display);font-size:.92rem;font-weight:700;color:var(--fg);
}
.atlas-review-byline-text a{ color:inherit;text-decoration:none; }
.atlas-review-byline-text a:hover{ color:var(--brand-2); }
/* Badge « note provisoire » — se pose a cote de la signature ou
de la note. Il disparait quand le palier payant a ete teste. */
.atlas-provisional{
display:inline-flex;align-items:center;gap:.35rem;
padding:.2rem .6rem;border-radius:999px;
background:rgba(var(--warn-rgb),0.12);border:1px solid rgba(var(--warn-rgb),0.32);
color:var(--gold-tint);font-size:.65rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
}
/* ------------------------------------------------------------
3. APPELS A L'ACTION
.atlas-review-cta est le bouton principal du corps de page :
pleine largeur de sa colonne, partout — corps de texte, encart
de note, carte de choix d'un face-a-face.
------------------------------------------------------------ */
.atlas-review-cta{
display:flex;align-items:center;justify-content:center;gap:.5rem;
width:100%;
margin:1.5rem 0 .5rem;
padding:.9rem 1.4rem;border-radius:10px;
background:var(--grad);color:var(--btn-fg);
font-family:var(--font-display);font-size:.95rem;font-weight:700;
text-align:center;text-decoration:none;
box-shadow:0 10px 26px -12px rgba(var(--brand-rgb),0.75);
transition:transform .15s,box-shadow .15s;
}
.atlas-review-cta:hover{
transform:translateY(-1px);
box-shadow:0 14px 32px -12px rgba(var(--brand-rgb),0.85);
color:var(--btn-fg);
}
/* CTA secondaire — pointe vers une page interne (avis, classement).
Jamais vers un lien affilie : c'est ce qui le distingue. */
.atlas-review-cta-ghost{
display:inline-flex;align-items:center;gap:.5rem;
margin:1.25rem 0 .5rem;
padding:.75rem 1.25rem;border-radius:10px;
border:1px solid var(--border);background:rgba(255,255,255,0.04);
color:var(--fg);font-size:.875rem;font-weight:600;text-decoration:none;
transition:background .15s,border-color .15s;
}
.atlas-review-cta-ghost:hover{ background:rgba(255,255,255,0.08);border-color:var(--border-brand);color:var(--fg); }
/* Mention sous un CTA : divulgation d'affiliation ou credibilite. */
.atlas-cta-note{
display:block;font-size:.7rem;color:var(--fg-muted);
margin:0 0 1.75rem;letter-spacing:.01em;
}
.atlas-cta-note a{ color:var(--brand-tint);text-decoration:underline;text-underline-offset:.15em; }
/* ------------------------------------------------------------
4. CAPTURES ET LEGENDES
------------------------------------------------------------ */
.atlas-review-screenshot{
width:100%;height:auto;display:block;
border-radius:14px;border:1px solid var(--border);
box-shadow:var(--shadow-card);
margin:1.75rem 0 .6rem;
transition:border-color .2s,transform .2s;
}
a:hover > .atlas-review-screenshot{ border-color:var(--border-brand);transform:translateY(-2px); }
.atlas-caption{
font-size:.75rem;color:var(--fg-muted);line-height:1.5;
margin:0 0 1.75rem;
}
/* ------------------------------------------------------------
5. TABLEAUX
.atlas-table-wrap gere le debordement horizontal en mobile :
c'est lui qui scrolle, jamais la page.
------------------------------------------------------------ */
.atlas-table-wrap{ overflow-x:auto;margin:1.75rem 0 .6rem;-webkit-overflow-scrolling:touch; }
.atlas-table{
width:100%;border-collapse:collapse;
font-size:.875rem;line-height:1.5;
}
.atlas-table thead tr{
background:linear-gradient(135deg,rgba(var(--brand-rgb),0.16),rgba(var(--brand2-rgb),0.16));
border-bottom:1px solid var(--border-brand);
}
.atlas-table th{
padding:.75rem 1rem;text-align:left;
font-family:var(--font-display);font-size:.78rem;font-weight:700;color:var(--fg);
white-space:nowrap;
}
.atlas-table td{ padding:.65rem 1rem;color:var(--fg-muted);vertical-align:top; }
.atlas-table tbody tr{ border-bottom:1px solid rgba(255,255,255,0.06); }
.atlas-table tbody tr:nth-child(even){ background:rgba(255,255,255,0.02); }
.atlas-table tbody tr:last-child{ border-bottom:none; }
/* Cellules remarquables : libelle de ligne, valeur mise en avant,
colonne centree (notes, poids, remises). */
.atlas-table .is-row-label{ color:var(--fg);font-weight:600;white-space:nowrap; }
.atlas-table .is-highlight{ color:var(--gold);font-weight:700; }
.atlas-table .is-center{ text-align:center; }
/* Avertissement de peremption sous un tableau — jamais optionnel
des qu'un prix ou un quota est cite. */
.atlas-table-note{ font-size:.75rem;color:var(--fg-muted);line-height:1.55;margin:0 0 1.75rem; }
/* ------------------------------------------------------------
6. RESUME RAPIDE
Tableau cle/valeur encadre, en tete d'avis.
------------------------------------------------------------ */
.atlas-summary{
border:1px solid var(--border-brand);border-radius:14px;overflow:hidden;
background:var(--card);box-shadow:var(--shadow-card);
margin:1.75rem 0;
}
.atlas-summary table{ width:100%;border-collapse:separate;border-spacing:0;font-size:.83rem;line-height:1.45; }
.atlas-summary caption{
caption-side:top;text-align:left;padding:.65rem 1rem;
background:linear-gradient(135deg,rgba(var(--brand-rgb),0.2),rgba(var(--brand2-rgb),0.2));
border-bottom:1px solid var(--border-brand);
font-family:var(--font-display);font-size:.7rem;font-weight:700;color:var(--fg);
text-transform:uppercase;letter-spacing:.12em;
}
.atlas-summary th{
padding:.55rem 1rem;text-align:left;vertical-align:top;white-space:nowrap;
font-size:.68rem;font-weight:600;color:var(--fg-muted);
text-transform:uppercase;letter-spacing:.08em;
border-bottom:1px solid rgba(255,255,255,0.05);
}
.atlas-summary td{
padding:.55rem 1rem;color:var(--fg);
border-bottom:1px solid rgba(255,255,255,0.05);
}
.atlas-summary tr:last-child th,
.atlas-summary tr:last-child td{ border-bottom:none; }
/* Ligne de verdict, toujours la derniere */
.atlas-summary tr.is-verdict{ background:rgba(var(--brand-rgb),0.07); }
.atlas-summary tr.is-verdict th{ color:var(--brand-tint); }
.atlas-summary tr.is-verdict td{ font-weight:600; }
/* ------------------------------------------------------------
7. BADGES ET PASTILLES
------------------------------------------------------------ */
.atlas-badge{
display:inline-block;padding:.08rem .5rem;border-radius:999px;
font-size:.68rem;font-weight:700;letter-spacing:.04em;
border:1px solid transparent;margin-right:.35rem;
}
.atlas-badge.is-yes{ background:rgba(var(--ok-rgb),0.14); border-color:rgba(var(--ok-rgb),0.35); color:var(--ok); }
.atlas-badge.is-partial{ background:rgba(var(--warn-rgb),0.13);border-color:rgba(var(--warn-rgb),0.35);color:var(--gold-tint); }
.atlas-badge.is-no{ background:rgba(var(--ko-rgb),0.13); border-color:rgba(var(--ko-rgb),0.35); color:var(--ko); }
.atlas-badge.is-adult{ background:rgba(var(--brand-rgb),0.16);border-color:rgba(var(--brand-rgb),0.4);color:var(--brand-tint); }
/* Pastille de note — la note globale dans le resume rapide */
.atlas-score-pill{
display:inline-block;padding:.12rem .6rem;border-radius:999px;
background:var(--grad);color:var(--btn-fg);
font-family:var(--font-display);font-weight:700;font-size:.83rem;
}
/* ------------------------------------------------------------
8. ENCADRE DE VERDICT
------------------------------------------------------------ */
.atlas-verdict-box{
border-radius:16px;border:1px solid var(--border-brand);
background:linear-gradient(160deg,rgba(var(--brand-rgb),0.09),rgba(255,255,255,0.015));
box-shadow:var(--shadow-card);
padding:1.5rem;margin:1.5rem 0 2rem;
}
.atlas-verdict-header{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
flex-wrap:wrap;margin-bottom:.9rem;
}
.atlas-verdict-label{
font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);
}
.atlas-verdict-score{
font-family:var(--font-display);font-size:2.1rem;font-weight:800;color:var(--gold);line-height:1;
}
.atlas-verdict-score-max{ font-size:.9rem;font-weight:700;color:var(--fg-muted); }
.atlas-verdict-tags{ display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem; }
.atlas-verdict-tag{
display:inline-flex;align-items:center;padding:.25rem .65rem;border-radius:7px;
background:rgba(var(--brand-rgb),0.12);border:1px solid rgba(var(--brand-rgb),0.26);
color:var(--brand-tint);font-size:.68rem;font-weight:600;letter-spacing:.02em;
}
.atlas-verdict-box > p{ color:var(--prose-fg,#c9d3e6);font-size:.94rem;line-height:1.7;margin:0 0 1rem; }
.atlas-verdict-box > p:last-child{ margin-bottom:0; }
/* ------------------------------------------------------------
9. LISTES POUR / CONTRE
Remplacent les
repetes a la main : une classe
sur le suffit, chaque puce herite de sa coche.
------------------------------------------------------------ */
.atlas-pros,
.atlas-cons{ list-style:none;padding:0;margin:0 0 1.25rem; }
.atlas-pros > li,
.atlas-cons > li{
position:relative;
padding:.6rem 0 .6rem 1.9rem;
border-bottom:1px solid rgba(255,255,255,0.05);
color:var(--prose-fg,#c9d3e6);font-size:.92rem;line-height:1.6;
}
.atlas-pros > li:last-child,
.atlas-cons > li:last-child{ border-bottom:none;padding-bottom:0; }
.atlas-pros > li::before,
.atlas-cons > li::before{
position:absolute;left:0;top:.6rem;
font-weight:700;font-size:.95rem;line-height:1.6;
}
.atlas-pros > li::before{ content:"\2713";color:var(--ok); }
.atlas-cons > li::before{ content:"\2717";color:var(--ko); }
.atlas-pros > li strong,
.atlas-cons > li strong{ color:var(--fg);font-weight:600; }
/* Variante neutre : liste a puces de marque, sans jugement
(« profil ideal », « a savoir avant de payer »…). */
.atlas-points{ list-style:none;padding:0;margin:0 0 1.25rem; }
.atlas-points > li{
position:relative;padding:.6rem 0 .6rem 1.9rem;
border-bottom:1px solid rgba(255,255,255,0.05);
color:var(--prose-fg,#c9d3e6);font-size:.92rem;line-height:1.6;
}
.atlas-points > li:last-child{ border-bottom:none;padding-bottom:0; }
.atlas-points > li::before{
content:"";position:absolute;left:.25rem;top:1.15rem;
width:.45rem;height:.45rem;border-radius:50%;background:var(--grad);
}
.atlas-points > li strong{ color:var(--fg);font-weight:600; }
/* ------------------------------------------------------------
9 bis. POIDS DE LA GRILLE DE NOTATION
Barres horizontales : critere, poids visualise, pourcentage.
Le poids est porte par une classe (.is-w20 … .is-w6) et non par
un style inline : la valeur reste dans le HTML, le design reste
ici. Les largeurs sont relatives au poids le plus lourd (20 %).
------------------------------------------------------------ */
.atlas-weights{ display:flex;flex-direction:column;gap:.6rem;margin:1.75rem 0 .6rem; }
.atlas-weight{
display:grid;grid-template-columns:minmax(7rem,11rem) 1fr auto;
align-items:center;gap:.9rem;
}
.atlas-weight-label{ font-size:.86rem;color:var(--fg);font-weight:600;line-height:1.3; }
.atlas-weight-value{
font-family:var(--font-display);font-size:.82rem;font-weight:700;
color:var(--gold);min-width:2.4rem;text-align:right;
}
.atlas-weight-bar{
position:relative;height:.5rem;border-radius:999px;
background:rgba(255,255,255,0.06);border:1px solid var(--border);
}
.atlas-weight-bar::after{
content:"";position:absolute;top:-1px;bottom:-1px;left:-1px;
border-radius:999px;background:var(--grad);
box-shadow:0 4px 14px -6px rgba(var(--brand-rgb),0.9);
}
.atlas-weight.is-w20 .atlas-weight-bar::after{ width:100%; }
.atlas-weight.is-w12 .atlas-weight-bar::after{ width:60%; }
.atlas-weight.is-w10 .atlas-weight-bar::after{ width:50%; }
.atlas-weight.is-w8 .atlas-weight-bar::after{ width:40%; }
.atlas-weight.is-w6 .atlas-weight-bar::after{ width:30%; }
@media(max-width:560px){
.atlas-weight{ grid-template-columns:1fr auto;gap:.4rem .75rem; }
.atlas-weight-bar{ grid-column:1 / -1;order:3; }
}
/* ------------------------------------------------------------
10. GRILLE AVANTAGES / INCONVENIENTS
------------------------------------------------------------ */
.atlas-compare-grid{ display:grid;grid-template-columns:1fr;gap:1.25rem;margin:1.5rem 0 2rem; }
@media(min-width:768px){ .atlas-compare-grid{ grid-template-columns:1fr 1fr; } }
.atlas-compare-card{
border-radius:14px;border:1px solid var(--border);background:var(--card);
box-shadow:var(--shadow-card);padding:1.35rem;
}
.atlas-compare-card.is-pros{ border-color:rgba(var(--ok-rgb),0.28); }
.atlas-compare-card.is-cons{ border-color:rgba(var(--ko-rgb),0.28); }
.atlas-compare-title{
font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--fg);
margin:0 0 .85rem;display:flex;align-items:center;gap:.5rem;
}
.atlas-compare-card.is-pros .atlas-compare-title::before{ content:"\2713";color:var(--ok);font-size:1.05rem; }
.atlas-compare-card.is-cons .atlas-compare-title::before{ content:"\2717";color:var(--ko);font-size:1.05rem; }
.atlas-compare-card .atlas-pros,
.atlas-compare-card .atlas-cons{ margin-bottom:0; }
/* ------------------------------------------------------------
11. VERDICT FINAL
------------------------------------------------------------ */
.atlas-final-verdict{
position:relative;overflow:hidden;
border-radius:16px;border:1px solid var(--border-brand);
background:linear-gradient(160deg,rgba(var(--brand-rgb),0.11),rgba(var(--brand2-rgb),0.05));
box-shadow:var(--shadow-card);
padding:1.75rem;margin:2rem 0;
}
.atlas-final-verdict-label{
font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
color:var(--brand);margin-bottom:.85rem;
}
.atlas-final-verdict p{ color:var(--prose-fg,#c9d3e6);font-size:.96rem;line-height:1.75;margin:0 0 1rem; }
.atlas-final-verdict p:last-child{ margin-bottom:0; }
/* ------------------------------------------------------------
12. DIVULGATION DE FIN
------------------------------------------------------------ */
.atlas-disclaimer{
border-radius:12px;border:1px solid var(--border);
background:rgba(255,255,255,0.025);
padding:1rem 1.15rem;margin:2rem 0 0;
font-size:.78rem;line-height:1.65;color:var(--fg-muted);
}
.atlas-disclaimer a{ color:var(--brand-tint);text-decoration:underline;text-underline-offset:.15em; }
/* ------------------------------------------------------------
13. ENCART DE NOTE (colonne de droite)
Le sticky est declare dans le bloc responsive du §1.
------------------------------------------------------------ */
.atlas-score-card{
border-radius:16px;border:1px solid var(--border);background:var(--card);
box-shadow:var(--shadow-card);padding:1.35rem;
}
.atlas-score-card-label{
font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
color:var(--gold);margin-bottom:.55rem;
}
.atlas-score-line{ display:flex;align-items:baseline;gap:.25rem;margin-bottom:.6rem; }
.atlas-score-big{ font-family:var(--font-display);font-size:2.6rem;font-weight:800;color:var(--gold);line-height:1; }
.atlas-score-denom{ font-size:.9rem;font-weight:700;color:var(--fg-muted); }
.atlas-score-card-tags{ display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.35rem; }
.atlas-score-tag{
display:inline-flex;align-items:center;padding:.22rem .55rem;border-radius:7px;
background:rgba(255,255,255,0.045);border:1px solid var(--border);
color:var(--fg-muted);font-size:.66rem;font-weight:600;
}
.atlas-score-card .atlas-review-cta{ margin:.9rem 0 0;padding:.8rem 1rem;font-size:.85rem; }
.atlas-score-card .atlas-cta-note{ margin:.5rem 0 0; }
/* Bloc « a lire aussi » en pied d'encart */
.atlas-side-links{ margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border); }
.atlas-side-label{
font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
color:var(--fg-muted);margin-bottom:.6rem;
}
/* Le de l'encart n'a pas de classe : `.entry-content ul:not([class])` de
prose.css (0-2-1) battait un `.atlas-side-links ul` (0-1-1) et lui rendait
puces disc et retrait. On monte a (0-2-1) ; review.css etant charge apres
prose.css, l'egalite se tranche en sa faveur. */
.atlas-score-card .atlas-side-links ul{ list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem; }
.atlas-score-card .atlas-side-links li{ margin:0;padding:0; }
.atlas-side-links a{
display:block;font-size:.82rem;color:var(--fg-muted);text-decoration:none;transition:color .15s;
}
.atlas-side-links a:hover{ color:var(--brand-2); }
/* Retour au classement : dernier lien, mis en avant */
.atlas-side-links a.is-back{ color:var(--brand-tint);font-weight:600; }
/* ------------------------------------------------------------
14. ENCART DE GUIDE
Un guide ne juge pas un produit : son encart n'affiche pas de
note unique mais un bloc thematique (ou part l'argent, les
plus genereux en gratuit, comparatif rapide…).
------------------------------------------------------------ */
.atlas-side-list{ display:flex;flex-direction:column;gap:.55rem;margin:.9rem 0 0; }
.atlas-side-item{
display:flex;align-items:center;justify-content:space-between;gap:.75rem;
padding:.5rem .75rem;border-radius:9px;
background:rgba(255,255,255,0.04);border:1px solid var(--border);
}
.atlas-side-item > span:first-child{ font-size:.8rem;font-weight:600;color:var(--fg); }
.atlas-side-item > span:last-child{ font-size:.68rem;font-weight:700;white-space:nowrap; }
.atlas-side-item.is-high{ border-color:rgba(var(--ko-rgb),0.3); }
.atlas-side-item.is-high > span:last-child{ color:var(--ko); }
.atlas-side-item.is-mid > span:last-child{ color:var(--gold-tint); }
.atlas-side-item.is-low{ background:rgba(var(--ok-rgb),0.09);border-color:rgba(var(--ok-rgb),0.3); }
.atlas-side-item.is-low > span:last-child{ color:var(--ok); }
/* ------------------------------------------------------------
15. FAQ
Rien a redefinir : les pages d'avis reutilisent .faq / .faq-item
/ .faq-btn / .faq-chevron / .faq-answer de atlas.css, et la
fonction globale atlasToggleFaq() de assets/atlas.js.
Seul ajout : un peu d'air avant le bloc dans un article.
------------------------------------------------------------ */
.atlas-review-content .faq{ margin:1.5rem 0 2rem; }
/* ------------------------------------------------------------
15 bis. REPRISE DE MAIN SUR LES DEFAUTS REDACTIONNELS
Trois composants contiennent des elements SANS classe : le du
resume, le / de l'encart, le de la signature. Les regles
`:not([class])` de prose.css et style.css (0-2-1) les capturaient et
battaient les regles du design system (0-1-1). On remonte a (0-2-1) ou
plus : review.css etant charge apres, l'egalite se tranche en sa faveur.
------------------------------------------------------------ */
/* Le tableau du resume n'est pas un tableau redactionnel : c'est une liste
libelle/valeur qui doit s'empiler. Sous 640 px, prose.css lui appliquait le
`display:block; overflow-x:auto; white-space:nowrap` reserve aux vrais
tableaux larges : la carte devenait une bande a faire defiler au doigt,
1213 px de contenu dans 411 px de large. On la laisse s'adapter.
`.atlas-summary th` garde son propre `white-space:nowrap` : c'est voulu,
la colonne de libelles tient sur une ligne. */
@media(max-width:640px){
.atlas-review-content .atlas-summary table{
display:table;overflow-x:visible;white-space:normal;
}
}
/* Signature et encart : liens du design system, pas des liens de corps de
texte. Ni soulignement ni couleur de lien. */
.atlas-review-content .atlas-review-byline-text a{ color:inherit;text-decoration:none; }
.atlas-review-content .atlas-review-byline-text a:hover{ color:var(--brand-2); }
.atlas-score-card .atlas-side-links a{ color:var(--fg-muted);text-decoration:none; }
.atlas-score-card .atlas-side-links a:hover{ color:var(--brand-2); }
.atlas-score-card .atlas-side-links a.is-back{ color:var(--brand-tint);font-weight:600; }
/* ------------------------------------------------------------
16. AJUSTEMENTS MOBILE
------------------------------------------------------------ */
@media(max-width:520px){
.atlas-review-cta{ font-size:.9rem;padding:.85rem 1rem; }
.atlas-verdict-box,
.atlas-final-verdict,
.atlas-score-card,
.atlas-compare-card{ padding:1.15rem; }
.atlas-verdict-score{ font-size:1.8rem; }
.atlas-score-big{ font-size:2.2rem; }
.atlas-summary th,
.atlas-summary td{ padding:.5rem .75rem; }
}