/*============================================================================*/
/* THEME - Atelier Choucas
/* Auteur : Loïc Guistel
/* Date : Février 2026
/* Rôle : Design Tokens + Base + Typographie
/* Dépend de : framework.css
/*============================================================================*/




/*============================================================================*/
/*  1. FONTS
/*============================================================================*/

/*-------------------------------------------*/
/*  1.1 Font Faces
/*-------------------------------------------*/

@font-face {
    font-family: "Nunito";
    src: url("/Web/Fonts/Nunito-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Nunito";
    src: url("/Web/Fonts/Nunito-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Nunito";
    src: url("/Web/Fonts/Nunito-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}



/*============================================================================*/
/*  2. DESIGN TOKENS
/*============================================================================*/




/*============================================================================*/
/*  3. BASE STYLES
/*============================================================================*/

/*-------------------------------*/
/*  3.1 Document
/*-------------------------------*/

html {
    font-size: 18px;
    scroll-behavior: smooth;
}

body {
    font-family: "Nunito", sans-serif;
    font-weight: 400;
    line-height: 1.6;

    color: var(--color-text-primary);
    background-color: var(--color-surface-base);
}


/*-------------------------------*/
/*  3.2 Headings (HTML)
/*-------------------------------*/

h1, h2, h3, h4, h5, h6 {
    font-family: "Nunito", serif;
    font-weight: bold;
    line-height: 1.2;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 2.0rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.2rem;}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover {color: var(--color-secondary);}



/*============================================================================*/
/*  4. TYPOGRAPHY UTILITIES
/*============================================================================*/

/*-------------------------------*/
/*  4.1 Headings Helpers
/*-------------------------------*/

.heading-hero {
    text-transform: uppercase;
    font-size: 1.4rem;
    
}

.heading-section {
    font-size: 2.4rem;
    color: var(--color-primary);
}

.heading-page {
    text-transform: uppercase;
    font-size: 2rem;
}

.heading-card {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}


/*-------------------------------*/
/*  4.2 Text Utilities
/*-------------------------------*/

.text-label {
    font-weight: 700;
    text-transform: uppercase;
}

.text-meta {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.text-breadcrumb {
    font-style: italic;
    font-size: 0.9rem;
}

.text-category {
    text-transform: uppercase;
}

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

.text-disabled {
    opacity: 0.5;
}

.text-error{
    color:var(--color-danger);
}



/*============================================================================*/
/*  SECTIONS
/*============================================================================*/





/*-------------------------------*/
/*  SECTION HERO
/*-------------------------------*/

.s-hero {
    color:var(--color-text-inverse);
    background-color: var(--color-surface-inverse);
    background-image: url("/App/AtelierChoucas/Contexts/Front/Assets/Images/Accueil/hero-background.jpg");
    background-position: center right;
	background-repeat:no-repeat;
    height:100vh;
    justify-content: center;
    align-items: flex-start;
}
@media (max-width: 2000px) {
    .s-hero {
        background-size: cover;
    }
}

.s-hero__bar {
    position:absolute;
    top:0;
    height: var(--height-herobar);
    font-size: 1.2rem;
    text-transform: uppercase;
}
.site:has(.adminbar) .s-hero__bar{top:var(--height-adminbar);}

.s-hero__bar .menu__link{
    padding-inline:var(--space-md);
}

.s-hero__logo{
    width:100%;
    max-width:500px;
    filter: invert(1);
}

/* Mobile */
@media (max-width: 900px) {
    .s-hero__bar {
        display: none;
    }
}


/*-------------------------------*/
/*  SECTION SERVICES
/*-------------------------------*/
.s-services{
    background-color: var(--color-surface-alt);
    padding-block:100px 100px;
    --card-width: 300px;
}

/*-------------------------------*/
/*  SECTION ASIDE
/*-------------------------------*/
.s-bleeding{
    background-color: var(--color-surface-base);
}
.s-bleeding:nth-child(2n){
    background-color: var(--color-surface-alt);
}

/* BLEEDING ______________________*/
.s-bleeding--home{
    padding-block:100px 100px;
	--media-bleed-top: 130px;       /* dépassement si > padding-top */
	--media-bleed-bottom: 130px;    /* dépassement si > padding-bottom */
}

.s-bleeding--service{
    padding-block:100px 100px;
	--media-bleed-top: 50px;
	--media-bleed-bottom: 50px;
}

.s-bleeding--about{
    padding-block:100px 100px;
    --media-bleed-top: 0px;
	--media-bleed-bottom: 0px;
}

@media (max-width: 900px) {
    .c-bleeding__media{
        height:200px;
    }
}

/*-------------------------------*/
/*  SECTION CONTACT
/*-------------------------------*/
.s-contact{
    padding-block:100px 100px;
}


/*-------------------------------*/
/*  SECTION BANNER
/*-------------------------------*/
.s-banner{
    justify-content: flex-end;

    padding-block:100px var(--space-md);
    color:var(--color-text-inverse);
    height:50vh;
}

.s-banner__background{
    position:absolute;
    inset:0;
    z-index: var(--z-background);
}

/*-------------------------------*/
/*  SECTION EXCERPT
/*-------------------------------*/
.s-excerpt{
    padding-block:60px 60px;
    background-color: var(--color-surface-inverse);
    color:var(--color-text-inverse);
}

/*-------------------------------*/
/*  SECTION PARTNERS
/*-------------------------------*/
.s-partners{
    padding-block:100px 100px;
}

/*-------------------------------*/
/*  SECTION GALLERY
/*-------------------------------*/
.s-gallery{
    padding-block:100px 100px;
    --card-width:200px;
}

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:9999;
}

.lightbox.active{
    opacity:1;
    visibility:visible;
}

.lightbox__image{
    max-width:92vw;
    max-height:92vh;
    object-fit:contain;
}

.lightbox__close{
    position:absolute;
    top:30px;
    right:40px;
    font-size:32px;
    color:white;
    background:none;
    border:none;
    cursor:pointer;
}

.lightbox__nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:60px;
    color:white;
    background:none;
    border:none;
    cursor:pointer;
    padding:20px;
}

.lightbox__nav--prev{
    left:20px;
}

.lightbox__nav--next{
    right:20px;
}

@media (max-width:768px){

.lightbox__nav{
    font-size:40px;
}

.lightbox__close{
    top:15px;
    right:20px;
}

}


/*============================================================================*/
/*  CARDS
/*============================================================================*/

/*-------------------------------*/
/*  CARD SERVICE
/*-------------------------------*/
.card--service {
	aspect-ratio: 1/1;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-strong);
	transition: transform var(--transition-fast);
    color:var(--color-text-inverse);

    grid-template-rows: 1fr auto;
    --card-layout :
        "."
        "header";
}

.card--service .card__header{
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    padding-block:var(--space-md);
}


.card--service:hover {
	transform: translateY(-5px);
    color:var(--color-text-inverse);
}



/*-------------------------------*/
/*  CARD GALLERY
/*-------------------------------*/
.card--gallery {
	aspect-ratio: 1/1;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft);
    cursor:pointer;
}
.card--gallery img{
    transform: scale(1.0);
	transition: var(--transition-medium);
}

.card--gallery:hover img{
	transform: scale(1.1);
}

/*-------------------------------*/
/*  CARD PARTNER
/*-------------------------------*/
.card--partner {
    grid-template-columns: 150px auto;
    grid-template-rows: auto 1fr  auto;
    --card-layout :
        "thumbnail header"
        "thumbnail content"
        "thumbnail footer";
}
.card__header,
.card__content,
.card__footer{
    padding-left: var(--space-sm);
}

@media (max-width: 500px) {
    .card--partner {
        grid-template-columns: auto;
        grid-template-rows: 150px auto auto  auto;
        --card-layout :
            "thumbnail"
            "header"
            "content"
            "footer";
    }
    .card__header,
    .card__content,
    .card__footer{
        padding-left: 0;
    }
    .card__header{margin-top: var(--space-md);}
}

/*============================================================================*/
/*  FOOTER
/*============================================================================*/
.section--footer {
    background-color: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    font-size: 0.9rem;
    padding-block: var(--space-lg) var(--space-sm);
}

.section--footer .l-container{
    padding-inline: var(--space-lg);
}

/*-------------------------------*/
/*  BODY
/*-------------------------------*/
.section--footer .l-grid{
    grid-template-columns:   minmax(auto,300px)       1fr         minmax(auto,300px);
    grid-template-areas:    'header     menus       contacts'
                            'copyright  copyright   copyright';
    gap:var(--space-lg);
}

.section--footer .section--footer__header{grid-area: header;}
.section--footer .section--footer__menus{grid-area: menus;}
.section--footer .section--footer__contacts{grid-area: contacts;}
.section--footer .section--footer__copyright{grid-area: copyright;}

/* Mobile */
@media (max-width: 900px) {
    .section--footer .l-grid{
        grid-template-columns:   auto;
        grid-template-areas:    'header'
                                'menus'
                                'contacts'
                                'copyright';
    }
}

/*-------------------------------*/
/*  EXCERPT
/*-------------------------------*/
.section--footer .media{
    width:200px;
    filter: invert(1);
}

.section--footer .text-excerpt {
    font-style: italic;
    border-top: 1px solid var(--color-text-inverse);
    padding-top: var(--space-sm);
}

/*-------------------------------*/
/*  CONTACT
/*-------------------------------*/
.section--footer__contacts{
    padding-left: var(--space-md);
    border-left: 1px solid var(--color-text-inverse);
}


/*-------------------------------*/
/*  RESPONSIVE
/*-------------------------------*/

@media (max-width: 900px) {
    .section--footer__contacts {
        padding-left: 0;
        padding-top: var(--space-md);
        border-left: none;
        border-top: 1px solid var(--color-text-inverse);
        width: 100%;
    }
}