/* =============================================================
   CAROLINE BENECH — screen.css (nettoyé)
   ============================================================= */

/* ---- Reset minimal ---- */
* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    border: 0;
}

body {
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: black;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 40px;
    background-color: white;
}

/* ---- Liens ---- */
a:link, a:visited { color: black; text-decoration: none; }
a:hover { color: #00ffc9; text-decoration: none; }
a#current:hover { border-bottom: 1px solid; }
a#noborder { border-bottom: 0; }
a img { margin-right: 12px; border: 0; text-decoration: none; }
img { margin-right: 12px; margin-bottom: 5.5px; }

/* ---- Listes ---- */
li { list-style-type: none; }

/* ---- Typographie ---- */
p { padding-bottom: 0; }

h1 {
    font-family: Arial, sans-serif;
    font-size: 40px;
    font-weight: bold;
    font-style: italic;
    line-height: 50px;
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
    float: left;
    text-decoration: none;
}

h2 {
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    line-height: 35px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
}

h3 {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    line-height: 26px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: block;
}

h4 {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    line-height: 20px;
    letter-spacing: 1px;
    display: block;
}

h5 {
    font-family: 'Playfair Display', serif;
    font-size: 70px;
    font-weight: 400;
    font-style: italic;
    line-height: 75px;
    margin-top: 10px;
}

h6 {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 400;
    font-style: italic;
    line-height: 30px;
}

/* ---- Grille ---- */
.row { width: 1000px; float: left; margin: 0; }
.row > div { float: left; margin: 0 10px; }
.w-1  { width: 60px; }
.w-2  { width: 140px; }
.w-3  { width: 220px; }
.w-4  { width: 300px; }
.w-5  { width: 380px; }
.w-6  { width: 460px; }
.w-7  { width: 540px; }
.w-8  { width: 620px; }
.w-9  { width: 700px; }
.w-10 { width: 780px; }
.w-11 { width: 860px; }
.w-12 { width: 1000px; }

.hidden { display: none; }
.projectDate { display: none; }

/* ---- Header ---- */
#header {
    width: 100%;
    height: auto;
    position: fixed;
    top: 40px;
    left: 30px;
    z-index: 1500;
    color: black;
}

#header-small {
    z-index: 8;
    width: 100%;
    height: 42px;
    position: relative;
}

#logo a {
    font-size: 20px;
    font-family: 'verdana', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    background-color: black;
    color: white;
    padding: 7px 12px 7px 13px;
}
#logo a:hover { padding: 6px 10px; }

#header #links {
    font-family: 'Raleway', Helvetica, Arial, sans-serif;
    position: relative;
    padding-bottom: 0;
    margin-left: 14px;
    word-spacing: 8px;
    text-transform: lowercase;
}

#header-small #links-small {
    font-family: Arial, sans-serif;
    display: block;
    letter-spacing: 3px;
    position: relative;
    font-size: 12px;
    line-height: 20px;
    padding-top: 14px;
    margin-left: 0;
    word-spacing: 3px;
}

#header-small .col {
    font-family: Arial, sans-serif;
    float: left;
    padding-bottom: 30px;
}

#header-small .col1 {
    font-size: 12px;
    letter-spacing: 3px;
    line-height: 20px;
    text-transform: uppercase;
    padding-right: 40px;
    padding-left: 10px;
}

#header-small .col a:hover { border-bottom: 1px solid black; }

/* ---- Intro ---- */
#introhead {
    position: relative;
    text-align: left;
    padding-top: 110px;
    color: black;
}

/* ---- Work / Portfolio ---- */
#work {
    padding-top: 0;
    overflow: hidden;
}

#work .project {
    position: relative;
    float: left;
    margin-right: 0;
}

#work a.project {
    position: relative;
    float: left;
    border-style: none;
}

/* Overlay hover */
.project {
    position: relative;
    display: inline-block;
}

.project-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.88);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 14px 16px 20px 16px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.project:hover .project-overlay {
    opacity: 1;
}

.project-overlay .overlay-client {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: black;
    line-height: 26px;
}

.project-overlay .overlay-mission {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: auto;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: black;
    line-height: 26px;
    margin-top: 2px;
}

/* Filtre animation */
.project.hidden-project { display: none; }

/* ---- Textes pages projet ---- */
#work #project-container #project-bodytext,
#work #page-container #page-bodytext {
    letter-spacing: 2px;
    width: 700px;
    overflow: hidden;
    padding-bottom: 10px;
    font-style: italic;
    float: left;
    position: relative;
}

