/* ======================================================================
   FULLCODE — PROJET DIECO
   Dépend de :
   - /assets/css/general.css
   - /assets/css/content-pages.css

   La charte Dieco utilise :
   - Bleu principal  #205BAA
   - Bleu foncé      #0B2F61
   - Bleu clair      #C1CDE3
   - Jaune           #FBA919
   - Sable           #F7DCB0
   - Vert            #009C4C
   - Vert clair      #C6E0CB
   - Noir            #000000
   - Blanc           #FFFFFF

   Typographies :
   - Impact pour les titres (remplace Poppins Bold)
   - Lato pour les textes
   ====================================================================== */


/* ----------------------------------------------------------------------
   TOKENS DIECO
   ---------------------------------------------------------------------- */

.dieco-page {
    --dieco-blue: #205baa;
    --dieco-blue-dark: #0b2f61;
    --dieco-blue-soft: #c1cde3;
    --dieco-yellow: #fba919;
    --dieco-sand: #f7dcb0;
    --dieco-green: #009c4c;
    --dieco-green-soft: #c6e0cb;
    --dieco-black: #000;
    --dieco-white: #fff;

    --dieco-display:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    --dieco-body:
        "Lato",
        var(--font-body);

    overflow: clip;

    background:
        linear-gradient(180deg,
            #ffffff 0,
            #f7f9fc 32%,
            #ffffff 68%,
            #f5f7fb 100%);

    color: var(--dieco-blue-dark);
}

.dieco-page,
.dieco-page button,
.dieco-page input,
.dieco-page textarea,
.dieco-page select {
    font-family: var(--dieco-body);
}


/* ----------------------------------------------------------------------
   FIL D'ARIANE
   ---------------------------------------------------------------------- */

.dieco-breadcrumb {
    position: relative;
    z-index: 4;

    width: min(1180px, calc(100% - 48px));
    margin: 0 auto -42px;
    padding-top: 34px;

    color: rgba(11, 47, 97, 0.64);

    font-size: 0.78rem;
}

.dieco-breadcrumb ol {
    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    list-style: none;
}

.dieco-breadcrumb li+li::before {
    content: "›";

    margin-right: 10px;

    color: rgba(32, 91, 170, 0.46);
}

.dieco-breadcrumb a {
    color: var(--dieco-blue);
    font-weight: 700;
}

.dieco-breadcrumb a:hover,
.dieco-breadcrumb a:focus-visible {
    color: var(--dieco-green);
}


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

.dieco-page .page-hero {
    position: relative;
    isolation: isolate;

    min-height: 72vh;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #ffffff 0 57%,
            rgba(193, 205, 227, 0.42) 57% 100%);
}

.dieco-page .page-hero::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: -18%;
    right: 10%;

    width: clamp(190px, 24vw, 360px);
    aspect-ratio: 1;

    border: clamp(16px, 2vw, 30px) solid var(--dieco-yellow);
    border-radius: 50%;

    opacity: 0.94;
}

.dieco-page .page-hero::after {
    content: "";

    position: absolute;
    z-index: -2;
    top: -20%;
    left: 50%;

    width: 2px;
    height: 145%;

    background: var(--dieco-blue-dark);

    transform: rotate(-42deg);
    transform-origin: center;
}

.dieco-page .page-hero-inner {
    position: relative;
}

