ptitspas-vitrine/static/css/style.css

/* Charte Graphique P'titsPas */

/* Variables de Couleurs */
:root {
    --color-peche-doux: #FFD7A8;
    --color-menthe-claire: #AEE1CD;
    --color-rose-tendre: #F6B2C4;
    --color-jaune-pale: #FFECB3;
    --color-lavande: #E6E6FA; /* Approximation, à ajuster si vous avez un hex exact */
    --color-corail-leger: #FFDAB9; /* Approximation, à ajuster */
    --color-texte-principal: #333333;
    --color-texte-secondaire: #555555;
    --color-blanc: #FFFFFF;
    --padding-module: 8px;
}

/* Import des polices (exemple avec Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&family=Open+Sans:wght@400;700&family=Poppins:wght@700&family=Quicksand:wght@500;700&family=Montserrat:wght@400;700&display=swap');
/* Si vous avez une police script/brushed spécifique, elle devra être importée ici aussi, potentiellement localement */

/* Styles de Base */
body {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-texte-principal);
    background-color: var(--color-blanc); /* Ou une teinte pastel très claire comme fond général */
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

main {
    padding: calc(var(--padding-module) * 3); /* 24px */
    max-width: 960px;
    margin: 0 auto;
}

h1 {
    font-family: 'Merienda', cursive; /* Police Script pour titres d'impact */
    color: var(--color-texte-principal);
    /* Peut nécessiter des ajustements de taille ou de graisse spécifiques */
    /* font-weight: 700; /* ou 400 selon le style désiré */ 
}

h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif; /* Pour les sous-titres et autres titres */
    color: var(--color-texte-principal);
}

/* Accroches et sous-titres (exemples) */
.accroche {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: var(--color-texte-secondaire);
}

a {
    color: var(--color-corail-leger); /* Corail léger pour les liens */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Header / Navigation */
header nav {
    background-color: var(--color-menthe-claire); /* Menthe claire pour le header */
    padding: var(--padding-module) 0;
}

header nav ul {
    list-style-type: none;
    padding: 0 calc(var(--padding-module) * 2);
    text-align: center;
    margin: 0;
}

header nav ul li {
    display: inline;
    margin-right: calc(var(--padding-module) * 2.5); /* 20px */
}

header nav ul li a {
    color: var(--color-texte-principal); /* Texte plus foncé sur fond pastel clair */
    text-decoration: none;
    padding: calc(var(--padding-module) * 1.5) var(--padding-module);
    display: inline-block;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    border-radius: calc(var(--padding-module) / 2); /* 4px */
}

header nav ul li a:hover {
    background-color: var(--color-peche-doux); /* Pêche doux au survol */
    text-decoration: none;
}

/* Style pour l'image du logo sur la page d'accueil */
.logo-accueil img {
    width: 100%; 
    max-height: 400px; 
    object-fit: cover; 
    display: block; 
    margin-bottom: calc(var(--padding-module) * 4); /* 32px */
    border-radius: var(--padding-module); /* Coins arrondis style galet */
}

/* Boutons */
button,
input[type="submit"],
.cta-button {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    background-color: var(--color-peche-doux); /* Pêche doux pour les boutons primaires */
    color: var(--color-texte-principal);
    border: none;
    padding: calc(var(--padding-module) * 1.5) calc(var(--padding-module) * 3);
    border-radius: calc(var(--padding-module) * 3); /* Forme de galet allongé */
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-top: var(--padding-module);
    transition: background-color 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
.cta-button:hover {
    background-color: var(--color-rose-tendre); /* Rose tendre au survol */
}

/* Formulaires (basique) */
form div {
    margin-bottom: calc(var(--padding-module) * 2);
}

form label {
    display: block;
    margin-bottom: var(--padding-module);
    font-family: 'Quicksand', sans-serif;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
    width: 100%;
    padding: var(--padding-module);
    border: 1px solid var(--color-menthe-claire);
    border-radius: calc(var(--padding-module) / 2); /* 4px */
    box-sizing: border-box; /* Important pour que padding ne change pas la largeur totale */
    font-family: 'Open Sans', sans-serif;
}

/* Sections de contenu - style galet */
.content-section {
    background-color: var(--color-blanc);
    padding: calc(var(--padding-module) * 3);
    margin-bottom: calc(var(--padding-module) * 3);
    border-radius: calc(var(--padding-module) * 2); /* 16px, angles arrondis */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Ombre douce */
}

/* Footer */
footer {
    background-color: var(--color-jaune-pale); /* Jaune pâle pour le footer */
    padding: calc(var(--padding-module) * 2.5) 0;
    text-align: center;
    border-top: 1px solid var(--color-peche-doux);
    margin-top: calc(var(--padding-module) * 5);
}

footer p {
    margin: var(--padding-module) 0;
    font-size: 0.9em;
}

footer a {
    color: var(--color-texte-secondaire);
}