/* ═══════════════════════════════════════════════════════════════
   Page publique — mobile d'abord.
   Les variables --accent* sont injectées par index.php à partir de
   la couleur choisie dans l'administration.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --bg:            #0b0d12;
    --bg-elevated:   rgba(255, 255, 255, .045);
    --bg-hover:      rgba(255, 255, 255, .085);
    --border:        rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .16);
    --text:          #f2f4f8;
    --text-muted:    #9aa3b2;
    --shadow:        0 18px 40px -18px rgba(0, 0, 0, .8);
    --radius:        18px;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg:            #f6f7fb;
        --bg-elevated:   #ffffff;
        --bg-hover:      #ffffff;
        --border:        rgba(15, 23, 42, .08);
        --border-strong: rgba(15, 23, 42, .16);
        --text:          #10131a;
        --text-muted:    #626d80;
        --shadow:        0 14px 34px -18px rgba(15, 23, 42, .35);
    }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100svh;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: center;
    padding: clamp(1.25rem, 5vw, 3rem) 1.15rem calc(2.5rem + env(safe-area-inset-bottom));
}

/* Halo coloré derrière la carte. */
.glow {
    position: fixed;
    inset: -30% 0 auto 0;
    height: 60vh;
    pointer-events: none;
    background:
        radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%);
    filter: blur(30px);
    opacity: .5;
    z-index: 0;
}

@media (prefers-color-scheme: light) {
    .glow { opacity: .32; }
}

.card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

/* ── Couverture ───────────────────────────────────────────────── */

.cover {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
    line-height: 0;
}

/* L'aperçu flou sert de fond le temps que l'image arrive. */
.cover {
    background-size: cover;
    background-position: center;
}

.cover img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    display: block;
}

/* Le fondu n'est activé que si JavaScript tourne : c'est lui qui pose
   la classe « is-loaded ». Sans script, l'image reste simplement
   visible — jamais transparente à vie. */
.js .cover img {
    opacity: 0;
    transition: opacity .45s ease;
}

.js .cover.is-loaded img { opacity: 1; }

/* Le portrait chevauche le bas du bandeau. */
.identity--overlap {
    margin-top: -3.5rem;
}

.identity--overlap .avatar {
    box-shadow:
        0 0 0 4px var(--bg),
        0 0 0 5px var(--border-strong),
        var(--shadow);
}

/* ── Identité ─────────────────────────────────────────────────── */

.identity {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}

.avatar {
    width: 7.25rem;
    height: 7.25rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: .75rem;
    background: var(--bg-elevated);
    box-shadow:
        0 0 0 1px var(--border-strong),
        0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent),
        var(--shadow);
}

.avatar--initials {
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(145deg, var(--accent-soft), var(--accent-deep));
}

.name {
    margin: 0;
    font-size: clamp(1.5rem, 6vw, 1.85rem);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.2;
}

/* Fonction en petites capitales espacées : signature des portfolios. */
.role {
    margin: .15rem 0 0;
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: color-mix(in srgb, var(--accent) 78%, var(--text));
}

.bio {
    margin: .55rem 0 0;
    max-width: 26rem;
    font-size: .94rem;
    color: var(--text-muted);
    text-wrap: pretty;
}

/* ── Statut de disponibilité ──────────────────────────────────── */

.status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: .55rem 0 0;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: color-mix(in srgb, #16a34a 14%, transparent);
    border: 1px solid color-mix(in srgb, #16a34a 32%, transparent);
    font-size: .8rem;
    font-weight: 550;
    color: color-mix(in srgb, #16a34a 65%, var(--text));
}

.status__dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 22%, transparent);
}

/* ── Bouton principal ─────────────────────────────────────────── */

.cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.05rem 1.25rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--accent-soft), var(--accent), var(--accent-deep));
    color: #fff;
    font-size: 1.02rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--accent) 75%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cta:hover { filter: brightness(1.06); }
.cta:active { transform: scale(.985); }

.cta__icon {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
}

.cta__icon svg { width: 100%; height: 100%; }

/* ── Actions rapides ──────────────────────────────────────────── */

.quick {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: .6rem;
}

.quick__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .9rem .5rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-elevated);
    color: var(--text);
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.quick__item:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

.quick__item:active { transform: scale(.97); }

.quick__icon {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--accent);
}

.quick__icon svg { width: 100%; height: 100%; display: block; }

.quick__label {
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ── Galerie ──────────────────────────────────────────────────── */

.section-label {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .75rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--text-muted);
}

/* Filet fin qui prolonge le titre jusqu'au bord. */
.section-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin-left: .25rem;
    background: var(--border);
}

.section-label__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: .95rem;
    height: .95rem;
    color: var(--accent);
}

.section-label__icon svg { width: 100%; height: 100%; display: block; }