.dieco-page .page-kicker {
    color: var(--dieco-green);

    font-family: var(--dieco-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.dieco-page .page-hero .page-kicker {
    width: fit-content;

    padding: 8px 13px;

    border-radius: 999px;

    background: var(--dieco-yellow);

    color: var(--dieco-blue-dark);
}

.dieco-page .page-hero h1 {
    max-width: none;
    margin-top: 18px;

    color: var(--dieco-blue);

    font-family: var(--dieco-display);
    font-size: clamp(5rem, 14vw, 12rem);
    font-weight: 400;
    line-height: 0.78;
    letter-spacing: 0.01em;
    text-transform: uppercase;

    text-shadow:
        0.035em 0.035em 0 var(--dieco-blue-soft);
}

.dieco-page .page-hero .lead {
    max-width: 720px;

    color: var(--dieco-blue-dark);

    font-size: clamp(1.02rem, 1.5vw, 1.24rem);
}


/* ----------------------------------------------------------------------
   SECTIONS
   ---------------------------------------------------------------------- */

.dieco-page .content-section {
    border-color: rgba(32, 91, 170, 0.12);
}

.dieco-page .content-section h2 {
    color: var(--dieco-blue-dark);

    font-family: var(--dieco-display);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 0.94;
}

.dieco-page .content-section h3 {
    color: var(--dieco-blue-dark);
}

.dieco-page .content-section p {
    color: rgba(11, 47, 97, 0.78);
}


/* ----------------------------------------------------------------------
   CONTEXTE
   ---------------------------------------------------------------------- */

.dieco-context {
    position: relative;
}

.dieco-context::before {
    content: "01";

    position: absolute;
    z-index: -1;
    top: 20px;
    right: 2%;

    color: rgba(193, 205, 227, 0.32);

    font-family: var(--dieco-display);
    font-size: clamp(7rem, 18vw, 16rem);
    line-height: 0.8;
}

.dieco-context>div:first-child {
    padding: clamp(28px, 4vw, 48px);

    border-radius: 28px;

    background:
        linear-gradient(145deg,
            var(--dieco-blue-dark),
            var(--dieco-blue));

    color: #fff;

    box-shadow:
        0 24px 60px rgba(11, 47, 97, 0.18);
}

.dieco-context>div:first-child .page-kicker {
    color: var(--dieco-yellow);
}

.dieco-context>div:first-child h2 {
    color: #fff;
}


/* ----------------------------------------------------------------------
   IDENTITÉ VISUELLE
   ---------------------------------------------------------------------- */

.dieco-identity {
    position: relative;
}

.dieco-logo-stage {
    position: relative;
    isolation: isolate;

    min-height: clamp(320px, 40vw, 520px);

    display: grid;
    place-items: center;

    overflow: hidden;

    border: 1px solid rgba(32, 91, 170, 0.12);
    border-radius: clamp(24px, 4vw, 42px);

    background:
        linear-gradient(rgba(32, 91, 170, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 91, 170, 0.045) 1px, transparent 1px),
        linear-gradient(145deg,
            #fff 0%,
            #f7f9fc 68%,
            #eef3f9 100%);

    background-size:
        34px 34px,
        34px 34px,
        auto;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 28px 70px rgba(11, 47, 97, 0.12);
}

.dieco-logo-stage::before {
    content: "DIECO";

    position: absolute;
    z-index: 0;
    right: clamp(18px, 4vw, 56px);
    bottom: -8px;

    color: rgba(32, 91, 170, 0.065);

    font-family: var(--dieco-display);
    font-size: clamp(5rem, 14vw, 12rem);
    font-weight: 400;
    line-height: 0.78;
    letter-spacing: 0.015em;
    text-transform: uppercase;

    pointer-events: none;
}

.dieco-logo-stage::after {
    content: "";

    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;

    height: 10px;

    background:
        linear-gradient(90deg,
            var(--dieco-blue) 0 52%,
            var(--dieco-green) 52% 80%,
            var(--dieco-yellow) 80% 100%);
}

.dieco-logo-stage .inline-logo {
    position: relative;
    z-index: 2;

    width: min(390px, 62vw);

    padding: clamp(22px, 4vw, 44px);

    border-radius: 24px;

    background: rgba(255, 255, 255, 0.92);

    box-shadow:
        0 20px 48px rgba(11, 47, 97, 0.10);

    filter: none;
}

.dieco-identity .button-row {
    justify-content: flex-end;
}


/* ----------------------------------------------------------------------
   SYSTÈME DE MARQUE
   ---------------------------------------------------------------------- */

.dieco-brand-system {
    margin-top: clamp(44px, 6vw, 76px);

    display: grid;
    gap: 18px;
}

.dieco-brand-system-header {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(30px, 6vw, 90px);
    align-items: end;
}

.dieco-brand-system-header p {
    margin: 0;
}

.dieco-brand-system-header strong {
    max-width: 600px;

    color: var(--dieco-blue-dark);

    font-size: clamp(1.2rem, 2vw, 1.7rem);
    line-height: 1.3;
}


/* Palette */

.dieco-palette {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.dieco-swatch {
    position: relative;
    isolation: isolate;

    min-height: 150px;

    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    overflow: hidden;

    border-radius: 20px;

    box-shadow:
        inset 0 0 0 1px rgba(11, 47, 97, 0.08);

    font-size: 0.78rem;

    transition:
        transform 220ms cubic-bezier(.2, .8, .2, 1),
        box-shadow 220ms ease;
}

.dieco-swatch::after {
    content: "";

    position: absolute;
    z-index: -1;
    top: -45%;
    bottom: -45%;
    left: -70%;

    width: 44%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.24),
            transparent);

    transform: skewX(-18deg);

    animation:
        dieco-swatch-sheen 6.5s ease-in-out infinite;
}

.dieco-swatch:nth-child(2)::after {
    animation-delay: 0.35s;
}

.dieco-swatch:nth-child(3)::after {
    animation-delay: 0.70s;
}

.dieco-swatch:nth-child(4)::after {
    animation-delay: 0.05s;
}

.dieco-swatch:nth-child(5)::after {
    animation-delay: 0.4s;
}

.dieco-swatch:nth-child(6)::after {
    animation-delay: 0.75s;
}

.dieco-swatch:nth-child(7)::after {
    animation-delay: 0.10s;
}

.dieco-swatch:nth-child(8)::after {
    animation-delay: 0.45s;
}

.dieco-swatch:nth-child(9)::after {
    animation-delay: 0.8s;
}

.dieco-swatch:hover,
.dieco-swatch:focus-within {
    transform:
        translateY(-6px) rotate(-0.6deg);

    box-shadow:
        inset 0 0 0 1px rgba(11, 47, 97, 0.08),
        0 18px 34px rgba(11, 47, 97, 0.14);
}

.dieco-swatch strong {
    display: block;

    font-size: 0.92rem;
    font-weight: 700;
}

.dieco-swatch small {
    margin-top: 3px;

    font-size: 0.72rem;
    opacity: 0.78;
}

@keyframes dieco-swatch-sheen {

    0%,
    72% {
        transform:
            translateX(0) skewX(-18deg);
    }

    100% {
        transform:
            translateX(440%) skewX(-18deg);
    }
}

.dieco-swatch--blue {
    background: var(--dieco-blue);
    color: #fff;
}

.dieco-swatch--blue-dark {
    background: var(--dieco-blue-dark);
    color: #fff;
}

.dieco-swatch--blue-soft {
    background: var(--dieco-blue-soft);
    color: var(--dieco-blue-dark);
}

.dieco-swatch--yellow {
    background: var(--dieco-yellow);
    color: var(--dieco-black);
}

.dieco-swatch--sand {
    background: var(--dieco-sand);
    color: var(--dieco-blue-dark);
}

.dieco-swatch--green {
    background: var(--dieco-green);
    color: #fff;
}

.dieco-swatch--green-soft {
    background: var(--dieco-green-soft);
    color: var(--dieco-blue-dark);
}

.dieco-swatch--black {
    background: var(--dieco-black);
    color: #fff;
}

.dieco-swatch--white {
    background: #fff;
    color: var(--dieco-blue-dark);
}


/* Typographies */

.dieco-type-grid {
    margin-top: 6px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.dieco-type-card {
    min-height: 250px;

    padding: clamp(28px, 4vw, 48px);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-radius: 24px;

    background: #fff;

    box-shadow:
        inset 0 0 0 1px rgba(32, 91, 170, 0.1),
        0 18px 45px rgba(11, 47, 97, 0.07);
}

.dieco-type-card>span {
    color: var(--dieco-green);

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dieco-type-card strong {
    display: block;

    color: var(--dieco-blue-dark);

    font-size: clamp(1.5rem, 3vw, 2.7rem);
    line-height: 1.05;
}

.dieco-type-card--display {
    background: var(--dieco-blue-dark);
}

.dieco-type-card--display>span {
    color: var(--dieco-yellow);
}

.dieco-type-card--display strong {
    color: #fff;

    font-family: var(--dieco-display);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 400;
    line-height: 0.82;
    text-transform: uppercase;
}


/* ----------------------------------------------------------------------
   CATALOGUE
   ---------------------------------------------------------------------- */

.dieco-catalogue {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    padding-inline:
        max(clamp(24px, 7vw, 120px),
            calc((100vw - 1180px) / 2));

    overflow: hidden;

    background:
        linear-gradient(125deg,
            var(--dieco-blue-dark) 0 52%,
            var(--dieco-blue) 52% 79%,
            var(--dieco-green) 79%);
}



.dieco-catalogue-heading {
    position: relative;
    z-index: 2;

    width: min(1180px, 100%);
    margin: 0 auto clamp(40px, 5vw, 72px);

    display: grid;
    grid-template-columns:
        minmax(0, 0.85fr) minmax(0, 1.15fr);

    gap: clamp(36px, 7vw, 110px);

    align-items: end;
}

/* Spécificité volontaire : écrase content-pages.css */
.dieco-page .dieco-catalogue .page-kicker {
    color: var(--dieco-yellow);
}

.dieco-page .dieco-catalogue h2 {
    color: #fff;
}

.catalogue [data-catalogue-counter] {
    color: #fff;
}


.dieco-page .dieco-catalogue p,
.dieco-page .dieco-catalogue .catalogue-instructions {
    color: rgba(255, 255, 255, 0.82);
}



.dieco-reference {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: clamp(58px, 6vw, 92px) minmax(0, 1fr);
    background:
        radial-gradient(circle at 78% 12%, rgba(193, 205, 227, .13), transparent 28%),
        linear-gradient(145deg, #0b2f61 0%, #123f78 58%, #205baa 100%);
    color: var(--dieco-white);
}

.dieco-reference__rail {
    position: relative;
    z-index: 2;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dieco-reference__rail span {
    display: block;
    font-family: Impact, sans-serif;
    font-size: clamp(2.1rem, 3.2vw, 3.8rem);
    line-height: 1;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .72);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.dieco-reference__inner {
    position: relative;
    z-index: 1;
    width: min(1320px, 100%);
    margin-inline: auto;
    padding:
        clamp(72px, 8vw, 118px) clamp(24px, 5vw, 72px) clamp(86px, 9vw, 132px);
}

.dieco-reference__inner::before {
    content: "";
    position: absolute;
    top: clamp(46px, 7vw, 92px);
    left: clamp(12px, 3vw, 40px);
    width: clamp(72px, 8vw, 118px);
    height: clamp(72px, 8vw, 118px);
    border-top: 2px dashed rgba(251, 169, 25, .82);
    border-left: 2px dashed rgba(251, 169, 25, .82);
    pointer-events: none;
}

.dieco-reference__intro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(250px, .62fr);
    gap: clamp(36px, 7vw, 104px);
    align-items: end;
    margin-bottom: clamp(48px, 7vw, 86px);
}

.dieco-reference__copy {
    max-width: 780px;
}

.dieco-reference__eyebrow {
    margin: 0 0 18px;
    font-family: "Lato", Arial, sans-serif;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dieco-yellow);
}

.dieco-reference h2 {
    max-width: 760px;
    margin: 0;
    font-family: Impact, sans-serif;
    font-size: clamp(3rem, 6.3vw, 6.8rem);
    font-weight: 400;
    line-height: .9;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-wrap: balance;
}

.dieco-reference__lead {
    max-width: 680px;
    margin: 30px 0 0;
    font-size: clamp(1.12rem, 1.6vw, 1.42rem);
    line-height: 1.55;
    font-weight: 600;
}

.dieco-reference__copy>p:last-child {
    max-width: 680px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .78);
    font-family: "Lato", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.72;
}

.dieco-reference__statement {
    position: relative;
    padding: 28px 0 8px 28px;
    border-left: 1px solid rgba(251, 169, 25, .58);
}

.dieco-reference__statement-mark {
    position: absolute;
    top: 0;
    left: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dieco-yellow);
}

.dieco-reference__statement p {
    margin: 0;
    max-width: 330px;
    font-family: "Lato", Arial, sans-serif;
    font-size: clamp(1rem, 1.4vw, 1.24rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
}

.dieco-reference__statement strong {
    color: var(--dieco-white);
    font-weight: 700;
}

.dieco-reference-book {
    position: relative;
    isolation: isolate;
    width: min(1120px, 100%);
    margin-inline: auto;
    outline: none;
}

.dieco-reference-book:focus-visible {
    border-radius: 18px;
    box-shadow: 0 0 0 3px rgba(251, 169, 25, .9);
}

.dieco-reference-book__backdrop {
    position: absolute;
    inset: 4% -4% 10%;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .025));
    transform: rotate(-1.1deg);
}

.dieco-reference-book__backdrop::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
}

