@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================================
   CEMAPI — SYSTÈME VISUEL COMMUN
   Couleur institutionnelle principale : #15803d
========================================================= */

:root {
    --cemapi-green: #15803d;
    --cemapi-green-rgb: 21, 128, 61;
    --cemapi-green-dark: #166534;
    --cemapi-green-deep: #052e16;
    --cemapi-green-soft: #f0fdf4;
    --cemapi-emerald: #22c55e;
    --cemapi-gold: #facc15;
    --cemapi-ink: #0f172a;
    --cemapi-muted: #475569;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: #ffffff;
    color: var(--cemapi-ink);
}

/* =========================================================
   TITRES ET LIBELLÉS
========================================================= */

.section-label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--cemapi-green);
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.section-label::before {
    content: '';
    width: 1.75rem;
    height: 2px;
    flex: 0 0 auto;
    background: var(--cemapi-green);
}

/* =========================================================
   HERO ACCUEIL ET BANDEAUX INTERNES
========================================================= */

.hero-gradient,
.breadcrumb-content {
    background:
        radial-gradient(circle at 12% 12%, rgba(74, 222, 128, .20), transparent 32%),
        radial-gradient(circle at 88% 72%, rgba(var(--cemapi-green-rgb), .34), transparent 34%),
        linear-gradient(125deg, var(--cemapi-green-deep) 0%, #14532d 48%, var(--cemapi-green) 100%);
    isolation: isolate;
}

.hero-gradient::before,
.hero-gradient::after,
.breadcrumb-content::before,
.breadcrumb-content::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.hero-gradient::before,
.breadcrumb-content::before {
    inset: 0;
    opacity: .42;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
        radial-gradient(circle, rgba(187,247,208,.28) 1px, transparent 1.5px);
    background-size: 72px 72px, 72px 72px, 18px 18px;
    background-position: center, center, 4px 4px;
    -webkit-mask-image: linear-gradient(100deg, transparent 2%, #000 42%, rgba(0,0,0,.28) 86%, transparent 100%);
    mask-image: linear-gradient(100deg, transparent 2%, #000 42%, rgba(0,0,0,.28) 86%, transparent 100%);
}

.hero-gradient::after,
.breadcrumb-content::after {
    width: 38rem;
    height: 38rem;
    top: 50%;
    right: -15rem;
    border: 1px solid rgba(187,247,208,.22);
    border-radius: 50%;
    box-shadow:
        0 0 0 5rem rgba(var(--cemapi-green-rgb), .065),
        0 0 0 10rem rgba(74,222,128,.035),
        inset 0 0 7rem rgba(74,222,128,.08);
    transform: translateY(-50%);
}

/* =========================================================
   FONDS ET CARTES
========================================================= */

.soft-section {
    background:
        radial-gradient(circle at 8% 0%, rgba(var(--cemapi-green-rgb), .075), transparent 27rem),
        #f8fafc;
}

.modern-card {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.modern-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--cemapi-green-rgb), .30);
    box-shadow: 0 22px 55px rgba(15,23,42,.09);
}

.hero-panel {
    background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 30px 80px rgba(0,0,0,.22);
    backdrop-filter: blur(18px);
}

.hero-card {
    transition: transform .35s ease, box-shadow .35s ease;
}

.hero-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 30px 70px rgba(0,0,0,.22);
}

/* =========================================================
   BOUTONS ET ACTIONS
========================================================= */

.btn-modern,
.hero-action {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}

.header-dossier-button {
    background: #fff;
    color: var(--cemapi-green);
    border: 1px solid var(--cemapi-green);
    border-radius: 9999px;
    box-shadow: 0 8px 20px rgba(var(--cemapi-green-rgb), .10);
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.header-dossier-button .site-icon {
    transition: transform .22s ease;
}

.header-dossier-button:focus-visible {
    outline: 3px solid rgba(15, 23, 42, .82);
    outline-offset: 3px;
}

.btn-modern:hover {
    transform: translateY(-2px);
}

.btn-modern:active {
    transform: translateY(0);
}

.hero-action:hover {
    transform: translateX(5px);
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.28);
}

/* =========================================================
   SERVICES ET EXPERTISES
========================================================= */

.service-modern {
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.service-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(15,23,42,.10);
}

.service-modern::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12), transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s ease;
}

.service-modern:hover::after {
    transform: translateX(120%);
}

.service-modern .arrow,
.audience-arrow {
    transition: transform .25s ease, color .25s ease;
}

.service-modern:hover .arrow {
    transform: translateX(5px);
}

.service-featured:hover {
    box-shadow: 0 30px 60px rgba(var(--cemapi-green-rgb), .24);
}

.service-icon {
    box-shadow: inset 0 0 0 1px rgba(var(--cemapi-green-rgb), .08);
}

.service-icon svg,
.service-watermark {
    transition: transform .35s ease, opacity .35s ease;
}

.service-watermark {
    opacity: .055;
    pointer-events: none;
}

.modern-card:hover .service-icon svg {
    transform: scale(1.08) rotate(-3deg);
}

.modern-card:hover .service-watermark {
    opacity: .10;
    transform: scale(1.06) rotate(-2deg);
}

/* =========================================================
   TAGS, PARCOURS ET PUBLICS
========================================================= */

.topic-tag {
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.topic-tag:hover {
    background-color: #dcfce7;
    color: var(--cemapi-green);
    transform: translateY(-2px);
}

.step-item {
    transition: transform .25s ease;
}

.step-item:hover {
    transform: translateY(-5px);
}

.step-number {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.step-item:hover .step-number {
    transform: scale(1.1);
    box-shadow: 0 10px 25px rgba(var(--cemapi-green-rgb), .24);
}

.audience-card {
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.audience-card:hover {
    transform: translateY(-4px);
    background-color: var(--cemapi-green-soft);
    box-shadow: 0 15px 30px rgba(15,23,42,.06);
}

.audience-card:hover .audience-arrow {
    transform: translate(3px,-3px);
    color: var(--cemapi-green);
}

/* =========================================================
   SECTIONS OAPI ET PROTECTION RÉGIONALE
========================================================= */

.oapi-pattern,
#protection-regionale {
    background:
        radial-gradient(circle at 14% 24%, rgba(250,204,21,.10), transparent 25rem),
        radial-gradient(circle at 88% 15%, rgba(74,222,128,.17), transparent 23rem),
        linear-gradient(135deg, var(--cemapi-green-deep) 0%, #14532d 58%, var(--cemapi-green-dark) 100%);
}

.oapi-pattern::before,
#protection-regionale::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 70%, transparent);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 70%, transparent);
}

.oapi-pattern > *,
#protection-regionale > * {
    position: relative;
    z-index: 1;
}

.oapi-card {
    transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}

.oapi-card:hover {
    transform: translateY(-5px);
    border-color: rgba(74,222,128,.35);
    background-color: rgba(255,255,255,.07);
}

.oapi-number {
    transition: transform .3s ease;
}

.oapi-card:hover .oapi-number {
    transform: scale(1.08);
}

/* =========================================================
   SECTION INSTITUTIONNELLE AVEC IMAGE
========================================================= */

.institution-pattern {
    background-color: var(--cemapi-green-deep);
    isolation: isolate;
}

.institution-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(
            90deg,
            rgba(5,46,22,.98) 0%,
            rgba(20,83,45,.93) 45%,
            rgba(var(--cemapi-green-rgb), .70) 100%
        ),
        url('../images/local_cemapi_001.jpg');
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
    filter: saturate(.82) contrast(1.04);
}

.institution-pattern::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 90% 12%, rgba(74,222,128,.18), transparent 25rem),
        linear-gradient(180deg, rgba(5,46,22,.08), rgba(5,46,22,.30));
}

.institution-pattern > .max-w-7xl {
    position: relative;
    z-index: 2;
}

/* =========================================================
   ACTUALITÉS
========================================================= */

.news-visual {
    position: relative;
    overflow: hidden;
}

.news-visual::after {
    content: '';
    position: absolute;
    width: 12rem;
    height: 12rem;
    right: -4rem;
    bottom: -6rem;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 9999px;
    box-shadow: 0 0 0 2.5rem rgba(255,255,255,.04);
}

.news-card {
    transition: transform .3s ease, box-shadow .3s ease;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(15,23,42,.10);
}

.news-image,
.news-cover {
    transition: transform .5s ease, filter .5s ease;
}

.news-card:hover .news-image,
.news-card:hover .news-cover {
    transform: scale(1.05);
    filter: saturate(1.06) contrast(1.03);
}

.news-link {
    transition: gap .2s ease, color .2s ease;
}

.news-card:hover .news-link {
    gap: .6rem;
}

/* =========================================================
   CTA JAUNES
========================================================= */

.cta-gradient,
.yellow-cta {
    background:
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.45), transparent 18rem),
        radial-gradient(circle at 10% 100%, rgba(var(--cemapi-green-rgb), .14), transparent 22rem),
        linear-gradient(125deg, #fde68a 0%, var(--cemapi-gold) 56%, #eab308 100%);
}

.cta-box {
    transition: box-shadow .3s ease, transform .3s ease;
}

.cta-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 25px 60px rgba(var(--cemapi-green-rgb), .18);
}



/* =========================================================
   CTA BLANC — VERSION DISCRÈTE
========================================================= */

.white-cta {
    position: relative;
    background:
        radial-gradient(circle at 90% 10%, rgba(var(--cemapi-green-rgb), .05), transparent 18rem),
        #ffffff;
    border: 1px solid rgba(var(--cemapi-green-rgb), .16);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .05);
}

.white-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
}

.white-cta:hover {
    border-color: rgba(var(--cemapi-green-rgb), .26);
    box-shadow: 0 20px 44px rgba(15, 23, 42, .065);
}

.button-lift,
.btn-modern,
.yellow-cta a.inline-flex.items-center.justify-center,
.yellow-cta button,
.white-cta a.inline-flex.items-center.justify-center,
.white-cta button,
form button[type="submit"] {
    transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}

.button-lift .site-icon,
.btn-modern .site-icon,
.yellow-cta a.inline-flex.items-center.justify-center .site-icon,
.yellow-cta button .site-icon,
.white-cta a.inline-flex.items-center.justify-center .site-icon,
.white-cta button .site-icon,
form button[type="submit"] .site-icon {
    transition: transform .22s ease;
}

/* =========================================================
   MENU ET ACCORDÉONS
========================================================= */

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--cemapi-green);
    transition: width .25s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.site-nav-link {
    position: relative;
    color: #475569;
    transition: color .2s ease;
}

.site-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -31px;
    width: 0;
    height: 4px;
    background: var(--cemapi-green);
    transition: width .25s ease;
}

.site-nav-link:hover,
.site-nav-current {
    color: var(--cemapi-green);
}

.site-nav-link:hover::after,
.site-nav-current::after {
    width: 100%;
}

/*.site-nav-current {
    font-weight: 800;
}*/

.site-nav-current {
    color: var(--cemapi-green);
    font-weight: 800;
}

.site-mobile-nav-link {
    border-radius: 1rem;
    transition: background-color .2s ease, color .2s ease;
}

.site-mobile-nav-link:hover {
    background: #f8fafc;
    color: var(--cemapi-green);
}

.site-mobile-nav-current {
    background: #f0fdf4;
    color: var(--cemapi-green);
    font-weight: 900;
}

.title-card-link {
    display: block;
    text-decoration: none;
}

.title-card-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--cemapi-green-rgb), .16);
}

.title-card-cta {
    transition: gap .2s ease, transform .2s ease;
}

.title-card-link:hover .title-card-cta,
.title-card-link:focus-visible .title-card-cta {
    gap: .6rem;
}

.title-card-copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.title-card-detail {
    font-size: .9375rem;
    line-height: 1.7;
}

.title-card-meta {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.title-card-meta-label {
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.title-card-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: .875rem;
    line-height: 1.55;
}

.title-card-list li {
    position: relative;
    padding-left: 1rem;
}

.title-card-list li::before {
    content: "";
    position: absolute;
    top: .55rem;
    left: 0;
    width: .38rem;
    height: .38rem;
    border-radius: 999px;
    background: var(--cemapi-green);
}

.title-card-list--dark li::before {
    background: #14532d;
}

.title-card-note {
    font-size: .875rem;
    line-height: 1.6;
}

.mobile-panel {
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.22,.8,.24,1);
}

.mobile-panel.is-open {
    transform: translateX(0);
}

.mobile-backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.mobile-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

#mobileMenu {
    transition: opacity .2s ease, transform .2s ease;
}

details summary::-webkit-details-marker {
    display: none;
}

