/* =================================================================
   ANIMATIONS D'ENTR\u00c9E (1.21.5 — apparition douce au load)
   ================================================================= */
@keyframes po-fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.po-hero-inner > * {
    animation: po-fade-in-up .6s ease-out backwards;
}
.po-hero-inner > .po-hero-eyebrow         { animation-delay: .05s; }
.po-hero-inner > h1                       { animation-delay: .15s; }
.po-hero-inner > .po-hero-sub             { animation-delay: .25s; }
.po-hero-inner > .po-hero-actions         { animation-delay: .35s; }
.po-hero-inner > .po-hero-trust           { animation-delay: .45s; }
.po-hero-inner > .po-hero-visual          { animation-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
    .po-hero-inner > * { animation: none; }
}

/* =================================================================
   SECTION DECOR (1.21.5 — fonds doux + stickers d\u00e9co flottants)
   ================================================================= */
.po-section-decor {
    position: relative;
    overflow: hidden;
}
/* Fond doux color\u00e9 sur sections alternatives */
.po-section-decor::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 400px 300px at 95% 5%, rgba(251,191,36,0.08), transparent 70%),
        radial-gradient(ellipse 500px 400px at 5% 95%, rgba(255,120,73,0.06), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.po-section-decor > .po-container { position: relative; z-index: 1; }

/* Stickers d\u00e9co qui d\u00e9passent (fa\u00e7on Teetsh) */
.po-decor-sticker {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 12px;
    font-family: var(--po-font-hand);
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(15,23,42,0.10);
    pointer-events: none;
}
.po-decor-sticker-1 {
    /* "Plus rapide" en haut droite */
    top: 32px;
    right: 5%;
    background: var(--po-orange);
    color: #fff;
    transform: rotate(6deg);
}
.po-decor-sticker-2 {
    /* "Tout-en-un" en haut gauche */
    top: 32px;
    left: 5%;
    background: var(--po-yellow-mark);
    color: #78350F;
    transform: rotate(-6deg);
}
/* Sur petit \u00e9cran, masquer les stickers d\u00e9co (peuvent g\u00eaner) */
@media (max-width: 900px) {
    .po-decor-sticker { display: none; }
}

/* =================================================================
   ACCENTS LUDIQUES (1.21.0) — manuscrit, surligneur, CTA orange
   ================================================================= */

/* Mot ou groupe de mots en typo manuscrite (à utiliser avec parcimonie) */
.po-hand {
    font-family: var(--po-font-hand);
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
}

/* Surligneur jaune façon marqueur scolaire (effet "highlight crayon") */
.po-mark {
    background: linear-gradient(180deg, transparent 60%, var(--po-yellow-mark) 60%, var(--po-yellow-mark) 92%, transparent 92%);
    padding: 0 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* CTA orange façon Teetsh : bouton principal très visible */
.po-btn-cta {
    background: var(--po-orange);
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(255,120,73,0.35);
    position: relative;
    overflow: hidden;
}
.po-btn-cta:hover {
    background: var(--po-orange-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255,120,73,0.50);
}
.po-btn-cta:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(255,120,73,0.35);
}

/* Pulse subtile sur le CTA principal du hero (1.21.5) */
.po-btn-cta.po-btn-lg {
    animation: po-cta-pulse 2.5s ease-in-out infinite;
}
@keyframes po-cta-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(255,120,73,0.35); }
    50%      { box-shadow: 0 6px 20px rgba(255,120,73,0.55), 0 0 0 6px rgba(255,120,73,0.08); }
}
.po-btn-cta.po-btn-lg:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .po-btn-cta.po-btn-lg { animation: none; }
}

/* Petit sticker / pastille colorée style Teetsh */
.po-sticker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--po-yellow-soft);
    color: #92400E;
    transform: rotate(-2deg);
}
.po-sticker.po-sticker-orange {
    background: #FFEDE5;
    color: #B43E18;
}
.po-sticker.po-sticker-green {
    background: #D1FAE5;
    color: #065F46;
}

/* =================================================================
   ProfOrga — Pages publiques (1.20.0)
   ================================================================= */

/* Scroll smooth quand on clique sur une ancre (#section).
   Désactivé si l'utilisateur préfère réduire les animations (accessibilité). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---------- Variables locales (s'appuie sur app.css pour --navy, --teal) ---------- */
.po-shell {
    --po-max-width: 1180px;
    --po-section-py: 96px;
    --po-radius: 14px;

    --po-text:    #0F172A;
    --po-text-2:  #334155;
    --po-muted:   #64748B;
    --po-border:  #E5E9F0;
    --po-bg:      #FBFCFD;
    --po-card:    #FFFFFF;

    /* Accents flashy (1.21.0) — inspirés Teetsh, palette propre ProfOrga */
    --po-orange:        #FF7849;  /* CTA principal, "stickers" */
    --po-orange-dark:   #E85B2A;  /* hover */
    --po-yellow-mark:   #FBBF24;  /* surligneur highlight */
    --po-yellow-soft:   #FEF3C7;  /* fond doux pour pills */

    /* Typo manuscrite scolaire */
    --po-font-hand: 'Caveat', 'Patrick Hand', 'Comic Sans MS', cursive;

    background: var(--po-bg);
    color: var(--po-text);
    min-height: 100vh;
    display: flex; flex-direction: column;
    font-family: var(--font-body), system-ui, sans-serif;
}

