/* ============================================================
   MON P'TIT PLANNER — styles.css
   Vanilla CSS — aucune dépendance externe
   ============================================================ */


/* ------------------------------------------------------------
   VARIABLES
   ------------------------------------------------------------ */

:root {
    /* Palette marque */
    --color-bordeaux:     #7D2340;
    --color-rose:         #F0507A;
    --color-orange:       #F7941E;
    --color-rose-clair:   #fdf0eb;

    /* Neutres */
    --color-white:        #ffffff;
    --color-beige-soft:   #fef4ee;
    --color-beige-page:   #fffaf8;
    --color-gray-200:     #e5e7eb;
    --color-gray-300:     #d1d5db;
    --color-gray-400:     #9ca3af;
    --color-gray-500:     #6b7280;
    --color-gray-600:     #4b5563;
    --color-gray-700:     #374151;

    /* Typographie */
    --font-display:       "DM Serif Display", serif;
    --font-body:          Lato, sans-serif;

    /* Espacements */
    --container-max:      80rem;   /* 1280px */
    --section-padding-y:  5rem;
    --container-px:       1rem;

    /* Rayons */
    --radius-sm:          0.5rem;
    --radius-md:          1rem;
    --radius-lg:          1.5rem;
    --radius-full:        9999px;

    /* Ombres */
    --shadow-sm:          0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:          0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:          0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:          0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl:         0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Transitions */
    --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal:  300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:    500ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ------------------------------------------------------------
   RESET MINIMAL
   ------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid var(--color-gray-200);
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-beige-page);
    color: var(--color-bordeaux);
    line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

ul, ol, menu {
    list-style: none;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background-color: transparent;
    background-image: none;
}

:disabled {
    cursor: default;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-gray-500);
    opacity: 1;
}

p, blockquote, h1, h2, h3, h4, h5, h6, hr, figure, pre {
    margin: 0;
}

textarea {
    resize: vertical;
}


/* ------------------------------------------------------------
   CONTENEUR GÉNÉRIQUE
   ------------------------------------------------------------ */

.container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-px);
    padding-right: var(--container-px);
}


/* ------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------ */

.nav {
    width: 100%;
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
    z-index: 20;
}

.nav__logo {
    height: 8rem;
    width: auto;
    object-fit: contain;
}


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

.hero {
    position: relative;
    overflow: hidden;
    padding: 3rem 1rem 6rem;
    background-color: transparent;
}

/* Blobs décoratifs */
.hero__blob {
    position: absolute;
    border-radius: var(--radius-full);
    opacity: 0.5;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.hero__blob--top-right {
    top: -5rem;
    right: -5rem;
    width: 36rem;
    height: 36rem;
    background-color: rgb(252 224 210);
}

.hero__blob--bottom-left {
    bottom: -5rem;
    left: -5rem;
    width: 30rem;
    height: 30rem;
    background-color: rgb(254 233 205);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero__inner {
    max-width: 90rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.hero__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    background-color: rgb(247 148 30 / 0.2);
    color: var(--color-orange);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hero__title {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1.25;
    color: var(--color-bordeaux);
}

.hero__title-accent--bordeaux {
    color: var(--color-bordeaux);
    font-style: italic;
}

.hero__title-accent--orange {
    color: var(--color-orange);
    font-style: italic;
}

.hero__description {
    font-size: 1.125rem;
    line-height: 1.625;
    color: var(--color-gray-600);
    max-width: 32rem;
}

.hero__form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
}

.hero__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 42rem;
}

.hero__input {
    flex: 1 1 0%;
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
    background-color: var(--color-white);
    outline: none;
    box-shadow: var(--shadow-sm);
    appearance: none;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.hero__input:focus {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--color-rose);
}

.hero__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    background-color: var(--color-bordeaux);
    color: var(--color-white);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
    transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero__btn:hover {
    opacity: 0.9;
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow-xl);
}

.hero__form-error {
    font-size: 0.875rem;
    color: #c0392b;
    background-color: #fdecea;
    border: 1px solid #f5c6cb;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}

.hero__privacy {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.hero__image-wrapper {
    display: flex;
    position: relative;
    height: 100%;
    min-height: 480px;
}

.hero__image {
    width: 150%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2xl);
    transform: rotate(-2deg);
    transition: transform var(--transition-slow);
    border: 8px solid var(--color-white);
    position: absolute;
    right: 0;
}

.hero__image:hover {
    transform: rotate(0deg);
}


/* ------------------------------------------------------------
   SÉPARATEUR
   ------------------------------------------------------------ */

.section-divider {
    width: 100%;
    height: 4rem;
    background-image: linear-gradient(to bottom, var(--color-beige-page), var(--color-white));
}


/* ------------------------------------------------------------
   FEATURES
   ------------------------------------------------------------ */

.features {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.features__header {
    text-align: center;
    margin-bottom: 4rem;
}

.features__title {
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 2.5rem;
    color: var(--color-bordeaux);
    margin-bottom: 1rem;
}

.features__subtitle {
    color: var(--color-gray-600);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.feature-card {
    background-color: var(--color-beige-soft);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    border: 2px solid transparent;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.feature-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-orange);
}

.feature-card__icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    background-color: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.feature-card__icon--primary   { color: var(--color-rose); }
.feature-card__icon--accent    { color: var(--color-rose); }
.feature-card__icon--secondary { color: var(--color-orange); }

.feature-card__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-bordeaux);
    margin-bottom: 0.75rem;
}

