/* ============================================================
   Fiches détaillées des robots et agents IA — thème parme clair,
   illustrations et effets d'apparition.
   S'applique aux pages portant <body class="fiche-claire"> ; chargé après blog.css (lecture seule).
   ============================================================ */

body.fiche-claire {
    background: linear-gradient(180deg, #F6F1FE 0%, #EDE4FA 52%, #E5D9F7 100%) fixed;
    color: #3A2E63;
}

/* variables sombres du thème blog -> tons parme, uniquement dans le contenu (le menu reste sombre) */
body.fiche-claire .blog-article,
body.fiche-claire .blog-listing,
body.fiche-claire .blog-cta,
body.fiche-claire .blog-header {
    --dark-900: transparent;
    --dark-800: #FFFFFF;
    --dark-700: #F1E9FC;
    --dark-600: #D9CCF3;
    --gray-300: #43386E;
    --gray-400: #625887;
    --gray-500: #80779F;
    --violet-light: #6C42E6;
}

body.fiche-claire .blog-article,
body.fiche-claire .blog-listing { background: transparent; }

/* ---------- texte de la fiche ---------- */
body.fiche-claire .blog-article-content { color: #43386E; }
body.fiche-claire .blog-article-content h1 { color: #2B1C63; }
body.fiche-claire .blog-article-content h2 { color: #2B1C63; }
body.fiche-claire .blog-article-content h3 { color: #6C42E6; }
body.fiche-claire .blog-article-content strong { color: #2B1C63; }
body.fiche-claire .blog-article-content a { color: #6C42E6; }
body.fiche-claire .blog-article-content a:hover { color: #4B2BB8; }
/* les boutons gardent leurs couleurs d'origine (texte blanc sur fond plein, violet sur contour) */
body.fiche-claire .blog-article-content a.btn-primary,
body.fiche-claire .blog-article-content a.btn-primary:hover,
body.fiche-claire .blog-article-cta a.btn-primary { color: #FFFFFF; }
body.fiche-claire .blog-article-content a.btn-outline,
body.fiche-claire .blog-article-cta a.btn-outline { color: #6C42E6; border-color: #8B5CF6; }
body.fiche-claire .blog-article-content a.btn-outline:hover,
body.fiche-claire .blog-article-cta a.btn-outline:hover { color: #FFFFFF; background: #7C5CFC; }
body.fiche-claire .blog-article-content code {
    background: #E8DDFA; color: #4A2DB0; padding: 2px 7px; border-radius: 6px; font-size: .92em;
}
body.fiche-claire .blog-article-meta { color: #80779F; border-bottom-color: #D9CCF3; }
body.fiche-claire .blog-back a { color: #6C42E6; }
body.fiche-claire p.silo-breadcrumb,
body.fiche-claire p.silo-breadcrumb a { color: #6C42E6 !important; }
body.fiche-claire .blog-article-content blockquote {
    background: #FFFFFF; border-left-color: #8B5CF6; color: #43386E;
    box-shadow: 0 8px 26px rgba(108, 66, 230, .10);
}
body.fiche-claire .blog-article-content table { background: #fff; border-radius: 10px; overflow: hidden; }
body.fiche-claire .blog-article-content th { background: #E8DDFA; color: #2B1C63; }
body.fiche-claire .blog-article-content td { border-bottom-color: #E6DBF7; }
body.fiche-claire .blog-article-content tr:nth-child(even) { background: #F8F4FE; }

/* ---------- encart d'appel à l'action ---------- */
body.fiche-claire .blog-article-cta {
    background: linear-gradient(135deg, #FFFFFF, #EFE6FC);
    border: 1px solid #B79CF5;
    box-shadow: 0 16px 44px rgba(108, 66, 230, .14);
}
body.fiche-claire .blog-article-cta h3 { color: #2B1C63 !important; }
body.fiche-claire .blog-article-cta p { color: #5B5080; }

/* ---------- pied de page ---------- */
body.fiche-claire .blog-footer { background: #DCCFF3; color: #5B5080; }
body.fiche-claire .blog-footer a { color: #5B34D6; }

/* ---------- page « Tous les robots » ---------- */
body.fiche-claire .blog-header { background: linear-gradient(135deg, #EDE3FB 0%, #E1D2F7 100%); }
body.fiche-claire .blog-header h1 { color: #2B1C63; }
body.fiche-claire .blog-header-sub { color: #5B5080; }
body.fiche-claire .blog-card {
    background: #FFFFFF; border: 1px solid #DCCFF3; box-shadow: 0 8px 26px rgba(108, 66, 230, .08);
}
body.fiche-claire .blog-card:hover { border-color: #8B5CF6; box-shadow: 0 16px 44px rgba(108, 66, 230, .18); }
body.fiche-claire .blog-card h2 { color: #2B1C63; }
body.fiche-claire .blog-card p { color: #5B5080; }
body.fiche-claire .blog-card-tag { color: #6C42E6; }
body.fiche-claire .blog-card-meta { color: #80779F; }

/* ---------- illustrations ---------- */
.fiche-fig {
    margin: 30px 0;
    background: #FFFFFF;
    border: 1px solid #D9CCF3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(88, 56, 180, .16);
}
.fiche-fig img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.fiche-fig figcaption {
    padding: 13px 18px; font-size: .9rem; line-height: 1.5; color: #5B5080;
    background: #FAF7FF; border-top: 1px solid #EADFF8;
}
.fiche-fig figcaption strong { color: #2B1C63; }

/* illustration pleine largeur : sort de la colonne de texte (740 px) jusqu'à 980 px */
.fiche-fig--large,
.fiche-galerie--large {
    width: min(980px, calc(100vw - 32px));
    margin-left: calc((100% - min(980px, calc(100vw - 32px))) / 2);
}

.fiche-galerie { display: grid; gap: 20px; margin: 28px 0; grid-template-columns: 1fr; }
.fiche-galerie .fiche-fig { margin: 0; }
.fiche-galerie--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fiche-galerie--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
    .fiche-galerie--2, .fiche-galerie--3 { grid-template-columns: 1fr; }
}
.fiche-galerie--flux .fiche-fig img { background: #fff; }

.fiche-legende-section {
    margin: -6px 0 18px; font-size: .95rem; color: #625887;
}

/* ---------- agrandissement au clic ---------- */
.fiche-lightbox {
    position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(36, 22, 80, .78); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .25s ease; cursor: zoom-out;
}
.fiche-lightbox.ouverte { opacity: 1; }
.fiche-lightbox img {
    max-width: min(1500px, 96vw); max-height: 92vh; border-radius: 14px; background: #fff;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .45); transform: scale(.96); transition: transform .25s ease;
}
.fiche-lightbox.ouverte img { transform: scale(1); }
.fiche-lightbox-fermer {
    position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%;
    border: 0; background: #fff; color: #2B1C63; font-size: 22px; line-height: 1; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* ---------- effets d'apparition : images d'abord, puis textes ---------- */
html.js-reveal .rv {
    opacity: 0;
    transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1), filter .75s ease;
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
}
html.js-reveal .rv-txt { transform: translateY(24px); }
html.js-reveal .rv-img { transform: translateY(30px) scale(.93); filter: blur(9px); }
html.js-reveal .rv.in { opacity: 1; transform: none; filter: none; }

/* petit effet de relief au survol des illustrations */
@media (hover: hover) {
    .fiche-fig { transition: transform .35s ease, box-shadow .35s ease; }
    .fiche-fig:hover { transform: translateY(-4px); box-shadow: 0 26px 64px rgba(88, 56, 180, .24); }
}

@media (prefers-reduced-motion: reduce) {
    html.js-reveal .rv { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
    .fiche-fig:hover { transform: none; }
}

/* Titre (h1) des fiches robots : même taille que les sous-titres (h2 = 1.5rem), sur ordinateur comme sur mobile (consigne du 11/10/2026).
   Portée .blog-article-content : la page d'index des robots (h1 dans .blog-header) et les articles de blog ne changent pas. */
body.fiche-claire .blog-article-content h1 { font-size: 1.5rem; line-height: 1.3; }