.po-container {
    max-width: var(--po-max-width);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

/* =================================================================
   HEADER
   ================================================================= */
.po-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--po-border);
}
.po-header-inner {
    max-width: var(--po-max-width);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex; align-items: center; gap: 24px;
}
.po-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--navy-900);
    font-family: var(--font-display); font-weight: 600;
    font-size: 19px; letter-spacing: -0.01em;
    flex-shrink: 0;
}
.po-logo img { display: block; }
.po-logo-text { line-height: 1; }
.po-logo-accent { color: var(--teal); }

.po-nav-desktop {
    flex: 1;
}
.po-nav-desktop ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 4px; justify-content: center;
}
.po-nav-link {
    display: inline-block;
    padding: 8px 14px;
    color: var(--po-text-2);
    text-decoration: none;
    font-size: 14px; font-weight: 500;
    border-radius: 8px;
    transition: color .15s, background .15s;
}
.po-nav-link:hover { color: var(--navy); background: var(--po-bg); }
.po-nav-link.is-active { color: var(--navy); font-weight: 600; }

.po-header-cta {
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
}

.po-link-discreet {
    color: var(--po-text-2);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 4px;
    transition: color .15s;
}
.po-link-discreet:hover { color: var(--navy); }

/* Burger mobile */
.po-burger {
    display: none;
    background: none; border: 1px solid var(--po-border);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    flex-direction: column; gap: 4px;
}
.po-burger span {
    display: block;
    width: 20px; height: 2px;
    background: var(--navy-900);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.po-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.po-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.po-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.po-mobile-menu {
    border-top: 1px solid var(--po-border);
    background: #fff;
    padding: 12px 24px 24px;
}
.po-mobile-menu ul {
    list-style: none; padding: 0; margin: 0;
}
.po-mobile-menu li { margin: 0; }
.po-mobile-link {
    display: block;
    padding: 14px 12px;
    color: var(--po-text);
    font-weight: 500; font-size: 15px;
    text-decoration: none;
    border-radius: 8px;
}
.po-mobile-link.is-active { color: var(--navy); font-weight: 600; background: var(--po-bg); }
.po-mobile-link-cta {
    background: var(--navy);
    color: #fff !important;
    text-align: center;
    margin-top: 4px;
}
.po-mobile-sep {
    height: 1px; background: var(--po-border);
    margin: 8px 12px;
}

@media (max-width: 880px) {
    .po-nav-desktop, .po-header-cta { display: none; }
    .po-burger { display: flex; }
}

/* =================================================================
   BOUTONS
   ================================================================= */
.po-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 600; font-size: 14.5px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
    font-family: inherit;
    line-height: 1.2;
}
.po-btn-lg { padding: 14px 28px; font-size: 15.5px; border-radius: 12px; }
.po-btn-primary {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,0.08), 0 4px 12px rgba(30,58,138,0.18);
}
.po-btn-primary:hover {
    background: var(--navy-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15,23,42,0.10), 0 8px 20px rgba(30,58,138,0.22);
}
.po-btn-outline {
    background: #fff;
    color: var(--navy);
    border-color: var(--po-border);
}
.po-btn-outline:hover {
    border-color: var(--navy);
    color: var(--navy);
}
.po-btn-accent {
    background: var(--teal);
    color: #fff;
}
.po-btn-accent:hover { filter: brightness(0.95); }

/* =================================================================
   PAGES AUTH (login, register, mot de passe, activation) — 1.20.10
   ================================================================= */
.po-auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 220px);
    padding: 48px 24px;
}

/* =================================================================
   HERO (compact 1.21.0)
   ================================================================= */
