/* ==========================================================
   COULEURS — la palette (orange, violet, bleu, vert, rose)
   répartie sur tout le site, sur la base pierre / noir.
   Chaque section a sa couleur dominante (--hx-accent).
   ========================================================== */

:root {
    --c-orange: #e34f26;
    --c-violet: #7a5cc4;
    --c-blue:   #1f88d1;
    --c-green:  #2f9e6a;
    --c-pink:   #c2306f;
    --c-yellow: #e0a526;
}

/* couleur dominante de chaque section : front de révélation des phrases,
   contours de focus, survols… */
.hx { --hx-accent: var(--c-orange); }
.ab { --hx-accent: var(--c-violet); }
.sk { --hx-accent: var(--c-blue); }
.pj { --hx-accent: var(--c-pink); }
.sv { --hx-accent: var(--c-green); }
.ct, .ft { --hx-accent: var(--c-orange); }

/* ---------- Barre de navigation ---------- */

.navbar.nav-light::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--c-orange), var(--c-yellow), var(--c-green), var(--c-blue), var(--c-violet), var(--c-pink));
}

.navbar.nav-light .nav-link { position: relative; }
.navbar.nav-light .nav-link.active::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 2px;
    background: var(--c-orange);
}
.navbar.nav-light .nav-menu li:nth-child(2) .nav-link.active::after { background: var(--c-violet); }
.navbar.nav-light .nav-menu li:nth-child(3) .nav-link.active::after { background: var(--c-blue); }
.navbar.nav-light .nav-menu li:nth-child(4) .nav-link.active::after { background: var(--c-pink); }
.navbar.nav-light .nav-menu li:nth-child(5) .nav-link.active::after { background: var(--c-green); }

/* ---------- Hero ---------- */

/* le nom géant derrière la photo, en teintes pastel */
.hx-marquee-track > span:nth-child(4n + 1) { color: color-mix(in srgb, var(--c-orange) 28%, var(--hx-ghost)); }
.hx-marquee-track > span:nth-child(4n + 2) { color: color-mix(in srgb, var(--c-violet) 28%, var(--hx-ghost)); }
.hx-marquee-track > span:nth-child(4n + 3) { color: color-mix(in srgb, var(--c-blue) 28%, var(--hx-ghost)); }
.hx-marquee-track > span:nth-child(4n + 4) { color: color-mix(in srgb, var(--c-green) 28%, var(--hx-ghost)); }