.dieco-reference-book__orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.dieco-reference-book__orb--yellow {
    width: clamp(190px, 24vw, 350px);
    aspect-ratio: 1;
    right: -7%;
    top: -16%;
    background: var(--dieco-yellow);
    opacity: .94;
}

.dieco-reference-book__orb--green {
    width: clamp(76px, 9vw, 126px);
    aspect-ratio: 1;
    left: -3%;
    bottom: -8%;
    background: var(--dieco-green);
    opacity: .92;
}

.dieco-reference-book__stage {
    position: relative;
    width: min(100%, 1030px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    perspective: 1800px;
    filter: drop-shadow(0 28px 40px rgba(0, 0, 0, .24));
}

.dieco-reference-book__stage.is-single {
    grid-template-columns: minmax(0, 1fr);
    width: min(515px, 70%);
}

.dieco-reference-book__page {
    position: relative;
    margin: 0;
    aspect-ratio: 1;
    overflow: hidden;
    background: #fff;
    transform-origin: center;
    backface-visibility: hidden;
}

.dieco-reference-book__page--left {
    border-radius: 5px 0 0 5px;
    transform-origin: right center;
}

.dieco-reference-book__page--right {
    border-radius: 0 5px 5px 0;
    transform-origin: left center;
}

.dieco-reference-book__stage.is-single .dieco-reference-book__page {
    border-radius: 5px;
}

.dieco-reference-book__page img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.dieco-reference-book__stage:not(.is-single)::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 18px;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, .11),
            rgba(255, 255, 255, .07) 42%,
            rgba(0, 0, 0, .08));
    opacity: .55;
}