.po-hero {
    padding: 48px 0 32px;
    position: relative;
    overflow: hidden;
}
.po-hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 500px 350px at 85% 5%, rgba(255,120,73,0.10), transparent 70%),
        radial-gradient(ellipse 600px 420px at 15% 20%, rgba(20,184,166,0.13), transparent 70%),
        radial-gradient(ellipse 800px 500px at 50% 80%, rgba(30,58,138,0.06), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
/* Pastille décorative jaune en haut à droite (1.21.5) */
.po-hero::after {
    content: "";
    position: absolute;
    top: 60px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(251,191,36,0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.po-hero-inner { position: relative; z-index: 1; text-align: center; }
.po-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1px solid var(--po-border);
    color: var(--po-text-2);
    padding: 5px 13px;
    border-radius: 100px;
    font-size: 13px; font-weight: 500;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.po-hero-eyebrow .po-eyebrow-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--teal);
}

/* Variante "trust" : bouclier vert + texte rassurant (1.21.5) */
.po-hero-eyebrow-trust {
    padding: 6px 16px 6px 8px;
    gap: 10px;
    border-color: #BBF7D0;
    background: linear-gradient(135deg, #F0FDF4 0%, #fff 100%);
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 0 0 3px rgba(16,185,129,0.04);
}
.po-hero-eyebrow-trust .po-eyebrow-shield {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #10B981;
    color: #fff;
    flex-shrink: 0;
}
.po-hero-eyebrow-trust strong {
    color: #065F46;
    font-weight: 700;
}
.po-hero-eyebrow-trust .po-eyebrow-sep {
    color: #94A3B8;
    margin: 0 2px;
}
.po-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(34px, 5.4vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--navy-900);
    margin: 0 0 18px;
    max-width: 880px; margin-left: auto; margin-right: auto;
}
.po-hero h1 .po-hero-highlight { color: var(--teal); }
.po-hero-sub {
    font-size: clamp(15.5px, 1.5vw, 18px);
    line-height: 1.55;
    color: var(--po-text-2);
    max-width: 620px;
    margin: 0 auto 26px;
}
.po-hero-actions {
    display: flex; gap: 14px; justify-content: center;
    flex-wrap: wrap;
}
.po-hero-trust {
    margin-top: 22px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
    color: var(--po-muted);
    font-size: 13px;
}
.po-hero-trust span { display: inline-flex; align-items: center; gap: 6px; }

/* Visuel produit (mockup) */
.po-hero-visual {
    margin: 40px auto 0;
    max-width: 1040px;
    background: #fff;
    border: 1px solid var(--po-border);
    border-radius: 16px;
    box-shadow:
        0 10px 30px rgba(15,23,42,0.06),
        0 30px 60px rgba(15,23,42,0.08);
    padding: 6px;
    position: relative; z-index: 1;
}
.po-hero-visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* =================================================================
   SECTIONS
   ================================================================= */
.po-section { padding: var(--po-section-py) 0; }
.po-section-tight { padding: 56px 0; }
.po-section-alt { background: #fff; }
.po-section-dark {
    background: linear-gradient(180deg, #0F172A 0%, #1E3A8A 100%);
    color: #fff;
}

.po-section-head {
    text-align: center;
    max-width: 720px; margin: 0 auto 56px;
}
.po-section-eyebrow {
    color: var(--teal);
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.po-section-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--navy-900);
    margin: 0 0 16px;
    font-weight: 700;
}
.po-section-dark .po-section-title { color: #fff; }
.po-section-sub {
    color: var(--po-text-2);
    font-size: 17px; line-height: 1.6;
    margin: 0;
}
.po-section-dark .po-section-sub { color: rgba(255,255,255,0.75); }

/* =================================================================
   GRILLE FEATURES (sur home + sur /fonctionnalites)
   ================================================================= */
.po-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.po-feature-card {
    background: var(--po-card);
    border: 1px solid var(--po-border);
    border-radius: var(--po-radius);
    padding: 28px;
    text-decoration: none; color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    display: flex; flex-direction: column; gap: 14px;
}
.po-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15,23,42,0.10);
    border-color: var(--teal);
}
.po-feature-card:hover .po-feature-icon {
    transform: scale(1.08) rotate(-3deg);
}
.po-feature-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    background: var(--teal-50);
    transition: transform .25s ease;
}
.po-feature-card h3 {
    margin: 0;
    font-size: 18px; font-weight: 700;
    color: var(--navy-900);
    line-height: 1.3;
}
.po-feature-card p {
    margin: 0; flex: 1;
    color: var(--po-text-2);
    font-size: 14.5px; line-height: 1.55;
}
.po-feature-link {
    color: var(--teal);
    font-weight: 600; font-size: 13.5px;
    text-decoration: none;
}
.po-feature-link:hover { text-decoration: underline; }

/* =================================================================
   GRILLE BÉNÉFICES (problème → solution)
   ================================================================= */
.po-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}
/* Variante 3 colonnes fixes (évite la 3e tuile orpheline sur viewport moyen) */
.po-benefits-3 {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) {
    .po-benefits-3 { grid-template-columns: 1fr; }
}
.po-benefit {
    text-align: left;
    background: #fff;
    border: 1px solid var(--po-border);
    border-radius: 16px;
    padding: 28px 26px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
}
.po-benefit:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15,23,42,0.10);
    border-color: #C7D2DD;
}
.po-benefit-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 18px;
    font-family: var(--font-display);
    box-shadow: 0 4px 12px rgba(30,58,138,0.25);
}
/* Variantes colorées des numéros pour différencier les bénéfices */
.po-benefit:nth-child(1) .po-benefit-num {
    background: linear-gradient(135deg, var(--po-orange) 0%, var(--po-orange-dark) 100%);
    box-shadow: 0 4px 12px rgba(255,120,73,0.30);
}
.po-benefit:nth-child(2) .po-benefit-num {
    background: linear-gradient(135deg, var(--teal) 0%, #0F766E 100%);
    box-shadow: 0 4px 12px rgba(20,184,166,0.30);
}
.po-benefit:nth-child(3) .po-benefit-num {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%);
    box-shadow: 0 4px 12px rgba(30,58,138,0.25);
}
.po-benefit h3 {
    margin: 0 0 10px;
    font-size: 18px; font-weight: 700;
    color: var(--navy-900);
}
.po-benefit p {
    margin: 0;
    color: var(--po-text-2);
    line-height: 1.6;
}

/* =================================================================
   BLOC RGPD / Sécurité valorisée (home)
   ================================================================= */
