/*--------------------------------------------------------------
# Terradoxa Consulting — composants propres au site
# Complète main.css (socle commun Terradoxa : header, footer, contact, modal).
--------------------------------------------------------------*/
:root {
    --tc-surface: rgba(255, 255, 255, 0.04);
    --tc-surface-hover: rgba(255, 255, 255, 0.08);
    --tc-border: rgba(191, 150, 255, 0.18);
    --tc-border-strong: rgba(38, 118, 247, 0.55);
    --tc-muted: rgba(255, 255, 255, 0.68);
    --tc-radius: 14px;
    --tc-s0: #5a656e;
    --tc-s1: #2676F7;
    --tc-s2: #f0a020;
    --tc-s3: #ff5757;
}

/* Tout le site est en thème sombre : on aligne les variables de main.css
   sur celles de .dark-background, y compris pour les sections sans cette classe. */
:root {
    --background-color: var(--terra-noirMat);
    --default-color: white;
    --heading-color: white;
    --accent-color: white;
    --surface-color: var(--terra-violet2);
}

body {
    background-color: var(--terra-noirMat);
}

.text-muted-tc {
    color: var(--tc-muted);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--terra-orangeade);
    margin-bottom: 14px;
}

.section-alt {
    background: linear-gradient(180deg, var(--terra-noirMat) 0%, #0d0b2a 100%);
}

.section-title .lead-tc {
    max-width: 760px;
    margin: 0 auto;
    color: var(--tc-muted);
    font-size: 17px;
}

.btn-tc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: .3s;
}

.btn-tc-primary {
    background: var(--terra-bleu1);
    color: #fff;
    border: 2px solid var(--terra-bleu1);
}

.btn-tc-primary:hover {
    background: transparent;
    color: #fff;
}

.btn-tc-ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .35);
}

.btn-tc-ghost:hover {
    border-color: var(--terra-orangeade);
    color: var(--terra-orangeade);
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero.hero-tc {
    background:
        radial-gradient(ellipse 60% 50% at 80% 30%, rgba(38, 118, 247, .28), transparent 70%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(102, 16, 242, .25), transparent 70%),
        linear-gradient(160deg, #090618 0%, #001e4b 100%);
    overflow: hidden;
}

.hero.hero-tc::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events: none;
}

.hero.hero-tc .container {
    position: relative;
    z-index: 1;
}

.hero.hero-tc h1 {
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1.12;
    font-weight: 800;
}

.hero.hero-tc h1 .accent {
    background: linear-gradient(90deg, #6aa5ff, #bf96ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero.hero-tc p.hero-sub {
    font-size: 19px;
    max-width: 620px;
}

.hero-stack {
    display: grid;
    gap: 10px;
}

.hero-stack .layer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border: 1px solid var(--tc-border);
    border-radius: 10px;
    background: rgba(9, 6, 24, .55);
    backdrop-filter: blur(6px);
    font-size: 14px;
}

.hero-stack .layer span:last-child {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.dep-critique { background: rgba(255, 87, 87, .18); color: #ff8a8a; }
.dep-forte    { background: rgba(240, 160, 32, .18); color: #f7c26b; }
.dep-moyenne  { background: rgba(38, 118, 247, .2);  color: #8db8ff; }

.hero-stack-caption {
    font-size: 12px;
    color: var(--tc-muted);
    text-align: right;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.hero-badges span {
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--tc-border);
    color: var(--tc-muted);
}

/*--------------------------------------------------------------
# Enjeux / compte à rebours
--------------------------------------------------------------*/
.stat-card {
    height: 100%;
    padding: 28px 24px;
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
}

.stat-card .stat-value {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.stat-card .stat-value small {
    font-size: 18px;
    font-weight: 600;
    color: var(--tc-muted);
}

.stat-card .stat-label {
    margin-top: 12px;
    font-size: 15px;
    color: var(--tc-muted);
}

.stat-card.stat-hot {
    border-color: rgba(255, 87, 87, .5);
    background: linear-gradient(160deg, rgba(255, 87, 87, .12), rgba(255, 255, 255, .02));
}

.stat-card.stat-hot .stat-value {
    color: var(--terra-orangeade);
}

.source-note {
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    margin-top: 18px;
}

/*--------------------------------------------------------------
# Cartes famille / principes
--------------------------------------------------------------*/
.fam-card {
    display: block;
    height: 100%;
    padding: 28px 24px;
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    color: #fff;
    transition: transform .3s, border-color .3s, background .3s;
}

.fam-card:hover {
    transform: translateY(-6px);
    border-color: var(--tc-border-strong);
    background: var(--tc-surface-hover);
    color: #fff;
}

.fam-card .fam-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--terra-bleu1), var(--terra-violet1));
    font-size: 24px;
    margin-bottom: 18px;
}

.fam-card .fam-code {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--terra-orangeade);
}

.fam-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0 10px;
}

.fam-card p {
    font-size: 14px;
    color: var(--tc-muted);
    margin-bottom: 14px;
}

.fam-card .fam-more {
    font-size: 13px;
    font-weight: 600;
    color: #8db8ff;
}

.principle {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--tc-border);
}

