/* Aubergine, lilas et rose poudré. Les couleurs de rôle sont centralisées ici. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #292232;
    --ink-muted: #63586d;
    --aubergine: #251e30;
    --aubergine-deep: #1d1725;
    --surface-dark: #302738;
    --ivory: #f8f5f3;
    --lavender-wash: #eee8f2;
    --violet: #71518b;
    --violet-deep: #5b3d76;
    --lilac: #c7afdf;
    --rose: #e3afc3;
    --rose-deep: #92536f;
    --on-dark: #fcf8fc;
    --muted-on-dark: #d1c6d8;
    --border-dark: #52445e;
    --border-light: #d8cedf;
    --brand-gradient: linear-gradient(115deg, var(--lilac), var(--rose));
    --heading-gradient: linear-gradient(110deg, #d2bde8 15%, #e9b6ca 85%);
    --color-primary: var(--aubergine);
    --color-secondary: var(--lavender-wash);
    --color-dark: var(--aubergine-deep);
    --color-text: var(--on-dark);
    --color-text-light: var(--muted-on-dark);
    --primary-600: var(--lilac);
    --primary-700: var(--rose);
}

body { background: var(--aubergine); color: var(--on-dark); }
::selection { background: var(--lilac); color: var(--ink); }
a { color: var(--lilac); }
a:hover { color: var(--rose); }
:where(a, button, input, textarea, summary):focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
.section { scroll-margin-top: 80px; }

/* Une signature typographique, plutôt qu'un titre traité comme un bouton. */
.site-header {
    background: rgba(29, 23, 37, .96);
    border-bottom: 1px solid rgba(199, 175, 223, .15);
    padding: 1.15rem 0;
}
.site-title { line-height: 1.1; }
.site-title a {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.025em;
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--on-dark);
}
.primary-menu a { color: #e8e0ed; font-size: .88rem; }
.primary-menu a:hover { color: var(--rose); }
.primary-menu a::after { background: var(--brand-gradient); height: 1px; }
.menu-toggle-icon, .menu-toggle-icon::before, .menu-toggle-icon::after { background: var(--on-dark); }

/* L'image abstraite reste visible, le texte occupe sa zone calme. */
#accueil {
    min-height: min(790px, 88svh);
    padding: 10rem 0 7rem;
    background-color: var(--aubergine-deep);
    background-position: center;
    background-attachment: scroll;
    border-bottom: 1px solid var(--border-dark);
}
#accueil .hero-content { max-width: 660px; margin: 0; text-align: left; animation: none; }
.hero-title {
    font-size: clamp(3rem, 5.2vw, 4.65rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.055em;
    color: var(--on-dark);
    text-wrap: balance;
    margin-bottom: 1.6rem;
}
.hero-subtitle { color: #e2d8e7; font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 540px; line-height: 1.75; }
.hero-actions { justify-content: flex-start; gap: 1rem; }

/* Dégradés lisibles : texte sombre sur les accents clairs. */
.btn, .custom-contact-submit, .project-url-button { border-radius: 8px; font-weight: 600; }
.btn-secondary, .custom-contact-submit, .project-url-button {
    background: var(--brand-gradient); color: var(--ink);
    border: 1px solid transparent; box-shadow: none;
}
.btn-secondary:hover, .custom-contact-submit:hover, .project-url-button:hover {
    background: var(--brand-gradient); color: var(--ink);
    box-shadow: 0 7px 22px rgba(24, 15, 32, .16); transform: translateY(-2px); animation: none;
}
.btn-secondary::before, .custom-contact-submit::before { display: none; }
.btn-primary, .btn-primary:hover {
    background: rgba(37, 30, 48, .52); border: 1px solid #b09bbe; color: var(--on-dark);
}
.gradient-title, .project-header .project-title {
    background-image: var(--heading-gradient); background-size: 100% 100%;
    animation: none; letter-spacing: -.035em;
}
.gradient-title::before, .project-header .project-title::before, #a-propos .section-title::before { display: none; }
.gradient-title::after, .project-header .project-title::after, #a-propos .section-title::after {
    background: var(--brand-gradient); width: 44px; height: 2px; animation: none; opacity: .85;
}

/* La lumière des surfaces neutres équilibre les sections aubergine. */
#a-propos, #projets, #utilitaires {
    --color-text: var(--ink);
    --color-text-light: var(--ink-muted);
    --heading-gradient: linear-gradient(110deg, var(--violet-deep), var(--rose-deep));
    color: var(--ink);
}
#a-propos { background-color: var(--ivory); }
#a-propos::before { opacity: .055; animation: none; }
#a-propos .section-title, #a-propos .category-title, .stat-number, .timeline-label { color: var(--ink); }
#a-propos .section-title { letter-spacing: -.035em; }
#a-propos a:not(.btn), #projets a:not(.btn), #utilitaires a:not(.btn) { color: var(--violet-deep); }
:is(#a-propos, #projets, #utilitaires) :focus-visible { outline-color: var(--violet-deep); }
.stat-card { background: #fffdfc; border: 1px solid var(--border-light); box-shadow: 0 4px 16px rgba(41,34,50,.025); }
.stat-number { color: var(--violet-deep); }
.stat-label { color: var(--ink-muted); }
.about-text { color: #514658; }
.about-content { align-items: start; }
.about-text-column { min-width: 0; }
.about-photo { width: 100%; margin-inline: auto; }
.about-photo img { display: block; width: 100%; max-width: none; height: auto; border-color: #fffdfc; box-shadow: 0 12px 32px rgba(41,34,50,.12); }
.about-photo .portrait-toggle {
    display: block; position: relative; width: 100%; padding: 0; margin: 0;
    border: 0; border-radius: var(--radius-lg); background: transparent;
    box-shadow: none; transform: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.about-photo .portrait-toggle:focus-visible { outline: 3px solid var(--violet-deep); outline-offset: 5px; }
.about-photo .portrait-puppet {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity 350ms ease; pointer-events: none; box-shadow: none;
}
.portrait-toggle[aria-pressed="true"] .portrait-puppet { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .portrait-toggle:hover .portrait-puppet { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .about-photo .portrait-puppet { transition: none; }
}
@media (max-width: 768px) {
    .about-photo { max-width: 480px; }
}
.skill-tag {
    background: #fffdfc; color: #504059; border: 1px solid var(--border-light);
    box-shadow: none; padding: .6rem 1rem; font-size: .9rem;
}
.skill-tag:hover { background: #f1eaf5; box-shadow: none; animation: none; transform: none; }
.timeline-dot { background: var(--brand-gradient); color: var(--ink); box-shadow: none; }
.timeline-step:not(:last-child)::after { background: var(--border-light); }
.skills-category--featured { box-shadow: 0 8px 26px rgba(41,34,50,.04); }

#processus { background: var(--aubergine); }
.process-card { background: var(--surface-dark); border-color: var(--border-dark); }
.process-number { background: var(--brand-gradient); color: var(--ink); box-shadow: 0 4px 15px rgba(199, 175, 223, .3); border-radius: 50%; }
.process-number::before {
    display: block;
    background: var(--brand-gradient);
    border-radius: 50%;
    filter: none;
    animation: pulse 2s infinite;
    pointer-events: none;
}
.process-card-title { color: var(--on-dark); }
.process-card-text { color: var(--muted-on-dark); }
.process-card:hover .process-card-title { background: none; -webkit-text-fill-color: currentColor; color: var(--rose); }

#projets { background: var(--ivory); }
#utilitaires { background: var(--lavender-wash); }
.project-card { background: var(--surface-dark); border: 1px solid var(--border-dark); }
#projets .project-card, #utilitaires .project-card { background: #fffdfc; border-color: var(--border-light); box-shadow: 0 8px 24px rgba(41,34,50,.04); }
.project-card .project-title { color: var(--color-text); }
.project-card .btn-secondary,
:is(#a-propos, #projets, #utilitaires) .btn-secondary {
    border: 0;
    color: #4b2e64;
    min-height: 44px;
}
.project-card .btn-secondary:hover,
:is(#a-propos, #projets, #utilitaires) .btn-secondary:hover { color: #3e2456; }
.projects-archive-action { display: flex; justify-content: center; margin-top: 3rem; }
#projets .projects-archive-button,
#projets .project-detail-button,
.projects-archive .project-detail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 2rem;
    min-height: 56px;
    max-width: 100%;
    background: linear-gradient(115deg, #5b3d76, #824365);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 8px 24px rgba(91, 61, 118, .18);
}
#projets .projects-archive-button:hover,
#projets .project-detail-button:hover,
.projects-archive .project-detail-button:hover {
    background: linear-gradient(115deg, #4b2e64, #713552);
    color: #fff;
    box-shadow: 0 10px 28px rgba(91, 61, 118, .25);
}
.projects-archive-button span, .project-detail-button span { font-size: 1.4em; line-height: 1; }
#projets .project-detail-button, .projects-archive .project-detail-button {
    min-height: 44px;
    padding: .65rem 1rem;
    gap: .65rem;
    font-size: .9rem;
    box-shadow: 0 4px 12px rgba(91, 61, 118, .12);
}
.project-thumbnail { background: #e5ddea; }
#utilitaires .tool-status-disponible { background: #e2f0e7; color: #245d40; }
#utilitaires .tool-status-developpement { background: #f3e1ea; color: #824365; }
#utilitaires .tool-status-archive { background: #e6dfe9; color: #62516f; }

#contact { background: var(--aubergine); }
.contact-info, .custom-contact-form, .info-card { background: var(--surface-dark); border: 1px solid var(--border-dark); }
.contact-info { color: var(--muted-on-dark); }
.contact-icon, .social-link { background: var(--brand-gradient); color: var(--ink); }
.contact-item a, .contact-item address { color: var(--on-dark); }
.contact-item a:hover { color: var(--rose); }
.social-link:hover { color: var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.custom-contact-form input[type="text"], .custom-contact-form input[type="email"], .custom-contact-form textarea, .form-control {
    background: var(--aubergine-deep); border-color: #806e8e; color: var(--on-dark);
}
.custom-contact-form input::placeholder, .custom-contact-form textarea::placeholder { color: #b9acc4; opacity: 1; }
.custom-contact-form input:focus, .custom-contact-form textarea:focus { border-color: var(--lilac); }
.custom-contact-form a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
.custom-contact-submit { min-height: 44px; }
.info-label { color: var(--rose); }
.info-content a { color: var(--lilac); text-decoration: underline; text-underline-offset: 3px; }
.tech-tag { background: #40334b; color: #ece1f4; }
.tech-tag:hover { background: #4c3a5b; }
.project-title-container { background: var(--aubergine-deep); }
.project-slider-container { background: linear-gradient(120deg, #372b44, #3e2e3e); border-color: var(--border-dark); }
.project-slider { height: clamp(300px, 50vw, 600px); min-height: 0; max-height: none; }
.project-slider .swiper-slide { height: 100%; }
.project-slider .swiper-slide img { width: 100%; height: 100%; object-fit: contain; }
.swiper-slide { background: var(--aubergine-deep); }
.swiper-button-next, .swiper-button-prev { background: var(--violet); }
.swiper-button-next:hover, .swiper-button-prev:hover { background: var(--violet-deep); }
.site-footer { background: var(--aubergine-deep); margin-top: 0; border-top: 1px solid var(--border-dark); }
.footer-copyright { color: var(--muted-on-dark); }
.footer-legal-links a { color: var(--lilac); }
.footer-legal-links a:hover { color: var(--rose); }
.legal-page-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; max-width: 800px; margin: 0 auto 2rem; }
.legal-page-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .75rem 1.25rem; border-radius: 8px; color: var(--muted-on-dark); background: var(--surface-dark); text-align: center; text-decoration: none; }
.legal-page-nav a:hover { color: var(--on-dark); background: #4c3a5b; }
.legal-page-nav a[aria-current="page"] { background: var(--brand-gradient); color: var(--ink); font-weight: 600; }
.pcc-banner { background: var(--aubergine-deep); border-top: 1px solid var(--border-dark); }
.pcc-btn-primary, .pcc-btn-save, #pcc-reject { background: linear-gradient(115deg, var(--pcc-primary), var(--rose)); color: var(--ink); }
.swiper-pagination-bullet-active { background: var(--rose); }

/* Contact : formulaire principal et coordonnées à droite. */
#contact .contact-eyebrow { text-align: center; color: var(--rose); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
#contact .section-title { display: block; width: 100%; max-width: 850px; margin-left: auto; margin-right: auto; text-align: center; text-wrap: balance; }
.contact-hook { max-width: 800px; margin: 0 auto 2.75rem; color: var(--muted-on-dark); text-align: center; font-size: 1.08rem; line-height: 1.8; text-wrap: balance; hyphens: none; word-break: normal; }
#contact .contact-content { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 3rem; }
#contact .contact-form, #contact .contact-info { min-width: 0; }
#contact .contact-form[data-aos="fade-right"] { transform: translate3d(-24px, 0, 0); }
#contact .contact-form[data-aos="fade-right"].aos-animate { transform: none; }
#contact .custom-contact-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; padding: 2rem; background: var(--ivory); color: var(--ink); border: 0; border-radius: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.12); }
#contact .custom-contact-form > * { grid-column: 1 / -1; min-width: 0; }
#contact .custom-contact-form > .contact-field-half { grid-column: auto; }
#contact .custom-contact-form p { margin: 0; }
.contact-form-heading h3 { font-size: 1.35rem; color: var(--violet-deep); margin: 0 0 .5rem; }
#contact .contact-form-heading p { color: var(--ink-muted); font-size: .85rem; }
#contact .custom-contact-form label { color: var(--ink); font-weight: 600; margin-bottom: .5rem; }
#contact .custom-contact-form input[type="text"], #contact .custom-contact-form input[type="email"], #contact .custom-contact-form textarea { background: #fff; color: var(--ink); border: 1px solid #b7a8c2; border-radius: 10px; padding: .85rem 1rem; font-size: 1rem; margin: 0; }
#contact .custom-contact-form input, #contact .custom-contact-form textarea { font-family: inherit; }
#contact .custom-contact-form textarea { min-height: 155px; }
#contact .custom-contact-form input::placeholder, #contact .custom-contact-form textarea::placeholder { color: #74657e; }
#contact .custom-contact-form :focus-visible { outline: 2px solid var(--violet-deep); outline-offset: 3px; }
#contact .custom-contact-form a { color: var(--violet-deep); }
#contact .custom-contact-submit { background: linear-gradient(115deg,#5b3d76,#824365); color: #fff; border: 0; padding: .9rem 1.5rem; min-height: 48px; margin: 0; }
#contact .custom-contact-submit:hover { background: linear-gradient(115deg,#4b2e64,#713552); color: #fff; }
#contact .custom-contact-response.is-error { color: #9c2834; background: #fbe9eb; }
#contact .custom-contact-response.is-success { color: #215d3a; background: #e3f2e9; }
#contact .contact-info { padding: 2rem 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; }
.contact-info-heading { color: var(--on-dark); font-size: 1.4rem; margin: 0 0 1rem; }
#contact .contact-intro { margin-bottom: 2rem; line-height: 1.8; }
#contact .contact-details { gap: 1.5rem; }
#contact .contact-item { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-dark); }
#contact .contact-item a, #contact .contact-item address { overflow-wrap: anywhere; }
#contact .contact-icon { flex-shrink: 0; border-radius: 12px; width: 44px; height: 44px; }
@media (max-width: 900px) {
    #contact .contact-content { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
    #contact .contact-info { padding: 1rem; }
}
@media (max-width: 540px) {
    #contact .custom-contact-form { grid-template-columns: minmax(0,1fr); padding: 1.25rem clamp(0px, calc((100vw - 328px) / 2), 20px); }
    #contact .custom-contact-submit { width: 100%; }
}
@media (max-width: 327px) {
    #contact .contact-form { margin-inline: -14px; }
    #contact .custom-contact-form { padding-inline: 10px; }
}

@media (min-width: 1100px) { .section { padding-top: 6rem; padding-bottom: 6rem; } }
@media (max-width: 768px) {
    .site-header { padding: 1rem 0; }
    .site-title a { font-size: 1.2rem; }
    .primary-menu, .nav-menu { background: var(--aubergine-deep); border: 1px solid var(--border-dark); }
    #accueil { min-height: 680px; padding: 9rem 0 6rem; background-position: 62% center; }
    #accueil .hero-content { text-align: left; max-width: 540px; }
    .hero-title { font-size: clamp(2.65rem, 8.5vw, 3.8rem); }
    .hero-subtitle { font-size: 1.12rem; max-width: 30rem; }
    .hero-actions { justify-content: flex-start; }
    .process-grid { gap: 1.2rem; }
    .section-title { font-size: clamp(1.75rem, 6vw, 2.3rem); }
}
@media (prefers-reduced-motion: reduce) {
    #contact .contact-form[data-aos] { transform: none; opacity: 1; transition: none; pointer-events: auto; }
    .process-number::before { animation: none; opacity: .25; }
    html { scroll-behavior: auto; }
    .btn, .skill-tag, .process-card, .project-card { transition: none; }
}