/* AI Shortlist : surcharges Bootstrap (extrait du layout le 19/07/2026).
   Couleur de marque extraite du logo : mauve orchidée #ba41af. */
:root { --brand: #ba41af; --brand-dark: #9c3193; --brand-soft: #f9e8f7; --brand-faint: #fdf6fc; }
body { color: #1e1b2e; }
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; }
.btn-brand { background: var(--brand); color: #fff; border-radius: .6rem; }
.btn-brand:hover { background: var(--brand-dark); color: #fff; }
.btn-brand-soft { background: var(--brand-soft); color: var(--brand); border-radius: .6rem; font-weight: 600; }
.btn-brand-soft:hover { background: #f3d6ee; color: var(--brand-dark); }
.btn-outline-brand { border: 1px solid #ddd; color: #1e1b2e; border-radius: .6rem; background: #fff; }
.btn-outline-brand:hover { border-color: var(--brand); color: var(--brand); }
.navbar-brand img { height: 95px; }
@media (max-width: 991px) { .navbar-brand img { height: 91px; } }
.footer-logo { height: 56px; }
@media (max-width: 991px) { .footer-logo { height: 84px; } }
.nav-link { color: #333; }
.nav-link.active { color: var(--brand); font-weight: 600; }
.hero { background: linear-gradient(180deg, #f9e2f5 0%, #fcf1fa 60%, #fff 100%); position: relative; overflow: hidden; }
.hero .sparkle { position: absolute; color: #ecbfe5; font-size: 2rem; user-select: none; }
.tool-card { border: 1px solid #ececf1; border-radius: 1rem; background: #fff; transition: box-shadow .15s, transform .15s; }
.tool-card:hover { box-shadow: 0 10px 30px rgba(186,65,175,.12); transform: translateY(-2px); }
/* Grande carte de section (fiche outil) : même cadre que .tool-card mais statique (pas d'effet de survol) */
.section-card { border: 1px solid #ececf1; border-radius: 1.25rem; background: #fff; }
.badge-featured { background: var(--brand); color: #fff; }
.chip { background: #f4f4f7; color: #444; border-radius: 999px; font-size: .78rem; padding: .25rem .7rem; }
.free-plan { color: #16a34a; font-size: .85rem; font-weight: 500; }
.logo-tile { width: 56px; height: 56px; border-radius: .9rem; object-fit: cover; background: #f6f4fb; }
.cat-card { border: 1px solid #ececf1; border-radius: 1rem; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cat-card:hover { border-color: var(--brand); box-shadow: 0 6px 20px rgba(186,65,175,.10); }
.cat-card svg { width: 34px; height: 34px; color: var(--brand); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.section-head h2 { display: flex; align-items: center; gap: .5rem; margin: 0; }
.section-head h2 svg { width: 22px; height: 22px; color: var(--brand); }
.view-all { color: var(--brand); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.view-all:hover { color: var(--brand-dark); }
.rating-bar { height: 8px; border-radius: 999px; background: #eee; overflow: hidden; }
.rating-bar > span { display: block; height: 100%; background: var(--brand); }
.star-rating { display: inline-flex; flex-direction: row-reverse; }
.star-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rating label { font-size: 1.6rem; line-height: 1; color: #ddd; cursor: pointer; padding: 0 .05rem; }
.star-rating label:hover, .star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: #f5b301; }
footer a { color: #555; text-decoration: none; font-size: .9rem; }
footer a:hover { color: var(--brand); }
/* Liens des contenus éditoriaux (articles, catégories) : couleur de marque, pas le bleu navigateur */
.article-content a, .category-content a { color: var(--brand); }
.article-content a:hover, .category-content a:hover { color: var(--brand-dark); }
/* Tableaux des contenus éditoriaux (articles, catégories) : bordures douces, en-tête teinté */
.article-content table, .category-content table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .95rem; }
.article-content th, .article-content td, .category-content th, .category-content td { border: 1px solid #ececf1; padding: .5rem .75rem; text-align: left; vertical-align: top; }
.article-content th, .category-content th { background: var(--brand-faint); font-weight: 600; }
/* Contenu éditorial des pages catégories (carte blanche sur bande teintée) :
   sous-titres compacts, paragraphes gris doux, dernier paragraphe sans marge */
.category-content h2, .category-content h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.category-content h2:first-child, .category-content h3:first-child { margin-top: 0; }
.category-content p { color: #6c757d; }
.category-content p:last-child { margin-bottom: 0; }
/* Mention d'affiliation (fiche outil) : discrète, sans encadré — 10 % sous .small, gris clair */
.affiliate-note { font-size: .79rem; color: #9aa1a9; }
/* Intitulés de colonnes du footer : rendu d'un h6 sans balise heading (plan de titres propre) */
.footer-heading { font-size: .85rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.2; }
.social-btn { width: 34px; height: 34px; border: 1px solid #e5e5ea; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #555; }
.social-btn:hover { color: var(--brand); border-color: var(--brand); }
.social-btn svg { width: 16px; height: 16px; }
/* Badge « Vérifié par l'équipe » : fond doux + liseré pour se distinguer du badge « À la une » (plein) */
.badge-verified { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid var(--brand); display: inline-flex; align-items: center; gap: .3rem; }
.badge-verified svg { width: 14px; height: 14px; }
/* Picto « vérifié » sur les cartes des listings, à côté du nom */
.verified-mark { color: var(--brand); vertical-align: -2px; }
.verified-mark svg { width: 18px; height: 18px; }
/* Carte « L'avis d'AI Shortlist » (pleine largeur, entre Cas d'usage et Notes) :
   fond légèrement teinté + filet gauche mauve pour signer la parole de l'équipe */
.review-card { background: var(--brand-faint); border-left: 4px solid var(--brand); }
.review-card h3 { font-size: 1.05rem; font-weight: 700; margin-top: 1.25rem; }
/* Bloc « Explorer d'autres catégories » en bas des pages catégories (maillage
   interne) : intitulé petites capitales mauves + liens texte en colonnes qui
   s'équilibrent seules (column-count), pictos heroicon des catégories. */
.explore-more-label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-dark); font-weight: 600; margin-bottom: .9rem; }
.explore-more-columns { column-count: 3; column-gap: 1.75rem; }
@media (max-width: 991.98px) { .explore-more-columns { column-count: 2; } }
@media (max-width: 575.98px) { .explore-more-columns { column-count: 1; } }
.explore-more-item { break-inside: avoid; display: flex; align-items: center; gap: .45rem; line-height: 2.05; font-size: .9rem; }
.explore-more-item a { color: #2b3648; text-decoration: none; }
.explore-more-item a:hover { color: var(--brand); text-decoration: underline; }
.explore-more-count { color: #adb5bd; font-size: .85rem; }
/* Accordéons (FAQ articles + /submit) : recoloration charte du défaut Bootstrap
   (bouton ouvert bleu générique → mauve de marque sur fond brand-faint). */
.accordion-button { font-weight: 600; }
.accordion-button:not(.collapsed) { color: var(--brand-dark); background: var(--brand-faint); box-shadow: none; }
.accordion-button:focus { border-color: var(--brand-soft); box-shadow: 0 0 0 .2rem rgba(186, 65, 175, .15); }
.accordion-button:not(.collapsed)::after { filter: hue-rotate(115deg) saturate(2); }
.faq-accordion .accordion-body { font-size: .95rem; }
.faq-accordion .accordion-body p:last-child { margin-bottom: 0; }
/* Blocs de code des articles (gabarits de prompts...) : encadré charte qui
   sort du lot, police monospace du navigateur conservée. */
.article-content pre { background: var(--brand-faint); border: 1px solid var(--brand-soft); border-left: 4px solid var(--brand); border-radius: .75rem; padding: 1rem 1.25rem; overflow-x: auto; }
.article-content pre code { color: #2b3648; font-size: .875rem; line-height: 1.7; white-space: pre-wrap; }
/* Section Éditeurs, index (créa client 23/07) : pastilles rubriques, liste
   verticale d'articles, sidebar (newsletter, rubriques, À lire). */
.pub-pills a { display: inline-block; padding: .35rem 1.1rem; border-radius: 2rem; border: 1px solid #ececf1; background: #fff; color: #2b3648; text-decoration: none; font-size: .9rem; }
.pub-pills a:hover { border-color: var(--brand); color: var(--brand); }
.pub-pills a.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pub-row { display: flex; gap: 1.25rem; align-items: center; padding: 1.25rem; color: inherit; text-decoration: none; transition: background .15s; }
.pub-row:hover { background: var(--brand-faint); }
.pub-row + .pub-row { border-top: 1px solid #ececf1; }
.pub-thumb { width: 170px; height: 110px; object-fit: cover; border-radius: .75rem; flex-shrink: 0; }
.pub-thumb-ph { width: 170px; height: 110px; border-radius: .75rem; flex-shrink: 0; background: linear-gradient(135deg, var(--brand-soft), #fff); display: flex; align-items: center; justify-content: center; color: var(--brand); }
.pub-thumb-ph svg { width: 30px; height: 30px; }
.pub-side-item { display: flex; gap: .75rem; align-items: center; text-decoration: none; color: inherit; }
.pub-side-item:hover .pub-side-title { color: var(--brand); }
.pub-side-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: .6rem; flex-shrink: 0; }
.pub-side-ph { width: 56px; height: 56px; border-radius: .6rem; flex-shrink: 0; background: linear-gradient(135deg, var(--brand-soft), #fff); display: flex; align-items: center; justify-content: center; color: var(--brand); }
.pub-side-ph svg { width: 22px; height: 22px; }
.pub-side-title { font-size: .9rem; font-weight: 600; line-height: 1.3; color: #2b3648; }
@media (max-width: 575.98px) {
    .pub-row { flex-direction: column; align-items: flex-start; }
    .pub-thumb, .pub-thumb-ph { width: 100%; height: 160px; }
}
/* Statut « Solution fermée » (24/07) : bandeau de la fiche d'un outil fermé.
   Tons d'alerte doux (hors charte mauve : c'est une information d'état, pas de
   la marque), remplace le bouton « Visiter le site ». */
.closed-banner { background: #fdf3f2; border: 1px solid #f2c6c2; border-left: 4px solid #c0392b; border-radius: .75rem; padding: 1rem 1.25rem; color: #7c2d26; max-width: 560px; }
.closed-banner svg { width: 20px; height: 20px; vertical-align: -4px; margin-right: .25rem; }
.closed-banner a { color: #7c2d26; font-weight: 600; }