.po-rgpd {
    background: linear-gradient(135deg, #ECFDF5 0%, #F0F9FF 100%);
    border: 1px solid #BAE6FD;
    border-radius: 20px;
    padding: 48px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}
.po-rgpd h2 {
    font-family: var(--font-display);
    font-size: 30px; line-height: 1.2; margin: 0 0 16px;
    color: var(--navy-900);
    font-weight: 700;
}
.po-rgpd p {
    color: var(--po-text-2);
    line-height: 1.6; margin: 0 0 22px;
}
.po-rgpd-points {
    list-style: none; padding: 0; margin: 0 0 24px;
    display: flex; flex-direction: column; gap: 10px;
}
.po-rgpd-points li {
    position: relative;
    padding-left: 28px;
    color: var(--po-text);
    font-size: 14.5px; line-height: 1.55;
}
.po-rgpd-points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--teal);
    font-weight: 700; font-size: 16px;
    line-height: 1.55;
}
.po-rgpd-stack {
    display: flex; flex-direction: column; gap: 14px;
}
.po-rgpd-card {
    background: #fff;
    border: 1px solid var(--po-border);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
}
.po-rgpd-card-icon {
    font-size: 28px; line-height: 1;
}
.po-rgpd-card-text strong {
    display: block;
    color: var(--navy-900);
    font-size: 14.5px; font-weight: 700;
    margin-bottom: 2px;
}
.po-rgpd-card-text span {
    color: var(--po-muted);
    font-size: 13px;
}
@media (max-width: 800px) {
    .po-rgpd { grid-template-columns: 1fr; padding: 32px; }
}

/* =================================================================
   RGPD STRIP (bandeau de confiance juste après le hero, 1.20.4)
   ================================================================= */
.po-rgpd-strip {
    background: linear-gradient(180deg, #fff 0%, #FAFBFC 100%);
    border-top: 1px solid var(--po-border);
    border-bottom: 1px solid var(--po-border);
    padding: 36px 0;
}
.po-rgpd-strip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.po-rgpd-strip-item {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 4px;
    transition: transform .2s;
}
.po-rgpd-strip-item:hover {
    transform: translateY(-2px);
}
.po-rgpd-strip-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    background: var(--teal-50);
}
.po-rgpd-strip-item:nth-child(1) .po-rgpd-strip-icon { background: #DBEAFE; } /* 🔒 bleu = sécurité */
.po-rgpd-strip-item:nth-child(2) .po-rgpd-strip-icon { background: #FCE7F3; } /* 👤 rose = personne/élève */
.po-rgpd-strip-item:nth-child(3) .po-rgpd-strip-icon { background: #D1FAE5; } /* 🛡️ vert = protection */
.po-rgpd-strip-item:nth-child(4) .po-rgpd-strip-icon { background: #FEF3C7; } /* 🇩🇪 jaune = drapeau */
.po-rgpd-strip-text {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.po-rgpd-strip-text strong {
    color: var(--navy-900);
    font-size: 14.5px; font-weight: 700;
    line-height: 1.25;
}
.po-rgpd-strip-text span {
    color: var(--po-muted);
    font-size: 12.5px; line-height: 1.35;
}

/* =================================================================
   CLOUD ACT FEATURES (1.21.2 — grille informative sobre)
   ================================================================= */
.po-cloudact-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}
.po-cloudact-feat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 24px;
}
.po-cloudact-feat-icon {
    font-size: 36px;
    line-height: 1;
}
.po-cloudact-feat-text {
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    line-height: 1.55;
}
.po-cloudact-feat-text strong {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}
@media (max-width: 720px) {
    .po-cloudact-features { grid-template-columns: 1fr; }
}

/* =================================================================
   CLOUD ACT GRID (comparatif sur fond sombre, 1.20.4)
   ================================================================= */
.po-cloudact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 920px;
    margin: 0 auto;
}
.po-cloudact-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 28px;
}
.po-cloudact-card-icon {
    font-size: 32px; line-height: 1;
    margin-bottom: 12px;
}
.po-cloudact-card-title {
    color: #fff;
    font-size: 18px; font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.3;
}
.po-cloudact-card ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.po-cloudact-card li {
    display: flex; align-items: flex-start; gap: 10px;
    color: rgba(255,255,255,0.82);
    font-size: 14px; line-height: 1.5;
}
.po-cloudact-card.po-cloudact-bad li::before {
    content: "✗";
    color: #FCA5A5;
    font-weight: 700;
    flex-shrink: 0;
}
.po-cloudact-card.po-cloudact-good li::before {
    content: "✓";
    color: #5EEAD4;
    font-weight: 700;
    flex-shrink: 0;
}
.po-cloudact-bad {
    border-color: rgba(252,165,165,0.25);
}
.po-cloudact-good {
    border-color: rgba(94,234,212,0.25);
    background: rgba(94,234,212,0.05);
}
@media (max-width: 720px) {
    .po-cloudact-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   LISTE ENGAGEMENTS RGPD (page /securite, 1.20.4)
   ================================================================= */
.po-engagements {
    list-style: none; padding: 0; margin: 0;
    max-width: 880px; margin-inline: auto;
    counter-reset: engagement;
    display: flex; flex-direction: column;
    gap: 16px;
}
.po-engagements li {
    display: flex; gap: 18px; align-items: flex-start;
    background: #fff;
    border: 1px solid var(--po-border);
    border-radius: 12px;
    padding: 20px 24px;
    transition: border-color .15s, transform .15s;
}
.po-engagements li:hover {
    border-color: #BAE6FD;
    transform: translateX(2px);
}
.po-engagement-num {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px;
    font-family: var(--font-display);
}
.po-engagements li > div {
    flex: 1;
    color: var(--po-text-2);
    line-height: 1.6;
    font-size: 14.5px;
}
.po-engagements li strong {
    display: block;
    color: var(--navy-900);
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* =================================================================
   PAGES LÉGALES (mentions, confidentialité) — sobre et lisible
   ================================================================= */
.po-legal-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}
.po-legal-head {
    text-align: center;
    margin-bottom: 48px;
}
.po-legal-head h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 38px);
    color: var(--navy-900);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.po-legal-head .po-legal-updated {
    color: var(--po-muted);
    font-size: 13px;
}

.po-legal-toc {
    background: #F8FAFC;
    border: 1px solid var(--po-border);
    border-radius: 10px;
    padding: 18px 24px;
    margin-bottom: 40px;
}
.po-legal-toc-title {
    font-size: 12px; font-weight: 700;
    color: var(--po-muted);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0 0 10px;
}
.po-legal-toc ol {
    list-style: decimal inside;
    padding: 0; margin: 0;
    columns: 2; column-gap: 24px;
    font-size: 13.5px; line-height: 1.7;
}
.po-legal-toc a {
    color: var(--po-text-2); text-decoration: none;
}
.po-legal-toc a:hover { color: var(--navy); text-decoration: underline; }

.po-legal-section {
    margin-bottom: 32px;
    scroll-margin-top: 80px;
}
.po-legal-section h2 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--navy-900);
    margin: 0 0 12px;
    line-height: 1.3;
}
.po-legal-section h3 {
    font-size: 15px; font-weight: 700;
    color: var(--navy-900);
    margin: 20px 0 8px;
}
.po-legal-section p,
.po-legal-section li {
    color: var(--po-text-2);
    line-height: 1.65;
    font-size: 14.5px;
}
.po-legal-section p { margin: 0 0 12px; }
.po-legal-section ul {
    margin: 0 0 12px;
    padding-left: 20px;
}
.po-legal-section li { margin-bottom: 4px; }
.po-legal-section a {
    color: var(--navy);
    text-decoration: underline;
}
.po-legal-section strong { color: var(--navy-900); }