.feature-card__text {
    color: var(--color-gray-600);
}


/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */

.about {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-rose-clair);
    position: relative;
    overflow: hidden;
}

.about__bg-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    pointer-events: none;
}

.about__inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

.about__image-wrapper {
    flex: 0 0 50%;
}

.about__image {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
    transform: rotate(-2deg);
    transition: transform var(--transition-slow);
    border: 8px solid var(--color-white);
}

.about__image:hover {
    transform: rotate(0deg);
}

.about__content {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.about__title {
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1.25;
    color: var(--color-bordeaux);
}

.about__title-accent {
    color: var(--color-bordeaux);
}

.about__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.125rem;
    color: var(--color-gray-700);
}

.about__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.about__list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.about__list-icon {
    color: var(--color-orange);
    font-weight: 700;
}


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

.cta {
    padding: 6rem 0;
    background-color: var(--color-bordeaux);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cta__texture {
    position: absolute;
    inset: 0;
    background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
    opacity: 0.05;
    pointer-events: none;
}

.cta__inner {
    position: relative;
    z-index: 10;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.cta__title {
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1.25;
    color: var(--color-white);
    margin-bottom: 1.5rem;
}

.cta__btn {
    display: inline-block;
    background-color: var(--color-white);
    color: var(--color-bordeaux);
    font-weight: 700;
    padding: 1rem 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.cta__btn:hover {
    background-color: #f3f4f6;
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow-xl);
}

.cta__note {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--color-gray-300);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.footer {
    background-color: var(--color-beige-page);
    padding-top: 4rem;
    padding-bottom: 2rem;
    border-top: 1px solid var(--color-gray-200);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    margin-bottom: 3rem;
}

.footer__col {
    text-align: left;
}

.footer__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.footer__logo {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
}

.footer__brand-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-bordeaux);
}

.footer__tagline {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.footer__col-title {
    font-weight: 700;
    color: var(--color-bordeaux);
    margin-bottom: 1rem;
}

.footer__social-links {
    display: flex;
    gap: 1rem;
}

.footer__social-link {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bordeaux);
    box-shadow: var(--shadow-sm);
    transition: color var(--transition-fast);
}

.footer__social-link:hover {
    color: var(--color-rose);
}

.footer__bottom {
    border-top: 1px solid var(--color-gray-200);
    padding-top: 2rem;
    text-align: center;
}

.footer__copyright {
    font-size: 0.875rem;
    color: var(--color-gray-400);
}


/* ============================================================
   MEDIA QUERIES — ordre croissant des breakpoints
   ============================================================ */


/* ------------------------------------------------------------
   max-width: 767px  (mobile uniquement)
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    .hero__image-wrapper {
        width: 100%;
        justify-content: center;
    }

    .hero__image {
        width: 100%;
        position: relative;
        right: auto;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer__col {
        text-align: center;
    }

    .footer__social-links {
        justify-content: center;
    }
}


/* ------------------------------------------------------------
   min-width: 640px  (sm — petites tablettes / grand mobile)
   ------------------------------------------------------------ */

@media (min-width: 640px) {

    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .nav {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .hero {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .hero__inner {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .hero__form {
        flex-direction: row;
    }
}


/* ------------------------------------------------------------
   min-width: 768px  (md — tablettes)
   ------------------------------------------------------------ */

@media (min-width: 768px) {

    .features__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .feature-card--elevated {
        transform: translateY(-1rem);
    }

    .cta__title {
        font-size: 3rem;
    }
}


/* ------------------------------------------------------------
   min-width: 1024px  (lg — desktop)
   ------------------------------------------------------------ */

@media (min-width: 1024px) {

    .container {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .nav {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .hero {
        padding-top: 5rem;
        padding-bottom: 8rem;
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .hero__inner {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .hero__grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero__title {
        font-size: 3.75rem;
    }

    .about__inner {
        flex-direction: row;
    }
}


/* ------------------------------------------------------------
   min-width: 1280px  (xl — grand écran)
   ------------------------------------------------------------ */

@media (min-width: 1280px) {

    .hero__title {
        font-size: 4.5rem;
    }
}