/**
 * Yellow Diligence
 * Styles fondamentaux.
 *
 * Les composants spécifiques sont volontairement exclus de ce fichier.
 */


/* ====================================================================
   Document
   ==================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--yd-navbar-height);
    background: var(--yd-background-deep);
}

body {
    position: relative;
    min-width: 320px;
    min-height: 100vh;
    margin: 0;

    overflow-x: hidden;

    font-family: var(--yd-font-body);
    font-size: var(--yd-font-md);
    font-weight: var(--yd-weight-regular);
    line-height: var(--yd-line-normal);

    color: var(--yd-text);
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(37, 115, 59, 0.07),
            transparent 30rem
        ),
        radial-gradient(
            circle at 90% 65%,
            rgba(200, 50, 43, 0.045),
            transparent 28rem
        ),
        var(--yd-background);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ====================================================================
   Sélection
   ==================================================================== */

::selection {
    color: var(--yd-black);
    background: var(--yd-yellow);
}


/* ====================================================================
   Scrollbar
   ==================================================================== */

* {
    scrollbar-width: thin;
    scrollbar-color:
        var(--yd-yellow-dark)
        var(--yd-black);
}

::-webkit-scrollbar {
    width: 0.7rem;
}

::-webkit-scrollbar-track {
    background: var(--yd-black);
}

::-webkit-scrollbar-thumb {
    border: 0.18rem solid var(--yd-black);
    border-radius: var(--yd-radius-pill);
    background: var(--yd-yellow-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--yd-yellow);
}


/* ====================================================================
   Box sizing
   ==================================================================== */

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


/* ====================================================================
   Médias
   ==================================================================== */

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

figure {
    margin: 0;
}


/* ====================================================================
   Typographie
   ==================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    font-family: var(--yd-font-display);
    font-weight: var(--yd-weight-extrabold);
    line-height: var(--yd-line-heading);
    letter-spacing: var(--yd-tracking-tight);

    color: var(--yd-heading);
}

h1 {
    font-size: var(--yd-heading-hero);
}

h2 {
    font-size: var(--yd-heading-large);
}

h3 {
    font-size: var(--yd-heading-medium);
}

h4 {
    font-size: var(--yd-heading-small);
}

p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

p:last-child {
    margin-bottom: 0;
}

strong,
b {
    font-weight: var(--yd-weight-bold);
}

small {
    font-size: var(--yd-font-sm);
}

address {
    font-style: normal;
}


/* ====================================================================
   Liens
   ==================================================================== */

a {
    color: var(--yd-link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;

    transition:
        color var(--yd-transition-fast),
        opacity var(--yd-transition-fast);
}

a:hover {
    color: var(--yd-link-hover);
}


/* ====================================================================
   Boutons et formulaires
   ==================================================================== */

button,
input,
select,
textarea {
    font: inherit;
}

button {
    touch-action: manipulation;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* ====================================================================
   Focus clavier
   ==================================================================== */

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--yd-focus);
    outline-offset: 4px;
}

a:focus-visible,
button:focus-visible {
    border-radius: var(--yd-radius-xs);
}


/* ====================================================================
   Lien d'évitement
   ==================================================================== */

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: calc(var(--yd-z-navbar) + 20);

    padding: 0.75rem 1rem;

    color: var(--yd-black);
    background: var(--yd-yellow);

    border-radius: var(--yd-radius-sm);

    font-weight: var(--yd-weight-bold);
    text-decoration: none;

    box-shadow: var(--yd-shadow-md);

    transform: translateY(-200%);
    transition: transform var(--yd-transition-fast);
}

.skip-link:focus {
    color: var(--yd-black);
    transform: translateY(0);
}


/* ====================================================================
   Structure principale
   ==================================================================== */

#main-content {
    position: relative;
    z-index: var(--yd-z-content);
}

.container {
    --bs-gutter-x: calc(var(--yd-container-padding) * 2);
}

.yd-section {
    position: relative;

    padding-top: var(--yd-section-space);
    padding-bottom: var(--yd-section-space);

    isolation: isolate;
}

/* ====================================================================
   Ancres
   ==================================================================== */

section[id] {
    scroll-margin-top: var(--yd-navbar-height);
}


/* ====================================================================
   Titres de sections
   ==================================================================== */

.yd-section-heading {
    position: relative;
    margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}

.yd-section-heading__index {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    margin-bottom: 0.65rem;

    font-family: var(--yd-font-display);
    font-size: var(--yd-font-sm);
    font-weight: var(--yd-weight-bold);
    letter-spacing: var(--yd-tracking-ultra);
    text-transform: uppercase;

    color: var(--yd-yellow);
}