/* =================================================================
   PAGE FAQ (1.21.3 — catégorisée, accordéon natif <details>)
   ================================================================= */

/* Sommaire des catégories en haut */
.po-faq-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 auto;
    max-width: 800px;
}
.po-faq-toc-item {
    display: inline-block;
    padding: 8px 18px;
    background: #fff;
    border: 1px solid var(--po-border);
    border-radius: 100px;
    color: var(--po-text-2);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s, color .15s, transform .15s;
}
.po-faq-toc-item:hover {
    border-color: var(--navy);
    color: var(--navy);
    transform: translateY(-1px);
}

/* Wrapper des catégories */
.po-faq-wrap {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.po-faq-category {
    scroll-margin-top: 80px;
}
.po-faq-category-title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--navy-900);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--po-border);
}

.po-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Item accordéon : <details> + <summary> */
.po-faq-item {
    background: #fff;
    border: 1px solid var(--po-border);
    border-radius: 12px;
    overflow: hidden;
    scroll-margin-top: 80px;
    transition: border-color .15s, box-shadow .15s;
}
.po-faq-item:hover {
    border-color: #C7D2DD;
}
.po-faq-item[open] {
    border-color: var(--teal);
    box-shadow: 0 2px 12px rgba(20,184,166,0.10);
}

.po-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    padding: 18px 22px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--navy-900);
    list-style: none;
    user-select: none;
}
/* Cacher le triangle natif */
.po-faq-question::-webkit-details-marker { display: none; }
.po-faq-question::marker { content: ""; }

.po-faq-chevron {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F1F5F9;
    color: var(--navy);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    transition: transform .2s, background .15s;
}
.po-faq-item[open] .po-faq-chevron {
    transform: rotate(45deg);
    background: var(--teal);
    color: #fff;
}

.po-faq-answer {
    padding: 0 22px 20px;
    color: var(--po-text-2);
    font-size: 14.5px;
    line-height: 1.65;
}
.po-faq-answer a {
    color: var(--navy);
    text-decoration: underline;
}
.po-faq-answer strong { color: var(--navy-900); }

@media (max-width: 600px) {
    .po-faq-question { padding: 16px 18px; font-size: 14.5px; }
    .po-faq-answer { padding: 0 18px 18px; }
    .po-faq-category-title { font-size: 19px; }
}

.po-legal-field {
    background: #F8FAFC;
    border-left: 3px solid var(--teal);
    border-radius: 4px;
    padding: 12px 16px;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
}
.po-legal-field strong {
    display: block;
    color: var(--navy-900);
    font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 4px;
}