.principle:last-child {
    border-bottom: 0;
}

.principle .p-num {
    flex: 0 0 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--terra-bleu1);
    font-weight: 800;
    color: #8db8ff;
}

.principle h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
}

.principle p {
    margin: 0;
    font-size: 14px;
    color: var(--tc-muted);
}

/*--------------------------------------------------------------
# Niveaux S0-S3
--------------------------------------------------------------*/
.lvl {
    display: inline-block;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    color: #fff;
}

.lvl-s0 { background: var(--tc-s0); }
.lvl-s1 { background: var(--tc-s1); }
.lvl-s2 { background: var(--tc-s2); color: #1a1200; }
.lvl-s3 { background: var(--tc-s3); }

.lvl-card {
    height: 100%;
    padding: 22px;
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    border-top: 4px solid var(--tc-s0);
}

.lvl-card.l1 { border-top-color: var(--tc-s1); }
.lvl-card.l2 { border-top-color: var(--tc-s2); }
.lvl-card.l3 { border-top-color: var(--tc-s3); }

.lvl-card h4 {
    font-size: 17px;
    font-weight: 700;
    margin: 12px 0 8px;
}

.lvl-card p {
    font-size: 13px;
    color: var(--tc-muted);
    margin-bottom: 8px;
}

.lvl-card .lvl-req {
    font-size: 13px;
    color: #fff;
    border-top: 1px dashed var(--tc-border);
    padding-top: 8px;
    margin: 0;
}

/*--------------------------------------------------------------
# Méthode ADM
--------------------------------------------------------------*/
.adm-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    counter-reset: adm;
}

.adm-step {
    position: relative;
    padding: 20px 16px;
    border-radius: 12px;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
}

.adm-step .adm-phase {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--terra-orangeade);
}

.adm-step h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 6px 0;
}

.adm-step p {
    font-size: 13px;
    margin: 0;
    color: var(--tc-muted);
}

/*--------------------------------------------------------------
# Offres packagées
--------------------------------------------------------------*/
.offer-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 26px 22px;
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    transition: transform .3s, border-color .3s;
}

.offer-card:hover {
    transform: translateY(-4px);
    border-color: var(--tc-border-strong);
}

.offer-card.featured {
    border-color: var(--terra-orangeade);
    background: linear-gradient(160deg, rgba(255, 87, 87, .10), rgba(255, 255, 255, .03));
}

.offer-card .ribbon {
    position: absolute;
    top: -12px;
    right: 18px;
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--terra-orangeade);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}

.offer-card > i {
    font-size: 30px;
    color: #8db8ff;
}

.offer-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 12px 0 4px;
}

.offer-card .offer-duree {
    font-size: 13px;
    font-weight: 600;
    color: var(--terra-orangeade);
    margin-bottom: 12px;
}

.offer-card p {
    font-size: 14px;
    color: var(--tc-muted);
    flex-grow: 1;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #cfe0ff;
    background: rgba(38, 118, 247, .18);
    border: 1px solid rgba(38, 118, 247, .35);
}

a.chip:hover {
    background: rgba(38, 118, 247, .35);
    color: #fff;
}