#work #project-bodytext a,
#work #page-bodytext a { border-bottom: 1px solid; }

#work #project-bodytext a:hover,
#work #page-bodytext a:hover { border-bottom: 0; }

.news .content p,
#work #project-bodytext p,
#work #page-bodytext p {
    clear: left;
    line-height: 20px;
    font-size: 12px;
    margin-bottom: 15px;
}

div#project-content {
    width: 460px;
    padding-right: 0;
    float: left;
    padding-top: 20px;
}

div#project-details,
div#page-details {
    width: 220px;
    padding-left: 0;
    margin-bottom: 18px;
    float: right;
    padding-top: 20px;
}

#project-details a,
#page-details a { border-bottom: 1px solid; }

/* ---- Vidéos ---- */
.vendor, .vendor7, .vendor9 {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    margin: 0;
}
.vendor iframe  { position: absolute; top: 0; left: 0; width: 80%; height: 80%; }
.vendor7 iframe { position: absolute; top: 0; left: 0; width: 75%; height: 75%; }
.vendor9 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

iframe { border: 0; width: 85%; }
video  { width: 85%; height: auto; }

/* ---- Navigation retour / haut ---- */
#previous, #up, #upIndex {
    position: fixed;
    top: 10px;
    right: 100px;
    z-index: 999;
}
#previous {
    right: 35px;
    display: none;
}
#previous a, #up a, #upIndex a {
    width: 120px;
    display: block;
    text-align: center;
    font: 12px/100% 'BitstreamVeraSansMonoBold', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    transition: 1s;
}
#previous a { width: 53px; }
#up, #upIndex { display: none; }

/* ---- Burger menu ---- */
.burger-menu {
    cursor: pointer;
    padding: 5%;
    font-size: 32px;
    font-weight: bolder;
    color: #FF00DD;
    text-align: center;
    position: fixed;
    top: 3%;
    right: 3%;
    z-index: 1001;
    background-color: transparent;
}

.burger-links {
    display: none;
    text-align: right;
    padding: 14px 16px;
    margin-top: 40px;
    margin-right: 45px;
    position: fixed;
    right: 3%;
    top: 8%;
    width: auto;
    max-width: 300px;
    z-index: 2000;
    background-color: transparent;
}

