/* =============================================
   AELAB SOLUTION — lofi-tokens.css
   Couche lo-fi / éditoriale / artisanale
   À importer APRÈS styles.css
   Modifie uniquement via ce fichier.
============================================= */

/* ===================================================
   1. TOKENS — Variables lo-fi (overrides :root)
=================================================== */
:root {
    /* Palette désaturée lo-fi */
    --bleu-violet:    #8082d4;   /* was #8789ff — moins néon, plus encre */
    --rose:           #b85870;   /* was #d4537e — plus bordeaux, moins candy */
    --off-white:      #f7f4ef;   /* légèrement plus chaud */

    /* Nouvelles couleurs papier */
    --lofi-papier:    #f5f1e8;   /* fond crème/vergé */
    --lofi-encre:     #1a1410;   /* noir chaud (remplace noir pur) */

    /* Typographie lo-fi */
    --font-titre:     'Fraunces', Georgia, serif;   /* remplace Gentium Plus */
    --font-mono:      'IBM Plex Mono', 'Courier New', monospace;

    /* Grain renforcé */
    --grain-opacity:  0.045;

    /* Rayons irréguliers */
    --radius-lofi-xs: 2px;
    --radius-lofi-sm: 4px;
    --radius-lofi-md: 7px;
    --radius-stamp:   2px;

    /* Rotations cartouches */
    --rot-neg:   -1.2deg;
    --rot-pos:   1.5deg;
    --rot-light: -0.6deg;

    /* Ombres lo-fi (chaudes) */
    --shadow-lofi:      3px 5px 18px rgba(26, 20, 16, 0.12);
    --shadow-stamp:     2px 2px 0 rgba(26, 20, 16, 0.12);
    --shadow-polaroid:  4px 8px 28px rgba(26, 20, 16, 0.2), 0 0 0 1px rgba(26, 20, 16, 0.05);

    /* Tampons */
    --stamp-ink:    #2a5080;
    --stamp-bg:     rgba(42, 80, 128, 0.07);
    --stamp-border: 1.5px solid rgba(42, 80, 128, 0.28);

    /* Soulignements feutre */
    --feutre-rose:   rgba(184, 88, 112, 0.35);
    --feutre-violet: rgba(128, 130, 212, 0.3);
    --feutre-size:   3px;

    /* Annotations */
    --annotation-color: rgba(128, 130, 212, 0.6);
}

/* ===================================================
   2. TYPOGRAPHIE — Hiérarchie éditoriale
   Titres : Fraunces (serif optique)
   Corps  : Lora (inchangé)
   Labels : IBM Plex Mono
=================================================== */

/* Eyebrows → mono */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
}

/* Numéros d'étape → mono */
.step-num { font-family: var(--font-mono); }

/* Stats héro → mono (chiffres mécaniques) */
.stat__number {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    letter-spacing: -0.02em;
}
.stat__label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.05em; }

/* Tags Canva → mono */
.tag--new,
.tag--pro { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.08em; }

/* Badge IA flow → mono */
.flow__ai-badge { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; }

/* Liens des cards → mono */
.card__link { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; }

/* Plateforme stats → mono */
.platform__stat { font-family: var(--font-mono); font-size: 0.68rem; }

/* Output flow → mono */
.flow__output { font-family: var(--font-mono); font-size: 0.78rem; }

/* Scroll hint → mono */
.hero__scroll-hint span { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.2em; }

/* Tag héro → mono */
.hero__tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; }

/* Footer bas de page → mono */
.footer__bottom p { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; }

/* FAQ icône → mono */
.faq__icon { font-family: var(--font-mono); font-weight: 400; }

/* ===================================================
   3. PORTRAIT — Filtre argentique + cadre polaroïd
=================================================== */

.about__image-wrapper {
    background: #fff;
    padding: 0.7rem 0.7rem 2.4rem;
    border-radius: var(--radius-lofi-xs);
    box-shadow: var(--shadow-polaroid);
    transform: rotate(var(--rot-neg));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.about__image-wrapper:hover { transform: rotate(0deg) scale(1.01); }

.about__image img {
    border-radius: var(--radius-lofi-xs) !important;
    filter: grayscale(14%) sepia(8%) contrast(1.04) brightness(0.97);
}

/* Badge se redresse par rapport au wrapper tourné */
.about__badge {
    transform: rotate(var(--rot-pos));
    background: var(--lofi-papier);
    border: var(--stamp-border);
    box-shadow: var(--shadow-stamp);
}
.about__badge strong {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stamp-ink);
}
.about__badge small {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stamp-ink);
    opacity: 0.7;
}

/* ===================================================
   4. SECTIONS — Numéros marginaux (SEO hidden)
   Présents dans le DOM pour les crawlers,
   invisibles visuellement.
=================================================== */

