/* IMPORTS GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');
/* __ VARIABLES __*/
    :root {
  /* Couleurs principales */
  --color-primary:           #001414;
  --color-primary-container: #002b2b;
  --color-on-primary:        #ffffff;
  --color-on-primary-container: #6e9493;
  --color-primary-fixed:     #c2eae9;
  --color-primary-fixed-dim: #a7cecd;
  --color-on-primary-fixed:  #002020;
  --color-on-primary-fixed-variant: #274d4c;
  --color-inverse-primary:   #a7cecd;

  /* Couleurs secondaires */
  --color-secondary:           #52643a;
  --color-on-secondary:        #ffffff;
  --color-secondary-container: #d1e7b2;
  --color-on-secondary-container: #56693e;
  --color-secondary-fixed:     #d4eab5;
  --color-secondary-fixed-dim: #b8ce9b;
  --color-on-secondary-fixed:  #102001;
  --color-on-secondary-fixed-variant: #3a4c25;

  /* Couleurs tertiaires */
  --color-tertiary:           #101111;
  --color-on-tertiary:        #ffffff;
  --color-tertiary-container: #252626;
  --color-on-tertiary-container: #8d8d8d;
  --color-tertiary-fixed:     #e3e2e2;
  --color-tertiary-fixed-dim: #c7c6c6;
  --color-on-tertiary-fixed:  #1b1c1c;
  --color-on-tertiary-fixed-variant: #464747;

  /* Surface & Background */
  --color-background:              #f9f9f9;
  --color-on-background:           #1a1c1c;
  --color-surface:                 #f9f9f9;
  --color-on-surface:              #1a1c1c;
  --color-surface-variant:         #e2e2e2;
  --color-on-surface-variant:      #414848;
  --color-surface-dim:             #dadada;
  --color-surface-bright:          #f9f9f9;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:   #f3f3f4;
  --color-surface-container:       #eeeeee;
  --color-surface-container-high:  #e8e8e8;
  --color-surface-container-highest: #e2e2e2;
  --color-surface-tint:            #406564;

  /* Outline */
  --color-outline:         #717978;
  --color-outline-variant: #c0c8c7;

  /* Erreur */
  --color-error:           #ba1a1a;
  --color-on-error:        #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Inverse */
  --color-inverse-surface:    #2f3131;
  --color-inverse-on-surface: #f0f1f1;

  /* Espacement */
  --spacing-unit:       4px;
  --spacing-gutter:     32px;
  --spacing-margin-mobile: 24px;
  --spacing-margin-desktop: 64px;
  --spacing-section-gap: 128px;
  --container-max:      1280px;

  /* Border radius */
  --radius-default: 0.125rem;
  --radius-lg:      0.25rem;
  --radius-xl:      0.5rem;
  --radius-full:    0.75rem;

  /* Typographie */
  --font-body:      'Inter', sans-serif;
  --font-display:   'Newsreader', serif;

  --fs-caption:     12px;
  --lh-caption:     1.4;
  --fw-caption:     400;

  --fs-label-md:    14px;
  --lh-label-md:    1.4;
  --ls-label-md:    0.05em;
  --fw-label-md:    500;

  --fs-body-md:     16px;
  --lh-body-md:     1.6;
  --fw-body-md:     400;

  --fs-body-lg:     18px;
  --lh-body-lg:     1.6;
  --fw-body-lg:     400;

  --fs-headline-md: 32px;
  --lh-headline-md: 1.3;
  --fw-headline-md: 400;

  --fs-headline-xl: 48px;
  --lh-headline-xl: 1.2;
  --fw-headline-xl: 400;

  --fs-display-lg:  64px;
  --lh-display-lg:  1.1;
  --ls-display-lg:  -0.02em;
  --fw-display-lg:  400;
}