/*--------------------------------------------------------------
# Catalogue : barre de filtres et fiches service
--------------------------------------------------------------*/
.filter-bar {
    position: sticky;
    top: 78px;
    z-index: 50;
    padding: 14px 0;
    background: rgba(9, 6, 24, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--tc-border);
}

.filter-bar .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--tc-border);
    background: transparent;
    color: var(--tc-muted);
    font-size: 13px;
    font-weight: 600;
    transition: .2s;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--terra-bleu1);
    border-color: var(--terra-bleu1);
    color: #fff;
}

.filter-search {
    width: 100%;
    max-width: 280px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--tc-border);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 14px;
}

.filter-search::placeholder {
    color: rgba(255, 255, 255, .45);
}

.filter-search:focus {
    outline: 2px solid var(--terra-bleu1);
    border-color: transparent;
}

.fam-block {
    padding-top: 40px;
    scroll-margin-top: 150px;
}

.fam-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.fam-head .fam-icon {
    flex: 0 0 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--terra-bleu1), var(--terra-violet1));
    font-size: 26px;
}

.fam-head h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.fam-head p {
    margin: 2px 0 0;
    color: var(--tc-muted);
    font-size: 15px;
}

.svc-card {
    height: 100%;
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    transition: border-color .3s;
}

.svc-card:hover {
    border-color: var(--tc-border-strong);
}

.svc-card summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 22px 18px;
}

.svc-card summary::-webkit-details-marker {
    display: none;
}

.svc-card .svc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.svc-card .svc-code {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--terra-orangeade);
}

.svc-card .svc-phase {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(191, 150, 255, .14);
    color: #d6c2ff;
}

.svc-card h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
}

.svc-card .svc-resume {
    font-size: 14px;
    color: var(--tc-muted);
    margin: 0;
}

.svc-card .svc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #8db8ff;
}

.svc-card .svc-toggle i {
    transition: transform .3s;
}

.svc-card[open] .svc-toggle i {
    transform: rotate(180deg);
}

.svc-card[open] .svc-toggle .when-closed,
.svc-card:not([open]) .svc-toggle .when-open {
    display: none;
}

.svc-detail {
    padding: 0 22px 22px;
    border-top: 1px dashed var(--tc-border);
}

.svc-detail h5 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--terra-orangeade);
    margin: 16px 0 8px;
}

.svc-detail ul {
    padding-left: 18px;
    margin: 0;
    font-size: 14px;
}

.svc-detail li {
    margin-bottom: 4px;
}

.svc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--tc-muted);
}

.svc-meta i {
    color: #8db8ff;
    margin-right: 4px;
}

.is-hidden {
    display: none !important;
}

.no-result {
    text-align: center;
    padding: 40px 0;
    color: var(--tc-muted);
}

/*--------------------------------------------------------------
# Frise des échéances
--------------------------------------------------------------*/
.timeline {
    position: relative;
    margin: 0 auto;
    max-width: 900px;
    padding-left: 28px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(var(--terra-bleu1), var(--terra-violet1));
}

.tl-item {
    position: relative;
    padding: 0 0 26px 18px;
}

.tl-item::before {
    content: "";
    position: absolute;
    left: -27px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--terra-noirMat);
    border: 3px solid var(--terra-bleu1);
}

.tl-item.key::before {
    border-color: var(--terra-orangeade);
    box-shadow: 0 0 0 5px rgba(255, 87, 87, .2);
}

.tl-date {
    font-weight: 800;
    font-size: 15px;
    color: #fff;
}

.tl-item.key .tl-date {
    color: var(--terra-orangeade);
}

.tl-text {
    margin: 2px 0 8px;
    color: var(--tc-muted);
    font-size: 15px;
}

.tl-status {
    font-size: 11px;
    font-style: italic;
    color: #f7c26b;
    margin-left: 6px;
}

/*--------------------------------------------------------------
# Modalités d'engagement
--------------------------------------------------------------*/
.engage-card {
    height: 100%;
    padding: 24px;
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    text-align: center;
}

.engage-card i {
    font-size: 34px;
    color: var(--terra-orangeade);
}

.engage-card h4 {
    font-size: 17px;
    font-weight: 700;
    margin: 12px 0 8px;
}