/* ── Groupes de liens ─────────────────────────────────────────── */

.links-group {
    display: flex;
    flex-direction: column;
}

/* Mosaïque : chaque image garde son cadrage.
   Les colonnes CSS servent de base ; un court script les rééquilibre
   ensuite par hauteur, car les colonnes natives laissent un vide en bas
   dès que les formats sont très différents. Sans JavaScript, la version
   ci-dessous reste parfaitement lisible. */
.gallery {
    columns: 2;
    column-gap: .35rem;
}

@media (min-width: 30rem) {
    .gallery { columns: 3; }
}

.gallery--balanced {
    display: flex;
    gap: .35rem;
    columns: auto;
}

.gallery__col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.gallery--balanced .gallery__item { margin: 0; }

.gallery__item {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 .35rem;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-elevated);
    cursor: zoom-in;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -webkit-tap-highlight-color: transparent;
}

/* L'aperçu flou est posé en fond de la tuile. */
.gallery__item {
    background-size: cover;
    background-position: center;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .4s ease;
}

.js .gallery__item img { opacity: 0; }
.js .gallery__item.is-loaded img { opacity: 1; }

.gallery__item:hover img { transform: scale(1.06); }
.gallery__item:active img { opacity: .85; }

/* ── Visionneuse plein écran ──────────────────────────────────── */

body.is-locked { overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: calc(3.5rem + env(safe-area-inset-top)) 1rem
             calc(3rem + env(safe-area-inset-bottom));
    background: rgba(6, 7, 10, .96);
    backdrop-filter: blur(6px);
    animation: fade .2s ease;
}

.lightbox[hidden] { display: none; }

.lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    max-width: 100%;
}

.lightbox__img {
    max-width: 100%;
    max-height: 74svh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
}

.lightbox__caption {
    margin: 0;
    max-width: 34rem;
    font-size: .88rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .74);
    text-align: center;
    text-wrap: pretty;
}

.lightbox__count {
    position: absolute;
    bottom: calc(1.1rem + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: .74rem;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .5);
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: background .18s ease, border-color .18s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
}

.lightbox__close {
    top: calc(1rem + env(safe-area-inset-top));
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    padding-bottom: .15rem;
}

.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.9rem;
    padding-bottom: .25rem;
}

.lightbox__nav--prev { left: .8rem; }
.lightbox__nav--next { right: .8rem; }
.lightbox__nav[hidden] { display: none; }

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Liste de liens ───────────────────────────────────────────── */

.links {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--bg-elevated);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.link:hover {
    background: var(--bg-hover);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    transform: translateY(-1px);
}

.link:active { transform: scale(.99); }

.link__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 11px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.link__icon svg { width: 1.2rem; height: 1.2rem; }

/* Favicon du site cible : pastille claire dans les deux thèmes, sinon
   les logos blancs sur fond transparent deviennent invisibles. */
.link__icon--favicon {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1);
    padding: .34rem;
}

.link__icon--favicon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.link__label {
    flex: 1 1 auto;
    font-size: .97rem;
    font-weight: 550;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link__chevron {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    opacity: .55;
}

.link__chevron svg { width: 100%; height: 100%; display: block; }

/* ── Lien mis en avant ────────────────────────────────────────── */

/* Un seul lien traité ainsi : dès qu'il y en a deux, plus rien ne
   ressort. C'est l'action que tu veux qu'on fasse en premier. */
.link--featured {
    background: linear-gradient(135deg, var(--accent-soft), var(--accent), var(--accent-deep));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 75%, transparent);
}

.link--featured:hover {
    background: linear-gradient(135deg, var(--accent-soft), var(--accent), var(--accent-deep));
    border-color: transparent;
    filter: brightness(1.06);
}

.link--featured .link__label { font-weight: 650; }