/* RESET */
    *, *::before, *::after { 
        box-sizing: border-box; 
        margin: 0; 
        padding: 0; }

    html { 
        -webkit-font-smoothing: antialiased; 
        text-rendering: optimizeLegibility; }

    body {
        font-family: var(--font-body);
        font-size: var(--fs-body-md);
        line-height: var(--lh-body-md);
        font-weight: var(--fw-body-md);
        background-color: var(--color-background);
        color: var(--color-on-surface);
    }

    ::selection {
        background-color: var(--color-primary-fixed);
        color: var(--color-on-primary-fixed);
    }

    img { 
        display: block; 
        max-width: 100%; 
        height: auto; }

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

    button { 
        cursor: pointer; 
        background: none; 
        border: none; 
        font: inherit; }

/* __HEADER__ */
    header {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid #f1f1f1;
        z-index: 50;
    }

    nav {
        font-family: var(--font-display);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px 48px;
        max-width: 100%;
        margin: 0 auto;
    }

    .nav-logo {
        font-size: 22px;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--color-primary-container);
    }
   
    .nav-links {
        display: flex;
        align-items: center;
        gap: 40px;
        list-style: none;
        color: #a1a1aa;
    }

    .nav-links a.active {
        color: var(--color-primary-container);
        border-bottom: 1px solid var(--color-primary-container);
        padding-bottom: 4px;
    }

    .nav-links a:hover {
        color: var(--color-primary-container);
    }

    /* BANNIERE */
    .banniere {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding-top: 80px;
    }

    .banniere-bg {
        top: 76.8px;
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    
    .banniere-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.2;
        filter: grayscale(100%);
    }

    .banniere-content {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 0 24px;
        max-width: 900px;
        margin: 0 auto;
    }

    .banniere-title {
        color: var(--color-primary);
        font-family: var(--font-display);
        font-size: var(--fs-display-lg);
        line-height: 1.1;
        letter-spacing: var(--ls-display-lg);
        font-weight: var(--fw-display-lg);
        font-style: italic;
    }

    .banniere-divider {
        width: 48px;
        height: 1.5px;
        background-color: var(--color-outline);
        margin: 32px auto;
    }

    .banniere-subtitle {
        text-transform: uppercase;
        letter-spacing: 0.3em;
    }
    /* BIOGRAPHIE */
    .bio {
        padding: var(--spacing-section-gap) var(--spacing-margin-desktop);
        max-width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: var(--spacing-gutter);
        align-items: center;
    }

    .bio-img {
        overflow: hidden;
        border-radius: var(--radius-lg);
        background-color: var(--color-surface-container);
    }

    .bio-title {
        display: inline-block;
        background-color: var(--color-primary-container);
        color: var(--color-secondary-container);
        padding: 4px 16px;
        margin-bottom: 32px;
        font-size: var(--fs-label-md);
        letter-spacing: var(--ls-label-md);
        font-weight: var(--fw-label-md);
        border-radius: var(--radius-lg);
    }

    .bio-article_content {
        display: flex;
        flex-direction: column;
        gap: 24px;
        max-width: 640px;
    }

    .bio-article_content p {
        color: var(--color-on-surface-variant);
        font-size: var(--fs-body-lg);
        line-height: var(--lh-body-lg);
        font-weight: var(--fw-body-lg);
    }

    .bio-link {
        margin-top: 48px;
    }

    .bio-link a {
        display: inline-block;
        align-items: center;
        gap: 16px;
        text-decoration: none;
        color: var(--color-primary);
    }

    .bio-link_content {
        border-bottom: 1px solid var(--color-primary);
        padding-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: var(--ls-label-md);
        font-size: var(--fs-label-md);
        line-height: var(--lh-label-md);
        font-weight: var(--fw-label-md);
    }
    /* BIBLIOGRAPHIE */
    .biblio {
        padding: var(--spacing-section-gap) var(--spacing-margin-desktop);
        background-color: var(--color-surface-container-low);
    }

    .biblio h2 {
        color: var(--color-primary);
        font-family: var(--font-display);
        font-size: var(--fs-headline-xl);
        line-height: var(--lh-headline-xl);
        font-weight: var(--fw-headline-xl);
        margin-bottom: 32px;
    }

    .book-container {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 24px;
    }

    .book-card {
        background-color: #fff;
        border: 1px solid #f1f5f9;
        overflow: hidden;
        transition: border-color 0.5s ease;
    }

    .book-card:hover {
        border-color: var(--color-outline-variant);
    }

    .book-card_cover {
        aspect-ratio: 2 / 3;
        overflow: hidden;
    }

    .book-card_cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s ease;
    }

    .book-card:hover .book-card_cover img {
        transform: scale(1.05);
    }

    .book-card_body {
        padding: 24px;
    }

    .book-card_genre {
        font-size: var(--fs-caption);
        line-height: var(--lh-caption);
        font-weight: var(--fw-caption);
        color: var(--color-secondary);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        display: block;
        margin-bottom: 8px;
    }

    .book-card_title {
        font-family: var(--font-display);
        font-size: 20px;
        line-height: 1.3;
        color: var(--color-primary);
        margin-bottom: 8px;
    }

    .book-card_desc {
        font-size: var(--fs-body-md);
        color: var(--color-on-surface-variant);
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ACTUALITES & PROJETS*/
    .projet {
        padding: var(--spacing-section-gap) var(--spacing-margin-desktop);
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }
    .projet-title {
        margin-bottom: 48px;
        color: var(--color-primary);
        font-family: var(--font-display);
        font-size: var(--fs-headline-md);
        line-height: var(--lh-headline-md);
        font-weight: var(--fw-headline-md);
    }

    .projet-container {
        background-color: #fff;
        padding: 48px;
        border: 1px solid #e2e8f0;
        position: relative;
    }

    .projet-logo_container {
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--color-background);
        padding: 0 32px;
    }

    .projet-logo_container span {
        font-size: 36px;
        column-rule: var(--color-primary);
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    }

    .projet-subtitle {
        font-size: 24px;
        margin-bottom: 16px;
        font-family: var(--font-display);
        line-height: var(--lh-headline-md);
        font-weight: var(--fw-headline-md);
    }

    .projet-desc {
        margin-bottom: 32px;
        color: var(--color-on-surface-variant);
        font-size: var(--fs-body-lg);
        line-height: var(--lh-body-lg);
        font-weight: var(--fw-body-lg);
    }

    .projet-quote {
        color: var(--color-primary);
    }

    .projet-footer {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .tag {
        padding: 4px 12px;
        background-color: var(--color-surface-container);
        font-size: var(--fs-label-md);
        letter-spacing: var(--ls-label-md);
        font-weight: var(--fw-label-md);
    }

    /* FOOTER */
    footer {
        width: 100%;
        padding: 64px 0;
        margin-top: 96px;
        background-color: #f1f1f1;
        border-top: 1px solid #f1f1f1;
    }

    .footer-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 48px;
        max-width: 1536px;
        margin: 0 auto;
        gap: 32px;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .footer-name {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 300;
        color: var(--color-primary-container);
    }

    .footer-copy {
        font-family: var(--font-display);
        font-size: 14px;
        font-style: italic;
        color: #a1a1aa;
    }

    .footer-links {
        display: flex;
        gap: 48px;
        list-style: none;
    }

    .footer-links a {
        font-family: var(--font-display);
        font-size: 14px;
        font-style: italic;
        color: #a1a1aa;
        transition: color 0.5s;
    }

    .footer-links a:hover {
        color: var(--color-primary-container);
    }

    /* PAGE BIO.HTML */

    .bio-main {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 64px;
    }
    
    /* Banniere */
    .bio-banniere {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding-top: 80px;
        padding-bottom: 96px;
        border-bottom: 1px solid var(--color-outline-variant);
    }
    /* Conteneur principal */
    .content-area {
        display: flex;
        flex-direction: column;
        gap: 96px;
    }

    .bio-container {
        display: grid;
        grid-template-columns: 3fr 9fr;
        gap: 32px;
        padding: 128px 0;
    }

    /* Sidebar */
    .sidebar {
        position: sticky;
        top: 160px;
    }

    .sidebar-line {
        height: 1px;
        width: 48px;
        background-color: var(--color-secondary);
        margin-bottom: 32px;
    }

    .sidebar-nav_list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .sidebar-nav_list a {
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--color-on-surface-variant);
        font-weight: 500;
    }

    .sidebar-nav_list a:hover {
        color: var(--color-primary);
    }

    /* CONTENU DE LA BIO 
    --------------------
    -----#INTRO#--------
    */

    .intro-portrait {
        aspect-ratio: 16/9;
        background-color: var(--color-surface-container);
        margin-bottom: 48px;
        overflow: hidden;
        border-radius: var(--radius-xl);
    }

    .intro-portrait img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%);
        transition: filter 0.7s ease;
    }
    
    .intro-portrait img:hover {
        filter: grayscale(0%);
    }

    .intro-text-content {
        max-width: 65ch;
        font-size: 18px;
        color: var(--color-on-surface);
    }

    .intro-text-content p {
        margin-bottom: 24px;
    }

    /* #ÉTUDES & PARCOURS# */
    .academic-card {
        background-color: var(--color-surface-container-low);
        border: 1px solid var(--color-outline-variant);
        border-radius: 4px;
        padding: 48px;
    }

    .academic-title {
        font-family: var(--font-display);
        font-size: 32px;
        color: var(--color-primary);
        margin-bottom: 32px;
        border-bottom: 1px solid var(--color-outline-variant);
        padding-bottom: 16px;
        display: inline-block;
    }

    .academic-item {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;
    }

    .academic-item span {
        color: var(--color-secondary);
        font-size: 24px;
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    }

    .item-label {
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 4px;
    }

    .item-desc {
        font-size: 16px;
        color: var(--color-on-surface-variant);
    }

    /* PUBLICATIONS */
    .ecrivain-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border-bottom: 2px solid var(--color-primary);
        padding-bottom: 16px;
        margin-bottom: 48px;
    }

    .ecrivain-header_title {
        font-family: var(--font-display);
        font-size: 48px;
        color: var(--color-primary);
    }

    .badge {
        font-size: 12px;
        background-color: var(--color-primary);
        color: #d1e7b2;
        padding: 4px 12px;
        border-radius: 99px;
        letter-spacing: 0.1em;
    }

    .ecrivain-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .ecrivain-card {
        background-color: #fff;
        border: 1px solid #f1f5f9;
        overflow: hidden;
        transition: border-color 0.5s ease;
        padding: 32px;
    }

    .ecrivain-card:hover {
        border-color: var(--color-outline-variant);
        background-color: white;
    }

    .ecrivain-card .genre {
        font-size: 14px;
        color: #8d8d8d;
        margin-bottom: 8px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .ecrivain-card h3 {
        font-family: var(--font-display);
        font-size: 32px;
        color: var(--color-primary);
        margin-bottom: 16px;
        transition: color 0.3s ease;
    }

    .ecrivain-card:hover h3 {
        color: var(--color-secondary);
    }
    /* #COMEDIEN# */
    .comedien-body {
        border-left: 2px solid rgba(82, 100, 58, 0.2);
        padding-left: 32px;
        margin-left: 8px;
        display: flex;
        flex-direction: column;
        gap: 48px;
    }

    .comedien-body_item {
        position: relative;
    }

    .comedien-dot {
        position: absolute;
        left: -41px;
        top: 6px;
        width: 16px;
        height: 16px;
        background-color: var(--color-secondary);
        border-radius: 50%;
    }

    .comedien-dot:nth-child(2) .comedien-dot {
        background-color: rgba(82, 100, 58, 0.4);
    }

    .comedien-dot:nth-child(3) .comedien-dot {
        background-color: rgba(82, 100, 58, 0.2);
    }

    .comedien-tag {
        color: var(--color-secondary);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1em;
        margin-bottom: 8px;
        display: block;
        padding: 4px 12px;
        background-color: var(--color-surface-container);
    }

    .comedien-subtitle {
        margin-bottom: 8px;
        font-family: var(--font-display);
        font-size: 32px;
        color: var(--color-primary);
        padding-bottom: 16px;
        display: inline-block;
    }

    .comedien-body_item > .item-desc {
        max-width: 65ch;
    }

    .comedien-footer {
        margin-top: 48px;
        aspect-ratio: 16/9;
        border-radius: 4px;
        overflow: hidden;
        background-color: var(--color-surface-container);
    }

    .comedien-footer img {
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* PAGE TEXTES.HTML */

    .texts-main {
        padding-top: 160px;
        min-height: 100vh;
        max-width: 768px;
        margin: 0 auto;        
    }

    .texts-main section {
        margin-bottom: var(--spacing-section-gap);
    }

    .texts-main_header span {
        color: var(--color-on-primary-container);
        text-transform: uppercase;
        letter-spacing: var(--ls-label-md);
        display: block;
        margin-bottom: 16px;
        font-size: var(--fs-label-md);
        line-height: var(--lh-label-md);
        font-weight: var(--fw-label-md);
    }

    .texts-main_header h1{
        font-style: italic;
        margin-bottom: 24px;
        color: var(--color-primary-container);
        font-family: var(--font-display);
        font-size: var(--fs-display-lg);
        line-height: var(--lh-display-lg);
        letter-spacing: var(--ls-display-lg);
        font-weight: var(--fw-display-lg);
    }

    .texts-main_header p {
        max-width: 500px;
        line-height: var(--lh-body-lg);
        color: var(--color-on-surface-variant);
        font-size: var(--fs-body-lg);
        font-weight: var(--fw-body-lg);
    }

    .section-divider {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 48px;
    }

    .section-divider::after{
        content: '';
        display: block;
        flex: 1;
        height: 1px;
        background-color: var(--color-outline-variant);
        opacity: 0.4;
    }

    .section-divider h2 {
        font-size: var(--fs-headline-xl);
        color: var(--color-primary-container);
        white-space: nowrap;
        font-family: var(--font-display);
        line-height: var(--lh-headline-md);
    }

    .text-article {
        padding-bottom: 64px;
    }

    .text-article_header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 16px;
    }

    .text-article_title {
        font-family: var(--font-display);
        font-size: var(--fs-headline-md);
        color: var(--color-on-surface);
        transition: color 0.3s;
    }

    .text-article_title:hover, .text-article:hover .text-article_title{
        color: var(--color-primary-container);
    }

    .text-article_year {
        font-size: var(--fs-label-md);
        letter-spacing: var(--ls-label-md);
        color: var(--color-outline);
        font-style: italic;
    }

    .text-article_desc {
        font-size: var(--fs-body-md);
        line-height: var(--lh-body-md);
        color: var(--color-on-surface-variant);
        margin-bottom: 24px;
    }

    .text-article_tags {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .text-article + .text-article {
        border-top: 1px solid var(--color-outline-variant);
        padding-top: 64px;
    }

    .section-footer {
        margin-top: 48px;
        text-align: center;
    }

    .section-footer a {
        font-family: var(--font-display);
        font-size: 18px;
        color: var(--color-primary);
        font-style: italic;
        border-bottom: 1px solid rgba(0, 20, 20, 0.2);
        padding-bottom: 4px;
        transition: border-color 0.3s;
    }

    .section-footer a:hover {
        border-bottom-color: var(--color-primary);
    }

    /* #SECTION POESIE */

    .poesie-article {
        text-align: center;
        padding-bottom: 70px;
    }

    .poesie-article + .poesie-article {
        border-top: 1px solid var(--color-outline-variant);
        padding-top: 64px;
    }

    .poesie-article_title {
        margin-bottom: 32px;
        color: var(--color-primary-container);
        font-family: var(--font-display);
        font-size: var(--fs-headline-md);
        line-height: var(--lh-headline-md);
        font-weight: var(--fw-headline-md);
    }

    .poesie-article_content {
        font-size: 18px;
        line-height: 2;
        font-style: italic;
        color: var(--color-on-surface-variant);
        font-family: var(--font-display);
        font-weight: var(--fw-headline-md);
        display: flex;
        flex-direction: column; 
        gap: 40px;
    }

    /* #SECTION DECO */

    .deco {
        margin-bottom: var(--spacing-section-gap);
        overflow: hidden;
    }

    .deco img {
        width: 100%;
        height: 320px;
        object-fit: cover;
        filter: grayscale(100%);
        opacity: 0.8;
    }

    .deco .legend {
        margin-top: 16px;
        text-align: center;
        font-style: italic;
        color: var(--color-outline);
        font-size: var(--fs-caption);
        line-height: var(--lh-caption);
        font-weight: var(--fw-caption);
    }

    /* # PAGE PHOTOS.HTML */
    .photos-main {
        min-height: 100vh;
        max-width: 1536px;
        margin: 0 auto;
        padding: 0 48px;
        margin-top: 160px;
    }

    .photos-title {
        margin-bottom: 50px;
        color: var(--color-primary);
        font-family: var(--font-display);
        font-size: var(--fs-headline-xl);
        line-height: var(--lh-headline-xl);
        font-weight: var(--fw-headline-xl);
    }

    .photos-subtitle {
        max-width: 600px;
        font-style: italic;
        color: var(--color-on-surface-variant);
        font-size: var(--fs-body-lg);
        line-height: var(--lh-body-lg);
        font-weight: var(--fw-body-lg);
    }

    /* SECTION GALLERIE */
    .gallery {
        margin-top: 70px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 25px;
    }

    .gallery-article:hover img {
        filter: grayscale(0%);
    }

    .gallery-article {
        cursor: pointer;
        background-color: var(--color-surface-container-low);
        padding: 8px;
        overflow: hidden;
    }

    .gallery-article img {
        width: 100%;
        height: auto;
        object-fit: cover;
        filter: grayscale(100%);
        transition: filter 0.7s ease;
    }

    .gallery-article_category {
        font-size: var(--fs-caption);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-on-tertiary-container);
        display: block;
    }

    .gallery-article_title {
        font-family: var(--font-display);
        font-size: var(--fs-body-lg);
        margin-top: 4px;
    }

    /* #PAGES CONTACT */

    .contact-main {
        margin-top: 160px ;
        padding: 0 48px;
        min-height: 100vh;
    }

    .contact-form {
        background-color: #ffffff;
        padding: 64px;
        border: 1px solid #f1f5f9;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .form-header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        margin-bottom: 48px;
    }

    .form-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-field label {
        font-size: var(--fs-label-md);
        letter-spacing: var(--ls-label-md);
        font-weight: var(--fw-label-md);
        color: var(--color-on-surface-variant);
    }

    .form-field input, .form-field textarea {
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--color-outline-variant);
        padding: 8px 0;
        font-size: var(--fs-body-lg);
        font-family: var(--font-body);
        color: var(--color-on-surface);
        transition: border-color 0.3s;
    }

    .form-field input:focus, .form-field textarea:focus {
        outline: none;
        border-bottom-color: var(--color-primary-container);
    }

    .form-footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding-top: 32px;
    }

    .form-privacy {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--color-on-tertiary-container);
        font-size: var(--fs-caption);
    }

    .privacy-text {
        font-size: var(--fs-caption);
        line-height: var(--lh-caption);
        font-weight: var(--fw-caption);
    }

    .btn-contact {
        white-space: nowrap;
        background-color: var(--color-primary-container);
        color: var(--color-on-primary);
        padding: 16px 48px;
        letter-spacing: var(--ls-label-md);
        font-weight: var(--fw-label-md);
        text-transform: uppercase;
        transition: background-color 0.3s ease;
        display: inline-block;
        border-radius: var(--radius-lg);
    }

    .btn-contact:hover {
        background-color: var(--color-primary);
    }

    #feedback .success, #feedback .error {
        color: var(--color-on-primary);
        max-width: 450px;
        margin: 0 auto;
        margin-top: 25px;
        padding: 10px;
        text-align: center;
        display: none;
        background-color: var(--color-on-primary-fixed-variant);
        justify-content: center;
        align-items: center;
        border: 1px solid var(--color-on-primary-container);
        border-radius: var(--radius-lg);
    }

    #feedback .error {
        background-color: var(--color-error);
    }

   .burger {
    display: none;
    }
    
    /* ================================
   RESPONSIVE — TABLETTE (≤ 1024px)
   ================================ */
   @media (max-width: 1024px) {

    nav  {
        padding: 20px 32px;
    }

    .nav-links {
        gap: 24px;
    }

    .banniere-title {
        font-size: var(--fs-headline-xl);
    }
    
    .banniere {
        min-height: 50vh;
    }

    .bio {
        grid-template-columns: 1fr;
        padding: var(--spacing-section-gap) 32px;
    }

    .bio-img img {
        max-height: 480px;
        width: 100%;
        object-fit: cover;
    }

    .biblio {
        padding: var(--spacing-section-gap) 32px;
    }

    .book-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .projet {
        padding: var(--spacing-section-gap) 32px;
    }

    .footer-container {
        padding: 0 32px;
    }

    .bio-main {
        padding: 0 32px;
    }

    .bio-container {
        grid-template-columns: 1fr;
        padding: 64px 0;
    }

    .sidebar {
        position: static;
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
    }

    .sidebar-line {
        display: none;
    }

    .ecrivain-body {
        grid-template-columns: 1fr;
    }

    .contact-main {
        padding: 0 32px;
    }

    .contact-form {
        padding: 48px 32px;
    }

    .texts-main {
        padding: 120px 32px 0;
    }

    .texts-main_header h1 {
        font-size: var(--fs-headline-xl);
    }

    .photos-main {
        padding: 0 32px;
        margin-top: 120px;
    }

    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }


   }
   

   /* ================================
   RESPONSIVE — SMARTPHONE (≤ 768px)
   ================================ */

   @media (max-width: 768px) {
    nav {
        padding: 16px 24px;
        height: 56px; 
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        height: auto;
    }

    .nav-logo {
        flex-shrink: 0;
    }

    .nav-links  {
        display: none;
   }

   .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.97);
        padding: 24px;
        gap: 24px;
        border-bottom: 1px solid var(--color-outline-variant);
        z-index: 40;
   }

   .burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        padding: 4px;
        flex-shrink: 0;
   }

   .burger span {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-primary);
        transition: all 0.3s ease;
   }

   .banniere {
        min-height: 50vh;
   }

   .banniere-title {
        font-size: var(--fs-headline-md);
   }

   .banniere-subtitle {
        font-size: var(--fs-label-md);
        letter-spacing: 0.15em;
   }

   .bio {
        padding: 64px 24px;
    }

    .bio-img img {
        max-height: 320px;
    }

    .bio-article_content p {
        font-size: var(--fs-body-md);
    }

    .biblio {
        padding: 64px 24px;
    }

    .biblio h2 {
        font-size: var(--fs-headline-md);
    }

    .book-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .projet {
        padding: 64px 24px;
    }

    .projet-container {
        padding: 40px 24px;
    }

    .projet-subtitle {
        font-size: var(--fs-headline-md);
    }

    footer {
        padding: 48px 0;
        margin-top: 48px;
    }
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 24px;
        gap: 24px;
    }
    .footer-links {
        gap: 24px;
    }

    .bio-main {
        padding: 0 24px;
    }

    .bio-banniere {
        min-height: 50vh;
    }

    .bio-container {
        padding: 48px 0;
        gap: 48px;
    }

    .sidebar {
        gap: 16px;
    }

    .academic-card {
        padding: 24px;
    }

    .ecrivain-header_title {
        font-size: var(--fs-headline-md);
    }

    .comedien-body {
        padding-left: 24px;
    }

    .comedien-subtitle {
        font-size: var(--fs-headline-md);
    }

    .contact-main {
        padding: 0 16px;
        margin-top: 80px;
    }

    .contact-form {
        padding: 32px 24px;
    }

    .form-header {
        grid-template-columns: 1fr; /* empile nom + email */
    }

    .form-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .btn-contact {
        text-align: center;
        width: 100%;
    }

    .texts-main {
        padding: 100px 24px 0;
    }
    
    .texts-main_header h1 {
        font-size: var(--fs-headline-md);
    }

    .section-divider h2 {
        font-size: var(--fs-headline-md);
    }

    .text-article_header {
        flex-direction: column;
        gap: 4px;
    }

    .text-article_year {
        font-size: var(--fs-caption);
    }

    .photos-main {
        padding: 0 24px;
        margin-top: 90px;
    }

    .photos-title {
        font-size: var(--fs-headline-md);
        margin-bottom: 16px;
    }

    .photos-subtitle {
        font-size: var(--fs-body-md);
    }
    
    .gallery {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }

   }