@media (max-width: 600px) {
    .po-legal-toc ol { columns: 1; }
}

/* =================================================================
   PRIX (tarif unique)
   ================================================================= */
.po-pricing {
    display: flex; justify-content: center;
}
.po-price-card {
    background: #fff;
    border: 1px solid var(--po-border);
    border-radius: 20px;
    padding: 48px 40px;
    max-width: 480px; width: 100%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(15,23,42,0.06);
    position: relative;
}
.po-price-card .po-price-tag {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--teal);
    color: #fff;
    padding: 5px 16px;
    border-radius: 100px;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.po-price-card h3 {
    margin: 0 0 18px;
    font-size: 22px; font-weight: 700;
    color: var(--navy-900);
}
.po-price-amount {
    font-family: var(--font-display);
    font-size: 64px; font-weight: 700;
    color: var(--navy-900);
    line-height: 1;
}
.po-price-amount .po-price-currency { font-size: 32px; vertical-align: top; }
.po-price-period {
    color: var(--po-muted);
    font-size: 14px;
    margin: 8px 0 24px;
}
.po-price-list {
    list-style: none; padding: 0; margin: 0 0 28px;
    text-align: left;
    display: flex; flex-direction: column; gap: 10px;
}
.po-price-list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; color: var(--po-text);
}
.po-price-list li::before {
    content: "✓";
    color: var(--teal);
    font-weight: 700;
    flex-shrink: 0;
}
.po-price-fine {
    color: var(--po-muted);
    font-size: 12.5px;
    margin-top: 16px;
}

/* =================================================================
   CTA BAND (réutilisable)
   ================================================================= */
.po-cta-band {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy) 100%);
    color: #fff;
    padding: 80px 24px;
    text-align: center;
}
.po-cta-band-inner {
    max-width: 720px; margin: 0 auto;
}
.po-cta-band-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.2;
    margin: 0 0 16px;
    font-weight: 700;
    color: #fff;
}
.po-cta-band-subtitle {
    color: rgba(255,255,255,0.78);
    font-size: 16px; line-height: 1.6;
    margin: 0 0 28px;
}
.po-cta-band-actions {
    display: flex; gap: 16px; justify-content: center;
    flex-wrap: wrap; align-items: center;
}
.po-link-light {
    color: rgba(255,255,255,0.78) !important;
    font-weight: 500;
}
.po-link-light:hover { color: #fff !important; }

/* =================================================================
   FOOTER
   ================================================================= */
.po-footer {
    background: #0F172A;
    color: rgba(255,255,255,0.7);
    padding: 64px 0 0;
    margin-top: auto;
}
.po-footer .po-logo { color: #fff; }
.po-footer .po-logo-accent { color: var(--teal); }
.po-footer-inner {
    max-width: var(--po-max-width);
    margin: 0 auto;
    padding: 0 24px 48px;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 48px;
}
.po-footer-brand .po-footer-tagline {
    margin-top: 16px;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
}
.po-footer-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 16px;
}
.po-footer-col ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.po-footer-col a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 14px;
    transition: color .15s;
    cursor: pointer; /* 1.40.15 — explicite pour les <a href="mailto:..."> */
}
.po-footer-col a:hover { color: #fff; text-decoration: underline; }
.po-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
}
.po-footer-bottom-inner {
    max-width: var(--po-max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}
.po-footer-badges {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.po-badge {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
}

@media (max-width: 760px) {
    .po-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }
}
@media (max-width: 480px) {
    .po-footer-inner {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   PAGE INTERNES (fonctionnalités, tarif, sécurité)
   ================================================================= */
.po-page-head {
    padding: 64px 0 32px;
    text-align: center;
}
.po-page-head h1 {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 52px);
    color: var(--navy-900);
    margin: 0 0 18px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.po-page-head p {
    color: var(--po-text-2);
    font-size: 17px; line-height: 1.6;
    max-width: 640px; margin: 0 auto;
}

/* Bloc Fonctionnalités détaillé (alternance gauche/droite) */
.po-feature-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 64px 0;
    border-bottom: 1px solid var(--po-border);
}
.po-feature-detail:last-child { border-bottom: none; }
.po-feature-detail.is-reverse > div:first-child { order: 2; }
.po-feature-detail-body h2 {
    font-family: var(--font-display);
    font-size: 28px;
    margin: 0 0 16px;
    color: var(--navy-900);
}
.po-feature-detail-body .po-eyebrow {
    color: var(--teal); font-size: 12px;
    font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; margin-bottom: 10px;
}
.po-feature-detail-body p {
    color: var(--po-text-2);
    line-height: 1.65; margin: 0 0 18px;
}
.po-feature-detail-body ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.po-feature-detail-body li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; color: var(--po-text);
}
.po-feature-detail-body li::before {
    content: "✓"; color: var(--teal);
    font-weight: 700; flex-shrink: 0;
}
.po-feature-detail-visual {
    background: #F0F4FA;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--po-border);
    box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}
.po-feature-detail-visual img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 800px) {
    .po-feature-detail { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
    .po-feature-detail.is-reverse > div:first-child { order: 0; }
}

/* =========================================================================
 * Pont produit ↔ blog (1.40.30)
 * Bloc "À lire aussi sur le blog" placé après chaque module de
 * /fonctionnalites et en bas de /securite. Visuel volontairement
 * discret (pas de hero, pas de cartes lourdes) pour ne pas casser la
 * lecture des fonctionnalités tout en signalant les ressources blog.
 * ========================================================================= */
.po-feature-bridge {
    margin: 16px 0 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FB 100%);
    border: 1px solid var(--po-border);
    border-radius: 14px;
    border-left: 3px solid var(--teal);
}
.po-feature-bridge-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.po-feature-bridge-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.po-feature-bridge-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--navy-900);
    margin: 0;
}
.po-feature-bridge-lead {
    color: var(--po-text-2);
    font-size: 14px;
    line-height: 1.5;
    margin: 4px 0 0;
}
.po-feature-bridge-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.po-feature-bridge-item {
    margin: 0;
}
.po-feature-bridge-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--navy);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}
.po-feature-bridge-link:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateX(2px);
}
.po-feature-bridge-link-title {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--navy-900);
    flex: 1;
}
.po-feature-bridge-link:hover .po-feature-bridge-link-title {
    text-decoration: underline;
}
.po-feature-bridge-link-meta {
    font-size: 12px;
    color: var(--po-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .po-feature-bridge { padding: 16px 18px; margin: 12px 0; }
    .po-feature-bridge-title { font-size: 16px; }
    .po-feature-bridge-link { flex-direction: column; align-items: flex-start; gap: 4px; }
    .po-feature-bridge-link-meta { font-size: 11px; }
}

/* =========================================================================
 * Breadcrumb (fil d'Ariane public) — 1.40.27
 * Composant partagé par toutes les pages publiques (sauf blog qui a son
 * propre po-article-breadcrumb stylisé dans blog.css).
 * ========================================================================= */
.po-breadcrumb {
    padding: 16px 0 0;
    background: transparent;
}
.po-breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    align-items: center;
    font-size: 13px;
    color: var(--po-muted);
}
.po-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.po-breadcrumb-link {
    color: var(--po-text-2);
    text-decoration: none;
    transition: color 0.15s ease;
}
.po-breadcrumb-link:hover {
    color: var(--navy);
    text-decoration: underline;
}
.po-breadcrumb-current {
    color: var(--po-text);
    font-weight: 500;
}
.po-breadcrumb-sep {
    color: var(--po-muted);
    font-size: 14px;
    line-height: 1;
    user-select: none;
}