/* =========================================================
   ACCESSIBILITÉ ET RESPONSIVE
========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(250,204,21,.82);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .hero-gradient::before,
    .breadcrumb-content::before {
        opacity: .30;
        background-size: 52px 52px, 52px 52px, 16px 16px;
    }

    .hero-gradient::after,
    .breadcrumb-content::after {
        width: 24rem;
        height: 24rem;
        right: -16rem;
    }

    .title-card-copy {
        gap: .9rem;
    }
}

@media (hover: hover) and (pointer: fine) {
    .header-dossier-button:hover {
        background: var(--cemapi-green);
        color: #fff;
        border-color: var(--cemapi-green);
        box-shadow: 0 14px 28px rgba(var(--cemapi-green-rgb), .20);
        transform: translateY(-2px);
    }

    .header-dossier-button:hover .site-icon,
    .header-dossier-button:focus-visible .site-icon {
        transform: translateX(3px);
    }

    .button-lift:hover,
    .btn-modern:hover,
    .yellow-cta a.inline-flex.items-center.justify-center:hover,
    .yellow-cta button:hover,
    .white-cta a.inline-flex.items-center.justify-center:hover,
    .white-cta button:hover,
    form button[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 30px rgba(15, 23, 42, .12);
    }

    .button-lift:hover .site-icon,
    .btn-modern:hover .site-icon,
    .yellow-cta a.inline-flex.items-center.justify-center:hover .site-icon,
    .yellow-cta button:hover .site-icon,
    .white-cta a.inline-flex.items-center.justify-center:hover .site-icon,
    .white-cta button:hover .site-icon,
    form button[type="submit"]:hover .site-icon {
        transform: translateX(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-dossier-button,
    .header-dossier-button .site-icon,
    .button-lift,
    .button-lift .site-icon,
    .btn-modern,
    .btn-modern .site-icon,
    .yellow-cta a.inline-flex.items-center.justify-center,
    .yellow-cta a.inline-flex.items-center.justify-center .site-icon,
    .yellow-cta button,
    .yellow-cta button .site-icon,
    .white-cta a.inline-flex.items-center.justify-center,
    .white-cta a.inline-flex.items-center.justify-center .site-icon,
    .white-cta button,
    .white-cta button .site-icon,
    form button[type="submit"],
    form button[type="submit"] .site-icon {
        transition-duration: .01ms !important;
        transform: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}



/* =========================================================
   CATI MALI — PORTAIL DOCUMENTAIRE
========================================================= */
.cati-hero{background:radial-gradient(circle at 12% 12%,rgba(59,130,246,.25),transparent 32%),radial-gradient(circle at 88% 72%,rgba(59,130,246,.25),transparent 34%),linear-gradient(125deg,#0f2854 0%,#1e3a8a 48%,#2563eb 100%);isolation:isolate}.cati-hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),radial-gradient(circle,rgba(191,219,254,.24) 1px,transparent 1.5px);background-size:72px 72px,72px 72px,18px 18px;background-position:center,center,4px 4px;-webkit-mask-image:linear-gradient(100deg,transparent 2%,#000 42%,rgba(0,0,0,.28) 86%,transparent 100%);mask-image:linear-gradient(100deg,transparent 2%,#000 42%,rgba(0,0,0,.28) 86%,transparent 100%)}.cati-hero::after{content:'';position:absolute;z-index:0;pointer-events:none;width:38rem;height:38rem;top:50%;right:-15rem;border:1px solid rgba(191,219,254,.22);border-radius:50%;box-shadow:0 0 0 5rem rgba(59,130,246,.065),0 0 0 10rem rgba(37,99,235,.035),inset 0 0 7rem rgba(59,130,246,.08);transform:translateY(-50%)}.cati-login-card{box-shadow:0 30px 70px rgba(15,23,42,.16)}.cati-field{width:100%;min-height:3.25rem;border:1px solid #cbd5e1;border-radius:.5rem;background:#fff;color:#0f172a;transition:border-color .2s ease,box-shadow .2s ease}.cati-field:focus{border-color:var(--cemapi-green);box-shadow:0 0 0 4px rgba(var(--cemapi-green-rgb),.12);outline:none}
.cati-resources{background:radial-gradient(circle at 100% 0%,rgba(var(--cemapi-green-rgb),.055),transparent 26rem),#f8fafc;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}.cati-catalogue-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(10rem,auto);gap:1rem}.cati-resource-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:15rem;padding:1.75rem;border-radius:1.5rem;border:1px solid #e2e8f0;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.cati-resource-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(15,23,42,.08)}.cati-resource-card--featured{grid-column:span 7;grid-row:span 2;min-height:31rem;padding:2.25rem;border-color:transparent;background:radial-gradient(circle at 85% 10%,rgba(250,204,21,.18),transparent 18rem),linear-gradient(145deg,#052e16 0%,#166534 65%,#15803d 100%)}.cati-resource-card--yellow{grid-column:span 5;background:linear-gradient(145deg,#fde68a,#facc15);border-color:#facc15}.cati-resource-card--white{grid-column:span 3;background:#fff}.cati-resource-card--soft{grid-column:span 2;background:#f0fdf4;border-color:#dcfce7}.cati-resource-index{display:inline-flex;font-size:.72rem;font-weight:900;letter-spacing:.14em;color:#64748b}.cati-resource-card--featured .cati-resource-index{color:rgba(255,255,255,.55)}.cati-resource-icon{display:inline-flex;width:3.5rem;height:3.5rem;margin-top:1.25rem;align-items:center;justify-content:center;border-radius:1rem;background:rgba(255,255,255,.10);color:#fff}.cati-resource-icon svg{width:1.65rem;height:1.65rem}.cati-resource-link{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:800;color:var(--cemapi-green)}.cati-resource-card--featured .cati-resource-link{color:#fde68a}.cati-resource-card--yellow .cati-resource-link{color:#14532d}
.cati-service-row{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;padding:1.75rem 0;border-bottom:1px solid #e2e8f0}.cati-service-row>span{font-size:.72rem;font-weight:900;letter-spacing:.12em;color:var(--cemapi-green)}.cati-service-row h3{font-size:1rem;line-height:1.4;font-weight:800;color:#0f172a}.cati-service-row p{margin-top:.5rem;font-size:.875rem;line-height:1.65;color:#64748b}.cati-partner-mark{min-height:7.5rem;filter:grayscale(1);opacity:.74;transition:filter .25s ease,opacity .25s ease,transform .25s ease}.cati-partner-mark:hover{filter:grayscale(0);opacity:1;transform:translateY(-3px)}
.cati-faq{padding:1.35rem 0}.cati-faq summary{display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:1.5rem;list-style:none;font-weight:800;color:#0f172a}.cati-faq summary span{flex:0 0 auto;color:var(--cemapi-green);font-size:1.35rem;line-height:1;transition:transform .2s ease}.cati-faq[open] summary span{transform:rotate(45deg)}.cati-faq p{max-width:42rem;padding-top:.9rem;padding-right:2rem;color:#64748b;line-height:1.7}.cati-contact-section{background:radial-gradient(circle at 88% 15%,rgba(255,255,255,.46),transparent 20rem),linear-gradient(125deg,#fde68a 0%,#facc15 58%,#eab308 100%)}
@media(max-width:1023px){.cati-resource-card--featured{grid-column:span 12;min-height:25rem}.cati-resource-card--yellow{grid-column:span 6}.cati-resource-card--white,.cati-resource-card--soft{grid-column:span 3}}@media(max-width:767px){.cati-catalogue-layout{grid-template-columns:1fr}.cati-resource-card--featured,.cati-resource-card--yellow,.cati-resource-card--white,.cati-resource-card--soft{grid-column:1;grid-row:auto;min-height:14rem}.cati-resource-card--featured{min-height:23rem}.cati-service-row{grid-template-columns:2.3rem minmax(0,1fr)}}@media(max-width:640px){.cati-hero::before{opacity:.30;background-size:52px 52px,52px 52px,16px 16px}.cati-hero::after{width:24rem;height:24rem;right:-16rem}.cati-resource-card{padding:1.4rem;border-radius:1.25rem}}

/* =========================================================
   CATI MALI — CATALOGUE V2
   Affichage éditorial, vert / jaune / blanc uniquement
========================================================= */

.cati-catalogue-section {
    background:
        radial-gradient(circle at 92% 0%, rgba(var(--cemapi-green-rgb), .055), transparent 24rem),
        #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.cati-catalogue-browser {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 1.75rem;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .06);
}

.cati-catalogue-intro {
    min-height: 32rem;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background:
        radial-gradient(circle at 90% 10%, rgba(250, 204, 21, .16), transparent 14rem),
        linear-gradient(145deg, #052e16 0%, #166534 68%, #15803d 100%);
}

.cati-catalogue-intro-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cati-catalogue-count {
    display: inline-flex;
    padding: .45rem .7rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .72);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cati-catalogue-list {
    display: grid;
    align-content: stretch;
}

.cati-catalogue-row {
    display: grid;
    grid-template-columns: 2.25rem 3rem minmax(0, 1fr) 2rem;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem 1.75rem;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color .2s ease, padding-left .2s ease;
}

.cati-catalogue-row:last-child {
    border-bottom: 0;
}

.cati-catalogue-row:hover {
    padding-left: 2rem;
    background: #f0fdf4;
}

.cati-catalogue-number {
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .1em;
    color: #94a3b8;
}

.cati-catalogue-row-icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    background: #f0fdf4;
    color: var(--cemapi-green);
}

.cati-catalogue-row-icon--yellow {
    background: #fef9c3;
    color: #854d0e;
}

.cati-catalogue-row-icon--soft {
    background: #dcfce7;
    color: #166534;
}

.cati-catalogue-row-icon svg {
    width: 1.45rem;
    height: 1.45rem;
}

.cati-catalogue-row-copy {
    min-width: 0;
}

.cati-catalogue-row-copy strong {
    display: block;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.cati-catalogue-row-copy small {
    display: block;
    margin-top: .3rem;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.55;
}

.cati-catalogue-arrow {
    color: var(--cemapi-green);
    font-size: 1.1rem;
    font-weight: 900;
    transition: transform .2s ease;
}

.cati-catalogue-row:hover .cati-catalogue-arrow {
    transform: translateX(4px);
}

/* L'ancien style bleu n'est plus utilisé par le catalogue. */
.cati-category--blue {
    background: linear-gradient(145deg, #166534, #052e16);
    color: #fff;
}

@media (max-width: 900px) {
    .cati-catalogue-browser {
        grid-template-columns: 1fr;
    }

    .cati-catalogue-intro {
        min-height: 22rem;
    }
}

@media (max-width: 640px) {
    .cati-catalogue-browser {
        border-radius: 1.35rem;
    }

    .cati-catalogue-intro {
        min-height: 19rem;
        padding: 1.4rem;
    }

    .cati-catalogue-row {
        grid-template-columns: 2.6rem minmax(0, 1fr) 1.5rem;
        gap: .85rem;
        padding: 1.3rem 1.2rem;
    }

    .cati-catalogue-row:hover {
        padding-left: 1.2rem;
    }

    .cati-catalogue-number {
        display: none;
    }

    .cati-catalogue-row-copy small {
        font-size: .78rem;
    }
}

/* =========================================================
   FORMULAIRE "PRÉPARER MON DOSSIER"
========================================================= */

.support-form-shell {
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--cemapi-green-rgb), .07), transparent 22rem),
        #f8fafc;
}

.support-form-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.75rem;
    box-shadow: 0 22px 55px rgba(15,23,42,.06);
}

.support-field,
.support-select,
.support-textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    background: #ffffff;
    color: #0f172a;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.support-field,
.support-select {
    min-height: 3.25rem;
    padding: .85rem 1rem;
}

.support-textarea {
    min-height: 9rem;
    padding: 1rem;
    resize: vertical;
}

.support-field:focus,
.support-select:focus,
.support-textarea:focus {
    border-color: var(--cemapi-green);
    box-shadow: 0 0 0 4px rgba(var(--cemapi-green-rgb), .12);
    outline: none;
}

.support-choice {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: 1rem 1rem 1rem .95rem;
    border: 1px solid #dbe4ee;
    border-radius: .5rem;
    background: #ffffff;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.support-choice:hover {
    border-color: rgba(var(--cemapi-green-rgb), .32);
    background: #f8fafc;
}

.support-choice input {
    margin-top: .15rem;
    accent-color: var(--cemapi-green);
}

.support-choice:focus-within {
    border-color: var(--cemapi-green);
    box-shadow: 0 0 0 4px rgba(var(--cemapi-green-rgb), .12);
}

.support-status {
    border-radius: 1rem;
    border: 1px solid #dbe4ee;
    background: #f8fafc;
    color: #334155;
}

.support-status.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.support-status.is-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.availability-note {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
    color: #475569;
}

.availability-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: .9rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: .875rem;
    font-weight: 800;
    line-height: 1.4;
}

.availability-badge--compact {
    min-height: auto;
    padding: .3rem .7rem;
    border-radius: 9999px;
    font-size: .75rem;
}

.site-icon,
.social-icon-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.site-icon::before,
.social-icon-symbol::before {
    line-height: 1;
}

.site-icon-watermark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

.site-icon-watermark::before {
    line-height: 1;
}

.site-icon-watermark-xl {
    font-size: min(20rem, 42vw);
}

.site-icon-watermark-lg {
    font-size: min(15rem, 32vw);
}

.site-icon-watermark-md {
    font-size: min(11rem, 24vw);
}

.is-unavailable {
    cursor: default;
}

.is-unavailable:hover {
    transform: none;
    box-shadow: none;
}

.whatsapp-float {
    position: fixed;
    right: max(1.5rem, calc(env(safe-area-inset-right) + 1rem));
    bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #15803d;
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    z-index: 40;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    background: #166534;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.22);
    transform: translateY(-2px);
}

.whatsapp-float:focus-visible {
    outline: 3px solid #0f172a;
    outline-offset: 3px;
}

.whatsapp-float i {
    font-size: 1.75rem;
    line-height: 1;
}

@media print {
    .whatsapp-float {
        display: none !important;
    }
}

/**/

.cati-page {
    --cati-blue: rgb(32, 61, 145);
    --cati-blue-dark: rgb(24, 46, 111);
    --cati-blue-deep: rgb(13, 28, 72);
    --cati-blue-light: rgb(232, 237, 250);
    --cati-blue-soft: rgb(246, 248, 253);
    --cati-blue-border: rgba(32, 61, 145, 0.18);
    --cati-blue-shadow: rgba(32, 61, 145, 0.20);
}

.cati-page .section-label {
    color: var(--cati-blue);
}

.cati-page .section-label::before,
.cati-page .nav-link::after {
    background: var(--cati-blue);
}

.cati-page .nav-link:hover,
.cati-page .nav-link:focus-visible,
.cati-page .cati-service-row > span,
.cati-page .cati-faq summary span,
.cati-page .text-blue-700,
.cati-page .text-blue-800,
.cati-page .text-blue-900 {
    color: var(--cati-blue) !important;
}

.cati-page .bg-blue-50 {
    background-color: var(--cati-blue-light) !important;
}

.cati-page .bg-slate-50 {
    background-color: var(--cati-blue-soft) !important;
}

.cati-page .border-blue-100,
.cati-page .border-blue-200 {
    border-color: var(--cati-blue-border) !important;
}

.cati-page .bg-blue-700,
.cati-page .hover\:bg-blue-700:hover {
    background-color: var(--cati-blue) !important;
}

.cati-page .text-blue-100\/90 {
    color: rgba(232, 237, 250, .92) !important;
}

.cati-page .shadow-blue-900\/15 {
    box-shadow: 0 18px 40px var(--cati-blue-shadow) !important;
}

.cati-page .text-blue-100 {
    color: var(--cati-blue-light) !important;
}

.cati-page .cati-hero {
    background:
        radial-gradient(circle at 12% 12%, rgba(59, 130, 246, .25), transparent 32%),
        radial-gradient(circle at 88% 72%, rgba(59, 130, 246, .25), transparent 34%),
        linear-gradient(125deg, var(--cati-blue-deep) 0%, var(--cati-blue-dark) 48%, var(--cati-blue) 100%);
    isolation: isolate;
}

.cati-page .cati-hero::before,
.cati-page .cati-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.cati-page .cati-hero::before {
    inset: 0;
    opacity: .42;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,.28) 1px, transparent 1.5px);
    background-size: 72px 72px, 72px 72px, 18px 18px;
    background-position: center, center, 4px 4px;
    -webkit-mask-image: linear-gradient(100deg, transparent 2%, #000 42%, rgba(0,0,0,.28) 86%, transparent 100%);
    mask-image: linear-gradient(100deg, transparent 2%, #000 42%, rgba(0,0,0,.28) 86%, transparent 100%);
}

.cati-page .cati-hero::after {
    width: 38rem;
    height: 38rem;
    top: 50%;
    right: -15rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    box-shadow:
        0 0 0 5rem rgba(32, 61, 145, .12),
        0 0 0 10rem rgba(32, 61, 145, .06),
        inset 0 0 7rem rgba(255,255,255,.05);
    transform: translateY(-50%);
}

.cati-page .cati-field:focus {
    border-color: var(--cati-blue);
    box-shadow: 0 0 0 4px var(--cati-blue-shadow);
    outline: none;
}

.cati-page input[type="checkbox"]:checked,
.cati-page input[type="radio"]:checked {
    background-color: var(--cati-blue);
    border-color: var(--cati-blue);
}

.cati-page input[type="checkbox"]:focus,
.cati-page input[type="radio"]:focus,
.cati-page select:focus {
    box-shadow: 0 0 0 4px var(--cati-blue-shadow);
}

/*.cati-page a[href="#connexion"],
.cati-page #contactsForm button[type="submit"] {
    box-shadow: 0 18px 40px var(--cati-blue-shadow) !important;
}*/

.cati-page a[href="#connexion"].bg-white,
.cati-page #mobileMenu a[href="#connexion"] {
    color: var(--cati-blue) !important;
    border-color: var(--cati-blue) !important;
}

.cati-page a[href="#connexion"].bg-white:hover,
.cati-page #mobileMenu a[href="#connexion"]:hover {
    background: var(--cati-blue-dark) !important;
    border-color: var(--cati-blue-dark) !important;
    color: #fff !important;
}

