/* Copie légère de /assets/phare-preuve.css (commentaires retirés) — tools/prod-css-purge.mjs — source-sha1:a65e2f8d5cf18a47ad278f3f946e3344062e4deb — ne pas éditer, relancer l'outil. */
.preuve-zone{container-type: inline-size;}
.preuve{--pv-police: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --pv-encre: #0F1729;
    --pv-doux: #475467;
    
    --pv-mute: #5B6576;
    --pv-filet: #E9EDF2;
    --pv-accent: var(--burgundy, #7B2D3B);
    --pv-accent-pale: #F6EFF0;

    position: relative;
    isolation: isolate;
    --pv-pad: clamp(18px, 2.4cqi, 24px);

    display: grid;
    gap: 18px;
    
    margin-top: clamp(22px, 2.4vw, 32px);
    margin-inline: calc(-1 * var(--pv-pad));
    padding: var(--pv-pad);
    border: 1px solid var(--pv-filet);
    border-radius: 16px;
    
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFD 100%);
    font-family: var(--pv-police);
    
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(15, 23, 41, 0.05),
        0 5px 12px -5px rgba(15, 23, 41, 0.12),
        0 20px 38px -18px rgba(15, 23, 41, 0.30),
        0 48px 88px -50px rgba(15, 23, 41, 0.45);}
@container (min-width: 500px){
.preuve{grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
        gap: 24px;}
.preuve-chiffre{padding-left: 24px; border-left: 1px solid var(--pv-filet);}
}
.preuve-sur{margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pv-mute);}
.preuve-titre{margin: 0 0 6px;
    font-family: var(--pv-police);
    font-size: clamp(1.25rem, 3.2cqi, 1.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.032em;
    color: var(--pv-encre);}
.preuve-texte{margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--pv-doux);
    
    text-wrap: balance;}
.preuve-gens{display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    
    margin-bottom: 22px;}
.preuve-tetes{display: flex; flex-shrink: 0;}
.preuve-tete{display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pv-accent-pale);
    box-shadow: 0 0 0 2px #FFFFFF, 0 1px 4px -1px rgba(15, 23, 41, 0.3);}
.preuve-tete + .preuve-tete{margin-left: -9px;}
.preuve-tete svg{display: block; width: 100%; height: 100%;}
.preuve-gens-txt{margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--pv-mute);}
.preuve-lien{display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--pv-encre);
    text-decoration: none;}
.preuve-lien svg{flex-shrink: 0; transition: translate 0.2s var(--ease-out-soft, ease);}
.preuve-lien:hover{color: var(--pv-accent);}
.preuve-lien:hover svg{translate: 4px 0;}
.preuve-lien:focus-visible{outline: 2px solid var(--pv-accent);
    outline-offset: 4px;
    border-radius: 4px;}
.preuve-dire{display: flex; flex-direction: column;}
.preuve-lien{margin-top: auto;}
.preuve-chiffre{display: flex; flex-direction: column;}
.preuve-nb{margin: 0;
    font-size: clamp(1.875rem, 5cqi, 2.375rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--pv-encre);
    font-variant-numeric: tabular-nums;}
.preuve-nb-txt{margin: 6px 0 0;
    font-size: 0.875rem;
    color: var(--pv-doux);}
.preuve-graph{position: relative;
    margin-top: auto;
    padding-top: 30px;}
.preuve-barres{display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 42px;}
.preuve-bulle{position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--pv-accent-pale);
    color: var(--pv-accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: 0 6px 14px -8px rgba(123, 45, 59, 0.55);
    animation: pvPose 0.45s 0.42s var(--ease-out-soft, ease) both;}
.preuve-bulle::after{content: "";
    position: absolute;
    right: 12px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--pv-accent-pale);
    rotate: 45deg;}
.preuve-fleche{position: absolute;
    top: 12px;
    right: clamp(52px, 11cqi, 74px);
    color: var(--pv-accent);
    opacity: 0.5;
    animation: pvPose 0.45s 0.5s var(--ease-out-soft, ease) both;}