.hx-btn-solid { background: #c8401c; border-color: #c8401c; color: #fff; }
.hx-btn-solid:hover { background: var(--hx-ink); border-color: var(--hx-ink); }
.hx-btn-line:hover { background: var(--c-violet); border-color: var(--c-violet); color: #fff; }

.hx-cv i { color: var(--c-orange); }
.hx-socials a[href*="linkedin"]:hover { color: #0a66c2; }
.hx-socials a[href*="wa.me"]:hover { color: #1ea952; }

.hx-meta { border-top-color: color-mix(in srgb, var(--c-orange) 45%, transparent); }

/* ---------- Intitulés de section (01 — À propos…) ---------- */

.ab-index, .ct-index { color: var(--hx-accent); }
.ab-index::before,
.ct-index::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 3px;
    margin-right: 10px;
    vertical-align: middle;
    background: var(--hx-accent);
}

/* petites listes de l'en-tête : pastilles colorées (à propos, services) */
.ab .ab-list li,
.sv .ab-list li { display: flex; align-items: center; gap: 8px; }
.ab .ab-list li::before,
.sv .ab-list li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot, var(--hx-accent));
}
.ab .ab-list li:nth-child(5n + 1) { --dot: var(--c-orange); }
.ab .ab-list li:nth-child(5n + 2) { --dot: var(--c-violet); }
.ab .ab-list li:nth-child(5n + 3) { --dot: var(--c-green); }
.ab .ab-list li:nth-child(5n + 4) { --dot: var(--c-blue); }
.ab .ab-list li:nth-child(5n + 5) { --dot: var(--c-pink); }
.sv .ab-list li:nth-child(1) { --dot: var(--c-blue); }
.sv .ab-list li:nth-child(2) { --dot: var(--c-orange); }
.sv .ab-list li:nth-child(3) { --dot: var(--c-pink); }

/* mots géants en fond, teintés à la couleur de la section */
.ab .ab-ghost,
.sk .ab-ghost,
.sv .ab-ghost { color: color-mix(in srgb, var(--hx-accent) 22%, var(--hx-ghost)); }

/* ---------- À propos ---------- */

.ab-card { border-top: 5px solid var(--c-violet); }
.ab-card-meta { color: color-mix(in srgb, var(--c-violet) 55%, #fff); }
.ab-chip { border-color: var(--c-yellow); color: var(--c-yellow); }

.ab-stat:nth-child(1) .ab-num { color: var(--c-orange); }
.ab-stat:nth-child(2) .ab-num { color: var(--c-violet); }
.ab-stat:nth-child(3) .ab-num { color: var(--c-blue); }
.ab-stats { border-top-color: color-mix(in srgb, var(--c-violet) 50%, transparent); }

.ab-text strong { color: color-mix(in srgb, var(--c-violet) 70%, #000); }

/* ---------- Projets (en-tête) ---------- */

.pj-badge { border-color: var(--c-pink); color: var(--c-pink); }
.pj-cross:nth-of-type(1) { color: var(--c-orange); }
.pj-cross:nth-of-type(2) { color: var(--c-blue); }
.pj-cross:nth-of-type(3) { color: var(--c-green); }
.pj-cross:nth-of-type(4) { color: var(--c-violet); }
.pj-title-outline { -webkit-text-stroke-color: var(--c-pink); }

/* ---------- Services : une couleur par service (--rc) ---------- */

.sv-row { --rc: var(--hx-accent); }
.sv-num { color: var(--rc); font-weight: 700; }
.sv-title i { color: var(--rc); }
.sv-badge { background: var(--rc); border-color: var(--rc); color: #fff; }
.sv-feats li::before { color: var(--rc); }
.sv-row::before { background: color-mix(in srgb, var(--rc) 82%, #000); }

@media (hover: hover) {
    .sv-row:hover .sv-num,
    .sv-row:hover .sv-title i { color: #fff; }
    .sv-row:hover .sv-desc,
    .sv-row:hover .sv-feats { color: rgba(255, 255, 255, 0.82); }
    .sv-row:hover .sv-badge { background: #fff; color: var(--rc); }
}

.sv-cta .hx-btn-solid { background: var(--c-green); border-color: var(--c-green); }
.sv-cta .hx-btn-solid:hover { background: var(--hx-ink); border-color: var(--hx-ink); }

/* ---------- Contact ---------- */

.ct-hl { color: var(--c-orange); }
.ct-index { color: color-mix(in srgb, var(--c-orange) 70%, #fff); }

.ct-field input:focus,
.ct-field textarea:focus { border-color: var(--c-orange); }

.ct-submit { background: var(--c-orange); border-color: var(--c-orange); color: #fff; }
.ct-submit:hover { background: transparent; border-color: var(--c-orange); color: var(--c-orange); }

.ct-details li:nth-child(1) span { color: var(--c-orange); }
.ct-details li:nth-child(2) span { color: color-mix(in srgb, var(--c-blue) 70%, #fff); }
.ct-details li:nth-child(3) span { color: color-mix(in srgb, var(--c-green) 70%, #fff); }

/* ---------- Pied de page ---------- */

.ft-col h3 { position: relative; padding-bottom: 8px; }
.ft-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 3px;
    background: var(--col, var(--c-orange));
}
.ft-cols > :nth-child(2) { --col: var(--c-orange); }
.ft-cols > :nth-child(3) { --col: var(--c-pink); }
.ft-cols > :nth-child(4) { --col: var(--c-blue); }
.ft-col a:hover { color: var(--col); }

.ft-bottom { border-top-color: transparent; border-image: linear-gradient(90deg, var(--c-orange), var(--c-violet), var(--c-blue), var(--c-green)) 1; }

/* nom géant : chaque lettre dans une teinte pastel de la palette */
.ft-giant-fill .dd-w .dd-ch:nth-child(5n + 1) { color: color-mix(in srgb, var(--c-orange) 35%, var(--hx-ghost)); }
.ft-giant-fill .dd-w .dd-ch:nth-child(5n + 2) { color: color-mix(in srgb, var(--c-violet) 35%, var(--hx-ghost)); }
.ft-giant-fill .dd-w .dd-ch:nth-child(5n + 3) { color: color-mix(in srgb, var(--c-blue) 35%, var(--hx-ghost)); }
.ft-giant-fill .dd-w .dd-ch:nth-child(5n + 4) { color: color-mix(in srgb, var(--c-green) 35%, var(--hx-ghost)); }
.ft-giant-fill .dd-w .dd-ch:nth-child(5n + 5) { color: color-mix(in srgb, var(--c-pink) 35%, var(--hx-ghost)); }