/* =========================================================================
 * Glossaire pédagogique — 1.40.31
 * Page /glossaire : navigation par catégorie, TOC alphabétique,
 * entrées détaillées. L'idée : maximiser la lisibilité (large layout,
 * line-height généreux) et le maillage interne (ancres + permalinks).
 * ========================================================================= */

/* Navigation par catégorie (pilules) */
.po-glossary-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 auto;
    max-width: 900px;
}
.po-glossary-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #F8FAFC;
    border: 1px solid var(--po-border);
    border-radius: 999px;
    color: var(--navy-900);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.po-glossary-nav-pill:hover {
    background: var(--navy-50, #EFF6FF);
    border-color: var(--teal);
}
.po-glossary-nav-count {
    background: var(--teal);
    color: white;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    min-width: 22px;
    text-align: center;
}

/* Table des matières alphabétique */
.po-glossary-toc {
    background: #F8FAFC;
    border: 1px solid var(--po-border);
    border-radius: 14px;
    padding: 24px 28px;
    max-width: 900px;
    margin: 0 auto;
}
.po-glossary-toc-title {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--navy-900);
    margin: 0 0 14px;
}
.po-glossary-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 16px;
}
.po-glossary-toc-list a {
    color: var(--navy);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    display: inline-block;
    padding: 2px 0;
}
.po-glossary-toc-list a:hover {
    color: var(--teal);
    text-decoration: underline;
}