@keyframes pvPose{
    from { opacity: 0; translate: 0 5px; }
    to { opacity: 1; translate: 0 0; }
}
.preuve-barres span{flex: 1;
    height: var(--h, 40%);
    border-radius: 4px;
    background: linear-gradient(180deg, #FBF4F5 0%, var(--pv-accent-pale) 100%);
    transform-origin: bottom center;
    animation: pvMonte 0.6s var(--ease-out-soft, ease) both;}
.preuve-barres span:nth-child(1){animation-delay: 0.05s;}
.preuve-barres span:nth-child(2){animation-delay: 0.1s;}
.preuve-barres span:nth-child(3){animation-delay: 0.15s;}
.preuve-barres span:nth-child(4){animation-delay: 0.2s;}
.preuve-barres span:nth-child(5){animation-delay: 0.25s;}
.preuve-barres span:nth-child(6){animation-delay: 0.3s;}
.preuve-barres .preuve-barre-on{background: linear-gradient(180deg, var(--pv-accent) 0%, var(--burgundy-dark, #5E1F2C) 100%);
    box-shadow: 0 6px 14px -6px rgba(123, 45, 59, 0.55);}
@keyframes pvMonte{
    from { transform: scaleY(0.06); opacity: 0.4; }
    to { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
.preuve-barres span,.preuve-bulle,.preuve-fleche{animation: none;}
.preuve-lien svg{transition: none;}
.preuve-lien:hover svg{translate: 0 0;}
}
@media (max-width: 1040px){
.preuve{margin-inline: 0;
        margin-top: clamp(26px, 4vw, 40px);}
}
@media (max-width: 700px){
.preuve-zone{display: none;}
}
.preuve::before{content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 58%),
        radial-gradient(80% 70% at 2% 8%, rgba(123, 45, 59, 0.05) 0%, rgba(123, 45, 59, 0) 62%);
    pointer-events: none;}
.preuve-tete{position: relative;
    box-shadow:
        0 0 0 2px #FFFFFF,
        0 1px 2px rgba(15, 23, 41, 0.18),
        0 6px 12px -6px rgba(15, 23, 41, 0.45);}
.preuve-tete + .preuve-tete{margin-left: -11px;
    z-index: 1;
    box-shadow:
        0 0 0 2px #FFFFFF,
        -3px 0 8px -4px rgba(15, 23, 41, 0.35),
        0 6px 12px -6px rgba(15, 23, 41, 0.45);}
.preuve-tete::after{content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.7),
        inset 0 -2px 5px rgba(15, 23, 41, 0.09);
    pointer-events: none;}
.preuve-lien{padding: 8px 14px;
    border: 1px solid var(--pv-filet);
    border-radius: 9px;
    background: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(15, 23, 41, 0.04),
        0 6px 14px -10px rgba(15, 23, 41, 0.32);
    transition:
        box-shadow 0.18s var(--ease-out-soft, ease),
        border-color 0.18s var(--ease-out-soft, ease),
        translate 0.18s var(--ease-out-soft, ease);}
.preuve-lien:hover{border-color: #D9DEE7;
    translate: 0 -1px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 4px rgba(15, 23, 41, 0.06),
        0 14px 26px -14px rgba(15, 23, 41, 0.5);}
@media (prefers-reduced-motion: reduce){
.preuve-lien{transition: none;}
.preuve-lien:hover{translate: 0 0;}
}
.preuve-sur{color: var(--pv-accent); opacity: 0.72;}
.preuve-fort{color: var(--pv-accent);}
.preuve-fort-doux{color: var(--pv-encre);}
.preuve-plus{color: var(--pv-accent);}
.preuve-drapeau{display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    margin-top: auto;
    padding-top: 16px;}
.preuve-drapeau-svg{display: block;
    flex: none;
    width: 44px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.14), 0 10px 20px -10px rgba(15, 23, 41, 0.42);
    transform-origin: 20% 60%;}
@media (prefers-reduced-motion: no-preference){
.preuve-drapeau-svg{animation: pvDrapeauPose 1.1s 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;}
.preuve-drapeau-reflet{animation: pvDrapeauReflet 7s 1.8s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;}
}
@keyframes pvDrapeauPose{
    0% { opacity: 0; rotate: -10deg; scale: 0.82; }
    65% { opacity: 1; rotate: 2deg; scale: 1.02; }
    100% { rotate: 0deg; scale: 1; }
}
@keyframes pvDrapeauReflet{
    0%, 70% { transform: translateX(0); }
    100% { transform: translateX(180px); }
}