.burger-links a {
    display: block;
    color: black;
    text-align: right;
    font-size: 16px;
    font-style: italic;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 12px;
    padding: 10px;
    text-decoration: none;
}
.burger-links a:hover { color: #FF00DD; }

/* ---- News ---- */
.news {
    padding-bottom: 30px;
    display: block;
    width: 1000px;
    position: inherit;
}
.news .content {
    padding-top: 0;
    position: relative;
    width: 550px;
    padding-right: 15px;
    display: block;
    float: left;
    clear: both;
    line-height: 18px;
}
.news .content p { padding-top: 30px; padding-bottom: 30px; }
.news img {
    position: relative;
    padding-bottom: 7px;
    float: right;
    display: block;
    width: 400px;
}
.news img:hover { opacity: 0.8; }
.news .title {
    display: block;
    float: left;
    border-bottom: 3px solid black;
    clear: both;
}
.news .date {
    display: block;
    clear: both;
    padding-top: 4px;
    font-size: 12px;
}
.news .subtitle {
    font-size: 10px;
    float: left;
    width: 550px;
}

/* ---- Divers ---- */
.things-videos {
    width: 500px;
    height: 500px;
    max-width: 100%;
    display: block;
}

img.pimg { width: 600px; }

#signature { padding-top: 30px; font-size: 12px; }

#computer, #iphone, #page-container { clear: both; }
#project-bodytext h1 br { display: none; }
#iphone { display: none; }

/* ---- Responsive ---- */
@media screen and (max-width: 1081px) {
    html { border: 5px solid white; }
    body { margin-left: 40px; }
    .image.thumb { width: 500px; }
    #work #project-bodytext p,
    #work #page-bodytext p { clear: both; width: 450px; }
    #work #project-details { width: 400px; padding-top: 10px; margin-bottom: 10px; position: relative; float: left; }
    .news { max-width: 450px; }
    .news .content { max-width: 450px; }
    .news img { width: 450px; padding-top: 30px; }
}

@media screen and (max-width: 800px) {
    .burger-menu { font-size: 24px; }
    .burger-links { background-color: white; }
    .burger-links a { font-size: 22px; padding: 12px 20px; }
}

/* ---- Pages projet : responsive mobile ---- */
@media screen and (max-width: 600px) {
    body {
        margin-left: 15px;
        margin-right: 15px;
        overflow-x: hidden;
    }

    /* Aligner le contenu sous le nom fixe */
    #header { top: 15px; left: 15px; }
    #header h1 { font-size: 26px; line-height: 32px; letter-spacing: 1px; }

    /* Toutes les images contraintes à la largeur disponible */
    img, img.image, img.thumb, img.image.thumb, .w-12 img, .w-9 img, .w-10 img, .w-11 img {
        max-width: calc(100vw - 30px) !important;
        width: auto !important;
        height: auto !important;
        display: block;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Grille : tout en pleine largeur */
    .row, .w-1, .w-2, .w-3, .w-4, .w-5, .w-6,
    .w-7, .w-8, .w-9, .w-10, .w-11, .w-12 {
        width: 100% !important;
        float: none !important;
        max-width: calc(100vw - 30px);
    }

    /* Texte projet : pas de coupure */
    #work #project-bodytext p,
    #work #page-bodytext p,
    div#project-content,
    div#introhead,
    div#introhead p,
    .w-5 p, .w-7 p {
        width: 100% !important;
        max-width: calc(100vw - 30px);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Padding-top pages projet pour ne pas coller sous le h1 fixe */
    div#work { padding-top: 100px; }
    div#work .row:first-child { padding-top: 0; }

    /* introhead : pas de padding-top fixe sur mobile */
    #introhead { padding-top: 20px; }

    /* Titre h4 des projets */
    h4 { font-size: 14px; line-height: 18px; }

    /* Détails projet */
    div#project-details, div#page-details {
        width: 100% !important;
        float: none !important;
        padding-top: 10px;
    }

    /* Footer pages projet */
    footer, div.w-7 { width: 100% !important; max-width: calc(100vw - 30px); }
}

@media screen and (max-width: 670px) {
    #work #project-bodytext p,
    #work #page-bodytext p { width: 100%; }
}

@media screen and (max-width: 500px) {
    html { border: 0; }
    img { max-width: 280px; }
    .image.thumb { width: 300px; }
    .news { max-width: 290px; }
    .news .content { max-width: 280px; }
    .news img { width: 280px; padding-top: 30px; }
    #header { height: 70px; margin-bottom: 15px; }
    #header-small { height: 70px; margin-bottom: 15px; }
}

@media (max-width: 1080px) {
    h5 { font-size: 140px; line-height: 150px; padding: 20px; }
}

/* ---- Menu burger app.js ---- */
:root {
    --margin-top-menu: 1rem;
    --margin-right-menu: 30px;
    --space-btn-menu: 20px;
}

.btn_menu {
    position: fixed;
    top: var(--margin-top-menu);
    opacity: 0.9;
    right: var(--margin-right-menu);
    width: 48px;
    height: 48px;
    border-radius: .2rem;
    background-color: #000;
}

.menu {
    position: fixed;
    top: 60px;
    right: -600px;
    padding-top: var(--space-btn-menu);
    list-style: none;
    transition: right 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.filter-bg {
    position: fixed;
    z-index: -1;
    right: -100vw;
    top: 0;
    height: 300px;
    background-color: #fff;
    opacity: .5;
    width: 100vw;
    transition: right 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.btn_menu:hover { cursor: pointer; }

.line {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 4px;
    background-color: #fff;
    transform: translate(-50%, -50%);
    transition: background-color 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.line::before, .line::after {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: #fff;
    transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.line::before { transform: translateY(-10px); }
.line::after  { transform: translateY(10px); }

.btn_menu.active .line::before { transform: rotate(45deg); }
.btn_menu.active .line         { background-color: transparent; }
.btn_menu.active .line::after  { transform: rotate(-45deg); }

nav { position: fixed; width: 100%; height: 500px; z-index: 1000; }

.menu.active { right: var(--margin-right-menu); }

li a {
    text-align: right;
    display: block;
    text-decoration: none;
    padding: 2px 0;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: 1px;
    font-style: italic;
}
li a:hover { color: #FF00CE; }

@media screen and (max-width: 992px) {
    .filter-bg { width: 300px; }
    .filter-bg.active { right: 0; }
}
@media screen and (max-width: 768px) {
    .filter-bg { width: 100%; }
}

/* ---- Responsive mobile : switcher EN/FR ---- */

/* Switcher mobile home : caché en desktop, visible en mobile */
#lang-switch-mobile-home {
    display: none;
}

/* Switcher fixe pages projet : visible en desktop, caché en mobile */

/* ================================================================
   RESPONSIVE MOBILE — bloc unique @600px
   ================================================================ */
@media screen and (max-width: 600px) {

    /* Corps */
    body {
        margin-left: 15px;
        margin-right: 15px;
        overflow-x: hidden;
    }

    /* ---- Header / nom ---- */
    #header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 12px 15px 8px 15px;
        box-sizing: border-box;
        background: white;
        z-index: 1500;
    }
    #header h1 {
        font-size: 32px !important;
        line-height: 36px !important;
        letter-spacing: 2px !important;
        white-space: nowrap;
        overflow: hidden;
    }

    /* ---- Contenu : décalage sous le header fixe ---- */
    div#work { padding-top: 70px; }
    div#work .row:first-child { padding-top: 0; }

    /* ---- Home : espace entre header fixe et texte d'intro ---- */
    #introhead {
        padding-top: 50px;
    }

    /* ---- Home : switcher fixe masqué, switcher inline visible ---- */
    #lang-switch { display: none !important; }
    #lang-switch-mobile-home {
        display: block;
        margin-top: 16px;
        font-family: Arial, sans-serif;
        font-size: 12px;
        font-weight: bold;
        font-style: italic;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* ---- Grille : tout en pleine largeur ---- */
    .row, .w-1, .w-2, .w-3, .w-4, .w-5, .w-6,
    .w-7, .w-8, .w-9, .w-10, .w-11, .w-12 {
        width: 100% !important;
        float: none !important;
        max-width: calc(100vw - 30px);
    }

    /* ---- Images : toutes contraintes à la largeur ---- */
    img, img.image, img.thumb, img.image.thumb,
    .w-12 img, .w-9 img, .w-10 img, .w-11 img {
        max-width: calc(100vw - 30px) !important;
        width: auto !important;
        height: auto !important;
        display: block;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }



    /* ---- Texte projet ---- */
    #work #project-bodytext p,
    #work #page-bodytext p,
    div#project-content,
    div#introhead,
    div#introhead p,
    .w-5 p, .w-7 p {
        width: 100% !important;
        max-width: calc(100vw - 30px);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    h4 { font-size: 14px; line-height: 18px; }

    div#project-details, div#page-details {
        width: 100% !important;
        float: none !important;
        padding-top: 10px;
    }

    footer, div.w-7 { width: 100% !important; max-width: calc(100vw - 30px); }
}

@media screen and (max-width: 670px) {
    #work #project-bodytext p,
    #work #page-bodytext p { width: 100%; }
}

@media screen and (max-width: 500px) {
    html { border: 0; }
    img { max-width: 280px; }
    .image.thumb { width: 300px; }
    .news { max-width: 290px; }
    .news .content { max-width: 280px; }
    .news img { width: 280px; padding-top: 30px; }
    #header { height: 70px; margin-bottom: 15px; }
    #header-small { height: 70px; margin-bottom: 15px; }
}

@media (max-width: 1080px) {
    h5 { font-size: 140px; line-height: 150px; padding: 20px; }
}

/* ---- Menu burger ---- */
:root {
    --margin-right-menu: 0px;
}

.menu {
    position: fixed;
    right: -300px;
    top: 0;
    width: 300px;
    height: 100vh;
    background: white;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-right: 30px;
    transition: right 0.3s ease;
}
.menu.active { right: var(--margin-right-menu); }

li a {
    text-align: right;
    display: block;
    text-decoration: none;
    padding: 2px 0;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: 1px;
    font-style: italic;
}
li a:hover { color: #FF00CE; }

@media screen and (max-width: 992px) {
    .filter-bg { width: 300px; }
    .filter-bg.active { right: 0; }
}
@media screen and (max-width: 768px) {
    .filter-bg { width: 100%; }
}

/* ---- Logo-sm : override final (doit rester après toutes les règles img) ---- */


/* ---- Images responsive -RS : pleine largeur sur mobile ---- */
@media screen and (max-width: 600px) {
    #work .project picture {
        display: block;
        width: 100%;
    }
    #work .project picture img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        display: block;
    }
}