/* Entrées détaillées */
.po-glossary-entries {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.po-glossary-entry {
    padding: 24px 0;
    border-bottom: 1px solid var(--po-border);
    /* Marge pour que l'ancre #id ne soit pas mangée par le header sticky éventuel */
    scroll-margin-top: 20px;
}
.po-glossary-entry:last-child {
    border-bottom: none;
}
.po-glossary-entry-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
.po-glossary-entry-term {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--navy-900);
    margin: 0;
    line-height: 1.3;
}
.po-glossary-entry-permalink {
    color: var(--po-muted);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.po-glossary-entry:hover .po-glossary-entry-permalink,
.po-glossary-entry:focus-within .po-glossary-entry-permalink {
    opacity: 1;
}
.po-glossary-entry-permalink:hover {
    color: var(--teal);
}
.po-glossary-entry-short {
    font-size: 15px;
    color: var(--po-text);
    background: #F0F4FA;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--teal);
    margin: 0 0 16px;
    line-height: 1.55;
}
.po-glossary-entry-short strong {
    color: var(--navy-900);
}
.po-glossary-entry-long {
    color: var(--po-text);
    line-height: 1.7;
    font-size: 16px;
}
.po-glossary-entry-long p {
    margin: 0 0 14px;
}
.po-glossary-entry-long a {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.po-glossary-entry-long a:hover {
    color: var(--navy-900);
    text-decoration-thickness: 2px;
}
.po-glossary-entry-long strong {
    color: var(--navy-900);
    font-weight: 600;
}

@media (max-width: 720px) {
    .po-glossary-nav { gap: 8px; }
    .po-glossary-nav-pill { font-size: 13px; padding: 6px 12px; }
    .po-glossary-toc { padding: 18px 20px; }
    .po-glossary-toc-list { grid-template-columns: 1fr; }
    .po-glossary-entry-term { font-size: 20px; }
    .po-glossary-entry-long { font-size: 15px; }
    /* Sur mobile, le permalink reste visible (pas de hover possible) */
    .po-glossary-entry-permalink { opacity: 0.5; }
}

/* =========================================================================
 * Comparatifs (pages /comparatif/...) — 1.40.32
 * Hub + pages détaillées. Style éditorial dense mais aéré, le bloc
 * "positionnement ProfOrga" est visuellement différencié pour ne pas
 * passer pour de la publicité dans le corps comparatif.
 * ========================================================================= */

/* Grille du hub */
.po-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.po-comparison-card {
    display: block;
    padding: 28px;
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.po-comparison-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    border-color: var(--teal);
}
.po-comparison-card-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    margin-bottom: 8px;
}
.po-comparison-card-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--navy-900);
    margin: 0 0 12px;
    line-height: 1.3;
}
.po-comparison-card-lead {
    color: var(--po-text-2);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 20px;
}
.po-comparison-card-cta {
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
}

/* Corps d'un comparatif (intro éditoriale) */
.po-comparison-body {
    max-width: 760px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.7;
    color: var(--po-text);
}
.po-comparison-body p { margin: 0 0 18px; }
.po-comparison-body a {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.po-comparison-body strong { color: var(--navy-900); font-weight: 600; }

/* Critères de choix : liste numérotée stylisée */
.po-comparison-criteria {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.po-comparison-criterion {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    align-items: flex-start;
    padding: 24px 0;
    border-bottom: 1px solid var(--po-border);
}
.po-comparison-criterion:last-child { border-bottom: none; }
.po-comparison-criterion-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--teal);
    color: white;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.po-comparison-criterion-body h3 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--navy-900);
    margin: 6px 0 12px;
    line-height: 1.3;
}
.po-comparison-criterion-text {
    color: var(--po-text);
    font-size: 16px;
    line-height: 1.65;
}
.po-comparison-criterion-text p { margin: 0 0 14px; }
.po-comparison-criterion-text ul {
    margin: 0 0 14px;
    padding-left: 22px;
}
.po-comparison-criterion-text li { margin-bottom: 6px; }
.po-comparison-criterion-text strong { color: var(--navy-900); font-weight: 600; }
.po-comparison-criterion-text a {
    color: var(--navy);
    text-decoration: underline;
}

/* Bloc positionnement ProfOrga (visuellement différencié) */
.po-comparison-summary {
    max-width: 820px;
    margin: 0 auto;
    background: white;
    border: 2px solid var(--teal);
    border-radius: 18px;
    padding: 32px 36px;
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.08);
}
.po-comparison-summary-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--po-border);
}
.po-comparison-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--teal);
    color: white;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}
.po-comparison-summary-head h2 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--navy-900);
    margin: 0;
    line-height: 1.3;
}
.po-comparison-summary-body {
    color: var(--po-text);
    font-size: 16px;
    line-height: 1.65;
}
.po-comparison-summary-body p { margin: 0 0 14px; }
.po-comparison-summary-body ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.po-comparison-summary-body li {
    padding-left: 28px;
    position: relative;
}
.po-comparison-summary-body li::before {
    content: "✓";
    color: var(--teal);
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
}
.po-comparison-summary-body strong { color: var(--navy-900); }
.po-comparison-summary-body a {
    color: var(--navy);
    text-decoration: underline;
}
.po-comparison-summary-cta {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--po-border);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Liste articles liés en bas */
.po-comparison-related-list {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.po-comparison-related-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: white;
    border: 1px solid var(--po-border);
    border-radius: 10px;
    color: var(--navy-900);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.po-comparison-related-link:hover {
    border-color: var(--teal);
    transform: translateX(2px);
}
.po-comparison-related-title { font-weight: 500; flex: 1; }
.po-comparison-related-meta {
    font-size: 12px;
    color: var(--po-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .po-comparison-grid { grid-template-columns: 1fr; gap: 16px; }
    .po-comparison-card { padding: 22px; }
    .po-comparison-card-title { font-size: 18px; }
    .po-comparison-criterion {
        grid-template-columns: 44px 1fr;
        gap: 14px;
    }
    .po-comparison-criterion-num {
        width: 36px; height: 36px;
        font-size: 18px;
    }
    .po-comparison-summary { padding: 24px 22px; }
    .po-comparison-summary-cta { flex-direction: column; }
    .po-comparison-summary-cta .po-btn { width: 100%; }
    .po-comparison-related-link { flex-direction: column; align-items: flex-start; gap: 4px; }
}