d/* ============================================================
   WIZZY DRAWS — APPLICATION PAGE
   DESIGN MODERNE / ÉPURÉ
============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

:root {

    --wizzy-blue: #0878e8;
    --wizzy-blue-dark: #082663;
    --wizzy-blue-light: #eaf5ff;

    --wizzy-text: #102b67;
    --wizzy-muted: #667899;

    --wizzy-orange: #f59a00;

    --white: #ffffff;

    --border: #e4edf7;

}


/* ============================================================
   RESET
============================================================ */

.app-hero *,
.app-how-section *,
.app-preview-section * {
    box-sizing: border-box;
}

.app-hero img,
.app-how-section img,
.app-preview-section img {
    max-width: 100%;
}


/* ============================================================
   CONTAINER
============================================================ */

.app-container {

    width: 90%;
   

    margin: 0 auto;


}


/* ============================================================
   HERO
============================================================ */

.app-hero {

    position: relative;

    overflow: hidden;

    background: #bedaf4;

    min-height: 520px;

    display: flex;
    align-items: center;


}


/* légère séparation supérieure */

.app-hero::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background: rgba(8,120,232,.08);

}


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

.app-hero-grid {

    min-height: 520px;

    display: grid;

    grid-template-columns: 52% 48%;

    align-items: center;

}


/* ============================================================
   HERO CONTENT
============================================================ */

.app-hero-content {

    position: relative;

    z-index: 5;

    padding-top: 25px;

    padding-bottom: 35px;

}


/* ============================================================
   EYEBROW
============================================================ */

.app-eyebrow {

    font-family: "Nunito Sans", sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 4px;

    color: var(--wizzy-blue);

    margin-bottom: 18px;

}



/* ============================================================
   HERO TITLE
============================================================ */

.app-hero-title {

    margin: 0;

    max-width: 680px;

  

    font-size: clamp(35px, 4.3vw, 50px);

    line-height: .98;

    letter-spacing: -2.5px;

    font-weight: 900;

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

}


/* ============================================================
   TITLE HIGHLIGHT
============================================================ */

.app-title-highlight {

    display: inline;

    color: white;

}


/* ============================================================
   ORANGE LINE
============================================================ */

.app-title-line {

    width: 68px; 

    height: 5px;

    background: var(--wizzy-orange);

    margin-top: 22px;

    margin-bottom: 18px;

}


/* ============================================================
   DESCRIPTION
============================================================ */

.app-hero-description {

    max-width: 620px;

    margin: 0;

  

    font-size: 18px;

    line-height: 1.6;

    font-weight: 500;

    color: white;

}


/* ============================================================
   STORE BUTTONS
============================================================ */

.app-store-buttons {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 28px;

    flex-wrap: wrap;

}


.store-button {

    display: block;

    line-height: 0;

    transition:
        transform .2s ease,
        opacity .2s ease;

}


.store-button img {

    height: 52px;

    width: auto;

    display: block;

}


.store-button:hover {

    transform: translateY(-3px);

    opacity: .92;

}


/* ============================================================
   HERO VISUAL
============================================================ */

.app-hero-visual {

    position: relative;

    height: 520px;

    overflow: visible;

}


/* ============================================================
   GEOMETRIC SHAPES
============================================================ */

.visual-square {

    position: absolute;

    background: #238bea;

    opacity: .92;

}


.visual-square-1 {

    width: 270px;

    height: 300px;

    top: 78px;

    left: 105px;

}


.visual-square-2 {

    width: 150px;

    height: 185px;

    bottom: 50px;

    left: 35px;

    opacity: .75;

}


.visual-square-3 {

    width: 190px;

    height: 105px;

    top: 32px;

    right: 65px;

    opacity: .12;

}


/* ============================================================
   PHONE
============================================================ */

.phone-wrapper {

    position: absolute;

    z-index: 5;

   

    width: 100%;

    height: 500px;

    display: flex;

    justify-content: center;

    align-items: center;

}


.app-phone-image {

    width: auto;

    max-width: 100%;

    max-height: 510px;

    object-fit: contain;

    display: block;

}


/* ============================================================
   DRAWING CARD
============================================================ */

.app-drawing-card {

    position: absolute;

    z-index: 7;

    right: 10px;

    bottom: 66px;

    width: 190px;

    height: 190px;

}


/* feuille */

.drawing-paper {

    position: absolute;

    width: 150px;

    height: 170px;

    right: 25px;

    top: 5px;

    background: #fff;

    transform: rotate(7deg);

    box-shadow: 0 12px 30px rgba(20,60,110,.10);

}


/* illustration */

