@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root{
    --cream:#f3f0ea;
    --paper:#f3f0ea;
    --sand:#e9e4dc;

    --ink:#17140f;

    --coffee:#43271e;

    --bronze:#b7835d;
    --bronze-deep:#43271e;
    --bronze-soft:#b7835d;

    --muted:#71685f;
    --soft:#71685f;

    --line:rgba(23,20,15,.14);

    --yellow:#ffe12f;
    --camel:#b7835d;
    --brown:#43271e;

    --serif:"Barlow Condensed","Arial Narrow",sans-serif;
    --sans:"Barlow",Arial,sans-serif;

    --ease:cubic-bezier(.2,.75,.2,1);
}

/* Laisse l'espace exact du header D&A */
body{
    padding-top:72px;
    background:var(--paper)!important;
    color:var(--ink)!important;
    font-family:var(--sans)!important;
}

/* Typographie D&A */
.hero h1,
.work h2,
.card__title{
    font-family:var(--serif)!important;
    font-weight:300!important;
    letter-spacing:-.035em!important;
}

/* Couleurs D&A */
.accent{
    color:var(--camel)!important;
}

.eyebrow{
    color:var(--muted)!important;
    font-family:var(--sans)!important;
}

.eyebrow__line{
    background:var(--camel)!important;
}

.progress i{
    background:var(--yellow)!important;
}

.hero{
    background:
        linear-gradient(
            100deg,
            #f3f0ea 0%,
            #f3f0ea 45%,
            #e9e4dc 100%
        )!important;
}

.work{
    background:var(--paper)!important;
}

.btn{
    background:var(--brown)!important;
    color:#fff!important;
    font-family:var(--serif)!important;
    font-style:italic!important;
}

.btn:hover{
    background:var(--ink)!important;
}

.badge{
    background:var(--camel)!important;
}

.card__link{
    color:var(--brown)!important;
    font-family:var(--serif)!important;
}

.tags li{
    background:var(--paper2,#e9e4dc)!important;
    border-color:rgba(23,20,15,.08)!important;
}

.tags svg{
    color:var(--camel)!important;
}

.chip.is-on{
    color:#fff!important;
}

.filters__pill{
    background:var(--ink)!important;
}

/* On cache le back-to-top éventuel créé hors du composant exact */
body > .back-to-top{
    display:none!important;
}

/* Hosts exacts */
#da-exact-header{
    position:relative;
    z-index:10050;
}

#da-exact-cta,
#da-exact-footer{
    display:block;
    width:100%;
}


/* ===== D&A EXACT HEADER PATCH START ===== */

/*
   IMPORTANT :
   le vrai header D&A est FIXED et se superpose au hero.
   Donc aucun padding artificiel au-dessus de la page.
*/

html{
    scroll-padding-top:60px!important;
}

body{
    padding-top:0!important;
    margin-top:0!important;
}

#da-exact-header{
    position:relative;
    z-index:10050;
    height:0!important;
}

/*
   Aucun espace blanc / crème entre
   le header et le hero.
*/

#da-exact-header + main,
#da-exact-header ~ main{
    margin-top:0!important;
    padding-top:0!important;
}

/* ===== D&A EXACT HEADER PATCH END ===== */



/* ===== D&A PROJECT EXACT BRAND START ===== */


/* =========================================================
   PALETTE EXACTE DU SITE D&A
   ========================================================= */

:root{

    --paper:#f3f0ea!important;
    --paper2:#e9e4dc!important;

    --ink:#17140f!important;
    --muted:#71685f!important;

    --yellow:#ffe12f!important;
    --camel:#b7835d!important;
    --brown:#43271e!important;
    --olive:#656b4f!important;

    /* compatibilité avec le CSS originel du projet */

    --cream:#f3f0ea!important;

    --coffee:#43271e!important;

    --bronze:#b7835d!important;
    --bronze-deep:#43271e!important;
    --bronze-soft:#b7835d!important;

    --soft:#71685f!important;

}


/* =========================================================
   TYPOGRAPHIE EXACTE DU SITE D&A
   ========================================================= */

body,
button,
input,
select,
textarea{

    font-family:
        "Barlow",
        Arial,
        sans-serif!important;
}


/* Titres */

.hero h1,
.work h2,
.card__title,
.cta h2{

    font-family:
        "Barlow Condensed",
        "Arial Narrow",
        sans-serif!important;

    font-weight:
        300!important;

    letter-spacing:
        -.035em!important;
}


/* Texte courant */

.hero__lead,
.hero p,
.work__sub,
.card__text,
.card p,
.cta__text,
.cta p{

    font-family:
        "Barlow",
        Arial,
        sans-serif!important;

    font-style:
        normal!important;
}


/* Petites catégories */

.eyebrow,
.card__type,
.chip,
.tags li,
.badge{

    font-family:
        "Barlow",
        Arial,
        sans-serif!important;
}