.engage-card p {
    font-size: 14px;
    color: var(--tc-muted);
    margin: 0;
}

.cta-band {
    padding: 44px 30px;
    border-radius: var(--tc-radius);
    text-align: center;
    background: linear-gradient(135deg, rgba(38, 118, 247, .35), rgba(102, 16, 242, .35));
    border: 1px solid var(--tc-border-strong);
}

.cta-band h3 {
    font-weight: 800;
    margin-bottom: 10px;
}

.cta-band p {
    color: var(--tc-muted);
    margin-bottom: 22px;
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.post-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--tc-radius);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    overflow: hidden;
    color: #fff;
    transition: transform .3s, border-color .3s;
}

.post-card:hover {
    transform: translateY(-6px);
    border-color: var(--tc-border-strong);
    color: #fff;
}

.post-visual {
    height: 150px;
    display: grid;
    place-items: center;
    font-size: 54px;
    color: rgba(255, 255, 255, .9);
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .12), transparent 45%),
        linear-gradient(135deg, var(--terra-bleu2), var(--terra-violet2));
}

.post-visual.cat-reglementation { background-color: #001e4b; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 45%), linear-gradient(135deg, #001e4b, #2676F7); }
.post-visual.cat-souverainete   { background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 45%), linear-gradient(135deg, #362ba7, #ff5757); }
.post-visual.cat-architecture   { background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 45%), linear-gradient(135deg, #001e4b, #6610f2); }
.post-visual.cat-methode        { background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 45%), linear-gradient(135deg, #090618, #362ba7); }

.post-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--tc-muted);
    margin-bottom: 10px;
}

.post-cat {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--terra-orangeade);
}

.post-card h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 10px;
}

.post-card p {
    font-size: 14px;
    color: var(--tc-muted);
    flex-grow: 1;
}

.post-card .read-more {
    font-size: 13px;
    font-weight: 600;
    color: #8db8ff;
}

/* Article */
.article-wrap {
    max-width: 780px;
    margin: 0 auto;
}

.article-header .post-meta {
    font-size: 14px;
}

.article-header h1 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    margin: 10px 0 20px;
}

.article-body {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .88);
}

.article-body .lead {
    font-size: 20px;
    color: #fff;
    font-weight: 400;
    border-left: 4px solid var(--terra-orangeade);
    padding-left: 18px;
    margin-bottom: 30px;
}

.article-body h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 38px 0 14px;
}

.article-body h3 {
    font-size: 19px;
    font-weight: 700;
    color: #8db8ff;
    margin: 28px 0 10px;
}

.article-body ul,
.article-body ol {
    padding-left: 22px;
}

.article-body li {
    margin-bottom: 8px;
}

.article-body a {
    color: #8db8ff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-body blockquote {
    margin: 30px 0;
    padding: 20px 24px;
    border-radius: 10px;
    background: rgba(38, 118, 247, .12);
    border-left: 4px solid var(--terra-bleu1);
    font-style: italic;
    color: #fff;
}

.article-body code {
    color: #f7c26b;
    font-size: 15px;
}

.article-table {
    --bs-table-bg: transparent;
    font-size: 14px;
    line-height: 1.5;
    margin: 20px 0;
}

.article-table th {
    color: var(--terra-orangeade);
    font-weight: 700;
}

.table-scroll {
    overflow-x: auto;
}

.article-cta {
    margin-top: 36px;
    padding: 18px 22px;
    border-radius: 10px;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    font-size: 16px;
}

.article-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--tc-border);
    font-size: 14px;
}

/*--------------------------------------------------------------
# À propos
--------------------------------------------------------------*/
.about-photo {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--terra-bleu1);
    box-shadow: 0 0 0 10px rgba(38, 118, 247, .15);
}

.about-list {
    list-style: none;
    padding: 0;
}

.about-list li {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.about-list i {
    color: var(--terra-orangeade);
}

.about-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 991px) {
    .filter-bar {
        position: static;
    }

    .hero-stack {
        margin-top: 30px;
    }
}

@media (max-width: 575px) {
    .hero.hero-tc p.hero-sub {
        font-size: 16px;
    }

    .stat-card .stat-value {
        font-size: 34px;
    }
}