.drawing-lion {

    position: absolute;

    inset: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.drawing-lion img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


/* crayons */

.drawing-pencils {

    position: absolute;

    right: -3px;

    bottom: 8px;

    display: flex;

    gap: 7px;

    transform: rotate(-10deg);

}


.pencil {

    width: 13px;

    height: 110px;

    border-radius: 7px 7px 2px 2px;

    display: block;

}


.pencil-blue {

    background: #1976e8;

    transform: rotate(17deg);

}


.pencil-orange {

    background: #f39a05;

    transform: rotate(5deg);

}


.pencil-yellow {

    background: #f5c72e;

    transform: rotate(-8deg);

}


/* ============================================================
   SIDE TEXT
============================================================ */

.visual-side-text {

    position: absolute;

    z-index: 10;

    right: 0;

    top: 70px;

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.visual-side-text span {


    font-size: 12px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: 4px;

    color: #536485;

}


.visual-side-line {

    width: 32px;

    height: 3px;

    background: var(--wizzy-orange);

    margin-top: 12px;

}


/* ============================================================
   BOTTOM TEXT
============================================================ */

.visual-bottom-text {

    position: absolute;

    right: 18px;

    bottom: 52px;

   

    font-size: 12px;

    font-weight: 800;

    line-height: 1.6;

    letter-spacing: 3px;

    color: #5a6b88;

}


/* ============================================================
   HOW IT WORKS
============================================================ */

.app-how-section {

    background: #ffffff;

    padding: 42px 0 50px;

}


/* ============================================================
   SECTION HEADING
============================================================ */

.section-heading {

    text-align: center;

    max-width: 850px;

    margin: 0 auto 28px;

}


.section-eyebrow {

  

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 4px;

    color: var(--wizzy-blue);

    margin-bottom: 8px;

}


.section-heading h2 {

    margin: 0;

 

    font-size: 32px;

    line-height: 1.15;

    letter-spacing: -1px;

    font-weight: 900;

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

}


.section-heading p {

    margin: 7px 0 0;

  

    font-size: 14px;

    color: #7b879e;

}


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

.steps-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

}


/* ============================================================
   STEP CARD
============================================================ */

.step-card {

    position: relative;

    min-height: 130px;

    padding: 20px 22px;

    display: flex;

    align-items: center;

    gap: 18px;

    background: #ffffff;

    border: 1px solid #e8eef6;

    border-radius: 15px;

    box-shadow: 0 7px 25px rgba(23,68,115,.05);

    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.step-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 14px 32px rgba(23,68,115,.09);

}


/* ============================================================
   STEP ICON
============================================================ */

.step-icon {

    flex: 0 0 70px;

    width: 70px;

    height: 70px;

    border-radius: 50%;

    background: #edf6ff;

    display: flex;

    align-items: center;

    justify-content: center;

}


.step-icon img {

    width: 43px;

    height: 43px;

    object-fit: contain;

}


/* ============================================================
   STEP CONTENT
============================================================ */

.step-content {

    position: relative;

    flex: 1;

}


.step-number {

    position: absolute;

    right: 0;

    top: -17px;
    font-size: 43px;

    font-weight: 900;

    line-height: 1;

    color: #edf4fc;

}


.step-content h3 {

    position: relative;

    z-index: 2;

    margin: 0 0 5px;

    

    font-size: 17px;

    font-weight: 900;

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

}


.step-content p {

    position: relative;

    z-index: 2;

    margin: 0;

    

    font-size: 13px;

    line-height: 1.45;

    color: #687995;

}


/* ============================================================
   APP PREVIEW
============================================================ */

.app-preview-section {

    background: #edf7ff;

    padding: 48px 0;

    overflow: hidden;

}


.preview-grid {

    display: grid;

    grid-template-columns: 31% 69%;

    align-items: center;

    gap: 20px;

}


.preview-content {

    padding-left: 28px;

}


.preview-content h2 {

    margin: 0 0 14px;

    

    font-size: 36px;

    line-height: 1.05;

    letter-spacing: -1.3px;

    font-weight: 900;

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

}


.preview-content p {

    max-width: 370px;

    margin: 0;

    

    font-size: 15px;

    line-height: 1.6;

    color: #647491;

}


/* ============================================================
   PREVIEW PHONES
============================================================ */

.preview-phones {

    display: flex;

    align-items: flex-end;

    justify-content: center;

   

    height: 320px;

}


.preview-phone {

    height:320px;


    display: flex;

    align-items: flex-end;

    justify-content: center;

}


.preview-phone img {

    max-height: 100%;

    width: auto;

    object-fit: contain;

    display: block;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

    .app-container {

        padding-left: 28px;
        padding-right: 28px;

    }


    .app-hero-grid {

        grid-template-columns: 50% 50%;

    }


    .app-hero-title {

        font-size: 48px;

    }


    .phone-wrapper {

        left: 95px;

    }


    .visual-square-1 {

        left: 50px;

    }


    .app-drawing-card {

        right: -10px;

    }


    .preview-grid {

        grid-template-columns: 35% 65%;

    }


    .preview-phones {

        gap: 8px;

    }


    .preview-phone {

        width: 125px;

    }

}


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

@media (max-width: 900px) {

    .app-hero {

        min-height: auto;

    }


    .app-hero-grid {

        grid-template-columns: 1fr;

    }


    .app-hero-content {

        text-align: center;

        padding-top: 55px;

        padding-bottom: 10px;

    }


    .app-hero-title {

        margin-left: auto;
        margin-right: auto;

        font-size: 48px;

    }


    .app-title-line {

        margin-left: auto;
        margin-right: auto;

    }


    .app-hero-description {

        margin-left: auto;
        margin-right: auto;

    }


    .app-store-buttons {

        justify-content: center;

    }


    .app-hero-visual {

        height: 470px;

        margin-top: 15px;

    }


    .phone-wrapper {

        left: 50%;

        transform: translateX(-50%);

    }


    .visual-square-1 {

        left: 50%;

        transform: translateX(-50%);

    }


    .app-drawing-card {

        right: calc(50% - 250px);

    }


    .visual-side-text {

        right: 30px;

    }


    .visual-bottom-text {

        right: 30px;

    }


    .steps-grid {

        grid-template-columns: 1fr;

    }


    .step-card {

        min-height: 115px;

    }


    .preview-grid {

        grid-template-columns: 1fr;

    }


    .preview-content {

        text-align: center;

        padding-left: 0;

        margin-bottom: 25px;

    }


    .preview-content p {

        margin-left: auto;
        margin-right: auto;

    }

}


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

@media (max-width: 600px) {

    .app-container {

        padding-left: 18px;
        padding-right: 18px;

    }


    .app-hero-content {

        padding-top: 38px;

    }


    .app-eyebrow {

        font-size: 10px;

        letter-spacing: 3px;

    }


    .app-hero-title {

        font-size: 38px;

        line-height: 1;

        letter-spacing: -1.5px;

    }


    .app-hero-description {

        font-size: 15px;

        line-height: 1.5;

    }


    .app-store-buttons {

        gap: 10px;

    }


    .store-button img {

        height: 45px;

    }


    .app-hero-visual {

        height: 400px;

    }


    .phone-wrapper {

        width: 230px;

        height: 400px;

        top: 0;

    }


    .app-phone-image {

        max-height: 410px;

    }


    .visual-square-1 {

        width: 210px;

        height: 245px;

        top: 65px;

    }


    .visual-square-2 {

        width: 110px;

        height: 130px;

        left: 15px;

        bottom: 40px;

    }


    .visual-square-3 {

        width: 100px;

        height: 70px;

        right: 20px;

    }


    .app-drawing-card {

        transform: scale(.72);

        transform-origin: bottom right;

        right: -5px;

        bottom: 30px;

    }


    .visual-side-text {

        display: none;

    }


    .visual-bottom-text {

        display: none;

    }


    .section-heading {

        margin-bottom: 22px;

    }


    .section-heading h2 {

        font-size: 26px;

    }


    .section-eyebrow {

        font-size: 10px;

        letter-spacing: 3px;

    }


    .step-card {

        padding: 17px;

    }


    .step-icon {

        flex: 0 0 58px;

        width: 58px;

        height: 58px;

    }


    .step-icon img {

        width: 35px;

        height: 35px;

    }


    .step-content h3 {

        font-size: 15px;

    }


    .step-content p {

        font-size: 12px;

    }


    .step-number {

        font-size: 35px;

    }


    .app-preview-section {

        padding: 40px 0;

    }


    .preview-content h2 {

        font-size: 30px;

    }


    .preview-phones {

        height: 250px;

        gap: 6px;

        overflow: hidden;

    }


    .preview-phone {

        width: 85px;

        height: 230px;

    }


    .preview-phone:nth-child(4),
    .preview-phone:nth-child(5) {

        display: none;

    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    .app-hero-title {

        font-size: 33px;

    }


    .app-hero-visual {

        height: 370px;

    }


    .phone-wrapper {

        width: 205px;

    }


    .visual-square-1 {

        width: 190px;

        height: 225px;

    }


    .step-card {

        gap: 12px;

    }

}