.lofi-section-num {
    display: block;
    height: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ===================================================
   5. COMPOSANTS LO-FI RÉUTILISABLES
=================================================== */

/* Tampon générique */
.lofi-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stamp-ink);
    background: var(--stamp-bg);
    border: var(--stamp-border);
    border-radius: var(--radius-stamp);
    padding: 0.28rem 0.7rem;
    box-shadow: var(--shadow-stamp);
    white-space: nowrap;
}
.lofi-stamp--rotate { transform: rotate(var(--rot-light)); }
.lofi-stamp--canva {
    color: #7b2f9e;
    background: rgba(123, 47, 158, 0.07);
    border-color: rgba(123, 47, 158, 0.28);
}

/* Barre de tampons */
.lofi-stamps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Soulignement façon feutre */
.lofi-mark {
    text-decoration: underline;
    text-decoration-color: var(--feutre-rose);
    text-decoration-thickness: var(--feutre-size);
    text-underline-offset: 6px;
    text-decoration-skip-ink: none;
}
.lofi-mark--violet {
    text-decoration-color: var(--feutre-violet);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* Astérisque éditoriale */
.lofi-asterisk {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--annotation-color);
    vertical-align: super;
    letter-spacing: 0.02em;
}

/* Note de bas de section */
.lofi-footnote {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    line-height: 1.7;
    color: rgba(241, 239, 234, 0.28);
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    margin-top: 2rem;
    letter-spacing: 0.04em;
    max-width: 640px;
    margin-inline: auto;
}
.lofi-footnote--dark {
    color: rgba(26, 20, 16, 0.38);
    border-top-color: rgba(26, 20, 16, 0.1);
}

/* Flèche manuscrite SVG */
.lofi-arrow-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    color: var(--annotation-color);
    margin-top: 1rem;
}

/* ===================================================
   6. GRAIN — Intensité et animation
=================================================== */

.grain { opacity: var(--grain-opacity); }

/* ===================================================
   7. ALTERNANCE SOMBRE / CLAIR — Vue d'ensemble
   Hero      : sombre  (#071c34)
   About     : blanc   (#fff)
   Canva IA  : sombre  (#0c0622  violet profond — service premium)
   Services  : clair   (papier crème — cartes sombres flottantes)
   Multicanal: sombre  (#0c0622)
   Réseaux   : clair   (papier crème — plateformes sur fond blanc)
   YouTube   : sombre  (#071c34)
   Processus : clair   (papier crème)
   FAQ       : clair   (suite naturelle)
   CTA       : sombre  (gradient)
=================================================== */

.section--light { background: var(--lofi-papier); }

/* About : blanc pur (distinct du papier crème des sections light) */
.about.section { background: var(--blanc); }

/* ===
   Canva IA → section sombre (violet profond #0c0622)
   Les textes de contenu passent en clair
=== */
.canva-ia.section--dark { background: var(--bleu-nuit); }

.canva-ia.section--dark .canva-ia__content h2    { color: var(--blanc); }
.canva-ia.section--dark .canva-ia__content > p   { color: rgba(255,255,255,0.68); }
.canva-ia.section--dark .canva-ia__content strong { color: var(--blanc); }
.canva-ia.section--dark .feature strong           { color: var(--blanc); font-family: var(--font-ui); }
.canva-ia.section--dark .feature p               { color: rgba(255,255,255,0.6); }
.canva-ia.section--dark .lofi-stamps .lofi-stamp {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75);
}
.canva-ia.section--dark .lofi-stamps .lofi-stamp--canva {
    background: rgba(123,47,158,0.2);
    border-color: rgba(123,47,158,0.4);
    color: #d09cfa;
}
.canva-ia.section--dark .btn--primary {
    background: var(--bleu-violet);
    color: var(--blanc);
}

/* ===
   Services → section claire
   Cartes sombres solides sur fond crème — fond explicite requis
   car .card--dark utilise rgba(255,255,255,0.03) conçu pour fond sombre
=== */
.services.section--light .section__header h2 { color: var(--bleu-nuit); }
.services.section--light .section__header p  { color: rgba(7,28,52,0.62); opacity: 1; }
.services.section--light .services__grid     { background: rgba(7,28,52,0.08); border-radius: var(--radius-lg); }

.services.section--light .card--dark {
    background-color: var(--bleu-nuit);
    box-shadow: 0 6px 28px rgba(7,28,52,0.14);
}
.services.section--light .card--dark:hover {
    background-color: rgba(12,6,34,0.96);
}
.services.section--light .card--featured {
    background-color: var(--bleu-nuit);
}
.services.section--light .card--featured:hover {
    background-color: rgba(12,6,34,0.96);
}