.dieco-reference-book__stage.is-turning-next .dieco-reference-book__page--right {
    animation: dieco-reference-next 240ms ease both;
}

.dieco-reference-book__stage.is-turning-prev .dieco-reference-book__page--left {
    animation: dieco-reference-prev 240ms ease both;
}

@keyframes dieco-reference-next {
    0% {
        transform: rotateY(0);
    }

    48% {
        transform: rotateY(-8deg) translateX(-5px);
    }

    100% {
        transform: rotateY(0);
    }
}

@keyframes dieco-reference-prev {
    0% {
        transform: rotateY(0);
    }

    48% {
        transform: rotateY(8deg) translateX(5px);
    }

    100% {
        transform: rotateY(0);
    }
}

.dieco-reference-book__controls {
    width: min(100%, 1030px);
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: 52px minmax(110px, auto) 52px;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.dieco-reference-book__arrow {
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--dieco-yellow);
    color: var(--dieco-blue-dark);
    font: inherit;
    font-size: 1.35rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
    transition:
        transform 180ms ease,
        background 180ms ease,
        opacity 180ms ease;
}

.dieco-reference-book__arrow:hover,
.dieco-reference-book__arrow:focus-visible {
    transform: translateY(-2px);
    background: #ffc34f;
}

.dieco-reference-book__arrow:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .85);
    outline-offset: 3px;
}