.link--featured .link__icon {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.link--featured .link__icon--favicon { background: #fff; }
.link--featured .link__chevron { color: #fff; opacity: .8; }

/* ── Avis clients ─────────────────────────────────────────────── */

.quotes {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.quote {
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--bg-elevated);
}

.quote blockquote {
    margin: 0 0 .7rem;
    font-size: .95rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.quote blockquote::before { content: "« "; color: var(--accent); }
.quote blockquote::after  { content: " »"; color: var(--accent); }

.quote figcaption {
    font-size: .82rem;
    color: var(--text-muted);
}

.quote figcaption strong { color: var(--text); font-weight: 600; }
.quote figcaption span::before { content: " — "; }

/* ── Formulaire de contact ────────────────────────────────────── */

.contact-box {
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.contact-box__summary {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    cursor: pointer;
    list-style: none;
    transition: background .18s ease;
}

.contact-box__summary::-webkit-details-marker { display: none; }
.contact-box__summary:hover { background: var(--bg-hover); }

.contact-box__chevron {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    opacity: .55;
    transform: rotate(90deg);
    transition: transform .25s ease;
}

.contact-box__chevron svg { width: 100%; height: 100%; display: block; }
.contact-box[open] .contact-box__chevron { transform: rotate(-90deg); }

.contact {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: .3rem 1rem 1.1rem;
}

.contact__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}

@media (max-width: 24rem) {
    .contact__row { grid-template-columns: 1fr; }
}

.contact__field { display: block; }

.contact__field > span {
    display: block;
    margin-bottom: .3rem;
    font-size: .82rem;
    font-weight: 550;
    color: var(--text-muted);
}

.contact__field > span small { font-weight: 400; opacity: .8; }

.contact__field input,
.contact__field select,
.contact__field textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 1rem;  /* 16px : empêche iOS de zoomer à la saisie */
}

.contact__field textarea { resize: vertical; min-height: 5.5rem; }

.contact__field input:focus,
.contact__field select:focus,
.contact__field textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* Champ piège : hors écran plutôt que display:none, que certains
   robots savent détecter. */
.contact__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cta--submit {
    border: 0;
    width: 100%;
    margin-top: .2rem;
    cursor: pointer;
    font-family: inherit;
}

.notice {
    margin: .3rem 1rem 0;
    padding: .75rem .9rem;
    border-radius: 11px;
    font-size: .9rem;
}

.notice p { margin: .2rem 0; }

.notice--success {
    color: #0f7a4f;
    background: color-mix(in srgb, #16a34a 14%, transparent);
    border: 1px solid color-mix(in srgb, #16a34a 30%, transparent);
}

.notice--error {
    color: #b3261e;
    background: color-mix(in srgb, #dc2626 12%, transparent);
    border: 1px solid color-mix(in srgb, #dc2626 30%, transparent);
}

@media (prefers-color-scheme: dark) {
    .notice--success { color: #86efac; }
    .notice--error   { color: #fca5a5; }
}

/* ── Pied de page ─────────────────────────────────────────────── */

.address {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 0;
    font-size: .85rem;
    color: var(--text-muted);
    text-align: center;
}

.address__icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.address__icon svg { width: 100%; height: 100%; display: block; }

.foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding-top: .25rem;
}

/* ── Sélecteur de langue ──────────────────────────────────────── */

.langs {
    display: inline-flex;
    padding: .18rem;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.langs__item {
    padding: .35rem .75rem;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.langs__item:hover { color: var(--text); }

.langs__item.is-active {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}

.share {
    padding: .6rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}

.share:hover {
    color: var(--text);
    border-color: var(--border-strong);
}

/* ── Barre d'action ───────────────────────────────────────────── */

.dock {
    position: fixed;
    left: 50%;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    gap: .4rem;
    width: min(28rem, calc(100vw - 1.6rem));
    padding: .4rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
    animation: dock-in .28s cubic-bezier(.22, .9, .3, 1);
}

.dock[hidden] { display: none; }

/* Le contenu ne doit pas finir caché derrière la barre. */
body.has-dock { padding-bottom: 6.5rem; }

.dock__btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem .6rem;
    border-radius: 999px;
    color: var(--text);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease;
}

.dock__btn:hover { background: var(--bg-hover); }

.dock__btn--primary {
    background: linear-gradient(135deg, var(--accent-soft), var(--accent), var(--accent-deep));
    color: #fff;
}

.dock__btn--primary:hover { filter: brightness(1.06); }

.dock__icon {
    display: grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

.dock__icon svg { width: 100%; height: 100%; }

@keyframes dock-in {
    from { opacity: 0; transform: translate(-50%, 60%); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Apparition en cascade ────────────────────────────────────── */

.identity,
.cta,
.quick,
.work,
.links-group > .section-label,
.links > .link,
.address,
.foot {
    animation: rise .5s cubic-bezier(.22, .9, .3, 1) backwards;
}

.cta            { animation-delay: .06s; }
.quick          { animation-delay: .1s; }
.work           { animation-delay: .14s; }
.links-group > .section-label { animation-delay: .16s; }
.links > .link  { animation-delay: calc(.18s + var(--i, 0) * .04s); }
.links > .link:nth-child(1) { --i: 0; }
.links > .link:nth-child(2) { --i: 1; }
.links > .link:nth-child(3) { --i: 2; }
.links > .link:nth-child(4) { --i: 3; }
.links > .link:nth-child(5) { --i: 4; }
.links > .link:nth-child(6) { --i: 5; }
.links > .link:nth-child(n+7) { --i: 6; }
.address        { animation-delay: .4s; }
.foot           { animation-delay: .44s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Anneau de focus visible au clavier. */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}