/* ============================================================ AWW — Ain't We Women Feuille de style unique du site. Charte graphique : Ivoire, Marron, Or, Rouge Polices : Anton (titres), Raleway (texte courant) ORGANISATION DU FICHIER (dans l'ordre) : 1. Variables (couleurs, polices, espacements) 2. Reset + styles de base (html, body, img, a…) 3. Accessibilité (focus clavier, animations réduites) 4. Utilitaires (.container, .section, titres de section) 5. Boutons (.btn et ses variantes) 6. Une partie par section de la page, dans l'ordre du HTML : header/nav, hero, à propos, piliers, programmes, impact, partenaires, offres, FAQ, galerie, CTA, contact, footer 7. Animations d'apparition (.reveal) 8. Responsive : 3 paliers — 1024px (tablette paysage), 768px (tablette portrait / mobile), 480px (petit mobile) CONVENTION DE NOMMAGE (type BEM) : .bloc → un composant (ex. .offer-card) .bloc__element → un morceau du composant (ex. .offer-card__price) .bloc--variante → une déclinaison (ex. .offer-card--featured) ============================================================ */ /* --- 1. VARIABLES --- Les "custom properties" CSS : chaque valeur est définie une seule fois ici, puis réutilisée partout avec var(--nom). Pour changer une couleur ou un espacement sur tout le site, c'est ici. */ :root { /* Couleurs de la charte */ --color-ivory: #e7dfd6; /* fond chaud des sections alternées */ --color-marron: #76220b; /* couleur principale : boutons, titres */ --color-marron-light: #8a3015; /* marron éclairci pour les survols */ --color-rouge: #bd0000; /* secondaire, utilisé avec parcimonie */ --color-or: #cb9d36; /* accent : taglines, "+", badge Gold */ --color-noir: #000000; /* texte, fond du footer */ --color-blanc: #ffffff; /* texte sur fonds sombres */ --color-gris: #f5f2ee; /* fond clair des cartes et du formulaire */ --color-text-muted: #666; /* texte secondaire */ --color-text-body: #444; /* texte courant */ --color-border-light: #f0ebe5; /* bordures et séparateurs discrets */ /* Polices (chargées depuis Google Fonts dans le du HTML) */ --font-title: 'Anton', sans-serif; --font-body: 'Raleway', sans-serif; /* Durée + courbe commune à la plupart des transitions (survols…) */ --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Dimensions structurantes */ --container-max: 1200px; /* largeur maximale du contenu */ --section-padding: 120px; /* espace vertical des sections (réduit en responsive) */ --header-height: 80px; /* hauteur du header fixe (64px sur mobile) */ } /* --- 2. RESET + BASE --- Remise à zéro des marges par défaut des navigateurs, et box-sizing: border-box pour que largeur = contenu + bordures + padding (beaucoup plus simple à raisonner). */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { /* Défilement fluide natif vers les ancres (#contact…). C'est le navigateur qui anime — aucun JavaScript nécessaire. */ scroll-behavior: smooth; /* Le header est fixé en haut de l'écran : sans cette règle, la cible d'une ancre se retrouverait cachée derrière lui. La variable suit la hauteur réelle du header (80px, 64px mobile). */ scroll-padding-top: var(--header-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-noir); background-color: var(--color-blanc); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: var(--transition); } ul { list-style: none; } /* --- 3. ACCESSIBILITÉ --- */ /* Contour doré visible uniquement lors de la navigation au clavier (Tab) — pas au clic souris. Indispensable pour se repérer. */ :focus-visible { outline: 2px solid var(--color-or); outline-offset: 2px; } /* Lien d'évitement : premier élément de la page, invisible tant qu'il n'a pas le focus clavier. Il permet aux utilisateurs de lecteurs d'écran ou de navigation au clavier de sauter directement au contenu sans retraverser tout le menu. */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 2000; padding: 12px 20px; background: var(--color-marron); color: var(--color-blanc); border-radius: 0 0 12px 12px; font-weight: 600; font-size: 14px; } .skip-link:focus { top: 0; } /* Si la personne a activé "réduire les animations" dans son système (réglage d'accessibilité), on neutralise toutes les animations et transitions du site, y compris le défilement fluide. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .js .reveal, .js .reveal-left, .js .reveal-right { opacity: 1; transform: none; } } /* --- UTILITIES --- */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } .section { padding: var(--section-padding) 0; } .section--dark { background-color: var(--color-marron); color: var(--color-blanc); } .section--ivory { background-color: var(--color-ivory); } .section__header { text-align: center; margin-bottom: 64px; } .section__label { display: inline-block; font-family: var(--font-body); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--color-marron); margin-bottom: 16px; } .section__label--light { color: var(--color-or); } .section__title { font-family: var(--font-title); font-size: clamp(36px, 5vw, 56px); line-height: 1.1; text-transform: uppercase; margin-bottom: 16px; } .section__title--light { color: var(--color-blanc); } .section__subtitle { font-size: 18px; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; } .section__subtitle--light { color: rgba(255, 255, 255, 0.75); } /* --- BUTTONS --- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 36px; border-radius: 50px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; border: 2px solid transparent; transition: var(--transition); } .btn--primary { background-color: var(--color-marron); color: var(--color-blanc); border-color: var(--color-marron); } .btn--primary:hover { background-color: var(--color-marron-light); border-color: var(--color-marron-light); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(118, 34, 11, 0.3); } .btn--outline { background-color: transparent; color: var(--color-blanc); border-color: var(--color-blanc); } .btn--outline:hover { background-color: var(--color-blanc); color: var(--color-marron); transform: translateY(-2px); } .btn--secondary { background-color: transparent; color: var(--color-marron); border-color: var(--color-marron); } .btn--secondary:hover { background-color: var(--color-marron); color: var(--color-blanc); transform: translateY(-2px); } .btn--large { padding: 20px 48px; font-size: 17px; } .btn--full { width: 100%; } .btn--success { background-color: #2d7d46; border-color: #2d7d46; color: var(--color-blanc); } /* État d'échec du bouton d'envoi (erreur réseau ou test hors Netlify), posé par script.js §7 le temps d'inviter à réessayer. */ .btn--error { background-color: var(--color-rouge); border-color: var(--color-rouge); color: var(--color-blanc); } /* --- HEADER / NAVIGATION --- */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: var(--transition); padding: 0 24px; } /* Dès qu'on défile (classe .scrolled ajoutée par script.js), le header transparent prend un fond ivoire translucide + flou d'arrière-plan, et tous ses éléments passent en foncé. */ .header.scrolled { background-color: rgba(231, 223, 214, 0.95); -webkit-backdrop-filter: blur(20px); /* préfixe requis par Safari */ backdrop-filter: blur(20px); box-shadow: 0 2px 30px rgba(0, 0, 0, 0.08); } .header.scrolled .nav__link { color: var(--color-noir); } .header.scrolled .nav__link--cta { color: var(--color-blanc); } .header.scrolled .logo-text { color: var(--color-noir); } .nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); } .nav__logo { z-index: 1001; display: flex; align-items: center; gap: 12px; } .logo-icon { width: 40px; height: 40px; object-fit: contain; /* Le logo source est noir+or : ce filtre le rend entièrement blanc pour rester lisible sur le hero sombre. Il est retiré quand le header devient ivoire (règle .header.scrolled plus bas). */ filter: brightness(0) invert(1); transition: var(--transition); } .header.scrolled .logo-icon { filter: none; } .logo-text { font-family: var(--font-title); font-size: 20px; letter-spacing: 2px; color: var(--color-blanc); transition: var(--transition); } .nav__menu { display: flex; align-items: center; gap: 32px; } .nav__link { font-size: 14px; font-weight: 500; color: var(--color-blanc); letter-spacing: 0.5px; position: relative; padding: 8px 0; } .nav__link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--color-or); transition: var(--transition); } .nav__link:hover::after, .nav__link.active::after { width: 100%; } .nav__link--cta { background-color: var(--color-marron); color: var(--color-blanc); padding: 10px 24px; border-radius: 50px; } .nav__link--cta::after { display: none; } .nav__link--cta:hover { background-color: var(--color-marron-light); transform: translateY(-2px); } .nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; z-index: 1001; padding: 8px; } .nav__toggle span { display: block; width: 24px; height: 2px; background-color: var(--color-blanc); /* Ombre légère : garde les barres blanches lisibles quand le header transparent passe au-dessus d'une zone claire du collage du hero */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: var(--transition); } .header.scrolled .nav__toggle span { background-color: var(--color-noir); box-shadow: none; /* inutile sur le fond ivoire du header défilé */ } /* --- HERO --- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(118, 34, 11, 0.75) 0%, rgba(0, 0, 0, 0.5) 100% ); z-index: 1; } .hero__content { position: relative; z-index: 2; padding-top: var(--header-height); max-width: 800px; } .hero__tagline { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; color: var(--color-or); margin-bottom: 24px; } .hero__title { font-family: var(--font-title); font-size: clamp(48px, 8vw, 96px); line-height: 1; color: var(--color-blanc); text-transform: uppercase; margin-bottom: 24px; } .hero__description { font-size: 18px; line-height: 1.8; color: rgba(255, 255, 255, 0.85); max-width: 560px; margin-bottom: 40px; } .hero__buttons { display: flex; gap: 16px; flex-wrap: wrap; } .hero__social-proof { margin-top: 32px; font-size: 15px; font-weight: 500; color: var(--color-or); letter-spacing: 0.5px; } .hero__scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.6); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } .hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent); animation: scrollLine 2s infinite; } @keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* --- ABOUT --- */ .about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about__image { position: relative; } .about__image-wrapper { border-radius: 16px; overflow: hidden; position: relative; z-index: 1; } .about__image-wrapper img { width: 100%; height: 500px; object-fit: cover; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .about__image-wrapper:hover img { transform: scale(1.05); } .about__image-accent { position: absolute; bottom: -20px; right: -20px; width: 60%; height: 60%; background-color: var(--color-or); border-radius: 16px; opacity: 0.2; z-index: 0; } .about__content p { font-size: 16px; color: var(--color-text-body); margin-bottom: 16px; } .about__content p strong { color: var(--color-marron); } .about__quote { margin: 24px 0; padding: 20px 24px; border-left: 3px solid var(--color-or); background: var(--color-gris); border-radius: 0 12px 12px 0; } .about__quote p { font-size: 15px; font-style: italic; color: var(--color-text-body); margin-bottom: 8px; } .about__quote cite { font-size: 13px; font-style: normal; font-weight: 600; color: var(--color-marron); } .about__values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; } .about__value { display: flex; align-items: center; gap: 12px; padding: 16px; background-color: var(--color-gris); border-radius: 12px; transition: var(--transition); } .about__value:hover { background-color: var(--color-ivory); transform: translateY(-2px); } .about__value-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background-color: var(--color-marron); color: var(--color-blanc); border-radius: 12px; flex-shrink: 0; } .about__value-icon svg { width: 20px; height: 20px; } .about__value span { font-weight: 600; font-size: 15px; } /* --- PILLARS --- */ .pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .pillar { background: rgba(255, 255, 255, 0.08); border-radius: 20px; overflow: hidden; transition: var(--transition); } .pillar:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-8px); } .pillar__image { height: 240px; overflow: hidden; } .pillar__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .pillar:hover .pillar__image img { transform: scale(1.08); } .pillar__content { padding: 32px; } .pillar__number { font-family: var(--font-title); font-size: 48px; color: var(--color-or); opacity: 0.4; line-height: 1; } .pillar__title { font-family: var(--font-title); font-size: 28px; text-transform: uppercase; margin: 8px 0 16px; } .pillar__content p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.75); } .pillar__cta { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--color-or); letter-spacing: 0.5px; transition: var(--transition); } .pillar__cta:hover { color: var(--color-blanc); } /* --- ACTIVITIES --- */ .pole__title { font-family: var(--font-title); font-size: clamp(22px, 2.5vw, 28px); text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 16px; margin: 64px 0 28px; } .section__header + .pole__title { margin-top: 0; } .pole__number { font-size: 18px; color: var(--color-or); } .pole__title::after { content: ""; flex: 1; height: 1px; background: var(--color-border-light); } .activities__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .activities__grid--two { grid-template-columns: repeat(2, 1fr); } .activity-card { border-radius: 16px; overflow: hidden; background: var(--color-blanc); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: var(--transition); display: flex; flex-direction: column; } .activity-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } .activity-card--large { grid-column: span 2; } .activity-card__image { position: relative; height: 240px; overflow: hidden; } .activity-card--large .activity-card__image { height: 300px; } .activity-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .activity-card:hover .activity-card__image img { transform: scale(1.08); } .activity-card__overlay { position: absolute; top: 16px; left: 16px; } .activity-card__tag { display: inline-block; padding: 6px 16px; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(10px); /* préfixe requis par Safari */ backdrop-filter: blur(10px); border-radius: 50px; font-size: 12px; font-weight: 600; color: var(--color-marron); text-transform: uppercase; letter-spacing: 1px; } .activity-card__title { font-family: var(--font-title); font-size: 22px; text-transform: uppercase; padding: 20px 24px 8px; } .activity-card__desc { font-size: 14px; color: var(--color-text-muted); padding: 0 24px; line-height: 1.6; flex: 1; } .activity-card__cta { display: inline-block; padding: 12px 24px 20px; font-size: 13px; font-weight: 600; color: var(--color-marron); letter-spacing: 0.5px; transition: var(--transition); } .activity-card__cta:hover { color: var(--color-marron-light); } /* --- IMPACT --- */ .impact__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 64px; } .impact__stat { text-align: center; } .impact__number { font-family: var(--font-title); font-size: clamp(48px, 5vw, 72px); color: var(--color-marron); line-height: 1; display: inline; } .impact__plus { font-family: var(--font-title); font-size: clamp(36px, 4vw, 56px); color: var(--color-or); } .impact__label { font-size: 15px; color: var(--color-text-muted); margin-top: 12px; } .impact__context { font-size: 13px; color: var(--color-marron); font-weight: 500; margin-top: 4px; } /* Grande photo sous les chiffres. La hauteur fixe (400px) + object-fit: cover recadrent la photo comme une fenêtre ; le point de recadrage (object-position) est réglé en style inline dans le HTML car il est propre à chaque photo. Sur petit mobile, la hauteur redevient automatique pour montrer la photo entière (voir media query 480px). */ .impact__image { border-radius: 20px; overflow: hidden; height: 400px; } .impact__image img { width: 100%; height: 100%; object-fit: cover; /* remplit le cadre en rognant, sans déformer */ } /* --- PARTNERS --- */ .partners { background-color: var(--color-gris); } .partners__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 56px; max-width: 920px; margin: 0 auto 56px; } .partner img { height: 48px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: var(--transition); } .partner:hover img { filter: none; opacity: 1; } .partner--text { font-weight: 700; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-text-muted); padding: 10px 20px; border: 1px solid var(--color-border-light); border-radius: 50px; background: var(--color-blanc); transition: var(--transition); } .partner--text:hover { color: var(--color-marron); border-color: var(--color-marron); } .partners__cta { text-align: center; } /* --- OFFERS --- */ .offers__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 800px; margin: 0 auto; } .offer-card { background: var(--color-blanc); border-radius: 24px; padding: 48px 40px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06); transition: var(--transition); position: relative; border: 2px solid transparent; } .offer-card:hover { transform: translateY(-8px); box-shadow: 0 12px 50px rgba(0, 0, 0, 0.12); } .offer-card--featured { border-color: var(--color-marron); background: linear-gradient(180deg, rgba(118, 34, 11, 0.03) 0%, var(--color-blanc) 100%); } .offer-card__popular { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--color-or); color: var(--color-blanc); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 6px 24px; border-radius: 50px; } .offer-card__header { margin-bottom: 32px; } .offer-card__badge { display: inline-block; font-family: var(--font-title); font-size: 20px; text-transform: uppercase; letter-spacing: 2px; color: var(--color-marron); } .offer-card__badge--gold { color: var(--color-or); } .offer-card__price { display: flex; align-items: baseline; gap: 4px; margin-top: 12px; } .offer-card__amount { font-family: var(--font-title); font-size: 64px; line-height: 1; color: var(--color-noir); } .offer-card__period { display: flex; flex-direction: column; font-size: 16px; color: #888; font-weight: 500; } .offer-card__annual { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; } .offer-card__features { margin-bottom: 36px; } .offer-card__features li { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--color-border-light); } .offer-card__features li:last-child { border-bottom: none; } .offer-card__features svg { color: var(--color-marron); flex-shrink: 0; } .offers__note { text-align: center; font-size: 13px; color: var(--color-text-muted); margin-top: 24px; max-width: 600px; margin-left: auto; margin-right: auto; } /* --- FAQ --- */ .offers__faq { max-width: 700px; margin: 64px auto 0; } .offers__faq-title { font-family: var(--font-title); font-size: 28px; text-transform: uppercase; text-align: center; margin-bottom: 32px; } .faq-item { border-bottom: 1px solid var(--color-border-light); } .faq-item summary { padding: 20px 0; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 24px; font-weight: 300; color: var(--color-marron); transition: var(--transition); flex-shrink: 0; margin-left: 16px; } .faq-item[open] summary::after { content: '−'; } .faq-item p { padding: 0 0 20px; font-size: 15px; color: var(--color-text-body); line-height: 1.7; } /* --- GALLERY --- Grille "masonry" : 3 colonnes, rangées de 280px. Les photos occupent 1 case par défaut ; les variantes --tall (2 rangées) et --wide (2 colonnes) créent le rythme visuel. grid-auto-flow: dense autorise la grille à combler les trous en réordonnant. */ .gallery__masonry { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; grid-auto-flow: dense; gap: 16px; padding: 0 24px; max-width: 1400px; margin: 0 auto; } .gallery__item { border-radius: 12px; overflow: hidden; cursor: pointer; position: relative; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .gallery__item:hover img { transform: scale(1.08); } .gallery__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.3)); opacity: 0; transition: var(--transition); } .gallery__item:hover::after { opacity: 1; } .gallery__item--tall { grid-row: span 2; } .gallery__item--wide { grid-column: span 2; } /* --- CTA --- */ .cta { position: relative; padding: 120px 0; text-align: center; overflow: hidden; } .cta__bg { position: absolute; inset: 0; } .cta__bg img { width: 100%; height: 100%; object-fit: cover; } .cta__overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(118, 34, 11, 0.9) 0%, rgba(118, 34, 11, 0.75) 100% ); } .cta__content { position: relative; z-index: 1; } .cta__title { font-family: var(--font-title); font-size: clamp(36px, 5vw, 56px); color: var(--color-blanc); text-transform: uppercase; margin-bottom: 16px; } .cta__text { font-size: 18px; color: rgba(255, 255, 255, 0.8); max-width: 500px; margin: 0 auto 12px; } .cta .btn--large { margin-top: 28px; } /* --- CONTACT --- */ .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact__info p { font-size: 16px; color: var(--color-text-muted); margin-bottom: 32px; } .contact__details { margin-bottom: 24px; } .contact__item { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; padding: 12px 0; color: var(--color-marron); } .contact__item:hover { color: var(--color-marron-light); } .contact__item svg { flex-shrink: 0; } .contact__meta { margin-bottom: 24px; } .contact__meta p { font-size: 14px; color: var(--color-text-body); margin-bottom: 4px; } .contact__socials { display: flex; gap: 12px; margin-top: 24px; } .contact__social { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--color-gris); border-radius: 12px; color: var(--color-noir); transition: var(--transition); } .contact__social:hover { background: var(--color-marron); color: var(--color-blanc); transform: translateY(-4px); } .contact__social svg { width: 20px; height: 20px; } .contact__social--helloasso { width: auto; padding: 0 16px; font-size: 12px; font-weight: 700; } .contact__form { background: var(--color-gris); border-radius: 24px; padding: 48px; } .form__label { display: block; font-size: 14px; font-weight: 600; color: var(--color-noir); margin-bottom: 6px; } .form__group { margin-bottom: 20px; } .form__group input, .form__group select, .form__group textarea { width: 100%; padding: 16px 20px; border: 2px solid transparent; border-radius: 12px; font-family: var(--font-body); font-size: 15px; background: var(--color-blanc); color: var(--color-noir); transition: var(--transition); outline: none; } .form__group input:focus, .form__group select:focus, .form__group textarea:focus { border-color: var(--color-marron); } .form__group textarea { resize: vertical; } .form__group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } /* RGPD checkbox */ .form__group--checkbox { display: flex; align-items: flex-start; gap: 10px; } .form__group--checkbox input[type="checkbox"] { width: auto; margin-top: 3px; flex-shrink: 0; accent-color: var(--color-marron); } .form__label--checkbox { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; } .form__label--checkbox a { color: var(--color-marron); text-decoration: underline; } .form__label--checkbox a:hover { color: var(--color-marron-light); } /* Pot de miel anti-spam : jamais visible ni focusable. L'attribut hidden du HTML suffit normalement, cette règle est une sécurité au cas où un style le réafficherait. */ .form__honeypot { display: none; } /* --- BACK TO TOP --- */ .back-to-top { position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px; background: var(--color-marron); color: var(--color-blanc); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(16px); transition: var(--transition); z-index: 900; box-shadow: 0 4px 15px rgba(118, 34, 11, 0.3); } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--color-marron-light); transform: translateY(-2px); } /* --- FOOTER --- */ .footer { background-color: var(--color-noir); color: var(--color-blanc); padding: 80px 0 40px; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 64px; margin-bottom: 64px; } .footer__logo-icon { width: 56px; height: 56px; object-fit: contain; filter: brightness(0) invert(1); margin-bottom: 16px; } .footer__logo { font-family: var(--font-title); font-size: 24px; letter-spacing: 2px; display: block; margin-bottom: 8px; } .footer__tagline { font-size: 14px; color: var(--color-or); font-weight: 500; margin-bottom: 16px; } .footer__desc { font-size: 14px; color: rgba(255, 255, 255, 0.6); max-width: 320px; line-height: 1.7; } .footer__links h4 { font-family: var(--font-title); font-size: 16px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px; } .footer__links li { margin-bottom: 12px; } .footer__links a { font-size: 14px; color: rgba(255, 255, 255, 0.6); } .footer__links a:hover { color: var(--color-or); } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .footer__bottom p { font-size: 13px; color: rgba(255, 255, 255, 0.4); } .footer__legal { display: flex; gap: 24px; } .footer__legal a { font-size: 13px; color: rgba(255, 255, 255, 0.4); } .footer__legal a:hover { color: var(--color-or); } /* --- PAGES LÉGALES --- Styles des pages autonomes mentions-legales.html et politique-de-confidentialite.html : un bandeau simple, une colonne de lecture étroite (confort de lecture) et un pied de page sobre. Réutilise les variables et polices du site. */ /* Bandeau haut : logo + lien de retour, sur fond marron. */ .legal-header { background-color: var(--color-marron); padding: 16px 0; } .legal-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .legal-header__logo { display: flex; align-items: center; gap: 12px; color: var(--color-blanc); } .legal-header__logo-icon { width: 36px; height: 36px; object-fit: contain; filter: brightness(0) invert(1); /* logo rendu blanc sur le marron */ } .legal-header__logo span { font-family: var(--font-title); font-size: 18px; letter-spacing: 2px; } .legal-header__back { font-size: 14px; font-weight: 600; color: var(--color-blanc); flex-shrink: 0; } .legal-header__back:hover { color: var(--color-or); } /* Zone de lecture. min-height pousse le footer vers le bas même sur les pages courtes. */ .legal { padding: 64px 24px 96px; min-height: 70vh; } .legal__container { max-width: 760px; margin: 0 auto; } .legal__eyebrow { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--color-or); margin-bottom: 12px; } .legal__title { font-family: var(--font-title); font-size: clamp(32px, 5vw, 48px); text-transform: uppercase; line-height: 1.1; margin-bottom: 8px; } .legal__updated { font-size: 14px; color: var(--color-text-muted); margin-bottom: 40px; } .legal h2 { font-family: var(--font-title); font-size: clamp(22px, 3vw, 28px); text-transform: uppercase; color: var(--color-marron); margin: 40px 0 12px; } .legal h3 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; } .legal p, .legal li { font-size: 16px; color: var(--color-text-body); margin-bottom: 12px; } /* On restaure les puces (le reset global les retire) pour les listes du contenu légal. */ .legal ul { list-style: disc; padding-left: 24px; margin-bottom: 12px; } .legal a { color: var(--color-marron); text-decoration: underline; } .legal a:hover { color: var(--color-marron-light); } /* Surligne les champs à compléter par le propriétaire pour qu'aucun ne soit oublié avant la mise en ligne définitive. */ .legal__placeholder { background-color: #fff3c4; color: #6b4e00; padding: 1px 6px; border-radius: 4px; font-weight: 600; } /* Pied de page sobre, propre aux pages légales. */ .legal-footer { background-color: var(--color-noir); color: rgba(255, 255, 255, 0.6); padding: 40px 0; text-align: center; } .legal-footer p { font-size: 13px; margin-bottom: 8px; } .legal-footer a { color: rgba(255, 255, 255, 0.6); font-size: 13px; } .legal-footer a:hover { color: var(--color-or); } .legal-footer__links { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 8px; } /* --- 7. ANIMATIONS D'APPARITION --- Principe : les éléments .reveal démarrent invisibles et décalés (vers le bas, la gauche ou la droite). Quand ils entrent dans l'écran, script.js leur ajoute la classe .visible et la transition CSS les fait glisser à leur place. Le préfixe .js est une sécurité : script.js pose la classe "js" sur dès son chargement. Si le JavaScript ne charge pas (bloqué, en erreur…), ces règles ne s'appliquent pas et tout le contenu reste visible normalement. */ .js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .js .reveal.visible { opacity: 1; transform: translateY(0); } .js .reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .js .reveal-left.visible { opacity: 1; transform: translateX(0); } .js .reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .js .reveal-right.visible { opacity: 1; transform: translateX(0); } /* Effet cascade : dans les grilles, chaque carte part avec un léger retard sur la précédente au lieu d'apparaître toutes en même temps. */ .pillars__grid .pillar:nth-child(2) { transition-delay: 0.15s; } .pillars__grid .pillar:nth-child(3) { transition-delay: 0.3s; } .activities__grid .activity-card:nth-child(2) { transition-delay: 0.1s; } .activities__grid .activity-card:nth-child(3) { transition-delay: 0.2s; } .activities__grid .activity-card:nth-child(4) { transition-delay: 0.1s; } .activities__grid .activity-card:nth-child(5) { transition-delay: 0.2s; } .activities__grid .activity-card:nth-child(6) { transition-delay: 0.3s; } .impact__grid .impact__stat:nth-child(2) { transition-delay: 0.1s; } .impact__grid .impact__stat:nth-child(3) { transition-delay: 0.2s; } .impact__grid .impact__stat:nth-child(4) { transition-delay: 0.3s; } /* --- 8. RESPONSIVE --- Trois paliers, du plus large au plus étroit. Chaque palier hérite des précédents et n'écrase que ce qui doit changer. 1024px : tablette paysage — les grilles passent de 3-4 colonnes à 1-2. */ @media (max-width: 1024px) { :root { --section-padding: 80px; } .about__grid { gap: 48px; } .pillars__grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; } .pillar { display: grid; grid-template-columns: 200px 1fr; } .pillar__image { height: 100%; } .activities__grid { grid-template-columns: repeat(2, 1fr); } .activity-card--large { grid-column: span 2; } .impact__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } } /* 768px : mobile et tablette portrait — le menu horizontal devient un panneau coulissant, tout passe en 1 colonne. */ @media (max-width: 768px) { :root { --section-padding: 64px; --header-height: 64px; } /* Menu mobile : panneau caché à droite de l'écran (right: -100%), qui glisse en place quand script.js ajoute la classe .open. */ .nav__menu { position: fixed; top: 0; right: -100%; width: 80%; max-width: 360px; height: 100vh; height: 100dvh; /* hauteur réelle sur mobile (barre d'adresse iOS/Android) */ background: var(--color-ivory); flex-direction: column; align-items: flex-start; padding: 100px 40px 40px; gap: 0; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1); } .nav__menu.open { right: 0; } .nav__menu .nav__link { color: var(--color-noir); font-size: 18px; padding: 16px 0; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .nav__menu .nav__link--cta { margin-top: 16px; width: auto; border-bottom: none; color: var(--color-blanc); } .nav__toggle { display: flex; } .nav__toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav__toggle.active span:nth-child(2) { opacity: 0; } .nav__toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Hero mobile */ .hero__title { font-size: clamp(40px, 10vw, 64px); } .hero__description { font-size: 16px; } .hero__buttons { flex-direction: column; } .hero__buttons .btn { width: 100%; text-align: center; } .hero__scroll { display: none; } /* About mobile */ .about__grid { grid-template-columns: 1fr; gap: 40px; } .about__image-wrapper img { height: 350px; } .about__values { grid-template-columns: 1fr; } /* Pillars mobile */ .pillar { grid-template-columns: 1fr; } .pillar__image { height: 200px; } /* Activities mobile */ .activities__grid { grid-template-columns: 1fr; } .partners__grid { gap: 24px 32px; } .partner img { height: 40px; } .activity-card--large { grid-column: span 1; } /* Impact mobile */ .impact__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } /* Offers mobile */ .offers__grid { grid-template-columns: 1fr; max-width: 420px; } .offer-card { padding: 36px 28px; } /* Gallery mobile */ .gallery__masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } .gallery__item--tall { grid-row: span 1; } .gallery__item--wide { grid-column: span 1; } /* Contact mobile */ .contact__grid { grid-template-columns: 1fr; gap: 48px; } .contact__form { padding: 32px 24px; } /* Footer mobile */ .footer__grid { grid-template-columns: 1fr; gap: 40px; } .footer__bottom { flex-direction: column; gap: 8px; } .footer__legal { flex-wrap: wrap; justify-content: center; } } /* 480px : petit mobile — derniers ajustements. */ @media (max-width: 480px) { .impact__grid { grid-template-columns: 1fr; } /* La photo d'impact reprend sa hauteur naturelle : un recadrage de 400px de haut sur un écran étroit couperait les personnes situées sur les côtés. */ .impact__image { height: auto; } .gallery__masonry { grid-template-columns: 1fr; grid-auto-rows: 240px; } .back-to-top { bottom: 20px; right: 20px; } }