.dieco-reference-book__arrow:disabled {
    opacity: .34;
    cursor: default;
    transform: none;
}

.dieco-reference-book__status {
    min-width: 112px;
    margin: 0;
    text-align: center;
    font-family: "Lato", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--dieco-white);
}

.dieco-reference-book__hint {
    margin: 14px 0 0;
    text-align: center;
    font-family: "Lato", Arial, sans-serif;
    font-size: .76rem;
    color: rgba(255, 255, 255, .58);
}

@media (max-width: 880px) {
    .dieco-reference__intro {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .dieco-reference__statement {
        max-width: 520px;
    }
}

@media (max-width: 760px) {
    .dieco-reference {
        display: block;
    }

    .dieco-reference__rail {
        display: none;
    }

    .dieco-reference__inner {
        padding: 70px 20px 82px;
    }

    .dieco-reference__inner::before {
        left: 8px;
        width: 58px;
        height: 58px;
    }

    .dieco-reference h2 {
        font-size: clamp(2.9rem, 15vw, 5rem);
    }

    .dieco-reference-book__backdrop {
        inset: 6% -3% 13%;
    }

    .dieco-reference-book__stage,
    .dieco-reference-book__stage.is-single {
        width: min(100%, 520px);
        grid-template-columns: minmax(0, 1fr);
    }

    .dieco-reference-book__page {
        border-radius: 5px;
    }

    .dieco-reference-book__page--left {
        display: none !important;
    }

    .dieco-reference-book__stage::after {
        display: none;
    }

    .dieco-reference-book__controls {
        margin-top: 20px;
    }

    .dieco-reference-book__hint {
        max-width: 280px;
        margin-inline: auto;
        line-height: 1.5;
    }
}

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

    .dieco-reference-book__page,
    .dieco-reference-book__arrow {
        animation: none !important;
        transition: none !important;
    }
}

/* ======================================================================
   DIECO — SUPPORTS TECHNIQUES
   Palette matière + fiches techniques
   ====================================================================== */

.dieco-tools {
    position: relative;

    overflow: hidden;

    padding:
        clamp(84px, 9vw, 140px) max(24px,
            calc((100vw - 1280px) / 2));

    background:
        linear-gradient(145deg,
            #f7f8f6 0%,
            #fff 52%,
            #f5f8fc 100%);

    color: #0b2f61;
}


/* petite construction graphique
   inspirée des pointillés Dieco */

.dieco-tools::before {
    content: "";

    position: absolute;

    top: 76px;
    left: 0;

    width: clamp(70px, 8vw, 130px);
    height: 88px;

    border-top:
        2px dashed rgba(32, 91, 170, 0.35);

    border-right:
        2px dashed rgba(32, 91, 170, 0.35);

    pointer-events: none;
}


.dieco-tools__inner {
    width: min(1280px, 100%);

    margin-inline: auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.dieco-tools__heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(280px, 0.55fr);

    gap:
        clamp(38px, 8vw, 120px);

    align-items: end;

    margin-bottom:
        clamp(58px, 8vw, 100px);
}


.dieco-tools__heading-main {
    max-width: 830px;
}


.dieco-tools__heading .project-kicker {
    color: #205baa;
}


.dieco-tools__heading h2 {
    margin: 12px 0 0;

    color: #0b2f61;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size:
        clamp(3.3rem, 7vw, 7.2rem);

    font-weight: 400;

    line-height: 0.88;

    text-transform: uppercase;

    text-wrap: balance;
}


.dieco-tools__intro {
    max-width: 420px;

    margin: 0;

    padding-left: 24px;

    border-left:
        2px solid #fba919;

    color: #222;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        clamp(1rem, 1.3vw, 1.18rem);

    line-height: 1.65;
}


/* =========================================================
   GRID
   ========================================================= */

.dieco-tools__grid {
    display: grid;

    gap:
        clamp(28px, 4vw, 54px);
}


/* =========================================================
   SUPPORT
   ========================================================= */

.dieco-tool {
    position: relative;

    isolation: isolate;

    min-height: 620px;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.72fr) minmax(0, 1.28fr);

    align-items: center;

    gap:
        clamp(42px, 7vw, 100px);

    padding:
        clamp(36px, 5vw, 72px);

    overflow: hidden;

    border-radius: 12px;

    border:
        1px solid rgba(32, 91, 170, 0.10);

    background: #fff;

    box-shadow:
        0 24px 60px rgba(11, 47, 97, 0.07);
}