/* Liens éditoriaux */

.card__link{

    font-family:
        "Barlow Condensed",
        "Arial Narrow",
        sans-serif!important;

    font-style:
        italic!important;
}


/* =========================================================
   COULEURS GENERALES
   ========================================================= */

body{

    background:
        #f3f0ea!important;

    color:
        #17140f!important;
}


.hero{

    background:
        linear-gradient(
            100deg,
            #f3f0ea 0%,
            #f3f0ea 46%,
            #e9e4dc 100%
        )!important;
}


.work{

    background:
        #f3f0ea!important;
}


.hero h1,
.work h2,
.card__title{

    color:
        #17140f!important;
}


.accent{

    color:
        #b7835d!important;
}


.hero p,
.work__sub,
.card__text{

    color:
        #71685f!important;
}


.eyebrow{

    color:
        #71685f!important;
}


.eyebrow__line{

    background:
        #b7835d!important;
}



/* =========================================================
   FILTRES
   ========================================================= */

.chip{

    background:
        rgba(255,255,255,.42)!important;

    color:
        #71685f!important;

    border-color:
        rgba(23,20,15,.14)!important;
}


.chip:hover{

    color:
        #17140f!important;

    border-color:
        rgba(23,20,15,.30)!important;
}


.chip.is-on{

    background:
        #17140f!important;

    border-color:
        #17140f!important;

    color:
        #ffffff!important;
}


.filters__pill{

    background:
        #17140f!important;
}



/* =========================================================
   CARTES
   ========================================================= */

.card__inner{

    background:
        #f3f0ea!important;

    border-color:
        rgba(23,20,15,.10)!important;
}


.badge{

    background:
        #b7835d!important;

    color:
        #ffffff!important;
}


.tags li{

    background:
        #e9e4dc!important;

    color:
        #71685f!important;

    border-color:
        rgba(23,20,15,.08)!important;
}


.tags svg{

    color:
        #b7835d!important;
}


.card__link{

    color:
        #43271e!important;
}



/* =========================================================
   CORRECTION DU BOUTON
   "DECOUVRIR NOS PROJETS"
   ========================================================= */

/*
   On force tous les états.
   Cela évite exactement le problème visible
   sur ta PJ : bouton crème + texte blanc.
*/

.hero .btn,
.hero a.btn,
.hero .btn:link,
.hero .btn:visited{

    position:
        relative!important;

    background:
        #43271e!important;

    background-image:
        none!important;

    color:
        #ffffff!important;

    border:
        1px solid
        #43271e!important;

    opacity:
        1!important;

    filter:
        none!important;

    mix-blend-mode:
        normal!important;

    font-family:
        "Barlow Condensed",
        "Arial Narrow",
        sans-serif!important;

    font-size:
        17px!important;

    font-weight:
        400!important;

    font-style:
        italic!important;

    line-height:
        1!important;

    letter-spacing:
        0!important;

    padding:
        15px
        22px!important;

    min-height:
        50px!important;

    border-radius:
        999px!important;

    box-shadow:
        0 14px 30px
        rgba(67,39,30,.22)!important;

    text-shadow:
        none!important;

    -webkit-text-fill-color:
        #ffffff!important;

    transition:
        transform .3s
        cubic-bezier(.2,.75,.2,1),
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease!important;
}


/*
   Désactive l'ancien gros reflet blanc
   responsable du mauvais rendu.
*/

.hero .btn::before,
.hero a.btn::before{

    background:

        linear-gradient(
            110deg,
            transparent 32%,
            rgba(255,255,255,.12) 50%,
            transparent 68%
        )!important;
}


/* Tout le contenu du bouton reste blanc */

.hero .btn *,
.hero a.btn *{

    color:
        #ffffff!important;

    stroke:
        #ffffff!important;

    -webkit-text-fill-color:
        #ffffff!important;
}


/* HOVER D&A */

.hero .btn:hover,
.hero a.btn:hover{

    background:
        #17140f!important;

    border-color:
        #17140f!important;

    color:
        #ffffff!important;

    transform:
        translateY(-2px)!important;

    box-shadow:
        0 18px 34px
        rgba(23,20,15,.28)!important;
}


/* CLICK */

.hero .btn:active,
.hero a.btn:active{

    transform:
        translateY(0)
        scale(.98)!important;
}


/* FOCUS */

.hero .btn:focus-visible{

    outline:
        2px solid
        #ffe12f!important;

    outline-offset:
        4px!important;
}



/* =========================================================
   BARRE DE PROGRESSION
   ========================================================= */

.progress i,
.page-progress span{

    background:
        #ffe12f!important;
}



/* =========================================================
   SELECTION
   ========================================================= */

::selection{

    background:
        #ffe12f!important;

    color:
        #17140f!important;
}


/* ===== D&A PROJECT EXACT BRAND END ===== */