.yd-section-heading__index::before {
    content: "";

    width: 2.5rem;
    height: 2px;

    background: var(--yd-gradient-reggae);
}

.yd-section-heading__title {
    margin: 0;

    font-size: var(--yd-heading-large);
    text-transform: uppercase;
}

.yd-section-heading__intro {
    max-width: 46rem;
    margin-top: 1.25rem;
    margin-bottom: 0;

    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: var(--yd-line-relaxed);

    color: var(--yd-text-muted);
}


/* ====================================================================
   Texte décoratif
   ==================================================================== */

.yd-eyebrow {
    display: inline-block;

    font-family: var(--yd-font-display);
    font-size: var(--yd-font-sm);
    font-weight: var(--yd-weight-bold);

    letter-spacing: var(--yd-tracking-wider);
    text-transform: uppercase;

    color: var(--yd-yellow);
}

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

.yd-text-yellow {
    color: var(--yd-yellow);
}

/* ====================================================================
   Texture analogique globale
   ====================================================================

   Aucun fichier bitmap n'est nécessaire : plusieurs gradients CSS
   extrêmement légers produisent un grain presque imperceptible.

   pointer-events:none garantit que cette couche ne gêne jamais
   l'interaction avec le site.
   ==================================================================== */

.yd-global-texture {
    position: fixed;
    inset: 0;
    z-index: var(--yd-z-decoration);

    pointer-events: none;

    opacity: 0.17;

    background-image:
        repeating-radial-gradient(
            circle at 20% 30%,
            rgba(255, 255, 255, 0.045) 0,
            rgba(255, 255, 255, 0.045) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.012) 0,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 3px
        );

    background-size:
        7px 7px,
        100% 4px;

    mix-blend-mode: soft-light;
}


/* ====================================================================
   Feuilles tropicales globales
   ====================================================================

   Elles sont volontairement abstraites. Les formes définitives seront
   renforcées dans sections.css sans ajouter de lourdes images de fond.
   ==================================================================== */

.yd-tropical-leaves {
    position: fixed;
    z-index: var(--yd-z-background);

    width: clamp(16rem, 30vw, 34rem);
    aspect-ratio: 1;

    pointer-events: none;

    opacity: 0.035;

    background:
        radial-gradient(
            ellipse at 50% 100%,
            transparent 0 27%,
            currentColor 28% 31%,
            transparent 32%
        );

    color: var(--yd-white);

    filter: blur(0.2px);

    transform-origin: bottom center;
}

.yd-tropical-leaves--left {
    left: -10rem;
    bottom: -6rem;

    transform: rotate(24deg);
}

.yd-tropical-leaves--right {
    top: 20%;
    right: -12rem;

    transform: rotate(-34deg) scaleX(-1);
}


/* ====================================================================
   Séparateur de section
   ==================================================================== */

.yd-section-divider {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    border: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--yd-white-08) 15%,
            var(--yd-white-15) 50%,
            var(--yd-white-08) 85%,
            transparent 100%
        );
}


/* ====================================================================
   Utilitaires d'accessibilité
   ==================================================================== */

/* ====================================================================
   Contenu sans JavaScript
   ==================================================================== */

/* ====================================================================
   Espacement des sections · mobile
   ==================================================================== */

@media (max-width: 767.98px) {

    .yd-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .yd-section-heading {
        margin-bottom: 2.5rem;
    }

}


/* ====================================================================
   Réduction des mouvements
   ==================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .yd-global-texture {
        mix-blend-mode: normal;
    }

}


/* ====================================================================
   Contraste renforcé
   ==================================================================== */

@media (prefers-contrast: more) {

    :root {
        --yd-text-muted: var(--yd-white);
        --yd-border: rgba(255, 255, 255, 0.45);
        --yd-border-subtle: rgba(255, 255, 255, 0.30);
    }

    .yd-global-texture,
    .yd-tropical-leaves {
        display: none;
    }

}


/* ====================================================================
   Impression
   ==================================================================== */

@media print {

    html,
    body {
        color: #000;
        background: #fff;
    }

    body {
        font-size: 11pt;
    }

    .site-header,
    .back-to-top,
    .yd-global-texture,
    .yd-tropical-leaves {
        display: none !important;
    }

    .yd-section {
        padding: 2rem 0;
        break-inside: avoid;
    }

    a {
        color: inherit;
        text-decoration: underline;
    }

}