.cati-page #mobileMenuBackdrop {
    background-color: rgba(32, 61, 145, .90) !important;
}

.cati-page .rounded-full.bg-blue-700,
.cati-page .rounded-xl.bg-blue-700,
.cati-page .bg-blue-700.text-white {
    background-color: var(--cati-blue) !important;
}

.cati-page .hover\:text-white:hover {
    color: #fff !important;
}

.cati-page .hover\:shadow-\[0_0_0_4px_rgba\(37\,99\,235\,0\.10\)\,0_10px_24px_rgba\(37\,99\,235\,0\.16\)\]:hover {
    box-shadow: 0 0 0 4px rgba(32, 61, 145, 0.10), 0 10px 24px rgba(32, 61, 145, 0.16) !important;
}

.cati-page footer .hover\:bg-yellow-400:hover,
.cati-page footer .hover\:border-yellow-400:hover {
    background-color: var(--cati-blue) !important;
    border-color: var(--cati-blue) !important;
}

.cati-page footer .hover\:bg-yellow-400:hover i,
.cati-page footer .hover\:border-yellow-400:hover i,
.cati-page footer .hover\:text-slate-950:hover {
    color: #fff !important;
}

@media (max-width: 640px) {
    .cati-page .cati-hero::before {
        opacity: .30;
        background-size: 52px 52px, 52px 52px, 16px 16px;
    }

    .cati-page .cati-hero::after {
        width: 24rem;
        height: 24rem;
        right: -16rem;
    }
}

.dashboard-user-button {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dashboard-user-button:hover,
.dashboard-user-button:focus-visible {
    border-color: var(--cati-blue-border);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.dashboard-user-dropdown {
    max-width: calc(100vw - 2rem);
}

.dashboard-dropdown-action {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .85rem;
    border-radius: 1rem;
    padding: .9rem 1rem;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.dashboard-dropdown-action:hover,
.dashboard-dropdown-action:focus-visible {
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    outline: none;
}

.dashboard-dropdown-action--mobile {
    background: #fff;
    border: 1px solid var(--cati-blue-border);
}

.dashboard-search-panel {
    backdrop-filter: blur(10px);
}

.dashboard-shortcut {
    display: block;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    background: #fff;
    padding: 1.2rem;
    text-decoration: none;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dashboard-shortcut:hover,
.dashboard-shortcut:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
    outline: none;
}

.dashboard-shortcut__icon,
.dashboard-stat-icon,
.dashboard-panel-icon,
.dashboard-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-shortcut__icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    font-size: 1.15rem;
}

.dashboard-shortcut--yellow {
    border-color: rgba(250, 204, 21, 0.28);
}

.dashboard-shortcut--yellow .dashboard-shortcut__icon {
    background: rgba(250, 204, 21, 0.16);
    color: #ca8a04;
}

.dashboard-shortcut--violet {
    border-color: rgba(139, 92, 246, 0.25);
}

.dashboard-shortcut--violet .dashboard-shortcut__icon {
    background: rgba(139, 92, 246, 0.14);
    color: #7c3aed;
}

.dashboard-shortcut--blue {
    border-color: var(--cati-blue-border);
}

.dashboard-shortcut--blue .dashboard-shortcut__icon {
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.dashboard-shortcut--orange {
    border-color: rgba(249, 115, 22, 0.22);
}

.dashboard-shortcut--orange .dashboard-shortcut__icon {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}

.dashboard-stat-card,
.dashboard-access-card,
.dashboard-table-card,
.dashboard-panel,
.dashboard-history-card {
    border: 1px solid #e2e8f0;
    border-radius: 1.75rem;
    background: #fff;
}

.dashboard-stat-card,
.dashboard-panel,
.dashboard-history-card {
    padding: 1.5rem;
}

.dashboard-access-card {
    padding: 1.75rem;
    background: linear-gradient(180deg, #fff 0%, var(--cati-blue-soft) 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.dashboard-stat-card {
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.05);
}

.dashboard-stat-icon,
.dashboard-panel-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    font-size: 1rem;
}

.dashboard-progress-track {
    width: 100%;
    height: .7rem;
    overflow: hidden;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.18);
}

.dashboard-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cati-blue) 0%, rgba(32, 61, 145, 0.72) 100%);
}

.dashboard-progress-fill--60 {
    width: 60%;
}

.dashboard-progress-fill--40 {
    width: 40%;
}

.dashboard-progress-fill--33 {
    width: 33.34%;
}

.dashboard-access-row {
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.dashboard-access-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.dashboard-access-row span {
    display: block;
    font-size: .85rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #64748b;
}

.dashboard-access-row strong {
    display: block;
    margin-top: .55rem;
    font-size: .98rem;
    line-height: 1.6;
    color: #0f172a;
}

.dashboard-secondary-button {
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--cati-blue-border);
    border-radius: 9999px;
    background: #fff;
    color: var(--cati-blue);
    padding: .8rem 1.2rem;
    font-size: .9rem;
    font-weight: 800;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.dashboard-secondary-button:hover,
.dashboard-secondary-button:focus-visible {
    background: var(--cati-blue);
    border-color: var(--cati-blue);
    color: #fff;
    outline: none;
}

.dashboard-secondary-button[aria-disabled="true"] {
    cursor: pointer;
}

.dashboard-inline-link {
    color: var(--cati-blue);
    font-weight: 800;
    text-decoration: none;
}

.dashboard-inline-link:hover,
.dashboard-inline-link:focus-visible {
    color: var(--cati-blue-dark);
    outline: none;
}

.dashboard-resource-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.dashboard-resource-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.dashboard-icon-button {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border: 1px solid var(--cati-blue-border);
    border-radius: .95rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.dashboard-icon-button:hover,
.dashboard-icon-button:focus-visible {
    background: var(--cati-blue);
    color: #fff;
    outline: none;
}

@media (max-width: 767px) {
    .dashboard-search-panel {
        border-radius: 1.6rem;
    }

    .dashboard-resource-item {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-user-button,
    .dashboard-dropdown-action,
    .dashboard-shortcut,
    .dashboard-secondary-button,
    .dashboard-icon-button {
        transition-duration: .01ms !important;
        transform: none !important;
    }
}

/* CATI DASHBOARD V2 */
.dashboard-nav-link{display:inline-flex;align-items:center;gap:.5rem;min-height:2.55rem;padding:0 .72rem;border-radius:.75rem;color:#475569;font-size:.8rem;font-weight:750;text-decoration:none;transition:.18s}.dashboard-nav-link i{font-size:.75rem;color:#94a3b8}.dashboard-nav-link:hover,.dashboard-nav-link:focus-visible{color:var(--cati-blue);background:var(--cati-blue-soft);outline:none}.dashboard-nav-link--current{color:var(--cati-blue);background:var(--cati-blue-light)}.dashboard-nav-link--current i{color:var(--cati-blue)}.dashboard-mobile-nav{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;border-radius:1rem;color:#0f172a;font-weight:800}.dashboard-mobile-nav i{width:1.1rem;color:#64748b;text-align:center}.dashboard-mobile-nav--current{background:var(--cati-blue-light);color:var(--cati-blue)}.dashboard-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 10%,rgba(96,165,250,.24),transparent 24rem),linear-gradient(125deg,#0d1c48 0%,#182e6f 48%,#203d91 100%)}.dashboard-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.17;background-image:radial-gradient(circle,rgba(255,255,255,.45) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%,rgba(0,0,0,.25));mask-image:linear-gradient(90deg,transparent,#000 60%,rgba(0,0,0,.25))}.dashboard-account-summary{padding:1.15rem 1.25rem;border:1px solid rgba(255,255,255,.13);border-radius:1.25rem;background:rgba(255,255,255,.07);backdrop-filter:blur(10px)}.dashboard-search-bar{display:flex;align-items:center;gap:1rem;padding:.55rem;border:1px solid rgba(255,255,255,.25);border-radius:1rem;background:#fff;box-shadow:0 18px 50px rgba(13,28,72,.2)}.dashboard-primary-button{min-height:3rem;padding:0 1.35rem;border-radius:.75rem;background:var(--cati-blue);color:#fff;font-size:.875rem;font-weight:850}.dashboard-primary-button:hover{background:var(--cati-blue-dark)}.dashboard-action-card{display:grid;grid-template-columns:2.8rem minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem;border:1px solid #e2e8f0;border-radius:1rem;background:#fff;text-decoration:none;transition:.18s}.dashboard-action-card:hover{border-color:var(--cati-blue-border);box-shadow:0 10px 28px rgba(15,23,42,.06)}.dashboard-action-icon{display:inline-flex;width:2.8rem;height:2.8rem;align-items:center;justify-content:center;border-radius:.85rem}.dashboard-surface{padding:1.5rem;border:1px solid #e2e8f0;border-radius:1.25rem;background:#fff;box-shadow:0 10px 32px rgba(15,23,42,.035)}.dashboard-kicker{color:var(--cati-blue);font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.dashboard-text-link{color:var(--cati-blue);font-size:.85rem;font-weight:850;text-decoration:none}.dashboard-activity-row{display:flex;align-items:center;gap:1rem;padding:1rem 0;text-decoration:none}.dashboard-activity-row:first-child{padding-top:0}.dashboard-activity-row:last-child{padding-bottom:0}.dashboard-activity-icon{display:inline-flex;width:2.5rem;height:2.5rem;flex:0 0 auto;align-items:center;justify-content:center;border-radius:.75rem;background:var(--cati-blue-light);color:var(--cati-blue);font-size:.8rem}.dashboard-resource-card{min-height:13rem;padding:1.25rem;border:1px solid #e2e8f0;border-radius:1rem;background:#fff}.dashboard-resource-type{display:inline-flex;padding:.35rem .55rem;border-radius:9999px;background:#f1f5f9;color:#64748b;font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dashboard-help-card{padding:1.5rem;border-radius:1.25rem;background:radial-gradient(circle at 90% 0%,rgba(96,165,250,.2),transparent 15rem),linear-gradient(145deg,#172c68,#203d91);box-shadow:0 14px 34px rgba(32,61,145,.15)}@media(max-width:767px){.dashboard-search-bar{align-items:stretch;flex-direction:column;gap:.5rem}.dashboard-primary-button{width:100%}.dashboard-surface,.dashboard-help-card{padding:1.25rem;border-radius:1rem}}


/* =========================================================
   CATI DASHBOARD — MOTIFS DU CATI HERO
========================================================= */

.dashboard-hero {
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 12%, rgba(59, 130, 246, .25), transparent 32%),
        radial-gradient(circle at 88% 72%, rgba(59, 130, 246, .22), transparent 34%),
        linear-gradient(125deg, #0d1c48 0%, #182e6f 48%, #203d91 100%);
}

.dashboard-hero::before,
.dashboard-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.dashboard-hero::before {
    inset: 0;
    opacity: .42;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,.28) 1px, transparent 1.5px);
    background-size: 72px 72px, 72px 72px, 18px 18px;
    background-position: center, center, 4px 4px;
    -webkit-mask-image: linear-gradient(
        100deg,
        transparent 2%,
        #000 42%,
        rgba(0,0,0,.28) 86%,
        transparent 100%
    );
    mask-image: linear-gradient(
        100deg,
        transparent 2%,
        #000 42%,
        rgba(0,0,0,.28) 86%,
        transparent 100%
    );
}

.dashboard-hero::after {
    width: 38rem;
    height: 38rem;
    top: 50%;
    right: -15rem;
    border: 1px solid rgba(191,219,254,.22);
    border-radius: 50%;
    box-shadow:
        0 0 0 5rem rgba(32,61,145,.12),
        0 0 0 10rem rgba(32,61,145,.06),
        inset 0 0 7rem rgba(255,255,255,.05);
    transform: translateY(-50%);
}

.dashboard-hero > .max-w-7xl {
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .dashboard-hero::before {
        opacity: .30;
        background-size: 52px 52px, 52px 52px, 16px 16px;
    }

    .dashboard-hero::after {
        width: 24rem;
        height: 24rem;
        right: -16rem;
    }
}


/* =========================================================
   CATI — PAGE RÉSULTATS DE RECHERCHE
========================================================= */

.search-filter-panel {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,.035);
}

.search-filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    color: #475569;
    font-size: .875rem;
    font-weight: 650;
    cursor: pointer;
}

.search-filter-option input {
    width: 1rem;
    height: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: .3rem;
    accent-color: var(--cati-blue);
}

.search-filter-count {
    display: inline-flex;
    min-width: 1.8rem;
    height: 1.55rem;
    align-items: center;
    justify-content: center;
    padding: 0 .4rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .7rem;
    font-weight: 800;
}

.search-filter-input {
    width: 100%;
    min-height: 2.65rem;
    padding: .65rem .75rem;
    border: 1px solid #cbd5e1;
    border-radius: .75rem;
    background: #fff;
    color: #0f172a;
    font-size: .875rem;
}

.search-filter-input:focus {
    border-color: var(--cati-blue);
    box-shadow: 0 0 0 3px rgba(32,61,145,.10);
    outline: none;
}

.search-active-filter {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 1.9rem;
    padding: 0 .7rem;
    border: 1px solid var(--cati-blue-border);
    border-radius: 9999px;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-size: .85rem;
    font-weight: 850;
}