/* numéro XXL */

.dieco-tool__number {
    position: absolute;

    z-index: -1;

    top: -28px;
    right: 22px;

    color:
        rgba(32, 91, 170, 0.045);

    font-family:
        Impact,
        sans-serif;

    font-size:
        clamp(10rem, 22vw, 20rem);

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   COPY
   ========================================================= */

.dieco-tool__copy {
    position: relative;

    z-index: 3;

    max-width: 470px;
}


.dieco-tool__label {
    margin:
        0 0 14px;

    color: #009c4c;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.dieco-tool h3 {
    margin: 0;

    color: #205baa;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size:
        clamp(2.5rem, 4.7vw, 5.2rem);

    font-weight: 400;

    line-height: 0.95;

    text-transform: uppercase;
}


.dieco-tool h3 em {
    display: block;

    color: #fba919;

    font-style: normal;
}


.dieco-tool__copy>p:not(.dieco-tool__label) {
    margin:
        22px 0 0;

    color: #222;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size: 0.98rem;

    line-height: 1.7;
}


.dieco-tool__copy>p+p {
    margin-top: 14px;
}


/* =========================================================
   TAGS
   ========================================================= */

.dieco-tool__tags {
    margin-top: 28px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.dieco-tool__tags span {
    min-height: 34px;

    padding:
        0 13px;

    display: inline-flex;

    align-items: center;

    border:
        1px solid rgba(32, 91, 170, 0.16);

    border-radius: 999px;

    background:
        rgba(193, 205, 227, 0.16);

    color: #0b2f61;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size: 0.72rem;

    font-weight: 700;
}


/* ======================================================================
   PALETTE MATIÈRE
   ====================================================================== */

.dieco-tool--palette {
    background:
        radial-gradient(circle at 87% 10%,
            rgba(251, 169, 25, 0.17),
            transparent 25%),
        #fff;
}


/* le visuel passe à droite */

.dieco-palette-object {
    position: relative;

    width:
        min(100%, 720px);

    justify-self: center;

    padding: 7% 6% 8%;

    perspective: 1500px;
}


/* ombre indépendante */

.dieco-palette-object__shadow {
    position: absolute;

    z-index: -2;

    left: 15%;
    right: 3%;

    bottom: 5%;

    height: 14%;

    border-radius: 50%;

    background:
        rgba(11, 47, 97, 0.19);

    filter:
        blur(24px);

    transform:
        rotate(-3deg);
}


/* plaque PVC */

.dieco-palette-object__board {
    position: relative;

    overflow: hidden;

    border-radius: 4px;

    background: #fff;

    box-shadow:
        12px 13px 0 #d6dbe0,
        20px 28px 34px rgba(11, 47, 97, 0.15);

    transform:
        rotate(-2.2deg) rotateX(1.5deg);

    transition:
        transform 420ms cubic-bezier(0.2,
            0.8,
            0.2,
            1);
}


/*
  petite tranche qui donne
  l'impression de plaque rigide
*/

.dieco-palette-object__board::after {
    content: "";

    position: absolute;

    inset:
        auto 0 0;

    height: 5px;

    background:
        linear-gradient(90deg,
            #c8cdd2,
            #eef0f2,
            #c7ccd1);

    opacity: 0.9;
}


.dieco-palette-object__board img {
    width: 100%;
    height: auto;

    display: block;
}


.dieco-tool--palette:hover .dieco-palette-object__board {
    transform:
        translateY(-7px) rotate(-1deg) rotateX(2deg);
}


/* annotation */

.dieco-palette-object__note {
    position: absolute;

    right: 1%;
    bottom: 0;

    padding:
        10px 14px;

    border-radius: 6px;

    background: #fba919;

    color: #0b2f61;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    transform:
        rotate(3deg);
}


/* ======================================================================
   FICHES TECHNIQUES
   ====================================================================== */

.dieco-tool--ft {
    grid-template-columns:
        minmax(0, 1.28fr) minmax(320px, 0.72fr);

    background:
        radial-gradient(circle at 8% 90%,
            rgba(0, 156, 76, 0.11),
            transparent 27%),
        #fff;
}


/*
  sur cette card :
  visuel à gauche,
  texte à droite
*/

.dieco-tool--ft .dieco-tool__copy {
    grid-column: 2;
    grid-row: 1;
}


.dieco-ft-object {
    position: relative;

    grid-column: 1;
    grid-row: 1;

    width:
        min(100%, 720px);

    min-height: 490px;

    justify-self: center;
}


/* =========================================================
   FEUILLES
   ========================================================= */

.dieco-ft-sheet {
    position: absolute;

    margin: 0;

    overflow: hidden;

    border-radius: 3px;

    background: #fff;

    box-shadow:
        0 22px 44px rgba(11, 47, 97, 0.16);

    transition:
        transform 420ms cubic-bezier(0.2,
            0.8,
            0.2,
            1);
}


.dieco-ft-sheet img {
    width: 100%;
    height: auto;

    display: block;
}


/* feuille arrière */

.dieco-ft-sheet--back {
    width: 73%;

    top: 6%;
    left: 5%;

    transform:
        rotate(-5deg);
}


/* feuille avant */

.dieco-ft-sheet--front {
    z-index: 2;

    width: 76%;

    top: 13%;
    right: 3%;

    transform:
        rotate(2.2deg);
}


/* ouverture subtile */

.dieco-tool--ft:hover .dieco-ft-sheet--back {
    transform:
        translate(-12px, -5px) rotate(-7deg);
}


.dieco-tool--ft:hover .dieco-ft-sheet--front {
    transform:
        translate(12px, -8px) rotate(1deg);
}


/* =========================================================
   PETIT CROQUIS
   ========================================================= */

.dieco-ft-object__sketch {
    position: absolute;

    z-index: 4;

    left: 1%;
    bottom: 1%;

    width:
        clamp(82px, 10vw, 130px);

    padding: 12px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 12px 28px rgba(11, 47, 97, 0.09);

    transform:
        rotate(-6deg);
}


.dieco-ft-object__sketch svg {
    width: 100%;

    display: block;
}


.dieco-ft-object__sketch path,
.dieco-ft-object__sketch circle {
    stroke: #205baa;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

    opacity: 0.58;
}


/* ======================================================================
   FOOTER DE SECTION
   ====================================================================== */

.dieco-tools__footer {
    width:
        min(920px, 100%);

    margin:
        clamp(64px, 8vw, 105px) auto 0;

    padding-top:
        30px;

    display: grid;

    grid-template-columns:
        180px minmax(0, 1fr);

    gap: 30px;

    border-top:
        1px solid rgba(32, 91, 170, 0.16);
}


.dieco-tools__footer-label {
    margin: 0;

    color: #009c4c;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.dieco-tools__footer-text {
    margin: 0;

    color: #222;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        clamp(1rem, 1.5vw, 1.25rem);

    line-height: 1.6;
}


.dieco-tools__footer-text strong {
    color: #205baa;
}


/* ======================================================================
   RESPONSIVE
   ====================================================================== */

@media (max-width: 900px) {

    .dieco-tools__heading {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .dieco-tools__intro {
        max-width: 620px;
    }


    .dieco-tool,
    .dieco-tool--ft {
        min-height: 0;

        grid-template-columns: 1fr;

        gap: 44px;
    }


    .dieco-tool--ft .dieco-ft-object,
    .dieco-tool--ft .dieco-tool__copy {
        grid-column: 1;
    }


    .dieco-tool--ft .dieco-ft-object {
        grid-row: 2;
    }


    .dieco-tool--ft .dieco-tool__copy {
        grid-row: 1;
    }


    .dieco-tool__copy {
        max-width: 620px;
    }


    .dieco-palette-object {
        width:
            min(100%, 680px);
    }


    .dieco-ft-object {
        width:
            min(100%, 680px);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .dieco-tools {
        padding:
            72px 20px 82px;
    }


    .dieco-tools::before {
        width: 54px;
        height: 54px;
    }


    .dieco-tools__heading {
        margin-bottom: 46px;
    }


    .dieco-tools__heading h2 {
        font-size:
            clamp(3.1rem,
                16vw,
                5.1rem);
    }


    .dieco-tool {
        padding:
            30px 22px 36px;

        border-radius: 10px;
    }


    .dieco-tool h3 {
        font-size:
            clamp(2.6rem,
                13vw,
                4.2rem);
    }


    .dieco-palette-object {
        padding:
            4% 2% 10%;
    }


    .dieco-palette-object__note {
        right: 0;

        font-size: 0.62rem;
    }


    .dieco-ft-object {
        min-height:
            min(103vw,
                480px);
    }


    .dieco-ft-sheet--back {
        width: 78%;

        left: 2%;
    }


    .dieco-ft-sheet--front {
        width: 82%;

        right: 0;
    }


    .dieco-ft-object__sketch {
        width: 82px;

        left: 0;
        bottom: 0;
    }


    .dieco-tools__footer {
        grid-template-columns: 1fr;

        gap: 12px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .dieco-palette-object__board,
    .dieco-ft-sheet {
        transition: none;
    }

}

/* ----------------------------------------------------------------------
   CTA FINAL
   ---------------------------------------------------------------------- 

.dieco-page .page-cta-inner {
    background:
        radial-gradient(circle at 91% 105%,
            var(--dieco-yellow) 0 18%,
            transparent 18.5%),
        linear-gradient(125deg,
            var(--dieco-blue-dark),
            var(--dieco-blue) 70%);

    box-shadow:
        0 28px 70px rgba(11, 47, 97, 0.2);
}

.dieco-page .page-cta h2 {
    color: #fff;

    font-family: var(--dieco-display);
    letter-spacing: 0.01em;
}

.dieco-page .page-cta .page-button {
    background: var(--dieco-yellow);

    color: var(--dieco-blue-dark);

    box-shadow: none;
}
*/

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

@media (max-width: 900px) {

    .dieco-brand-system-header,
    .dieco-type-grid {
        grid-template-columns: 1fr;
    }

    .dieco-palette {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dieco-swatch:nth-child(1)::after {
        animation-delay: 0s;
    }

    .dieco-swatch:nth-child(2)::after {
        animation-delay: 0.35s;
    }

    .dieco-swatch:nth-child(3)::after {
        animation-delay: 0.05s;
    }

    .dieco-swatch:nth-child(4)::after {
        animation-delay: 0.4s;
    }

    .dieco-swatch:nth-child(5)::after {
        animation-delay: 0.10s;
    }

    .dieco-swatch:nth-child(6)::after {
        animation-delay: 0.45s;
    }

    .dieco-swatch:nth-child(7)::after {
        animation-delay: 0.15s;
    }

    .dieco-swatch:nth-child(8)::after {
        animation-delay: 0.50s;
    }

    .dieco-swatch:nth-child(9)::after {
        animation-delay: 0.8s;
    }

    .dieco-catalogue {
        background:
            linear-gradient(145deg,
                var(--dieco-blue-dark),
                var(--dieco-blue));
    }
}

@media (max-width: 720px) {
    .dieco-breadcrumb {
        width: calc(100% - 40px);
        margin-bottom: -20px;
        padding-top: 22px;
    }

    .dieco-page .page-hero {
        min-height: 62vh;
    }

    .dieco-page .page-hero::before {
        top: 7%;
        right: -55px;

        width: 170px;

        border-width: 14px;
    }

    .dieco-page .page-hero::after {
        left: 64%;
    }

    .dieco-page .page-hero h1 {
        font-size: clamp(4.5rem, 25vw, 7rem);
    }

    .dieco-context::before {
        display: none;
    }

    .dieco-logo-stage {
        min-height: 360px;
    }

    .dieco-logo-stage::after {
        top: 32px;
        right: 26px;

        width: 96px;
        border-width: 7px;
    }

    .dieco-palette {
        grid-template-columns: 1fr 1fr;
    }

    .dieco-swatch {
        min-height: 120px;
    }


    .dieco-swatch:nth-child(1)::after {
        animation-delay: 0.05s;
    }

    .dieco-swatch:nth-child(2)::after {
        animation-delay: 0.10s;
    }

    .dieco-swatch:nth-child(3)::after {
        animation-delay: 0.15s;
    }

    .dieco-swatch:nth-child(4)::after {
        animation-delay: 0.2s;
    }

    .dieco-swatch:nth-child(5)::after {
        animation-delay: 0.25s;
    }

    .dieco-swatch:nth-child(6)::after {
        animation-delay: 0.30s;
    }

    .dieco-swatch:nth-child(7)::after {
        animation-delay: 0.35s;
    }

    .dieco-swatch:nth-child(8)::after {
        animation-delay: 0.40s;
    }

    .dieco-swatch:nth-child(9)::after {
        animation-delay: 0.45s;
    }

    .dieco-catalogue {
        padding-inline: 20px;
    }
}


@media (max-width: 900px) {
    .dieco-catalogue-heading {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .dieco-catalogue {
        padding-inline: 20px;
    }

    .dieco-catalogue .book-stage {
        min-height: min(92vw, 520px);
        padding: 18px 10px;
    }
}

@media (max-width: 460px) {
    .dieco-palette {
        grid-template-columns: 1fr;
    }
}