/* ===
   Réseaux → section claire
   Plateforme cards redessinées pour fond clair
=== */
.reseaux.section--light                              { border-top: none; }
.reseaux.section--light .reseaux__content h2          { color: var(--bleu-nuit); }
.reseaux.section--light .reseaux__content > p         { color: rgba(7,28,52,0.68); }
.reseaux.section--light .reseaux__feature strong      { color: var(--bleu-nuit); }
.reseaux.section--light .reseaux__feature p           { color: rgba(7,28,52,0.62); }
.reseaux.section--light .reseaux__feature-icon        { background: rgba(128,130,212,0.12); }

.reseaux.section--light .platform {
    background: var(--blanc);
    border: 1px solid rgba(7,28,52,0.08);
    color: var(--bleu-nuit);
    box-shadow: var(--shadow-card);
}
.reseaux.section--light .platform:hover {
    background: var(--blanc);
    border-color: rgba(128,130,212,0.3);
}
.reseaux.section--light .platform strong { color: var(--bleu-nuit); }
.reseaux.section--light .platform small  { color: rgba(7,28,52,0.5); }
.reseaux.section--light .platform__stat  { color: var(--bleu-violet); }

/* ===
   YouTube → sombre
   Topics pills adaptées au fond sombre
=== */
.youtube .topic {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    box-shadow: none;
}
.youtube .topic:hover {
    border-color: var(--bleu-violet);
    color: var(--bleu-violet);
}

/* Wordmark Canva dans la carte — fond blanc, logo couleurs naturelles */
.canva-wordmark {
    height: 22px;
    width: auto;
    display: block;
}

/* ===================================================
   8. HERO — Micro-détails lo-fi
=================================================== */

/* Séparateur stat hero → plus fin, lo-fi */
.stat__divider { background: rgba(255, 255, 255, 0.08); }

/* Sous-titre hero — légèrement moins opaque */
.hero__subtitle { opacity: 0.58; }

/* ===================================================
   9. SERVICES — Featured card améliorée
=================================================== */

/* La carte vedette Canva a déjà ::before pour la bordure gauche.
   On ajoute une note marginale via ::after du badge. */
.card--featured .card__badge {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.12em;
    transform: rotate(var(--rot-light));
}

/* ===================================================
   10. FLOW MULTICANAL — Renforcement lo-fi
=================================================== */

.flow__source-label strong { font-family: var(--font-mono); font-size: 0.84rem; }
.flow__source-label span   { font-family: var(--font-mono); font-size: 0.68rem; }

/* ===================================================
   11. CANVA STATS — Fix hover (texte ne disparaît plus)
   Le fond hover précédent (rgba 0.06) rendait le texte
   blanc invisible sur fond beige.
=================================================== */

.canva-stat:hover {
    background: rgba(128, 130, 212, 0.22);
}

/* ===================================================
   12. ACCESSIBILITÉ — Contrastes maintenus
=================================================== */

/* Assurer que les CTA restent très lisibles */
.btn--primary { background: var(--bleu-violet); }
.btn--primary:hover { background: var(--violet); }

/* Focus visible renforcé */
:focus-visible { outline-color: var(--bleu-violet); }

/* ===================================================
   12. LOFI PLAYER — Mono cohérent
=================================================== */

.lofi-player__label { font-family: var(--font-mono); }
.lofi-player__btn   { font-family: var(--font-mono); }

/* ===================================================
   13. VINYL PLAYER — Disque vinyle en haut à droite
   Rotation pilotée par JS (requestAnimationFrame)
=================================================== */

.vinyl-wrap {
    position: fixed;
    top: 0;
    right: 1.25rem;
    height: calc(34px + 2.2rem); /* logo height + nav padding × 2 */
    display: flex;
    align-items: center;
    z-index: 200;
}

.vinyl-btn {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}
.vinyl-btn:hover  { opacity: 0.82; }
.vinyl-btn:focus-visible {
    outline: 2px solid var(--bleu-violet);
    outline-offset: 4px;
}

.vinyl-disc {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    will-change: transform;
    overflow: hidden;
}
.vinyl-disc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Halo subtil quand la musique joue */
.vinyl-btn.is-playing .vinyl-disc {
    box-shadow:
        0 0 18px rgba(128, 130, 212, 0.3),
        0 2px 12px rgba(0, 0, 0, 0.45);
}

/* ===================================================
   14. RESPONSIVE — Ajustements lo-fi mobile
=================================================== */

@media (max-width: 768px) {
    .about__image-wrapper { transform: rotate(0deg); }
    .about__badge { transform: rotate(0deg); }
    .lofi-stamps { margin-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .about__image-wrapper { transition: none; }
}