.search-result-item {
    display: grid;
    grid-template-columns: 3rem minmax(0,1fr);
    gap: 1.15rem;
    padding: 1.75rem 0;
}

.search-result-icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    font-size: 1rem;
}

.search-result-icon--journal {
    background: #eef2ff;
    color: #4f46e5;
}

.search-result-icon--patent {
    background: #eff6ff;
    color: var(--cati-blue);
}

.search-result-icon--book {
    background: #fffbeb;
    color: #b45309;
}

.search-result-icon--periodical {
    background: #ecfdf5;
    color: #047857;
}

.search-result-type {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: 0 .55rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.search-result-primary-action,
.search-result-secondary-action {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: .7rem;
    padding: 0 .9rem;
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.search-result-primary-action {
    border: 1px solid var(--cati-blue);
    background: var(--cati-blue);
    color: #fff;
}

.search-result-primary-action:hover,
.search-result-primary-action:focus-visible {
    background: var(--cati-blue-dark);
    border-color: var(--cati-blue-dark);
    outline: none;
}

.search-result-secondary-action {
    border: 1px solid #dbe3ed;
    background: #fff;
    color: #475569;
}

.search-result-secondary-action:hover,
.search-result-secondary-action:focus-visible {
    border-color: var(--cati-blue-border);
    background: var(--cati-blue-soft);
    color: var(--cati-blue);
    outline: none;
}

.search-page-button {
    display: inline-flex;
    min-width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: .7rem;
    background: #fff;
    color: #475569;
    font-size: .9rem;
    font-weight: 800;
}

.search-page-button:hover:not(:disabled),
.search-page-button:focus-visible:not(:disabled) {
    border-color: var(--cati-blue-border);
    color: var(--cati-blue);
    outline: none;
}

.search-page-button--current {
    border-color: var(--cati-blue);
    background: var(--cati-blue);
    color: #fff;
}

.search-page-button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .search-result-item {
        grid-template-columns: 2.65rem minmax(0,1fr);
        gap: .9rem;
        padding: 1.4rem 0;
    }

    .search-result-icon {
        width: 2.65rem;
        height: 2.65rem;
        border-radius: .8rem;
    }
}


/* =========================================================
   CATI — DROPDOWN CATÉGORIE DE RECHERCHE
   Vanilla JS — sans icône
========================================================= */

.dashboard-search-bar {
    overflow: visible;
}

.search-category-select {
    position: relative;
    flex: 0 0 14rem;
    min-width: 0;
    border-left: 1px solid #e2e8f0;
}

.search-category-select__button {
    width: 100%;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 1rem 0 1.1rem;
    border: 0;
    border-radius: .7rem;
    background: transparent;
    color: #334155;
    font-size: .84rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition:
        background-color .16s ease,
        color .16s ease,
        box-shadow .16s ease;
}

.search-category-select__button:hover {
    background: #f8fafc;
    color: #0f172a;
}

.search-category-select__button:focus-visible,
.search-category-select__button[aria-expanded="true"] {
    background: #f8fafc;
    box-shadow: inset 0 0 0 2px rgba(32, 61, 145, .12);
    outline: none;
}

.search-category-select__button > span:first-child {
    min-width: 0;
}

.search-category-select__chevron {
    width: .45rem;
    height: .45rem;
    flex: 0 0 auto;
    border-right: 1.5px solid #94a3b8;
    border-bottom: 1.5px solid #94a3b8;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .16s ease, border-color .16s ease;
}

.search-category-select__button[aria-expanded="true"] .search-category-select__chevron {
    border-color: var(--cati-blue);
    transform: rotate(225deg) translate(-1px, -1px);
}

.search-category-select__menu {
    position: fixed;
    z-index: 100;
    overflow: hidden;
    padding: .35rem;
    border: 1px solid #e2e8f0;
    border-radius: .8rem;
    background: #fff;
    box-shadow:
        0 18px 42px rgba(15, 23, 42, .12),
        0 3px 8px rgba(15, 23, 42, .04);
}

.search-category-select__option {
    width: 100%;
    display: block;
    padding: .72rem .8rem;
    border: 0;
    border-radius: .6rem;
    background: transparent;
    color: #334155;
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition:
        background-color .14s ease,
        color .14s ease;
}

.search-category-select__option:hover,
.search-category-select__option:focus-visible {
    background: #f8fafc;
    color: #0f172a;
    outline: none;
}

.search-category-select__option.is-selected {
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-weight: 800;
}

@media (max-width: 767px) {
    .dashboard-search-bar {
        align-items: stretch;
    }

    .search-category-select {
        width: 100%;
        flex: none;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: .35rem;
    }

    .search-category-select__button {
        min-height: 2.8rem;
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-category-select__button,
    .search-category-select__chevron,
    .search-category-select__option {
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   CATI — QUOTA ANNUEL DES POINTS FOCAUX
========================================================= */

.annual-quota-card {
        position: relative;
        overflow: hidden;
        border-color: rgba(32, 61, 145, .18);
        background:
            radial-gradient(circle at 100% 0%, rgba(32, 61, 145, .07), transparent 11rem),
            #fff;
    }

    .annual-quota-year {
        display: inline-flex;
        min-height: 1.7rem;
        align-items: center;
        justify-content: center;
        padding: 0 .65rem;
        border: 1px solid rgba(32, 61, 145, .15);
        border-radius: 999px;
        background: #f6f8fd;
        color: rgb(32, 61, 145);
        font-size: .68rem;
        font-weight: 850;
    }

    .annual-quota-value {
        color: #0f172a;
        font-size: 2rem;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -.03em;
    }

    .annual-quota-value small {
        color: #94a3b8;
        font-size: .9rem;
        font-weight: 800;
        letter-spacing: 0;
    }

    .annual-quota-progress {
        height: .5rem;
        overflow: hidden;
        border-radius: 999px;
        background: #e8edf5;
    }

    .annual-quota-progress > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: rgb(32, 61, 145);
    }

    .annual-quota-banner {
        display: grid;
        gap: 1.4rem;
        padding: 1.35rem;
        border: 1px solid rgba(32, 61, 145, .17);
        border-radius: 1.15rem;
        background:
            radial-gradient(circle at 100% 0%, rgba(32, 61, 145, .065), transparent 14rem),
            #f8faff;
    }

    .annual-quota-summary {
        min-width: 0;
    }

    .annual-quota-meta {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem 1rem;
        color: #64748b;
        font-size: .75rem;
        font-weight: 650;
    }

    @media (min-width: 768px) {
        .annual-quota-banner {
            grid-template-columns: minmax(0, 1fr) 22rem;
            align-items: center;
            padding: 1.5rem 1.6rem;
        }
    }


/* =========================================================
   CATI — DASHBOARD HELP CARD
========================================================= */

.dashboard-help-card--refined {
        position: relative;
        overflow: hidden;
        margin-top: 1.5rem;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 1.15rem;
        background:
            radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .07), transparent 13rem),
            linear-gradient(135deg, rgb(24, 46, 111) 0%, rgb(13, 28, 72) 100%);
        box-shadow: 0 16px 38px rgba(13, 28, 72, .12);
    }

    .dashboard-help-card--refined::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
        background-size: 24px 24px;
        mask-image: linear-gradient(to right, rgba(0,0,0,.55), transparent 78%);
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.55), transparent 78%);
    }

    .dashboard-help-card__content {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 1.25rem;
        align-items: center;
        padding: 1.25rem 1.35rem;
    }

    .dashboard-help-card__main {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
        min-width: 0;
    }

    .dashboard-help-card__icon {
        display: inline-flex;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: .85rem;
        background: rgba(255, 255, 255, .08);
        color: #fff;
        font-size: 1rem;
    }

    .dashboard-help-card__body {
        min-width: 0;
    }

    .dashboard-help-card__eyebrow {
        display: block;
        margin-bottom: .3rem;
        color: rgba(219, 234, 254, .70);
        font-size: .65rem;
        font-weight: 850;
        letter-spacing: .11em;
        text-transform: uppercase;
    }

    .dashboard-help-card__title {
        margin: 0;
        color: #fff;
        font-size: 1.05rem;
        line-height: 1.35;
        font-weight: 900;
        letter-spacing: -.01em;
    }

    .dashboard-help-card__text {
        margin-top: .45rem;
        max-width: 42rem;
        color: rgba(219, 234, 254, .80);
        font-size: .81rem;
        line-height: 1.58;
        font-weight: 550;
    }

    .dashboard-help-card__action {
        display: flex;
        justify-content: flex-start;
    }

    .dashboard-help-card__button {
        display: inline-flex;
        min-height: 2.75rem;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        padding: 0 1rem;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: .75rem;
        background: #fff;
        color: rgb(24, 46, 111);
        font-size: .78rem;
        font-weight: 850;
        text-decoration: none;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
        transition: background-color .16s ease, transform .16s ease;
    }

    .dashboard-help-card__button i {
        font-size: .62rem;
    }

    .dashboard-help-card__button:hover,
    .dashboard-help-card__button:focus-visible {
        background: #eff6ff;
        transform: translateY(-1px);
        outline: none;
    }

    @media (min-width: 768px) {
        .dashboard-help-card__content {
            grid-template-columns: minmax(0, 1fr) auto;
            padding: 1.35rem 1.5rem;
        }

        .dashboard-help-card__action {
            justify-content: flex-end;
            align-self: center;
        }
    }

    @media (max-width: 767px) {
        .dashboard-help-card--refined {
            margin-top: 1.25rem;
            border-radius: 1rem;
        }

        .dashboard-help-card__content {
            padding: 1.1rem;
        }

        .dashboard-help-card__main {
            grid-template-columns: 2.75rem minmax(0, 1fr);
            gap: .9rem;
        }

        .dashboard-help-card__icon {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: .8rem;
        }

        .dashboard-help-card__button {
            width: 100%;
        }
    }

/* Progressions calculées — valeurs de démonstration */
.annual-quota-progress-fill--70 {
    width: 70%;
}

.dashboard-progress-fill--70 {
    width: 70%;
}

/* =========================================================
   CATI — PAGE FAVORIS
========================================================= */

.favorites-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid #e2e8f0;
}

.favorites-catalogue-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--cati-blue);
    font-size: .82rem;
    font-weight: 850;
    text-decoration: none;
    transition: gap .16s ease, color .16s ease;
}

.favorites-catalogue-link:hover,
.favorites-catalogue-link:focus-visible {
    gap: .7rem;
    color: var(--cati-blue-dark);
    outline: none;
}

.favorites-catalogue-link i {
    font-size: .65rem;
}

.favorites-toolbar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .55rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .025);
}

.favorites-search {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: .75rem;
    padding: 0 .75rem;
}

.favorites-search i {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: .9rem;
}

.favorites-search input {
    width: 100%;
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: .875rem;
    outline: none;
}

.favorites-search input::placeholder {
    color: #94a3b8;
}

.favorites-toolbar__filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.favorites-select {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    background: #f8fafc;
    padding: 0 2rem 0 .8rem;
    color: #475569;
    font-size: .76rem;
    font-weight: 750;
}

.favorites-select:focus {
    border-color: var(--cati-blue);
    box-shadow: 0 0 0 3px rgba(32, 61, 145, .10);
    outline: none;
}

.favorite-resource-card {
    display: flex;
    min-height: 20rem;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 9px 28px rgba(15, 23, 42, .03);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.favorite-resource-card:hover {
    border-color: var(--cati-blue-border);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
    transform: translateY(-1px);
}

.favorite-resource-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.2rem 0;
}

.favorite-resource-type {
    display: inline-flex;
    min-height: 1.65rem;
    align-items: center;
    padding: 0 .6rem;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.favorite-resource-type--journal {
    background: #eef2ff;
    color: #4f46e5;
}

.favorite-resource-type--patent {
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.favorite-resource-type--guide {
    background: #fffbeb;
    color: #b45309;
}

.favorite-resource-type--periodical {
    background: #ecfdf5;
    color: #047857;
}

.favorite-resource-meta {
    color: #94a3b8;
    font-size: .85rem;
    font-weight: 800;
}

.favorite-remove-button {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cati-blue-border);
    border-radius: .72rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-size: .78rem;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.favorite-remove-button:hover,
.favorite-remove-button:focus-visible {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    outline: none;
}

.favorite-resource-card__content {
    flex: 1;
    padding: 1rem 1.2rem 1.15rem;
}

.favorite-resource-domain {
    color: var(--cati-blue);
    font-size: .85rem;
    font-weight: 850;
}

.favorite-resource-card h3 {
    margin-top: .5rem;
    color: #0f172a;
    font-size: 1.05rem;
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: -.01em;
}

.favorite-resource-card h3 a {
    color: inherit;
    text-decoration: none;
}

.favorite-resource-card h3 a:hover,
.favorite-resource-card h3 a:focus-visible {
    color: var(--cati-blue);
    outline: none;
}

.favorite-resource-description {
    margin-top: .75rem;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.65;
}

.favorite-resource-source {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    color: #64748b;
    font-size: .85rem;
    font-weight: 650;
}

.favorite-resource-source i {
    color: #94a3b8;
    font-size: .85rem;
}

.favorite-resource-card__footer {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: .9rem 1.2rem;
    border-top: 1px solid #f1f5f9;
    background: #fbfdff;
}

.favorite-saved-date {
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 650;
}

.favorite-resource-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.favorite-resource-action {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    padding: 0 .85rem;
    border: 1px solid var(--cati-blue-border);
    border-radius: .7rem;
    background: #fff;
    color: var(--cati-blue);
    font-size: .75rem;
    font-weight: 850;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.favorite-resource-action:hover,
.favorite-resource-action:focus-visible {
    border-color: var(--cati-blue);
    background: var(--cati-blue);
    color: #fff;
    outline: none;
}

.favorite-resource-icon-action {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: .7rem;
    background: #fff;
    color: #64748b;
    font-size: .85rem;
    text-decoration: none;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.favorite-resource-icon-action:hover,
.favorite-resource-icon-action:focus-visible {
    border-color: var(--cati-blue-border);
    background: var(--cati-blue-soft);
    color: var(--cati-blue);
    outline: none;
}

.favorites-pagination {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.favorites-pagination p {
    color: #64748b;
    font-size: .82rem;
}

.favorites-pagination strong {
    color: #334155;
}

.favorites-empty-state {
    margin-top: 2rem;
    padding: 3.5rem 1.5rem;
    border: 1px dashed #cbd5e1;
    border-radius: 1.15rem;
    background: #fff;
    text-align: center;
}

.favorites-empty-state__icon {
    display: inline-flex;
    width: 3.5rem;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-size: 1.15rem;
}

.favorites-empty-state h2 {
    margin-top: 1rem;
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 900;
}

.favorites-empty-state p {
    max-width: 30rem;
    margin: .5rem auto 0;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.6;
}

.favorites-empty-state a {
    display: inline-flex;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 0 1rem;
    border-radius: .72rem;
    background: var(--cati-blue);
    color: #fff;
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
}

@media (min-width: 640px) {
    .favorites-summary {
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
    }

    .favorite-resource-card__footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .favorites-pagination {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 768px) {
    .favorites-toolbar {
        flex-direction: row;
        align-items: center;
    }

    .favorites-toolbar__filters {
        flex: 0 0 auto;
        grid-template-columns: 10.5rem 11.5rem;
    }
}

@media (max-width: 639px) {
    .favorites-toolbar__filters {
        grid-template-columns: 1fr;
    }

    .favorite-resource-card {
        min-height: auto;
    }
}

/* =========================================================
   CATI — FAVORIS CUSTOM SELECTS
========================================================= */

.favorites-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
    padding: .45rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .025);
}

.favorites-search {
    min-height: 3rem;
    border-radius: .75rem;
    background: #fff;
}

.favorites-search:focus-within {
    background: #f8fafc;
    box-shadow: inset 0 0 0 2px rgba(32, 61, 145, .10);
}

.favorites-toolbar__filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem;
}

.favorites-custom-select {
    position: relative;
    min-width: 0;
}

.favorites-custom-select__button {
    width: 100%;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 0 .9rem;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    background: #f8fafc;
    color: #334155;
    font-size: .78rem;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease;
}

.favorites-custom-select__button:hover {
    border-color: #cbd5e1;
    background: #fff;
    color: #0f172a;
}

.favorites-custom-select__button:focus-visible,
.favorites-custom-select__button[aria-expanded="true"] {
    border-color: var(--cati-blue-border);
    background: #fff;
    color: var(--cati-blue);
    box-shadow: 0 0 0 3px rgba(32, 61, 145, .08);
    outline: none;
}

.favorites-custom-select__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorites-custom-select__chevron {
    width: .45rem;
    height: .45rem;
    flex: 0 0 auto;
    border-right: 1.5px solid #94a3b8;
    border-bottom: 1.5px solid #94a3b8;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .16s ease, border-color .16s ease;
}

.favorites-custom-select__button[aria-expanded="true"] .favorites-custom-select__chevron {
    border-color: var(--cati-blue);
    transform: rotate(225deg) translate(-1px, -1px);
}

.favorites-custom-select__menu {
    position: fixed;
    z-index: 120;
    max-height: 18rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .35rem;
    border: 1px solid #e2e8f0;
    border-radius: .8rem;
    background: #fff;
    box-shadow:
        0 18px 42px rgba(15, 23, 42, .12),
        0 3px 8px rgba(15, 23, 42, .04);
}

.favorites-custom-select__option {
    width: 100%;
    display: block;
    padding: .7rem .8rem;
    border: 0;
    border-radius: .6rem;
    background: transparent;
    color: #334155;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.favorites-custom-select__option:hover,
.favorites-custom-select__option:focus-visible {
    background: #f8fafc;
    color: #0f172a;
    outline: none;
}

.favorites-custom-select__option.is-selected {
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-weight: 850;
}

@media (min-width: 768px) {
    .favorites-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .favorites-toolbar__filters {
        grid-template-columns: 11.25rem 12.25rem;
    }

    .favorites-custom-select__button {
        border-color: transparent;
        background: #f8fafc;
    }
}

@media (max-width: 767px) {
    .favorites-search {
        min-height: 2.85rem;
    }

    .favorites-custom-select__button {
        min-height: 2.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .favorites-custom-select__button,
    .favorites-custom-select__chevron,
    .favorites-custom-select__option {
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   CATI — PAGE AIDE
========================================================= */

.help-topic-grid {
    display: grid;
    gap: 1rem;
}

.help-topic-card {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .025);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.help-topic-card:hover,
.help-topic-card:focus-visible {
    border-color: var(--cati-blue-border);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .055);
    transform: translateY(-1px);
    outline: none;
}

.help-topic-card__icon {
    display: inline-flex;
    width: 2.8rem;
    height: 2.8rem;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-size: .9rem;
}

.help-topic-card__icon--amber {
    background: #fffbeb;
    color: #b45309;
}

.help-topic-card__icon--violet {
    background: #f5f3ff;
    color: #7c3aed;
}

.help-topic-card__icon--emerald {
    background: #ecfdf5;
    color: #047857;
}

.help-topic-card h3 {
    color: #0f172a;
    font-size: .9rem;
    font-weight: 900;
}

.help-topic-card p {
    margin-top: .25rem;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.5;
}

.help-topic-card__arrow {
    color: #94a3b8;
    font-size: .68rem;
    transition: transform .16s ease, color .16s ease;
}

.help-topic-card:hover .help-topic-card__arrow {
    color: var(--cati-blue);
    transform: translateX(2px);
}

.help-faq-list {
    border-top: 1px solid #e2e8f0;
}

.help-faq {
    border-bottom: 1px solid #e2e8f0;
}

.help-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 0;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
}

.help-faq summary::-webkit-details-marker {
    display: none;
}

.help-faq summary i {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: .68rem;
    transition: transform .18s ease, color .18s ease;
}

.help-faq[open] summary i {
    color: var(--cati-blue);
    transform: rotate(180deg);
}

.help-faq__content {
    max-width: 44rem;
    padding: 0 2rem 1.1rem 0;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.7;
}

.help-faq__content strong {
    color: #334155;
    font-weight: 800;
}

.help-guide-card {
    padding: 1.4rem;
    border: 1px solid var(--cati-blue-border);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(32, 61, 145, .055), transparent 12rem),
        #fff;
}

.help-guide-card__icon {
    display: inline-flex;
    width: 2.9rem;
    height: 2.9rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: .85rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.help-guide-card h2,
.help-account-card h2 {
    margin-top: .45rem;
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 900;
}

.help-guide-list {
    margin-top: 1.2rem;
}

.help-guide-list li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .75rem;
    padding: .85rem 0;
    border-top: 1px solid #f1f5f9;
}

.help-guide-list li > span {
    color: var(--cati-blue);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.help-guide-list p {
    color: #64748b;
    font-size: .78rem;
    line-height: 1.6;
}

.help-account-card {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #fff;
}

.help-account-card p {
    margin-top: .55rem;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.6;
}

.help-account-card a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    color: var(--cati-blue);
    font-size: .76rem;
    font-weight: 850;
    text-decoration: none;
}

.help-account-card a:hover,
.help-account-card a:focus-visible {
    color: var(--cati-blue-dark);
    outline: none;
}

.help-contact-card {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .07), transparent 13rem),
        linear-gradient(135deg, var(--cati-blue-dark) 0%, var(--cati-blue-deep) 100%);
    box-shadow: 0 16px 38px rgba(13, 28, 72, .12);
}

.help-contact-card__main {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.help-contact-card__icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.help-contact-card__eyebrow {
    display: block;
    margin-bottom: .3rem;
    color: rgba(219, 234, 254, .70);
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.help-contact-card h2 {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 900;
}

.help-contact-card p {
    margin-top: .45rem;
    max-width: 42rem;
    color: rgba(219, 234, 254, .80);
    font-size: .81rem;
    line-height: 1.58;
}

.help-contact-card__button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 0 1rem;
    border-radius: .75rem;
    background: #fff;
    color: var(--cati-blue-dark);
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
}

.help-contact-card__button:hover,
.help-contact-card__button:focus-visible {
    background: #eff6ff;
    outline: none;
}

@media (min-width: 640px) {
    .help-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .help-contact-card {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 1.35rem 1.5rem;
    }

    .help-contact-card__button {
        justify-self: end;
    }
}

@media (max-width: 767px) {
    .help-contact-card {
        padding: 1.1rem;
    }

    .help-contact-card__main {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: .9rem;
    }

    .help-contact-card__icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .help-contact-card__button {
        width: 100%;
    }

    .help-faq__content {
        padding-right: .5rem;
    }
}

/* =========================================================
   CATI — PAGE MON PROFIL
========================================================= */

.profile-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 9px 28px rgba(15, 23, 42, .03);
}

.profile-overview__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

.profile-avatar {
    display: inline-flex;
    width: 3.6rem;
    height: 3.6rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cati-blue-border);
    border-radius: 1rem;
    background:
        linear-gradient(145deg, var(--cati-blue-light), #fff);
    color: var(--cati-blue);
    font-size: .9rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.profile-role-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .45rem;
    padding: .45rem .75rem;
    border: 1px solid var(--cati-blue-border);
    border-radius: 999px;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.profile-role-badge i {
    font-size: .62rem;
}

.profile-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-section-icon {
    display: inline-flex;
    width: 2.9rem;
    height: 2.9rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.profile-form {
    border-top: 1px solid #f1f5f9;
    padding-top: 1.25rem;
}

.profile-form-grid {
    display: grid;
    gap: 1rem;
}

.profile-label {
    display: block;
    margin-bottom: .45rem;
    color: #334155;
    font-size: .75rem;
    font-weight: 800;
}

.profile-field {
    width: 100%;
    min-height: 3rem;
    padding: .7rem .85rem;
    border: 1px solid #cbd5e1;
    border-radius: .75rem;
    background: #fff;
    color: #0f172a;
    font-size: .85rem;
    font-weight: 600;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.profile-field:hover {
    border-color: #94a3b8;
}

.profile-field:focus {
    border-color: var(--cati-blue);
    box-shadow: 0 0 0 3px rgba(32, 61, 145, .10);
    outline: none;
}

.profile-form-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: .65rem;
    margin-top: 1.35rem;
    padding-top: 1.2rem;
    border-top: 1px solid #f1f5f9;
}

.profile-primary-button,
.profile-secondary-button {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0 1rem;
    border-radius: .75rem;
    font-size: .78rem;
    font-weight: 850;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.profile-primary-button {
    border: 1px solid var(--cati-blue);
    background: var(--cati-blue);
    color: #fff;
}

.profile-primary-button:hover,
.profile-primary-button:focus-visible {
    border-color: var(--cati-blue-dark);
    background: var(--cati-blue-dark);
    outline: none;
}

.profile-secondary-button {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
}

.profile-secondary-button:hover,
.profile-secondary-button:focus-visible {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    outline: none;
}

.profile-info-card {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #fff;
}

.profile-info-card__header {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.profile-info-card__icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.profile-info-card h2 {
    margin-top: .25rem;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
}

.profile-info-list {
    margin-top: 1.1rem;
    border-top: 1px solid #f1f5f9;
}

.profile-info-list > div {
    padding: .85rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.profile-info-list > div:last-child {
    border-bottom: 0;
}

.profile-info-list span {
    display: block;
    color: #94a3b8;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-info-list strong {
    display: block;
    margin-top: .28rem;
    color: #334155;
    font-size: .82rem;
    line-height: 1.5;
    font-weight: 800;
}

.profile-info-list .profile-status-active {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #047857;
}

.profile-status-active i {
    font-size: .45rem;
}

.profile-info-card__text {
    margin-top: 1rem;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.65;
}

.profile-inline-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    color: var(--cati-blue);
    font-size: .76rem;
    font-weight: 850;
    text-decoration: none;
}

.profile-inline-link:hover,
.profile-inline-link:focus-visible {
    color: var(--cati-blue-dark);
    outline: none;
}

.profile-security-card {
    display: grid;
    gap: 1.2rem;
    align-items: center;
    padding: 1.25rem 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(32, 61, 145, .045), transparent 13rem),
        #fff;
}

.profile-security-card__main {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.profile-security-card__icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.profile-security-card h2 {
    margin-top: .25rem;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
}

.profile-security-card p {
    margin-top: .4rem;
    max-width: 42rem;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.6;
}

.profile-security-card__button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 0 1rem;
    border: 1px solid var(--cati-blue-border);
    border-radius: .75rem;
    background: #fff;
    color: var(--cati-blue);
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
}

.profile-security-card__button:hover,
.profile-security-card__button:focus-visible {
    border-color: var(--cati-blue);
    background: var(--cati-blue-light);
    outline: none;
}

@media (min-width: 640px) {
    .profile-overview {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .profile-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-form-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
}

@media (min-width: 768px) {
    .profile-security-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .profile-security-card__button {
        justify-self: end;
    }
}

@media (max-width: 639px) {
    .profile-avatar {
        width: 3.2rem;
        height: 3.2rem;
        border-radius: .9rem;
    }

    .profile-section-icon {
        display: none;
    }
}

/* =========================================================
   CATI — MON PROFIL SÉCURITÉ ET 2FA
========================================================= */

.profile-readonly-grid {
    display: grid;
    gap: .75rem;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: .9rem;
    background: #f8fafc;
}

.profile-readonly-item span {
    display: block;
    color: #94a3b8;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-readonly-item strong {
    display: block;
    margin-top: .3rem;
    color: #334155;
    font-size: .82rem;
    line-height: 1.5;
    font-weight: 800;
}

.profile-security-panel {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(32, 61, 145, .045), transparent 13rem),
        #fff;
    box-shadow: 0 9px 28px rgba(15, 23, 42, .03);
}

.profile-security-panel__heading {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.profile-security-panel__icon {
    display: inline-flex;
    width: 2.85rem;
    height: 2.85rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.profile-security-panel__heading h2 {
    margin-top: .25rem;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
}

.profile-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid #f1f5f9;
}

.profile-security-row strong,
.profile-two-factor-heading strong,
.profile-two-factor-method__body > strong,
.profile-recovery-codes strong {
    color: #0f172a;
    font-size: .82rem;
    font-weight: 900;
}

.profile-security-row p,
.profile-two-factor-heading p,
.profile-two-factor-method p,
.profile-recovery-codes p {
    margin-top: .3rem;
    color: #64748b;
    font-size: .73rem;
    line-height: 1.55;
}

.profile-security-action,
.profile-two-factor-method__action {
    display: inline-flex;
    min-height: 2.35rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 .8rem;
    border: 1px solid var(--cati-blue-border);
    border-radius: .7rem;
    background: #fff;
    color: var(--cati-blue);
    font-size: .85rem;
    font-weight: 850;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.profile-security-action:hover,
.profile-security-action:focus-visible,
.profile-two-factor-method__action:hover,
.profile-two-factor-method__action:focus-visible {
    border-color: var(--cati-blue);
    background: var(--cati-blue-light);
    outline: none;
}

.profile-security-divider {
    height: 1px;
    margin: 1.15rem 0;
    background: #f1f5f9;
}

.profile-two-factor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-two-factor-status {
    display: inline-flex;
    min-height: 1.7rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 .6rem;
    border-radius: 999px;
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .03em;
}

.profile-two-factor-status--off {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
}

.profile-two-factor-status--on {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.profile-two-factor-methods {
    display: grid;
    gap: .65rem;
    margin-top: 1rem;
}

.profile-two-factor-method {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .85rem;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    background: #fff;
}

.profile-two-factor-method--recommended {
    border-color: var(--cati-blue-border);
    background: var(--cati-blue-soft);
}

.profile-two-factor-method__icon {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-size: .9rem;
}

.profile-two-factor-method__body {
    min-width: 0;
}

.profile-two-factor-method__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.profile-two-factor-method__title strong {
    color: #0f172a;
    font-size: .82rem;
    font-weight: 900;
}

.profile-two-factor-method__title span {
    display: inline-flex;
    min-height: 1.4rem;
    align-items: center;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.profile-two-factor-method__action {
    grid-column: 1 / -1;
    width: 100%;
}

.profile-recovery-codes {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1rem;
    padding: .9rem;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    background: #f8fafc;
}

.profile-recovery-codes__button {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    padding: 0 .8rem;
    border: 1px solid #e2e8f0;
    border-radius: .7rem;
    background: #fff;
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 850;
}

.profile-recovery-codes__button:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.profile-security-note {
    margin-top: .85rem;
    color: #94a3b8;
    font-size: .68rem;
    line-height: 1.55;
}

@media (min-width: 640px) {
    .profile-readonly-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-two-factor-method {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
        align-items: center;
    }

    .profile-two-factor-method__action {
        grid-column: auto;
        width: auto;
    }

    .profile-recovery-codes {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 639px) {
    .profile-security-row,
    .profile-two-factor-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-security-action {
        width: 100%;
    }

    .profile-two-factor-status {
        width: fit-content;
    }
}

/* =========================================================
   CATI — PAGE MODIFICATION MOT DE PASSE
========================================================= */

.password-page-heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.password-back-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .5rem;
    color: var(--cati-blue);
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
}

.password-back-link:hover,
.password-back-link:focus-visible {
    color: var(--cati-blue-dark);
    outline: none;
}

.password-back-link i {
    font-size: .65rem;
}

.password-security-state {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .45rem;
    padding: .45rem .7rem;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: .67rem;
    font-weight: 850;
}

.password-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.password-section-icon {
    display: inline-flex;
    width: 2.9rem;
    height: 2.9rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.password-form {
    border-top: 1px solid #f1f5f9;
    padding-top: 1.3rem;
}

.password-field-group + .password-field-group {
    margin-top: 1rem;
}

.password-input-wrap {
    position: relative;
}

.password-field {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: .7rem;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: #94a3b8;
    font-size: .78rem;
    transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background: #f8fafc;
    color: var(--cati-blue);
    outline: none;
}

.password-form-divider {
    height: 1px;
    margin: 1.25rem 0;
    background: #f1f5f9;
}

.password-rules {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: .9rem;
    background: #f8fafc;
}

.password-rules__title {
    color: #334155;
    font-size: .75rem;
    font-weight: 850;
}

.password-rules ul {
    display: grid;
    gap: .45rem;
    margin-top: .75rem;
}

.password-rules li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #64748b;
    font-size: .85rem;
    font-weight: 650;
    transition: color .16s ease;
}

.password-rules li i {
    color: #cbd5e1;
    font-size: .38rem;
    transition: color .16s ease;
}

.password-rules li.is-valid {
    color: #047857;
}

.password-rules li.is-valid i {
    color: #10b981;
}

.password-rules li.is-invalid {
    color: #b91c1c;
}

.password-rules li.is-invalid i {
    color: #ef4444;
}

.password-match-status {
    margin-top: .8rem;
    padding: .7rem .8rem;
    border-radius: .75rem;
    font-size: .85rem;
    font-weight: 750;
}

.password-match-status.is-success {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.password-match-status.is-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.password-form-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: .65rem;
    margin-top: 1.35rem;
    padding-top: 1.2rem;
    border-top: 1px solid #f1f5f9;
}

.password-form-actions .profile-secondary-button {
    text-decoration: none;
}

.password-info-card,
.password-tips-card {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #fff;
}

.password-info-card__header {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.password-info-card__icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.password-info-card h2 {
    margin-top: .25rem;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
}

.password-last-change {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-top: 1.1rem;
}

.password-last-change strong {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
}

.password-last-change span {
    color: #94a3b8;
    font-size: .85rem;
    font-weight: 700;
}

.password-info-card > p {
    margin-top: .55rem;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.6;
}

.password-two-factor-state {
    margin-top: 1rem;
}

.password-info-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    color: var(--cati-blue);
    font-size: .75rem;
    font-weight: 850;
    text-decoration: none;
}

.password-info-link:hover,
.password-info-link:focus-visible {
    color: var(--cati-blue-dark);
    outline: none;
}

.password-tips-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(32, 61, 145, .045), transparent 11rem),
        #fff;
}

.password-tips-card__heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #0f172a;
}

.password-tips-card__heading i {
    color: #ca8a04;
}

.password-tips-card__heading strong {
    font-size: .85rem;
    font-weight: 900;
}

.password-tips-card ul {
    display: grid;
    gap: .65rem;
    margin-top: .9rem;
    padding-left: 1rem;
    list-style: disc;
    color: #64748b;
    font-size: .74rem;
    line-height: 1.55;
}

@media (min-width: 640px) {
    .password-page-heading {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .password-form-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
}

@media (max-width: 639px) {
    .password-section-icon {
        display: none;
    }
}

/* =========================================================
   CATI — CONFIGURATION 2FA TOTP
========================================================= */

.twofa-page-heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.twofa-method-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .5rem;
    padding: .45rem .72rem;
    border: 1px solid var(--cati-blue-border);
    border-radius: 999px;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-size: .68rem;
    font-weight: 850;
}

.twofa-steps {
    display: grid;
    gap: .65rem;
}

.twofa-step {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .7rem;
    align-items: center;
    padding: .75rem .85rem;
    border: 1px solid #e2e8f0;
    border-radius: .9rem;
    background: #fff;
}

.twofa-step > span {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
    background: #f1f5f9;
    color: #64748b;
    font-size: .7rem;
    font-weight: 900;
}

.twofa-step strong {
    display: block;
    color: #334155;
    font-size: .76rem;
    font-weight: 900;
}

.twofa-step small {
    display: block;
    margin-top: .1rem;
    color: #94a3b8;
    font-size: .65rem;
    font-weight: 650;
}

.twofa-step.is-current {
    border-color: var(--cati-blue-border);
    background: var(--cati-blue-soft);
}

.twofa-step.is-current > span {
    background: var(--cati-blue);
    color: #fff;
}

.twofa-step.is-current strong {
    color: var(--cati-blue);
}

.twofa-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.twofa-section-icon {
    display: inline-flex;
    width: 2.9rem;
    height: 2.9rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.twofa-config-section {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.35rem 0;
    border-top: 1px solid #f1f5f9;
}

.twofa-config-section:first-of-type {
    margin-top: 1.25rem;
}

.twofa-config-section__number {
    color: var(--cati-blue);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.twofa-config-section__body h3 {
    color: #0f172a;
    font-size: .92rem;
    font-weight: 900;
}

.twofa-config-section__body > p {
    margin-top: .4rem;
    max-width: 42rem;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.65;
}

.twofa-app-hint {
    display: flex;
    gap: .65rem;
    margin-top: .9rem;
    padding: .8rem .9rem;
    border: 1px solid #dbeafe;
    border-radius: .8rem;
    background: #eff6ff;
    color: #475569;
    font-size: .85rem;
    line-height: 1.55;
}

.twofa-app-hint i {
    margin-top: .1rem;
    color: var(--cati-blue);
}

.twofa-setup-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.twofa-qr-card,
.twofa-secret-card {
    border: 1px solid #e2e8f0;
    border-radius: .95rem;
    background: #fff;
}

.twofa-qr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    text-align: center;
}

.twofa-qr-placeholder {
    display: flex;
    width: 11rem;
    height: 11rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid #cbd5e1;
    border-radius: .9rem;
    background:
        linear-gradient(45deg, #f8fafc 25%, transparent 25%),
        linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f8fafc 75%),
        linear-gradient(-45deg, transparent 75%, #f8fafc 75%),
        #fff;
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    color: #334155;
}

.twofa-qr-placeholder i {
    font-size: 3rem;
}

.twofa-qr-placeholder span {
    padding: .25rem .45rem;
    border-radius: .4rem;
    background: #fff;
    font-size: .65rem;
    font-weight: 900;
}

.twofa-qr-card > p {
    max-width: 15rem;
    margin-top: .8rem;
    color: #94a3b8;
    font-size: .67rem;
    line-height: 1.5;
}

.twofa-secret-card {
    padding: 1rem;
}

.twofa-secret-card__label {
    display: block;
    color: #64748b;
    font-size: .68rem;
    font-weight: 850;
}

.twofa-secret-value {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .55rem;
    padding: .65rem .7rem;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    background: #f8fafc;
}

.twofa-secret-value code {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.twofa-copy-button {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: .55rem;
    background: #fff;
    color: #64748b;
}

.twofa-copy-button:hover,
.twofa-copy-button:focus-visible {
    border-color: var(--cati-blue-border);
    color: var(--cati-blue);
    outline: none;
}

.twofa-secret-meta {
    display: grid;
    gap: .65rem;
    margin-top: .9rem;
}

.twofa-secret-meta div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.twofa-secret-meta dt {
    color: #94a3b8;
    font-size: .65rem;
    font-weight: 750;
}

.twofa-secret-meta dd {
    color: #334155;
    font-size: .7rem;
    font-weight: 800;
    text-align: right;
}

.twofa-secret-warning {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid #f1f5f9;
    color: #b45309;
    font-size: .68rem;
    line-height: 1.55;
}

.twofa-verification-form {
    margin-top: 1rem;
}

.twofa-code-wrap {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.twofa-code-input {
    width: min(100%, 13rem);
    min-height: 3.3rem;
    padding: .65rem .9rem;
    border: 1px solid #cbd5e1;
    border-radius: .8rem;
    background: #fff;
    color: #0f172a;
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .28em;
    text-align: center;
}

.twofa-code-input:focus {
    border-color: var(--cati-blue);
    box-shadow: 0 0 0 3px rgba(32, 61, 145, .10);
    outline: none;
}

.twofa-code-input.is-complete {
    border-color: #86efac;
}

.twofa-code-status {
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 800;
}

.twofa-code-hint {
    margin-top: .55rem;
    color: #94a3b8;
    font-size: .68rem;
    line-height: 1.5;
}

.twofa-verify-message {
    margin-top: .8rem;
    padding: .7rem .8rem;
    border-radius: .75rem;
    font-size: .85rem;
    font-weight: 750;
}

.twofa-verify-message.is-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.twofa-verify-message.is-success {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.twofa-form-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: .65rem;
    margin-top: 1rem;
}

.twofa-form-actions .profile-secondary-button {
    text-decoration: none;
}

.twofa-status-card,
.twofa-recovery-preview,
.twofa-security-note-card {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #fff;
}

.twofa-status-card__header,
.twofa-recovery-preview__heading {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.twofa-status-card__icon,
.twofa-recovery-preview__icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.twofa-status-card h2,
.twofa-recovery-preview h2 {
    margin-top: .25rem;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
}

.twofa-status-line {
    margin-top: 1rem;
}

.twofa-status-card > p,
.twofa-recovery-preview > p {
    margin-top: .7rem;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.6;
}

.twofa-recovery-preview ul {
    display: grid;
    gap: .65rem;
    margin-top: 1rem;
}

.twofa-recovery-preview li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: #64748b;
    font-size: .85rem;
    line-height: 1.5;
}

.twofa-recovery-preview li i {
    margin-top: .15rem;
    color: #10b981;
    font-size: .65rem;
}

.twofa-security-note-card {
    display: flex;
    gap: .8rem;
    border-color: #fde68a;
    background: #fffbeb;
}

.twofa-security-note-card > i {
    margin-top: .1rem;
    color: #ca8a04;
}

.twofa-security-note-card strong {
    color: #713f12;
    font-size: .78rem;
    font-weight: 900;
}

.twofa-security-note-card p {
    margin-top: .25rem;
    color: #92400e;
    font-size: .7rem;
    line-height: 1.55;
}

@media (min-width: 640px) {
    .twofa-page-heading {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .twofa-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .twofa-form-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
}

@media (min-width: 768px) {
    .twofa-setup-grid {
        grid-template-columns: minmax(12rem, .7fr) minmax(0, 1.3fr);
    }
}

@media (max-width: 639px) {
    .twofa-section-icon {
        display: none;
    }

    .twofa-config-section {
        grid-template-columns: 1fr;
        gap: .45rem;
    }

    .twofa-code-wrap {
        align-items: flex-start;
        flex-direction: column;
    }

    .twofa-code-input {
        width: 100%;
    }
}

/* =========================================================
   CATI — 2FA EMAIL SMS SIMPLIFIÉE
========================================================= */

.twofa-simple-heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.twofa-simple-form {
    border-top: 1px solid #f1f5f9;
    padding-top: 1.25rem;
}

.twofa-channel-grid {
    display: grid;
    gap: .75rem;
}

.twofa-channel-card {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: .95rem;
    border: 1px solid #e2e8f0;
    border-radius: .9rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.twofa-channel-card:hover {
    border-color: var(--cati-blue-border);
    background: #fbfdff;
}

.twofa-channel-card.is-selected {
    border-color: var(--cati-blue-border);
    background: var(--cati-blue-soft);
    box-shadow: inset 0 0 0 1px rgba(32, 61, 145, .04);
}

.twofa-channel-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.twofa-channel-card__icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-size: .85rem;
}

.twofa-channel-card__content {
    min-width: 0;
}

.twofa-channel-card__content strong {
    display: block;
    color: #0f172a;
    font-size: .84rem;
    font-weight: 900;
}

.twofa-channel-card__content small {
    display: block;
    margin-top: .15rem;
    color: #475569;
    font-size: .85rem;
    font-weight: 750;
}

.twofa-channel-card__content > span {
    display: block;
    margin-top: .25rem;
    color: #94a3b8;
    font-size: .68rem;
}

.twofa-channel-card__check {
    color: #cbd5e1;
    font-size: .9rem;
}

.twofa-channel-card.is-selected .twofa-channel-card__check {
    color: var(--cati-blue);
}

.twofa-simple-divider {
    height: 1px;
    margin: 1.25rem 0;
    background: #f1f5f9;
}

.twofa-send-row {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.twofa-destination-text {
    color: #64748b;
    font-size: .74rem;
    line-height: 1.55;
}

.twofa-send-button {
    display: inline-flex;
    min-height: 2.7rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0 1rem;
    border: 1px solid var(--cati-blue);
    border-radius: .75rem;
    background: var(--cati-blue);
    color: #fff;
    font-size: .76rem;
    font-weight: 850;
}

.twofa-send-button:hover,
.twofa-send-button:focus-visible {
    background: var(--cati-blue-dark);
    border-color: var(--cati-blue-dark);
    outline: none;
}

.twofa-code-section {
    margin-top: 1.15rem;
    padding: 1rem;
    border: 1px solid var(--cati-blue-border);
    border-radius: .9rem;
    background: var(--cati-blue-soft);
}

.twofa-code-meta {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-top: .7rem;
}

.twofa-code-meta p {
    color: #64748b;
    font-size: .68rem;
}

.twofa-code-meta strong {
    color: #334155;
    font-weight: 850;
}

.twofa-resend-button {
    width: fit-content;
    border: 0;
    background: transparent;
    color: var(--cati-blue);
    font-size: .7rem;
    font-weight: 850;
}

.twofa-resend-button:hover,
.twofa-resend-button:focus-visible {
    color: var(--cati-blue-dark);
    outline: none;
}

.twofa-form-actions .profile-primary-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.twofa-simple-info-card {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #fff;
}

.twofa-simple-info-card__heading {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #0f172a;
}

.twofa-simple-info-card__heading i {
    color: var(--cati-blue);
}

.twofa-simple-info-card__heading strong {
    font-size: .82rem;
    font-weight: 900;
}

.twofa-simple-info-card ul {
    display: grid;
    gap: .65rem;
    margin-top: .9rem;
    padding-left: 1rem;
    list-style: disc;
    color: #64748b;
    font-size: .85rem;
    line-height: 1.55;
}

@media (min-width: 640px) {
    .twofa-simple-heading {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .twofa-channel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .twofa-send-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .twofa-code-meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 639px) {
    .twofa-channel-card {
        grid-template-columns: 2.6rem minmax(0, 1fr) auto;
        padding: .85rem;
    }
}

/* =========================================================
   CATI — RESET PASSWORD
========================================================= */

.reset-header-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--cati-blue);
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
}

.reset-header-link:hover,
.reset-header-link:focus-visible {
    color: var(--cati-blue-dark);
    outline: none;
}

.reset-header-link i {
    font-size: .65rem;
}

.reset-password-section {
    min-height: 34rem;
}

.reset-password-grid {
    display: grid;
    gap: 1.5rem;
}

.reset-password-card {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .04);
}

.reset-password-card__heading {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.reset-password-card__icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.reset-password-card__heading h2 {
    margin-top: .3rem;
    color: #0f172a;
    font-size: 1.2rem;
    line-height: 1.35;
    font-weight: 900;
}

.reset-password-card__heading p {
    margin-top: .35rem;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.6;
}

.reset-link-status {
    display: flex;
    gap: .7rem;
    margin-top: 1.2rem;
    padding: .85rem .95rem;
    border: 1px solid #a7f3d0;
    border-radius: .85rem;
    background: #ecfdf5;
    color: #047857;
}

.reset-link-status > i {
    margin-top: .15rem;
    font-size: .75rem;
}

.reset-link-status strong {
    display: block;
    font-size: .75rem;
    font-weight: 900;
}

.reset-link-status span {
    display: block;
    margin-top: .15rem;
    color: #059669;
    font-size: .68rem;
    line-height: 1.5;
}

.reset-password-form {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
}

.reset-password-label {
    display: block;
    margin-bottom: .45rem;
    color: #334155;
    font-size: .76rem;
    font-weight: 850;
}

.reset-password-input-wrap {
    position: relative;
}

.reset-password-field {
    width: 100%;
    min-height: 3.15rem;
    padding: .75rem 3rem .75rem .9rem;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    background: #fff;
    color: #0f172a;
    font-size: .85rem;
    font-weight: 650;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.reset-password-field:focus {
    border-color: var(--cati-blue);
    box-shadow: 0 0 0 3px rgba(32, 61, 145, .10);
    outline: none;
}

.reset-password-toggle {
    position: absolute;
    top: 50%;
    right: .7rem;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: #94a3b8;
    transform: translateY(-50%);
}

.reset-password-toggle:hover,
.reset-password-toggle:focus-visible {
    background: #f8fafc;
    color: var(--cati-blue);
    outline: none;
}

.reset-password-rules {
    margin-top: 1rem;
    padding: .95rem;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    background: #f8fafc;
}

.reset-password-rules > strong {
    color: #334155;
    font-size: .85rem;
    font-weight: 850;
}

.reset-password-rules ul {
    display: grid;
    gap: .42rem;
    margin-top: .7rem;
}

.reset-password-rules li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #64748b;
    font-size: .7rem;
    font-weight: 650;
}

.reset-password-rules li i {
    color: #cbd5e1;
    font-size: .35rem;
}

.reset-password-rules li.is-valid {
    color: #047857;
}

.reset-password-rules li.is-valid i {
    color: #10b981;
}

.reset-password-rules li.is-invalid {
    color: #b91c1c;
}

.reset-password-rules li.is-invalid i {
    color: #ef4444;
}

.reset-password-feedback {
    margin-top: .75rem;
    padding: .7rem .8rem;
    border-radius: .72rem;
    font-size: .7rem;
    font-weight: 750;
}

.reset-password-feedback.is-success {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.reset-password-feedback.is-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.reset-password-submit {
    display: inline-flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: 1rem;
    padding: 0 1rem;
    border: 1px solid var(--cati-blue);
    border-radius: .5rem;
    background: var(--cati-blue);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
}

.reset-password-submit:hover,
.reset-password-submit:focus-visible {
    border-color: var(--cati-blue-dark);
    background: var(--cati-blue-dark);
    outline: none;
}

.reset-password-login-link {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    color: #64748b;
    font-size: .85rem;
    text-align: center;
}

.reset-password-login-link a {
    color: var(--cati-blue);
    font-weight: 850;
    text-decoration: none;
}

.reset-password-aside {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.reset-password-info-card,
.reset-password-help-card {
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #fff;
}

.reset-password-info-card__icon {
    display: inline-flex;
    width: 2.8rem;
    height: 2.8rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: .85rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.reset-password-info-card h2 {
    margin-top: .35rem;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 900;
}

.reset-password-info-card > p {
    margin-top: .55rem;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.6;
}

.reset-password-info-card ul {
    display: grid;
    gap: .6rem;
    margin-top: .9rem;
}

.reset-password-info-card li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: #64748b;
    font-size: .7rem;
    line-height: 1.5;
}

.reset-password-info-card li i {
    margin-top: .15rem;
    color: #10b981;
    font-size: .62rem;
}

.reset-password-help-card {
    display: flex;
    gap: .8rem;
    border-color: #dbeafe;
    background: #eff6ff;
}

.reset-password-help-card > i {
    margin-top: .1rem;
    color: var(--cati-blue);
}

.reset-password-help-card strong {
    color: #1e3a8a;
    font-size: .78rem;
    font-weight: 900;
}

.reset-password-help-card p {
    margin-top: .3rem;
    color: #475569;
    font-size: .7rem;
    line-height: 1.55;
}

.reset-password-help-card a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .7rem;
    color: var(--cati-blue);
    font-size: .7rem;
    font-weight: 850;
    text-decoration: none;
}

@media (min-width: 768px) {
    .reset-password-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
        align-items: start;
    }

    .reset-password-card {
        padding: 1.6rem;
    }
}

@media (max-width: 639px) {
    .reset-header-link {
        font-size: .85rem;
    }

    .reset-header-link i {
        display: none;
    }

    .reset-password-card__heading {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: .85rem;
    }

    .reset-password-card__icon {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* =========================================================
   CATI — PAGE CHOIX MÉTHODE 2FA
========================================================= */

.twofa-method-page {
    min-height: 32rem;
}

.twofa-method-card {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .04);
}

.twofa-method-card__heading {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.twofa-method-card__icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.twofa-method-card__heading h2 {
    margin-top: .3rem;
    color: #0f172a;
    font-size: 1.2rem;
    line-height: 1.35;
    font-weight: 900;
}

.twofa-method-card__heading p {
    margin-top: .35rem;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.6;
}

.twofa-method-form {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
}

.twofa-method-options {
    display: grid;
    gap: .75rem;
}

.twofa-method-option {
    position: relative;
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: center;
    padding: .95rem;
    border: 1px solid #e2e8f0;
    border-radius: .9rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.twofa-method-option:hover {
    border-color: var(--cati-blue-border);
    background: #fbfdff;
}

.twofa-method-option.is-selected {
    border-color: var(--cati-blue-border);
    background: var(--cati-blue-soft);
    box-shadow: inset 0 0 0 1px rgba(32, 61, 145, .04);
}

.twofa-method-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.twofa-method-option__icon {
    display: inline-flex;
    width: 2.8rem;
    height: 2.8rem;
    align-items: center;
    justify-content: center;
    border-radius: .82rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
    font-size: .88rem;
}

.twofa-method-option__content {
    min-width: 0;
}

.twofa-method-option__content strong {
    display: block;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 900;
}

.twofa-method-option__content small {
    display: block;
    margin-top: .15rem;
    color: #475569;
    font-size: .85rem;
    font-weight: 750;
}

.twofa-method-option__content > span {
    display: block;
    margin-top: .25rem;
    color: #94a3b8;
    font-size: .68rem;
    line-height: 1.45;
}

.twofa-method-option__state {
    color: #cbd5e1;
    font-size: .9rem;
}

.twofa-method-option.is-selected .twofa-method-option__state {
    color: var(--cati-blue);
}

.twofa-method-summary {
    display: flex;
    gap: .65rem;
    margin-top: 1rem;
    padding: .8rem .9rem;
    border: 1px solid #dbeafe;
    border-radius: .8rem;
    background: #eff6ff;
    color: #475569;
}

.twofa-method-summary > i {
    margin-top: .12rem;
    flex: 0 0 auto;
    color: var(--cati-blue);
    font-size: .85rem;
}

.twofa-method-summary p {
    font-size: .85rem;
    line-height: 1.55;
}

.twofa-method-summary strong {
    color: #334155;
    font-weight: 850;
}

.twofa-method-submit {
    display: inline-flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: 1rem;
    padding: 0 1rem;
    border: 1px solid var(--cati-blue);
    border-radius: .5rem;
    background: var(--cati-blue);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
}

.twofa-method-submit:hover,
.twofa-method-submit:focus-visible {
    border-color: var(--cati-blue-dark);
    background: var(--cati-blue-dark);
    outline: none;
}

.twofa-method-footer {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}

.twofa-method-footer p {
    color: #64748b;
    font-size: .7rem;
}

.twofa-method-footer a {
    display: inline-flex;
    margin-top: .35rem;
    color: var(--cati-blue);
    font-size: .85rem;
    font-weight: 850;
    text-decoration: none;
}

.twofa-method-footer a:hover,
.twofa-method-footer a:focus-visible {
    color: var(--cati-blue-dark);
    outline: none;
}

.twofa-method-help {
    display: flex;
    gap: .8rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
}

.twofa-method-help > i {
    margin-top: .15rem;
    color: var(--cati-blue);
    font-size: .75rem;
}

.twofa-method-help strong {
    display: block;
    color: #334155;
    font-size: .75rem;
    font-weight: 900;
}

.twofa-method-help p {
    margin-top: .25rem;
    color: #64748b;
    font-size: .68rem;
    line-height: 1.55;
}

@media (min-width: 640px) {
    .twofa-method-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .twofa-method-card {
        padding: 1.6rem;
    }
}

@media (max-width: 639px) {
    .twofa-method-card__heading {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: .85rem;
    }

    .twofa-method-card__icon,
    .twofa-method-option__icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .twofa-method-option {
        grid-template-columns: 2.75rem minmax(0, 1fr) auto;
        padding: .85rem;
    }
}

/* =========================================================
   CATI — INSCRIPTION PUBLIQUE
========================================================= */

.register-page {
    min-height: 38rem;
}

.register-grid {
    display: grid;
    gap: 1.5rem;
}

.register-card {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .04);
}

.register-card__heading {
    /*display: grid;*/
    /*grid-template-columns: 3rem minmax(0, 1fr);*/
    /*gap: 1rem;*/
    align-items: start;
}

.register-card__icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.register-card__heading h2 {
    margin-top: .3rem;
    color: #0f172a;
    font-size: 1.2rem;
    line-height: 1.35;
    font-weight: 900;
}

.register-card__heading p {
    margin-top: .35rem;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.6;
}

.register-form {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
}

.register-form-grid {
    display: grid;
    gap: 1rem;
}

.register-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .45rem;
    color: #334155;
    font-size: .76rem;
    font-weight: 850;
}

.register-label span {
    color: #94a3b8;
    font-size: .62rem;
    font-weight: 750;
}

.register-field {
    width: 100%;
    min-height: 3.1rem;
    padding: .72rem .9rem;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    background: #fff;
    color: #0f172a;
    font-size: .84rem;
    font-weight: 650;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.register-field:focus {
    border-color: var(--cati-blue);
    box-shadow: 0 0 0 3px rgba(32, 61, 145, .10);
    outline: none;
}

.register-divider {
    height: 1px;
    margin: 1.25rem 0;
    background: #f1f5f9;
}

.register-password-wrap {
    position: relative;
}

.register-password-field {
    padding-right: 3rem;
}

.register-password-toggle {
    position: absolute;
    top: 50%;
    right: .7rem;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: #94a3b8;
    transform: translateY(-50%);
}

.register-password-toggle:hover,
.register-password-toggle:focus-visible {
    background: #f8fafc;
    color: var(--cati-blue);
    outline: none;
}

.register-password-rules {
    margin-top: 1rem;
    padding: .95rem;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    background: #f8fafc;
}

.register-password-rules > strong {
    color: #334155;
    font-size: .85rem;
    font-weight: 850;
}

.register-password-rules ul {
    display: grid;
    gap: .42rem;
    margin-top: .7rem;
}

.register-password-rules li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #64748b;
    font-size: .7rem;
    font-weight: 650;
}

.register-password-rules li i {
    color: #cbd5e1;
    font-size: .35rem;
}

.register-password-rules li.is-valid {
    color: #047857;
}

.register-password-rules li.is-valid i {
    color: #10b981;
}

.register-password-rules li.is-invalid {
    color: #b91c1c;
}

.register-password-rules li.is-invalid i {
    color: #ef4444;
}

.register-feedback {
    margin-top: .75rem;
    padding: .7rem .8rem;
    border-radius: .72rem;
    font-size: .7rem;
    font-weight: 750;
}

.register-feedback.is-success {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.register-feedback.is-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.register-consent {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-top: 1rem;
    padding: .9rem;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    background: #fff;
    color: #64748b;
    font-size: .7rem;
    line-height: 1.55;
}

.register-consent input {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin-top: .1rem;
    accent-color: var(--cati-blue);
}

.register-submit {
    display: inline-flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: 1rem;
    padding: 0 1rem;
    border: 1px solid var(--cati-blue);
    border-radius: .5rem;
    background: var(--cati-blue);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
}

.register-submit:hover,
.register-submit:focus-visible {
    border-color: var(--cati-blue-dark);
    background: var(--cati-blue-dark);
    outline: none;
}

.register-login-link {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    color: #64748b;
    font-size: .85rem;
    text-align: center;
}

.register-login-link a {
    color: var(--cati-blue);
    font-weight: 850;
    text-decoration: none;
}

.register-aside {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.register-benefits-card,
.register-point-focal-card,
.register-security-card {
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #fff;
}

.register-benefits-card__icon {
    display: inline-flex;
    width: 2.8rem;
    height: 2.8rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: .85rem;
    background: var(--cati-blue-light);
    color: var(--cati-blue);
}

.register-benefits-card h2 {
    margin-top: .35rem;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 900;
}

.register-benefits-card ul {
    display: grid;
    gap: .65rem;
    margin-top: .95rem;
}

.register-benefits-card li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: #64748b;
    font-size: .85rem;
    line-height: 1.5;
}

.register-benefits-card li i {
    margin-top: .15rem;
    color: #10b981;
    font-size: .62rem;
}

.register-point-focal-card {
    border-color: #dbeafe;
    background: #eff6ff;
}

.register-point-focal-card__heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #1e3a8a;
}

.register-point-focal-card__heading i {
    color: var(--cati-blue);
}

.register-point-focal-card__heading strong {
    font-size: .78rem;
    font-weight: 900;
}

.register-point-focal-card p {
    margin-top: .55rem;
    color: #475569;
    font-size: .7rem;
    line-height: 1.55;
}

.register-security-card {
    display: flex;
    gap: .8rem;
}

.register-security-card > i {
    margin-top: .1rem;
    color: var(--cati-blue);
}

.register-security-card strong {
    display: block;
    color: #334155;
    font-size: .76rem;
    font-weight: 900;
}

.register-security-card p {
    margin-top: .25rem;
    color: #64748b;
    font-size: .68rem;
    line-height: 1.55;
}

@media (min-width: 640px) {
    .register-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .register-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .75fr);
        align-items: start;
    }

    .register-card {
        padding: 1.6rem;
    }
}

@media (max-width: 639px) {
    .register-card__heading {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: .85rem;
    }

    .register-card__icon {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* =========================================================
   CATI — CATÉGORIES DE RESSOURCES
   Titre en tête + icône filigrane
========================================================= */

.catalogue-category-card {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 15.5rem;
    flex-direction: column;
    overflow: hidden;
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .035);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.catalogue-category-card:hover,
.catalogue-category-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--cati-blue-border);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .07);
    outline: none;
}

.catalogue-category-card__header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.catalogue-category-card__header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.15rem;
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: -.015em;
}

.catalogue-category-count {
    position: relative;
    z-index: 2;
    display: inline-flex;
    min-width: 2.2rem;
    min-height: 1.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 .55rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    color: #64748b;
    font-size: .68rem;
    font-weight: 900;
    backdrop-filter: blur(6px);
}

.catalogue-category-description {
    position: relative;
    z-index: 2;
    max-width: 15rem;
    margin-top: .9rem;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.65;
}

.catalogue-category-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: 1.3rem;
    color: var(--cati-blue);
    font-size: .75rem;
    font-weight: 850;
    transition: gap .16s ease, color .16s ease;
}

.catalogue-category-link i {
    font-size: .62rem;
}

.catalogue-category-card:hover .catalogue-category-link,
.catalogue-category-card:focus-visible .catalogue-category-link {
    gap: .62rem;
    color: var(--cati-blue-dark);
}

.catalogue-category-watermark {
    position: absolute;
    right: -.65rem;
    bottom: -1.3rem;
    z-index: 0;
    font-size: 7.5rem;
    line-height: 1;
    opacity: .12;
    pointer-events: none;
    transform: rotate(-7deg);
    transition: transform .22s ease, opacity .22s ease;
}

.catalogue-category-card:hover .catalogue-category-watermark,
.catalogue-category-card:focus-visible .catalogue-category-watermark {
    opacity: .17;
    transform: rotate(-4deg) scale(1.04);
}

.catalogue-category-card--books .catalogue-category-watermark {
    color: #f59e0b;
}

.catalogue-category-card--journals .catalogue-category-watermark {
    color: #8b5cf6;
}

.catalogue-category-card--patents .catalogue-category-watermark {
    color: var(--cati-blue);
}

.catalogue-category-card--periodicals .catalogue-category-watermark {
    color: #10b981;
}

.catalogue-category-card--featured {
    border-color: var(--cati-blue-border);
    background:
        radial-gradient(circle at 100% 100%, rgba(32, 61, 145, .045), transparent 12rem),
        #fff;
}

@media (max-width: 767px) {
    .catalogue-category-card {
        min-height: 13.5rem;
        padding: 1.2rem;
    }

    .catalogue-category-watermark {
        right: -1rem;
        bottom: -1.35rem;
        font-size: 6.4rem;
    }

    .catalogue-category-description {
        max-width: 13rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalogue-category-card,
    .catalogue-category-link,
    .catalogue-category-watermark {
        transition-duration: .01ms !important;
        transform: none !important;
    }
}

/* =========================================================
   CATI — DÉTAIL RESSOURCE
   Tailwind prioritaire ; CSS dédié limité aux composants
   non pratiques à exprimer uniquement en utilitaires.
========================================================= */

.resource-access-badge {
    display: inline-flex;
    min-height: 1.65rem;
    align-items: center;
    justify-content: center;
    padding: 0 .6rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 900;
}

.resource-access-badge--download {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.resource-access-badge--view {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: var(--cati-blue);
}

.resource-access-badge--restricted {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #a16207;
}

.resource-view-button,
.resource-download-button {
    display: inline-flex;
    width: 100%;
    min-height: 2.85rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 0 1rem;
    border-radius: .75rem;
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease;
}

.resource-view-button {
    border: 1px solid var(--cati-blue-border);
    background: #fff;
    color: var(--cati-blue);
}

.resource-view-button:hover,
.resource-view-button:focus-visible {
    border-color: var(--cati-blue);
    background: var(--cati-blue-light);
    outline: none;
}

.resource-download-button {
    border: 1px solid var(--cati-blue);
    background: var(--cati-blue);
    color: #fff;
}

.resource-download-button:hover,
.resource-download-button:focus-visible {
    border-color: var(--cati-blue-dark);
    background: var(--cati-blue-dark);
    outline: none;
}

.resource-pdf-preview {
    display: grid;
    gap: 1rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #f8fafc;
}

.resource-pdf-preview__document {
    display: flex;
    min-height: 21rem;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px),
        #eef2f7;
    background-size: 24px 24px;
}

.resource-pdf-preview__page {
    position: relative;
    display: flex;
    width: min(100%, 15rem);
    min-height: 19rem;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.35rem;
    overflow: hidden;
    border: 1px solid #dbe3ed;
    border-radius: .35rem;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15,23,42,.12);
}

.resource-pdf-preview__logo {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--cati-blue);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.resource-pdf-preview__icon {
    position: absolute;
    top: 4rem;
    right: -1rem;
    color: #ef4444;
    font-size: 7rem;
    opacity: .08;
    transform: rotate(-8deg);
}

.resource-pdf-preview__page strong {
    position: relative;
    z-index: 1;
    color: #0f172a;
    font-size: .9rem;
    line-height: 1.5;
    font-weight: 900;
}

.resource-pdf-preview__page small {
    position: relative;
    z-index: 1;
    margin-top: .55rem;
    color: #94a3b8;
    font-size: .65rem;
    font-weight: 750;
}

.resource-pdf-preview__copy {
    padding: 1.2rem;
}

.resource-pdf-preview__copy h3 {
    margin-top: .35rem;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
}

.resource-pdf-preview__copy p {
    margin-top: .5rem;
    color: #64748b;
    font-size: .8rem;
    line-height: 1.65;
}

.resource-pdf-preview__copy .resource-view-button {
    width: fit-content;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .resource-pdf-preview {
        grid-template-columns: minmax(16rem, .75fr) minmax(0, 1.25fr);
        align-items: stretch;
    }

    .resource-pdf-preview__copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1.5rem;
    }
}

@media (max-width: 639px) {
    .resource-pdf-preview__document {
        min-height: 18rem;
    }

    .resource-pdf-preview__page {
        min-height: 16rem;
    }
}



/* État visible mais non cliquable pour les ressources en consultation uniquement. */
.resource-download-button--disabled,
.resource-download-button--disabled:hover,
.resource-download-button--disabled:focus-visible {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    opacity: .82;
    transform: none;
    outline: none;
}


/* =========================================================
   CATI — SECURE READER
========================================================= */
.secure-reader-main{min-height:100vh;padding-top:5rem;background:#e8edf5}.secure-reader-topbar{border-bottom:1px solid #dbe3ed;background:#fff}.secure-reader-back{display:inline-flex;align-items:center;gap:.45rem;color:var(--cati-blue);font-size:.72rem;font-weight:850;text-decoration:none}.secure-reader-title{margin-top:.25rem;max-width:52rem;color:#0f172a;font-size:1.05rem;line-height:1.45;font-weight:900}.secure-reader-access{display:inline-flex;width:fit-content;align-items:center;gap:.45rem;padding:.45rem .7rem;border:1px solid #bfdbfe;border-radius:999px;background:#eff6ff;color:var(--cati-blue);font-size:.68rem;font-weight:850}.secure-reader-workspace{width:min(100%,100rem);margin:0 auto;background:#e8edf5}.secure-reader-toolbar{position:sticky;top:5rem;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;min-height:3.8rem;padding:.55rem .75rem;border-bottom:1px solid #263247;background:#182235;color:#fff;box-shadow:0 6px 20px rgba(15,23,42,.12)}.secure-reader-toolbar__group{display:flex;align-items:center;gap:.4rem}.secure-reader-toolbar__group--end{margin-left:auto}.secure-reader-tool{display:inline-flex;min-width:2.35rem;height:2.35rem;align-items:center;justify-content:center;gap:.45rem;padding:0 .65rem;border:1px solid rgba(255,255,255,.1);border-radius:.55rem;background:rgba(255,255,255,.06);color:#f8fafc;font-size:.72rem;font-weight:800}.secure-reader-tool:hover:not(:disabled),.secure-reader-tool:focus-visible:not(:disabled){border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.12);outline:none}.secure-reader-tool--disabled{cursor:not-allowed;opacity:.35}.secure-reader-page-control{display:flex;height:2.35rem;align-items:center;gap:.35rem;padding:0 .55rem;border:1px solid rgba(255,255,255,.1);border-radius:.55rem;background:rgba(255,255,255,.05);font-size:.72rem}.secure-reader-page-control input{width:2.7rem;border:0;background:transparent;color:#fff;font-weight:850;text-align:center;outline:none}.secure-reader-zoom{min-width:3.5rem;color:#cbd5e1;font-size:.68rem;font-weight:800;text-align:center}.secure-reader-body{display:grid;min-height:calc(100vh - 11rem)}.secure-reader-sidebar{display:none;width:12rem;overflow-y:auto;border-right:1px solid #cbd5e1;background:#f8fafc}.secure-reader-sidebar__heading{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:.85rem;border-bottom:1px solid #e2e8f0;background:rgba(248,250,252,.96);color:#64748b;font-size:.68rem;font-weight:850}.secure-reader-thumbnails{display:grid;gap:.8rem;padding:.8rem}.secure-reader-thumbnail{display:block;width:100%;padding:.45rem;border:1px solid #dbe3ed;border-radius:.65rem;background:#fff}.secure-reader-thumbnail.is-current{border-color:var(--cati-blue);box-shadow:0 0 0 2px rgba(32,61,145,.1)}.secure-reader-thumbnail img{width:100%;aspect-ratio:1/1.414;object-fit:contain;background:#fff}.secure-reader-thumbnail span{display:block;margin-top:.35rem;color:#64748b;font-size:.62rem;font-weight:800;text-align:center}.secure-reader-thumbnail-skeleton{width:100%;aspect-ratio:1/1.414;border-radius:.5rem;background:#e2e8f0}.secure-reader-stage{position:relative;min-width:0;overflow:auto;padding:1rem;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.35),transparent 30rem),#cfd6df}.secure-reader-page-shell{width:fit-content;max-width:100%;margin:0 auto}.secure-reader-page-image{display:block;width:auto;max-width:min(100%,calc(72rem * var(--reader-zoom,1)));margin:0 auto;background:#fff;box-shadow:0 14px 38px rgba(15,23,42,.18);user-select:none;-webkit-user-drag:none}.secure-reader-protection-note{display:flex;width:fit-content;max-width:42rem;align-items:center;gap:.5rem;margin:1rem auto 0;padding:.55rem .8rem;border-radius:999px;background:rgba(15,23,42,.78);color:#e2e8f0;font-size:.65rem;font-weight:750}.secure-reader-state{display:flex;min-height:26rem;flex-direction:column;align-items:center;justify-content:center;padding:2rem;color:#475569;text-align:center}.secure-reader-state__icon{display:inline-flex;width:3rem;height:3rem;align-items:center;justify-content:center;margin-bottom:1rem;border-radius:.9rem;background:#fff;color:var(--cati-blue);box-shadow:0 8px 24px rgba(15,23,42,.08)}.secure-reader-state strong{color:#0f172a;font-size:.95rem;font-weight:900}.secure-reader-state p{max-width:28rem;margin-top:.4rem;font-size:.75rem;line-height:1.6}.secure-reader-state--error .secure-reader-state__icon{color:#b91c1c}.secure-reader-retry{margin-top:1rem;min-height:2.55rem;padding:0 1rem;border-radius:.7rem;background:var(--cati-blue);color:#fff;font-size:.72rem;font-weight:850}@media(min-width:900px){.secure-reader-body{grid-template-columns:12rem minmax(0,1fr)}.secure-reader-sidebar{display:block}}@media(max-width:639px){.secure-reader-toolbar__group--end{width:100%;margin-left:0}.secure-reader-stage{padding:.75rem}.secure-reader-protection-note{border-radius:.75rem;text-align:left}}


/* =========================================================
   CATI — DÉTAIL RESSOURCE SIMPLIFIÉ
========================================================= */

[data-resource-access] .resource-download-button,
[data-resource-access] .resource-view-button {
    min-height: 2.9rem;
}

[data-resource-access] .favorite-remove-button {
    width: 2.5rem;
    height: 2.5rem;
}