/* ---------------------------------- GLOBAL RESET & VARIABLES ---------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Couleurs principales */ --dark-bg: #0c1518; /* Fond sombre */ --gold: #b08040; /* Doré pour icônes et titres */ --cream: #ece3c9; /* Crème pour le texte */ --text: var(--cream); --bg: var(--dark-bg); /* Fond général */ --card-bg: #111111; /* Fond des blocs « carte » */ /* Polices */ --font-sans: 'Montserrat', Arial, sans-serif; --font-script: 'Dancing Script', cursive; /* Hauteur fixe des cartes (si besoin) */ --card-height: 380px; /* Variables pour champs (clair/sombre) */ --input-bg: #1a1a1a; /* fond des input / textarea en sombre */ --input-text: var(--cream); /* texte dans les champs en mode sombre */ } /* Quand on ajoute class="light-theme" au */ body.light-theme { --dark-bg: #f5f5f5; /* Fond clair */ --gold: #b08040; /* accent doré inchangé */ --cream: #333333; /* Texte sombre sur fond clair */ --text: #333333; --bg: #ffffff; /* Fond général clair */ --card-bg: #fafafa; /* Fond des cartes en clair */ --input-bg: #ffffff; /* fond champs en clair */ --input-text: #333333; /* texte dans champs en clair */ } body { background-color: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.6; } /* Images, liens et boutons de base */ img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } button { cursor: pointer; border: none; font-family: var(--font-sans); } /* ---------------------------------- HEADER / HERO ---------------------------------- */ .hero { position: relative; background-color: var(--bg); padding: 1.5rem 1rem 1rem; /* Espace pour nav et contenu */ } .header-top { max-width: 1000px; margin: 0 auto; padding: 0.5rem 0; display: flex; align-items: center; justify-content: flex-start; position: relative; } .header-top .logo { width: 120px; height: auto; } .main-nav { position: absolute; top: 0.5rem; right: 8rem; /* décale la nav à droite (libère de la place pour #themeToggle) */ background-color: transparent; z-index: 10; } .main-nav ul { list-style: none; display: flex; gap: 1.5rem; } .main-nav a { color: var(--cream); font-weight: 600; padding-bottom: 0.25rem; border-bottom: 2px solid transparent; transition: color 0.3s ease, border-bottom 0.3s ease; } .main-nav a:hover, .main-nav a.active { color: var(--gold); border-bottom: 2px solid var(--gold); } @media (max-width: 768px) { .main-nav { position: static; margin-top: 0.5rem; } .main-nav ul { flex-wrap: wrap; justify-content: center; gap: 1rem; } .main-nav a { font-size: 0.9rem; } } .hero-inner { max-width: 800px; margin: 1rem auto 0; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 2s ease-out, transform 2s ease-out; } .hero-inner.hero-visible { opacity: 1; transform: translateY(0); } .site-title { font-size: 2.5rem; font-weight: 800; letter-spacing: 2px; margin-bottom: 0.5rem; color: var(--gold); } /* Police manuscrite pour la tagline */ .tagline { font-family: var(--font-script); font-size: 2rem; margin-bottom: 2rem; line-height: 1.2; color: var(--cream); } /* ---------------------------------- BOUTONS GLOBAUX ---------------------------------- */ .btn-primary { display: inline-block; background-color: transparent; color: var(--gold); font-weight: 600; padding: 0.75rem 2rem; border: 2px solid var(--gold); border-radius: 4px; transition: background-color 0.3s ease, color 0.3s ease; text-align: center; } .btn-primary:hover { background-color: var(--gold); color: var(--dark-bg); } .btn-secondary { display: inline-block; background-color: transparent; color: var(--gold); font-weight: 600; padding: 0.5rem 1.5rem; border: 2px solid var(--gold); border-radius: 4px; font-size: 0.95rem; transition: background-color 0.3s ease, color 0.3s ease; text-align: center; margin-top: 1rem; width: max-content; } .btn-secondary:hover { background-color: var(--gold); color: var(--dark-bg); } /* ---------------------------------- SECTION « Qui sommes-nous ? » + SERVICES (index.html) ---------------------------------- */ .about-services { background-color: var(--bg); padding: 4rem 1rem; } .about-services-inner { max-width: 1000px; margin: 0 auto; text-align: center; } .about-services-heading { font-size: 2rem; font-weight: 800; color: var(--gold); margin-bottom: 3rem; } .about-services-intro { color: var(--cream); font-size: 1rem; line-height: 1.6; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } /* Conteneur des cartes */ .services-cards { display: flex; justify-content: center; align-items: stretch; gap: 2rem; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; padding: 0 1rem; } /* Chaque carte de service */ .service-card { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 0 300px; max-width: 300px; /* height: var(--card-height); */ /* on retire cette ligne */ background-color: var(--card-bg); border-radius: 8px; padding: 2rem 1.5rem; padding-bottom: 3rem; /* + espace en bas pour accueillir le bouton */ box-sizing: border-box; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Quand JS ajoute .visible, on affiche */ .service-card.visible { opacity: 1; transform: translateY(0); } /* Frame dorée autour de l’icône */ .icon-frame { width: 100px; height: 100px; border: 2px solid var(--gold); border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: transparent; margin-bottom: 1rem; } /* Icône centrée */ .service-icon { width: 50px; height: 50px; object-fit: contain; transition: transform 2s ease; } .service-card:hover .service-icon { transform: rotate(15deg); } /* Titre de la carte en or */ .service-title { font-size: 1.2rem; font-weight: 600; color: var(--gold); margin-bottom: 0.75rem; line-height: 1.2; /* pour limiter les sauts trop "bizarres" */ word-break: keep-all; /* évite des césures inopinées */ white-space: normal; /* autorise le saut de ligne au besoin */ word-wrap: break-word; /* coupe proprement si mot très long */ } /* Description de la carte */ .service-desc { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--cream); font-size: 0.95rem; line-height: 1.5; margin-top: 0.25rem; text-align: center; /* s’assurer que le texte explicatif est centré sous le titre */ } /* Réglages responsives pour les cartes */ @media (max-width: 900px) { .service-card { flex: 0 0 calc(45% - 1rem); max-width: calc(45% - 1rem); height: var(--card-height); } } @media (max-width: 600px) { .service-card { flex: 0 0 100%; max-width: 100%; height: auto; padding-bottom: 2rem; } } /* ============================== SECTION « Ils témoignent » ============================== */ :root { /* espace entre les cartes, en rem */ --testimonial-gap: 1rem; } .testimonials { background-color: var(--bg); padding: 4rem 1rem; } .testimonials-inner { max-width: 1000px; margin: 0 auto; text-align: center; } .testimonials-heading { font-size: 2rem; font-weight: 800; color: var(--gold); margin-bottom: 2rem; } /* Conteneur parent qui masque l’overflow */ .testimonials-container { position: relative; overflow: hidden; } /* Slider : display:flex, on vire tout gap natif, on gère l’espace via margin-right */ .testimonials-slider { display: flex; transition: transform 0.8s ease; } /* Chaque carte prendra une largeur définie par media queries, et aura une margin-right fixe */ .testimonial-card { box-sizing: border-box; padding: 2rem 1rem; margin-right: var(--testimonial-gap); background-color: var(--card-bg); border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); flex-direction: column; justify-content: space-between; /* Effet hover */ transition: transform 0.3s ease, box-shadow 0.3s ease; } /* On retire la marge à droite sur la dernière carte pour éviter un “trou” au bout */ .testimonial-card:last-child { margin-right: 0; } /* Texte justifié à l’intérieur */ .testimonial-text { color: var(--text); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; font-style: italic; text-align: justify; } /* Bloc author (photo + nom) */ .testimonial-author { display: flex; align-items: center; justify-content: center; gap: 0.75rem; } .author-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); } .author-name { color: var(--gold); font-weight: 600; font-size: 1rem; } /* Effet hover : léger agrandissement + ombre plus marquée */ .testimonial-card:hover { transform: scale(1.03); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); } /* ===== Scroll-Reveal générique (direction + délai) ===== */ .reveal { opacity: 0; transform: translateX(var(--r-x, 0)) translateY(var(--r-y, 20px)); transition: opacity var(--r-dur, .7s) var(--r-ease, cubic-bezier(.2,.7,.3,1)), transform var(--r-dur, .7s) var(--r-ease, cubic-bezier(.2,.7,.3,1)); will-change: transform, opacity; } /* devient visible */ .reveal.reveal-visible { opacity: 1; transform: translateX(0) translateY(0); } /* Variantes directionnelles (on change juste l’offset initial) */ .reveal-up { --r-x: 0; --r-y: 22px; } .reveal-left { --r-x: -22px; --r-y: 0; } .reveal-right { --r-x: 22px; --r-y: 0; } /* Respecte les préférences d’accessibilité */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------------------------------- SECTION CONTACT (utilisée partout) ---------------------------------- */ .contact { padding: 4rem 1rem; background-color: var(--bg); } .contact-inner { max-width: 1000px; margin: 0 auto; } .contact-heading { font-size: 2rem; font-weight: 800; text-align: center; margin: 0 0 2rem 0; color: var(--gold); } .contact-card { display: flex; flex-wrap: wrap; gap: 2rem; padding: 2rem; border-radius: 8px; background-color: var(--card-bg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); align-items: flex-start; } /* Bloc “Informations” */ .contact-info { flex: 1 1 300px; max-width: 400px; } .contact-info .info-title { margin: 0 0 1rem 0; font-size: 1.5rem; font-weight: 600; color: var(--gold); } .info-list { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; } .info-list li { display: flex; align-items: center; } .info-icon { font-size: 1.5rem; /* ~24px */ color: var(--gold); margin-right: 0.75rem; flex-shrink: 0; } .info-text { color: var(--cream); font-size: 0.95rem; line-height: 1.4; } .info-text a { color: var(--cream); text-decoration: none; } .info-text a:hover { text-decoration: underline; } /* ==== RESET ET ARRANGEMENT DU CONTENEUR CTA ==== */ .only-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; } /* ==== HAUTEUR & CENTRAGE COMMUNS AUX LIENS ==== */ .only-ctas a { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 1.5rem; text-decoration: none; white-space: nowrap; /* empêche le retour à la ligne */ font-weight: 600; border-radius: 4px; transition: background-color .3s, color .3s, border-color .3s; } /* ==== BOUTON WHATSAPP (vert) ==== */ .only-ctas .btn-whatsapp { background-color: #25d366; color: #ffffff; border: 2px solid #25d366; } .only-ctas .btn-whatsapp:hover { background-color: #1fa954; border-color: #1fa954; } /* ==== BOUTON GOOGLE AGENDA (doré) ==== */ .only-ctas .btn-secondary { background-color: transparent; color: var(--gold); border: 2px solid var(--gold); } .only-ctas .btn-secondary:hover { background-color: var(--gold); color: var(--dark-bg); } /* ==== BOUTON E-MAIL (crème) ==== */ .only-ctas .btn-tertiary { background-color: transparent; color: var(--cream); border: 2px solid var(--cream); } .only-ctas .btn-tertiary:hover { background-color: var(--cream); color: var(--dark-bg); } /* 1) Centre toute la carte de contact en colonne */ .contact-card { flex-direction: column; align-items: center; text-align: center; } /* 2) Centre les éléments “Informations” */ .contact-info { text-align: center; margin-bottom: 1rem !important; } /* 3) Aligne icône + texte de chaque ligne au centre */ .info-list { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .info-list li { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } /* 4) Fais tenir tous les boutons sur une seule ligne et centre-les */ /* Override final pour aligner parfaitement les 3 boutons */ .only-ctas { display: flex !important; flex-wrap: nowrap !important; /* empêche le retour à la ligne */ justify-content: center !important; /* centre horizontalement */ align-items: center !important; /* aligne verticalement */ gap: 1rem !important; margin-top: 1rem !important; width: 100%; } .only-ctas a { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 48px !important; /* uniformise la hauteur */ padding: 0 1.5rem !important;/* uniformise le padding */ margin-top: 0 !important; /* annule tout margin-top résiduel */ white-space: nowrap !important; line-height: normal !important; } /* -------------------------------------------- Scroll‐Reveal (fade & slide) – CSS classes -------------------------------------------- */ .reveal-hidden { opacity: 0; transform: translateY(40px); } .reveal-visible { opacity: 1; transform: translateY(0); transition: opacity 3s ease-out, transform 3s ease-out; } /* ---------------------------------- FOOTER ---------------------------------- */ .site-footer { padding: 2rem 1rem; text-align: center; background-color: var(--card-bg); } .footer-text { font-size: 0.9rem; color: var(--cream); opacity: 0.7; } /* -------------------------------------------- BOUTON “RETOUR EN HAUT” -------------------------------------------- */ #backToTop { position: fixed; right: 1.5rem; bottom: 1.5rem; background-color: var(--gold); color: var(--dark-bg); border: none; border-radius: 50%; width: 48px; height: 48px; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 2s ease, visibility 2s; cursor: pointer; } #backToTop.visible { opacity: 1; visibility: visible; } #backToTop:hover { background-color: #9e6e36; } /* -------------------------------------------- BOUTON THEME TOGGLE (en haut à droite) -------------------------------------------- */ #themeToggle { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--gold); font-size: 1.5rem; cursor: pointer; z-index: 1000; transition: transform 0.3s ease; } #themeToggle:hover { transform: scale(1.1); } @media (max-width: 768px) { #themeToggle { font-size: 1.25rem; top: 0.75rem; right: 0.75rem; } } /* -------------------------------------------- SURCHARGE : RÉDUCTION DE L’ESPACE AU-DESSUS DU H1 -------------------------------------------- */ .hero-inner { margin-top: 2rem !important; } /* ==================================================== RECENTRAGE DES SECTIONS DÉFINIES PAR .detail-service ==================================================== */ .detail-service .detail-inner { max-width: 1000px; margin: 0 auto; /* centre le conteneur principal */ padding: 0 1rem; /* un petit padding latéral */ text-align: center; /* centre tout le texte ici par défaut */ } /* Conteneur texte + image */ .detail-service .detail-content { display: flex; flex-direction: column; /* sur mobile : on empile */ align-items: center; /* centre les enfants horizontalement */ gap: 2rem; /* espace vertical entre blocs */ margin: 0 auto; } @media (min-width: 768px) { .detail-service .detail-content { flex-direction: row; /* sur tablettes et plus grand : deux colonnes */ justify-content: center; /* centre les colonnes dans le conteneur */ align-items: flex-start; /* aligne le haut de chaque colonne */ } } /* Bloc texte */ .detail-service .detail-text { /* Si vous voulez justifier à gauche pour la lecture, conservez : */ text-align: left; max-width: 600px; margin: 0 auto; /* centre le bloc texte dans son parent */ color: var(--text); font-size: 1rem; line-height: 1.6; } /* Bloc image */ .detail-service .detail-image { width: 100%; max-width: 350px; /* ou la largeur que vous souhaitez */ margin: 0 auto; /* centre l’image horizontalement */ } .detail-service .detail-image img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); } /* Ajoute un léger espacement sous le h2 des sections detail-service */ .detail-service .detail-heading { margin-bottom: 1.5rem; } /* ============================================ EFFET HOVER SUR LES CARTES “3 PÔLES” (Accueil) ============================================ */ .service-card { /* assure-toi d’avoir déjà un transition pour que l’effet soit fluide */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { /* décalage léger vers le haut */ transform: translateY(-8px); /* ombre plus marquée au survol */ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); /* optionnel : modifier légèrement le fond pour plus de contraste */ background-color: rgba(255, 255, 255, 0.05); } /* ====== Bandeau cookies ====== */ .cookie-banner { display: none; /* par défaut, on cache la bannière */ position: fixed; bottom: 0; left: 0; width: 100%; background-color: #111; color: #ece3c9; padding: 1rem; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); z-index: 2000; justify-content: center; align-items: center; } .cookie-banner__content { max-width: 1000px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; } .cookie-banner__content p { font-size: 0.9rem; line-height: 1.4; margin: 0; } .cookie-banner__content a { color: #b08040; /* surlignage doré */ text-decoration: underline; } .cookie-banner__buttons { display: flex; gap: 0.5rem; } .btn-cookie { background-color: var(--gold); color: var(--dark-bg); border: none; padding: 0.5rem 1rem; font-weight: 600; border-radius: 4px; cursor: pointer; } .btn-cookie:hover { background-color: #9e6e36; } .btn-cookie--alt { background-color: transparent; color: var(--gold); border: 2px solid var(--gold); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; } .btn-cookie--alt:hover { background-color: var(--gold); color: var(--dark-bg); } /* ====== Modale de réglages ====== */ .cookie-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 2100; } .cookie-modal.hidden { display: none; } .cookie-modal__content { background-color: var(--bg); padding: 2rem; border-radius: 8px; max-width: 500px; width: 90%; color: var(--text); } .cookie-modal__content h2 { margin-top: 0; color: var(--gold); } .cookie-category { margin-bottom: 1rem; } .cookie-category__desc { font-size: 0.85rem; margin: 0.25rem 0 0.5rem 1.5rem; color: var(--cream); } .cookie-modal__buttons { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; } /* ================================ PAGE “Politique de Cookies” ================================ */ .cookie-policy { background-color: var(--bg); color: var(--text); padding: 4rem 1rem; } .cookie-policy__inner { max-width: 800px; margin: 0 auto; } .cookie-policy__inner h2 { font-size: 1.75rem; font-weight: 600; color: var(--gold); margin-bottom: 0.75rem; } .cookie-policy__inner p, .cookie-policy__inner ul { margin-bottom: 1.5rem; line-height: 1.6; } .cookie-policy__inner ul { list-style: disc inside url("data:image/svg+xml,"); padding-left: 1rem; } .cookie-policy__inner ul li { margin-bottom: 0.75rem; } .cookie-policy__buttons { text-align: center; margin-top: 2rem; } .cookie-policy__buttons .btn-primary { padding: 0.75rem 2rem; font-size: 1rem; } /* ============================== SECTION DÉTAIL SERVICE “IDENTITÉ” ============================== */ /* Conteneur principal "detail-service" */ .detail-service { background-color: var(--bg); padding: 4rem 1rem; } .detail-service .detail-inner { max-width: 1000px; margin: 0 auto; padding: 0 1rem; } /* TITRE PRINCIPAL */ .detail-heading { font-size: 2rem; font-weight: 800; color: var(--gold); text-align: center; margin-bottom: 2rem; } /* BLOC INTRO (texte + image côte à côte sur desktop, empilé sur mobile) */ .detail-content.intro { display: flex; flex-direction: column; align-items: center; gap: 2rem; } @media (min-width: 768px) { .detail-content.intro { flex-direction: row; justify-content: space-between; } } /* Texte explicatif */ .detail-service .detail-text p { color: var(--text); font-size: 1rem; line-height: 1.6; text-align: center; } /* Image illustrative */ .detail-service .detail-image img { width: 100%; max-width: 450px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); } /* BLOC "section-block" pour chaque sous-partie (espacement vertical) */ .detail-content.section-block { margin-top: 3rem; flex-direction: column; gap: 1.5rem; } /* Sous-titres H3 */ .detail-service h3 { font-size: 1.5rem; font-weight: 700; color: var(--gold); margin-bottom: 1rem; text-align: left; } /* Listes globales */ .detail-service ul { list-style: disc inside; color: var(--cream); font-size: 0.95rem; line-height: 1.6; margin-left: 1rem; } /* Listes imbriquées (detailed-list) */ .detailed-list > li { margin-bottom: 1.5rem; } .detailed-list li ul { list-style: circle inside; margin-left: 1.5rem; margin-top: 0.5rem; } /* Témoignages inline */ .testimonials-inline { display: flex; flex-direction: column; gap: 1.5rem; } .testimonials-inline blockquote { font-style: italic; color: var(--cream); border-left: 4px solid var(--gold); padding-left: 1rem; } .testimonials-inline cite { display: block; margin-top: 0.5rem; font-weight: 600; color: var(--gold); text-align: right; } @media (min-width: 768px) { .testimonials-inline { flex-direction: row; } } /* BLOC "offer-block" pour chaque pack */ .offer-block { margin-bottom: 2rem; } .offer-block h4 { font-size: 1.25rem; font-weight: 600; color: var(--gold); margin-bottom: 0.5rem; } .offer-block ul { list-style: circle inside; margin-left: 1rem; } /* Bloc FAQ */ .faq-block h4 { font-size: 1.1rem; font-weight: 600; color: var(--gold); margin-top: 1rem; } .faq-block p { color: var(--text); font-size: 0.95rem; line-height: 1.6; margin-top: 0.5rem; } /* Appel à l’action final (cta-block) */ .cta-block { text-align: center; margin-top: 3rem; } .cta-block h3 { font-size: 1.75rem; font-weight: 800; color: var(--gold); margin-bottom: 1rem; } .cta-block p { font-size: 1rem; color: var(--cream); margin-bottom: 1.5rem; } .cta-button { background-color: var(--gold); color: var(--dark-bg); font-weight: 600; padding: 1rem 2.5rem; border-radius: 4px; transition: background-color 0.3s ease, transform 0.3s ease; display: inline-block; font-size: 1.1rem; } .cta-button:hover { background-color: #9e6e36; transform: translateY(-3px); } /* =============================== RÉGLAGES RESPONSIVES GLOBAUX =============================== */ @media (max-width: 767px) { /* Ajustements taille de police pour plus de lisibilité sur mobile */ .detail-service .detail-inner { padding: 0 0.5rem; } .detail-heading { font-size: 1.75rem; } .detail-service h3 { font-size: 1.3rem; } .detail-service ul { font-size: 0.9rem; } } /* ============================== SECTION DÉTAIL SERVICE “IDENTITÉ” ============================== */ /* Conteneur principal "detail-service" */ .detail-service { background-color: var(--bg); padding: 4rem 1rem; } .detail-service .detail-inner { max-width: 1000px; margin: 0 auto; padding: 0 1rem; } /* TITRE PRINCIPAL */ .detail-heading { font-size: 2rem; font-weight: 800; color: var(--gold); text-align: center; margin-bottom: 2rem; } /* BLOC INTRO (texte + image côte à côte sur desktop, empilé sur mobile) */ .detail-content.intro { display: flex; flex-direction: column; align-items: center; gap: 2rem; } @media (min-width: 768px) { .detail-content.intro { flex-direction: row; justify-content: space-between; } } /* Texte explicatif */ .detail-service .detail-text p { color: var(--text); font-size: 1rem; line-height: 1.6; text-align: center; } /* Image illustrative */ .detail-service .detail-image img { width: 100%; max-width: 450px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); } /* BLOC "section-block" pour chaque sous-partie (espacement vertical) */ .detail-content.section-block { margin-top: 3rem; flex-direction: column; gap: 1.5rem; } /* Sous-titres H3 */ .detail-service h3 { font-size: 1.5rem; font-weight: 700; color: var(--gold); margin-bottom: 1rem; text-align: left; } /* Listes globales */ .detail-service ul { list-style: disc inside; color: var(--cream); font-size: 0.95rem; line-height: 1.6; margin-left: 1rem; } /* Listes imbriquées (detailed-list) */ .detailed-list > li { margin-bottom: 1.5rem; } .detailed-list li ul { list-style: circle inside; margin-left: 1.5rem; margin-top: 0.5rem; } /* Témoignages inline */ .testimonials-inline { display: flex; flex-direction: column; gap: 1.5rem; } .testimonials-inline blockquote { font-style: italic; color: var(--cream); border-left: 4px solid var(--gold); padding-left: 1rem; } .testimonials-inline cite { display: block; margin-top: 0.5rem; font-weight: 600; color: var(--gold); text-align: right; } @media (min-width: 768px) { .testimonials-inline { flex-direction: row; } } /* BLOC "offer-block" pour chaque pack */ .offer-block { margin-bottom: 2rem; } .offer-block h4 { font-size: 1.25rem; font-weight: 600; color: var(--gold); margin-bottom: 0.5rem; } .offer-block ul { list-style: circle inside; margin-left: 1rem; } /* Bloc FAQ */ .faq-block h4 { font-size: 1.1rem; font-weight: 600; color: var(--gold); margin-top: 1rem; } .faq-block p { color: var(--text); font-size: 0.95rem; line-height: 1.6; margin-top: 0.5rem; } /* Appel à l’action final (cta-block) */ .cta-block { text-align: center; margin-top: 3rem; } .cta-block h3 { font-size: 1.75rem; font-weight: 800; color: var(--gold); margin-bottom: 1rem; } .cta-block p { font-size: 1rem; color: var(--cream); margin-bottom: 1.5rem; } .cta-button { background-color: var(--gold); color: var(--dark-bg); font-weight: 600; padding: 1rem 2.5rem; border-radius: 4px; transition: background-color 0.3s ease, transform 0.3s ease; display: inline-block; font-size: 1.1rem; } .cta-button:hover { background-color: #9e6e36; transform: translateY(-3px); } /* =============================== RÉGLAGES RESPONSIVES GLOBAUX =============================== */ @media (max-width: 767px) { /* Ajustements taille de police pour plus de lisibilité sur mobile */ .detail-service .detail-inner { padding: 0 0.5rem; } .detail-heading { font-size: 1.75rem; } .detail-service h3 { font-size: 1.3rem; } .detail-service ul { font-size: 0.9rem; } } /* ========================================= SECTION “NOTRE APPROCHE PAS À PAS” – CARROUSEL (à placer en fin de styles.css) ========================================= */ /* 1. Conteneur global du carrousel */ .approach-carousel-container { position: relative; margin-top: 2rem; /* Hauteur auto, le contenu adaptera sa hauteur */ padding: 0 8rem; /* <–– on crée 2rem d’espace à gauche et à droite pour les flèches */ } /* 2. Piste (track) défilable horizontalement */ .approach-carousel-track { display: flex; gap: 1.5rem; /* espace de 24px entre chacune */ overflow-x: auto; /* autorise le scroll horizontal */ scroll-behavior: smooth; /* défilement fluide */ padding: 1rem 0rem; /* marge latérale pour ne pas couper la 1re/dernière carte */ scroll-snap-type: x mandatory; /* activation du scroll-snap */ } /* 3. Masquage de la barre de scroll native */ .approach-carousel-track::-webkit-scrollbar { display: none; } .approach-carousel-track { -ms-overflow-style: none; /* IE & Edge */ scrollbar-width: none; /* Firefox */ } /* 4. Style de chaque carte d’étape (largeur fixe à 300px) */ .approach-card { flex: 0 0 300px; /* carte fixe de 300px de large */ max-width: 300px; background-color: var(--card-bg); border-radius: 8px; padding: 2rem 1.5rem; box-sizing: border-box; scroll-snap-align: start; /* on colle chaque carte au bord gauche au snap */ transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; /* TOUT le texte (titre + puces) centré */ } /* 5. Effet hover identique aux autres cartes */ .approach-card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); background-color: rgba(255, 255, 255, 0.05); } /* 6. Titre de chaque étape (h4) */ .approach-title { font-size: 1.2rem; font-weight: 600; color: var(--gold); margin-bottom: 1rem; line-height: 1.3; } /* 7. Liste interne dans la carte */ .approach-list { list-style: disc inside; color: var(--cream); font-size: 0.95rem; line-height: 1.5; padding-left: 1rem; /* pour avoir un léger retrait intérieur */ text-align: left; /* puces alignées à gauche, mais centrées horizontalement dans la carte */ } .approach-list li { margin-bottom: 0.75rem; } /* 8. Boutons flèches « Précédent » et « Suivant » */ .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.7); border: none; color: var(--cream); font-size: 2rem; width: 2.5rem; height: 2.5rem; border: none; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .carousel-arrow:hover { background-color: rgba(0, 0, 0, 0.9); } /* 9. Positionnement des flèches */ .prev-arrow { left: 0.5rem; /* légèrement à l’intérieur du padding */ } .next-arrow { right: 0.5rem; /* légèrement à l’intérieur du padding */ } /* 10. Responsivité – écrans moyens (≤ 900px) */ @media (max-width: 900px) { /* Les cartes gardent 300px de large, l’utilisateur scrollera horizontalement */ .carousel-arrow { font-size: 1.8rem; width: 2.2rem; height: 2.2rem; } .prev-arrow { left: 0.3rem; } .next-arrow { right: 0.3rem; } } /* 11. Responsivité – mobile (≤ 600px) */ @media (max-width: 600px) { .approach-card { flex: 0 0 260px; /* on réduit légèrement la largeur pour plus de marge de scroll */ max-width: 260px; } .carousel-arrow { font-size: 1.5rem; width: 2rem; height: 2rem; } .prev-arrow { left: 0.2rem; } .next-arrow { right: 0.2rem; } } /* 12. Petit écart sous le titre H3 de la section */ .detail-content.section-block > h3 { margin-bottom: 1rem; } /* ============================================== CENTRAGE + JUSTIFICATION POUR LES BLOCS “DETAIL-CONTENT” (à placer juste avant la fin de votre fichier styles.css) ============================================== */ /* 1. Pour chaque bloc “detail-content.section-block”, on centre le contenu */ .detail-content.section-block { display: flex; flex-direction: column; align-items: center; /* centre horizontalement chaque sous-bloc */ margin: 3rem auto; /* espace vertical + centrage global */ padding: 0 1rem; /* un léger padding latéral */ box-sizing: border-box; } /* 2. Limiter la largeur “texte” à 700px, centrer et justifier */ .detail-content.section-block .detail-text, .detail-content.section-block .faq-block, .detail-content.section-block .cta-block, .detail-content.section-block .offers-packs-cards, .detail-content.section-block .testimonials-inline { width: 100%; max-width: 700px; /* largeur maxi pour rester lisible */ margin: 0 auto; /* centre la zone de texte */ text-align: justify; /* justifie le contenu textuel à l’intérieur */ } /* 3. Les titres H3 (et H4 dans la FAQ) restent centrés */ .detail-content.section-block h3, .detail-content.section-block h4 { width: 100%; max-width: 700px; /* même largeur que le texte */ margin: 0 auto 1rem; text-align: center; /* titre centré */ color: var(--gold); } /* 4. S’assurer que les listes à puces (hors carrousel) sont justifiées */ .detail-content.section-block ul { list-style: disc inside; margin: 0 auto 1rem; padding-left: 1rem; max-width: 700px; text-align: justify; color: var(--cream); line-height: 1.6; } /* 5. Pour les témoignages “inline” : côté à côte sur desktop, centrés en mobile */ .detail-content.section-block .testimonials-inline { display: flex; flex-direction: column; gap: 1.5rem; margin: 0 auto; } @media (min-width: 768px) { .detail-content.section-block .testimonials-inline { flex-direction: row; justify-content: center; } } /* 6. Le formulaire de contact (à la fin) : centré et justifié */ .detail-content.section-block .contact-form { width: 100%; max-width: 700px; margin: 0 auto; text-align: justify; } /* 7. Ajustements pour les champs du formulaire : titre > centré, labels > justifiés */ .detail-content.section-block .contact-form .info-title { text-align: center; width: 100%; margin-bottom: 1.5rem; } .detail-content.section-block .contact-form label { display: block; text-align: left; /* labels alignés à gauche pour une meilleure lisibilité */ margin-bottom: 0.5rem; } /* 8. Si vous avez un bloc “Ce que vous obtenez” (liste) : limiter sa largeur et justifier */ .detail-content.section-block:nth-of-type(3) ul { /* 3e bloc, par exemple */ max-width: 700px; margin: 0 auto; text-align: justify; } /* 9. Le bloc “Appel à l’action” : centré */ .detail-content.section-block .cta-block { text-align: center; /* on centrer le texte et le bouton */ max-width: 700px; margin: 0 auto; } .detail-content.section-block .cta-block p { text-align: justify; margin-bottom: 1.5rem; } .detail-content.section-block .cta-block .cta-button { display: inline-block; } /* 10. Pour le bloc FAQ rapide (textes + citations) : centré et justifié */ .detail-content.section-block .faq-block { width: 100%; max-width: 700px; margin: 0 auto; text-align: justify; } .detail-content.section-block .faq-block h4 { margin-top: 1rem; text-align: center; font-weight: 600; color: var(--gold); } .detail-content.section-block .faq-block p { margin-top: 0.5rem; } /* 11. Si jamais certains paragraphes sont très courts, forcer une “justification minimale” */ .detail-content.section-block p { text-align: justify; margin-bottom: 1rem; } /* … tout le reste de votre CSS … */ /* ============================================ OFFRES & PACKS – CAROUSEL HORIZONTAL (définitions uniques) ============================================ */ .offres-packs-section .offers-carousel { position: relative; max-width: 1000px; margin: 2rem auto; padding: 0; /* plus de 50px ici */ overflow: visible; /* pour que les flèches puissent dépasser */ box-sizing: border-box; } .offres-packs-section h3 { font-size: 1.75rem; font-weight: 700; color: var(--gold); margin-bottom: 1.5rem; } .offres-packs-section .offers-carousel { position: relative; max-width: 1000px; margin: 2rem auto; padding: 0 50px; box-sizing: border-box; } .offres-packs-section .offers-packs-wrapper { overflow: hidden; margin: 0; width: 100%; box-sizing: border-box; } .offres-packs-section .offers-packs-cards { display: flex; flex-wrap: nowrap; gap: 2rem; /* espace fixe entre cartes */ align-items: stretch; transition: transform 0.5s ease; will-change: transform; } .offres-packs-section .offer-card { flex: 0 0 100%; max-width: 100%; background-color: var(--card-bg); border-radius: 8px; padding: 2rem 1.5rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s ease, box-shadow 0.3s ease; } .offres-packs-section .offer-card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); background-color: rgba(255, 255, 255, 0.05); } .offres-packs-section .offer-title { font-size: 1.2rem; font-weight: 600; color: var(--gold); margin-bottom: 1rem; text-align: center; line-height: 1.3; } .offres-packs-section .offer-list { list-style: disc inside; color: var(--cream); font-size: 0.95rem; line-height: 1.5; padding-left: 1rem; margin-bottom: 1.5rem; } .offres-packs-section .offer-list li { margin-bottom: 0.75rem; } .offres-packs-section .offer-cta { display: inline-block; background-color: var(--gold); color: var(--dark-bg); font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 4px; text-align: center; transition: background-color 0.3s ease, transform 0.3s ease; } .offres-packs-section .offer-cta:hover { background-color: #9e6e36; transform: translateY(-2px); } .offres-packs-section .offers-prev, .offres-packs-section .offers-next { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.7); color: var(--cream); border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s ease; z-index: 10; } .offres-packs-section .offers-prev { left: 0; } .offres-packs-section .offers-next { right: 0; } .offres-packs-section .offers-prev:hover, .offres-packs-section .offers-next:hover { background-color: rgba(0, 0, 0, 0.9); } @media (min-width: 1200px) { .approach-card { /* On veut que 3 cartes + 2 gaps tiennent exactement dans 100% de la largeur du track. Il y a 2 gaps de 1.5rem chacun → total “gaps” = 2 × 1.5rem. Reste (100% – 2 × 1.5rem) à se partager en 3 cartes identiques. */ flex: 0 0 calc((100% - 2 * 1.5rem) / 3) !important; max-width: calc((100% - 2 * 1.5rem) / 3) !important; } } /* =================================================================== CARROUSEL “OFFRES & PACKS” : 2 cartes pleines côte-à-côte à ≥1200px =================================================================== */ @media (min-width: 1200px) { .offres-packs-section .offer-card { /* Passer à 2 cartes : chaque carte fait (100% - 2rem) / 2 - Il y a un seul espace (gap) de 2rem entre elles. - On force !important pour écraser le flex déjà appliqué. */ flex: 0 0 calc((100% - 2rem) / 2) !important; max-width: calc((100% - 2rem) / 2) !important; } } @media (max-width: 900px) { .offres-packs-section .offer-card { flex: 0 0 calc((100% - 2rem) / 2); max-width: calc((100% - 2rem) / 2); } .offres-packs-section .offers-prev { left: 10px; } .offres-packs-section .offers-next { right: 10px; } } @media (max-width: 600px) { .offres-packs-section .offer-card { flex: 0 0 100%; max-width: 100%; } .offres-packs-section .offers-prev, .offres-packs-section .offers-next { display: none; } } /* Conteneur général des cartes */ /* 1. Conteneur flex pour les 4 cartes */ .immo-services { display: flex; justify-content: center; /* centre les cartes horizontalement dans la section */ align-items: stretch; /* aligne toutes les cartes avec la même hauteur si possible */ gap: 2rem; /* espace de 2rem entre chaque carte */ flex-wrap: wrap; /* si l’écran est trop petit, on passe à la ligne suivante */ margin: 0 auto; /* centre le conteneur au besoin */ padding: 0 1rem; /* léger padding latéral sur mobile/tablette */ max-width: 1000px; /* limite la largeur totale du conteneur si désiré */ } /* 2. Chaque carte */ .immo-card { flex: 1 1 calc(25% - 2rem); /* 4 cartes côte à côte avec gap de 2rem → (100% - 3×2rem)/4 arrondi */ max-width: calc(25% - 2rem); background-color: var(--card-bg); border-radius: 8px; box-sizing: border-box; padding: 2rem 1.5rem; /* espace interne */ text-align: center; /* centre le contenu dans la carte */ display: flex; flex-direction: column; /* organise les enfants en colonne */ justify-content: flex-start; /* on peut ajuster en center si vous voulez centrer verticalement */ align-items: center; /* centre horizontalement tous les contenus */ /* facultatif : ombre et transition si vous voulez un effet hover similaire aux autres pages */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .immo-card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); background-color: rgba(255, 255, 255, 0.05); } /* 3. Icône : on s’assure qu’elle ne déborde pas */ .immo-card .icon-frame { width: 80px; /* on peut ajuster la taille du cadre autour de l’icône */ height: 80px; border: 2px solid var(--gold); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .immo-card .service-icon { width: 50px; height: 50px; object-fit: contain; color: var(--gold); } /* 4. Titres et descriptions : on garantit une mise en forme cohérente */ .immo-card .service-title { font-size: 1.1rem; font-weight: 600; color: var(--gold); margin-bottom: 0.75rem; line-height: 1.3; } .immo-card .service-desc { color: var(--cream); font-size: 0.95rem; line-height: 1.5; text-align: center; /* on centre le texte */ flex-grow: 1; /* occupe l’espace restant si besoin */ } /* 5. Responsivité */ @media (max-width: 1024px) { /* 3 cartes sur grands écrans réduits */ .immo-card { flex: 1 1 calc((100% - 2rem) / 3); max-width: calc((100% - 2rem) / 3); } } @media (max-width: 768px) { /* 2 cartes côte à côte sur tablette */ .immo-card { flex: 1 1 calc((100% - 2rem) / 2); max-width: calc((100% - 2rem) / 2); } } @media (max-width: 480px) { /* 1 carte pleine largeur sur mobile */ .immo-card { flex: 1 1 100%; max-width: 100%; } } /* ======================================================= CSS SPÉCIFIQUE À LA PAGE gestion.html (classes à ajouter) ======================================================= */ /* 1. Réduction des espacements uniquement sur gestion.html */ .page-gestion h2.detail-heading { margin-top: 1.25rem; /* au lieu de 2rem/3rem */ margin-bottom: 0.75rem; /* au lieu de 1.5rem/2rem */ } .page-gestion h3 { margin-top: 1rem; /* au lieu de 1.5rem */ margin-bottom: 0.5rem; /* au lieu de 1rem */ } .page-gestion .detail-service { margin-top: 1rem; /* espacement vertical réduit */ margin-bottom: 1rem; } .page-gestion .detail-service:first-of-type { margin-top: 1rem; } .page-gestion .detail-service + .detail-service { margin-top: 1rem !important; } .page-gestion .detail-service + .contact { margin-top: 1rem !important; } .page-gestion .contact { padding-top: 1.5rem; /* au lieu de 4rem */ padding-bottom: 1.5rem; } .page-gestion .site-footer { padding-top: 1rem; /* au lieu de 2rem */ padding-bottom: 1rem; } .page-gestion .hero-inner { margin-bottom: 1rem !important; /* réduire l’espace sous le hero */ } .page-gestion .hero + .subnav { margin-top: 0.5rem !important; } /* 2. Style du sommaire d’ancre (subnav) – visible juste sous le hero */ .subnav { max-width: 1000px; margin: 1rem auto; text-align: center; } .subnav ul { list-style: none; display: inline-flex; gap: 1rem; } .subnav a { color: var(--cream); font-weight: 600; padding: 0.25rem 0.5rem; border-bottom: 2px solid transparent; transition: color 0.3s ease, border-bottom 0.3s ease; } .subnav a:hover, .subnav a:focus { color: var(--gold); border-bottom: 2px solid var(--gold); } /* 3. Mini-accordéon pour la section “démarche pas à pas” */ .mini-accordion-toggle { margin-top: 0.5rem; font-size: 0.9rem; background: none; border: none; color: var(--gold); cursor: pointer; text-decoration: underline; } .mini-accordion-toggle:hover { color: var(--cream); } .mini-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, margin-top 0.3s ease; margin-top: 0; padding-left: 1rem; /* légère indentation pour la sous-liste */ } .mini-accordion-content.open { max-height: 500px; /* assez grand pour contenir la liste complète */ margin-top: 0.5rem; } /* 4. Classes utilitaires pour réduire les marges dans detail-content */ .page-gestion .detail-content p { margin-top: 0.75rem; margin-bottom: 0.75rem; } .page-gestion .detail-content ul { margin-top: 0.5rem; margin-bottom: 0.5rem; padding-left: 1rem; } .page-gestion .detail-content li { margin-bottom: 0.5rem; } /* ========================================== Centrage du bouton “Voir toutes les étapes” ========================================== */ /* 1) On transforme le lien en élément de type block 2) On centre ce bloc via margin auto */ .page-gestion .mini-accordion-toggle { display: block; width: max-content; /* largeur ajustée au contenu du lien */ margin: 0.75rem auto; /* 0.75rem (haut) et en bas, centré horizontalement */ text-align: center; /* s’assure que le texte interne reste centré */ } /* ================================================= r4consulting – Recrutement → Grille de cartes ================================================= */ /* 1) Conteneur global : grid responsive */ .jobs-grid { display: grid; gap: 1.5rem; /* Sur desktop, 3 colonnes ; tablette 2 ; mobile 1 */ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 0 auto; max-width: 1000px; padding: 0 1rem; } /* 2) Chaque carte d’offre */ .job-card { background-color: var(--card-bg); border-radius: 8px; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* 3) Effet hover sur la carte */ .job-card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); background-color: rgba(255, 255, 255, 0.05); } /* 4) Titre de l’offre */ .job-title { font-size: 1.25rem; font-weight: 600; color: var(--gold); margin-bottom: 0.75rem; line-height: 1.3; } /* 5) Localisation / secteur */ .job-location { color: var(--cream); font-size: 0.95rem; font-style: italic; margin-bottom: 0.75rem; } /* 6) Liste à puces des missions / détails */ .job-details { list-style: disc inside; color: var(--cream); font-size: 0.95rem; line-height: 1.5; margin: 0 0 1rem 0; padding-left: 1rem; } .job-details li { margin-bottom: 0.5rem; } /* 7) Bouton “Postuler” dans la carte */ .job-card .btn-primary { align-self: start; /* le bouton reste en bas à gauche de la carte */ margin-top: auto; } /* 8) Si vous souhaitez un lien plus discret sur hover */ .job-card .btn-primary:hover { background-color: var(--gold); color: var(--dark-bg); } /* 9) Texte incitatif sous la grille (CTA global) */ .detail-service .cta-text { margin-top: 2rem; font-style: italic; color: var(--cream); text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.5; } /* 10) Ajustements responsive pour .detail-heading */ body.recrutement h2.detail-heading { margin-top: 1.25rem; margin-bottom: 0.75rem; } /* 11) Ajustements responsive pour la zone .detail-service */ body.recrutement .detail-service { margin-top: 1rem; margin-bottom: 1rem; } body.recrutement .detail-service:first-of-type { margin-top: 1rem; } /* (facultatif) Ajustements de marge pour .detail-inner */ .detail-service .detail-inner { padding: 0 1rem; } /* ================================================= SECTION “Recrutement” → CARROUSEL DE CARTES D’OFFRES ================================================= */ /* 1) Conteneur global du carrousel */ .jobs-carousel-container { position: relative; margin: 2rem auto; max-width: 1000px; padding: 0 2rem; /* espace pour les flèches */ box-sizing: border-box; } /* 2) Piste défilable horizontalement */ .jobs-carousel-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 1rem; /* juste un peu d’air au bas pour ne pas couper la carte */ scroll-snap-type: x mandatory; } /* 3) Masquage de la barre de défilement */ .jobs-carousel-track::-webkit-scrollbar { display: none; } .jobs-carousel-track { -ms-overflow-style: none; /* IE & Edge */ scrollbar-width: none; /* Firefox */ } /* 4) Chaque carte : width fixe + scroll-snap-align */ .job-card { flex: 0 0 280px; /* largeur fixe d’environ 280px */ max-width: 280px; background-color: var(--card-bg); border-radius: 8px; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: space-between; text-align: center; /* CONTENU CENTRÉ */ scroll-snap-align: start; /* chaque carte “snap” en début du conteneur */ transition: transform 0.3s ease, box-shadow 0.3s ease; } /* 5) Effet hover sur la carte */ .job-card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); background-color: rgba(255, 255, 255, 0.05); } /* 6) Titre de l’offre */ .job-title { font-size: 1.25rem; font-weight: 600; color: var(--gold); margin-bottom: 0.5rem; line-height: 1.3; } /* 7) Localisation / secteur */ .job-location { color: var(--cream); font-size: 0.95rem; font-style: italic; margin-bottom: 1rem; } /* 8) Liste à puces des missions / détails */ .job-details { list-style: disc inside; color: var(--cream); font-size: 0.95rem; line-height: 1.5; margin: 0 0 1rem 0; padding-left: 1rem; text-align: left; /* on garde les puces alignées à gauche à l’intérieur de la carte */ } /* 9) On centre les li individuellement si besoin */ .job-details li { margin-bottom: 0.5rem; } /* 10) Bouton “Postuler” dans la carte */ .job-card .btn-primary { align-self: center; margin-top: auto; } /* 11) Style des flèches */ .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.7); color: var(--cream); width: 2.5rem; height: 2.5rem; border: none; border-radius: 50%; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: background-color 0.3s ease; } .carousel-arrow:hover { background-color: rgba(0, 0, 0, 0.9); } .prev-arrow { left: 0.5rem; } .next-arrow { right: 0.5rem; } /* 12) CTA sous le carrousel */ .detail-service .cta-text { margin-top: 2rem; font-style: italic; color: var(--cream); text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.5; } /* 13) Ajustements responsive : s’assurer que le carrousel garde son ratio */ @media (max-width: 900px) { .job-card { flex: 0 0 240px; max-width: 240px; } .carousel-arrow { display: none; /* on cache les flèches sur mobile, on swipera à la main */ } } @media (max-width: 600px) { .job-card { flex: 0 0 80%; max-width: 80%; margin-left: 10%; /* on centre légèrement la carte sur mobile */ margin-right: 10%; } } .job-title { text-align: center; } /* ------------------------------------------- FIN DES STYLES CARROUSEL D’OFFRES – RECRUTEMENT ------------------------------------------- */ /* ==== SECTION BLOG ==== */ .blog { background-color: var(--bg); padding: 4rem 1rem; } .blog-inner { max-width: 1000px; margin: 0 auto; text-align: center; } .blog-heading { font-size: 2rem; font-weight: 800; color: var(--gold); margin-bottom: 2rem; } /* Conteneur des posts */ .blog-list { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } /* Chaque article */ .blog-post { background-color: var(--card-bg); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.5); display: flex; flex-direction: column; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-post:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0,0,0,0.6); } /* Image de l’article */ .blog-image { width: 100%; height: 180px; object-fit: cover; } /* Contenu texte */ .blog-content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .post-title { font-size: 1.25rem; font-weight: 600; color: var(--cream); margin-bottom: 0.75rem; } .post-title a { color: var(--cream); text-decoration: none; } .post-title a:hover { color: var(--gold); text-decoration: underline; } /* Extrait */ .post-excerpt { color: var(--cream); font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.5rem; } /* Lire la suite */ .read-more { margin-top: auto; align-self: flex-start; font-weight: 600; color: var(--gold); text-decoration: none; transition: color 0.3s ease; } .read-more:hover { color: var(--cream); } /* Pagination */ .blog-pagination { margin-top: 2.5rem; display: flex; justify-content: center; gap: 1rem; } .blog-pagination .btn-secondary { padding: 0.5rem 1.5rem; font-size: 0.95rem; } /* Styles du bouton hamburger */ .hamburger { display: none; /* visible uniquement sur petits écrans */ flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: none; border: none; padding: 0; margin-left: auto; cursor: pointer; z-index: 1100; } .hamburger span { display: block; height: 2px; background: var(--cream); border-radius: 1px; transition: transform 0.3s, opacity 0.3s; } /* État « ouvert » du menu : on transformera la croix */ body.nav-open .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } body.nav-open .hamburger span:nth-child(2) { opacity: 0; } body.nav-open .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Style de base */ .mini-accordion { margin-top: .75rem auto; font-size: .95rem; color: var(--gold); width: max-content; } .mini-accordion summary { list-style: none; cursor: pointer; position: relative; padding-right: 1.5rem; } /* On retire le triangle par défaut */ .mini-accordion summary::-webkit-details-marker { display: none; } /* On ajoute une flèche + rotation */ .mini-accordion summary::after { content: "▸"; position: absolute; right: 0; top: 0; transition: transform .2s ease; } /* Lorsque c’est ouvert, on fait pivoter la flèche */ .mini-accordion[open] summary::after { transform: rotate(90deg); } .mini-accordion ul { max-height: 0; overflow: hidden; margin-top: 0.5rem; padding-left: 1rem; list-style: disc inside; color: var(--cream); line-height: 1.5; transition: max-height 0.3s ease; } /* on cache et on prépare la transition */ .mini-accordion ul { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } /* lorsqu’on a l’attribut [open], on laisse l’UL monter */ .mini-accordion[open] ul { /* valeur temporaire, remplacée en JS */ max-height: 500px; } /* make the Google Agenda link match the WhatsApp button’s height & centering */ .contact-actions a.btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: 48px; /* same as your WhatsApp button */ padding: 0 1.5rem; /* keep your existing horizontal padding */ } .contact-actions a.btn-whatsapp, .contact-actions a.btn-secondary { display: inline-flex; align-items: center; } /* ────────────────────────────────────────────── “Notre approche” passe en grille en responsive ────────────────────────────────────────────── */ @media (max-width: 992px) { .approach-carousel-container { padding: 0; margin: 2rem auto; } /* On transforme le track en grille et on supprime le scroll horizontal */ .approach-carousel-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; overflow: visible !important; scroll-snap-type: none !important; padding: 0; } /* On désactive les flèches */ .approach-carousel-container .carousel-arrow { display: none; } /* Les cards prennent toute la largeur de leur cellule */ .approach-card { flex: none !important; max-width: none !important; } } /* Responsive ≤768px : cachons la nav normale, activons le hamburger */ @media (max-width: 768px) { .hamburger { display: flex; } .main-nav { position: fixed; top: 0; right: 0; width: 100%; max-width: none; height: 100%; background: var(--bg); transform: translateX(100%); transition: transform 0.3s ease; padding-top: 4rem; z-index: 1000; } /* Quand le body porte .nav-open, on affiche la nav */ body.nav-open .main-nav { transform: translateX(0); } /* Menu vertical, centré */ .main-nav ul { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .main-nav a { font-size: 1.2rem; } .header-top { display: flex !important; flex-direction: column; align-items: center; } /* Pour que le nav ne vienne pas coller le logo */ .header-top .main-nav { margin-top: 1rem; } /* Si vous voulez un petit gap au-dessus du themeToggle */ #themeToggle { margin-top: 1rem; } } /* ──────────────── Offres & Packs → grille en responsive ─────────────────── */ @media (max-width: 992px) { /* 1) Retrait du padding desktop */ .offres-packs-section .offers-carousel { padding: 0 !important; margin: 2rem auto !important; } /* 2) On désactive le scroll forcé */ .offres-packs-section .offers-packs-wrapper { overflow: visible !important; } /* 3) Passage en grille fluide */ .offres-packs-section .offers-packs-cards { display: grid !important; /* colonnes entre 576px et 768px, 1 colonne en mobile plus étroit */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 1.5rem !important; transform: none !important; transition: none !important; } /* 4) Les cartes occupent leur cellule */ .offres-packs-section .offer-card { flex: none !important; max-width: none !important; width: 100% !important; } /* 5) On masque les flèches */ .offres-packs-section .offers-prev, .offres-packs-section .offers-next { display: none !important; } } /* ─────────────────────────────────────────── AFFINAGE : 1 seule colonne sur très petits écrans ────────────────────────────────────────── */ @media (max-width: 576px) { .offres-packs-section .offers-packs-cards { grid-template-columns: 1fr !important; } } html, body { overflow-x: hidden; } /* ────────────────────────────────────────────── CARROUSEL “Recrutement” → PASSAGE EN GRILLE ────────────────────────────────────────────── */ @media (max-width: 992px) { /* 1) On retire le padding desktop pour le container */ .jobs-carousel-container { padding: 0 !important; margin: 2rem auto !important; max-width: 100%; } /* 2) On transforme la piste en grille fluide à 1, 2 ou 3 colonnes */ .jobs-carousel-track { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; overflow: visible !important; /* plus de scroll horizontal */ scroll-snap-type: none !important; /* désactive le snap */ padding: 0 !important; } /* 3) On cache les flèches de navigation */ .jobs-carousel-container .carousel-arrow { display: none !important; } } /* Affinement pour très petits écrans */ @media (max-width: 576px) { .jobs-carousel-track { grid-template-columns: 1fr; /* une seule colonne */ } } /* ———————————————————————————————————————————— Réduction de l’espacement vertical dans la carte de contact ———————————————————————————————————————————— */ #contact .contact-card { /* on écrase le gap global pour n’avoir que 0.25rem */ gap: 0.25rem !important; } #contact .contact-info { /* on retire toute marge résiduelle sous le bloc infos */ margin-bottom: 0 !important; } #contact .only-ctas { /* on annule la marge-top entre infos et boutons */ margin-top: 0 !important; } /* — fallback si le gap flex n’est pas pris en compte — */ #contact .only-ctas { /* remonte un peu les boutons */ margin-top: -0.5rem !important; } #contact .contact-subheading { display: block; max-width: 700px; /* limite la largeur pour rester lisible */ margin: 0.75rem auto 2rem;/* 0.75rem au-dessus, 2rem en-dessous */ text-align: center; /* centre horizontalement le texte */ } /* ———————————————————————————————————————————— Empilement des boutons CTAs en colonne en responsive ———————————————————————————————————————————— */ @media (max-width: 768px) { /* On cible précisément le conteneur des CTAs */ #contact .contact-actions.only-ctas { display: flex !important; flex-direction: column !important; align-items: stretch !important; /* chaque bouton prend la largeur */ gap: 1rem !important; margin-top: 1rem !important; } /* Chaque lien devient full-width */ #contact .contact-actions.only-ctas a { width: 100% !important; max-width: none !important; } } /* ────────────────────────────────────────────── */ /* FIX CAROUSEL “ILS TÉMOIGNENT” : largeur des cartes */ /* On enlève le overflow-y pour que rien ne soit verticalement tronqué */ section#testimonials .testimonials-container { overflow-x: hidden !important; overflow-y: visible !important; } /* On s’assure que le slider reste en ligne */ section#testimonials .testimonials-slider { display: flex !important; flex-wrap: nowrap !important; transition: transform 0.8s ease !important; } /* === Carrousel “Ils témoignent” responsive === */ #testimonials .testimonial-card { /* on laisse JS piloter flex-basis */ flex: 0 0 auto; margin-right: var(--testimonial-gap); box-sizing: border-box; width: auto; /* + on retire toute autre width ! */ } /* ≥1200px : 3 cartes côte à côte */ @media (min-width: 1200px) { section#testimonials .testimonial-card { flex: 0 0 calc((100% - 2 * var(--testimonial-gap)) / 3) !important; max-width: calc((100% - 2 * var(--testimonial-gap)) / 3) !important; } } /* On enlève toute limite de hauteur/largeur pour éviter tout crop */ section#testimonials .testimonial-card { display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0 !important; height: auto !important; max-height: none !important; } /* Compléments légers pour LocPilot — respecte la charte existante */ /* État visuel des flèches quand désactivées */ .offres-packs-section .offers-prev[disabled], .offres-packs-section .offers-next[disabled] { opacity: .5; cursor: not-allowed; } /* Transition douce du track (si absente dans styles.css) */ .offres-packs-section .offers-packs-cards { transition: transform 0.4s ease; will-change: transform; } /* n'affecte que la page LocPilot */ .page-locpilot h3 { text-align: center; } /* ===== LocPilot — ULTRA SERRÉ entre "Ce que vous obtenez" et la section packs ===== */ /* Couper (presque) toute la marge en bas du dernier bloc de la 1re section */ .page-locpilot .detail-service .section-block:last-child { margin-bottom: 4px !important; padding-bottom: 0 !important; } /* Évite que la marge du heading suivant se "collape" avec celle d'avant */ .page-locpilot #offres-lp { margin-top: 4px !important; padding-top: 0 !important; border-top: 1px solid transparent; /* casse le collapsing sans effet visuel */ } /* Neutralise toute marge haute du premier titre dans la section packs */ .page-locpilot #offres-lp .detail-heading:first-child { margin-top: 0 !important; margin-bottom: 8px; /* petit rythme, sinon mets 4px */ } /* Supprime la marge basse de l’ultime enfant du bloc "Ce que vous obtenez" */ .page-locpilot .detail-service .section-block:last-child > :last-child { margin-bottom: 0 !important; } /* Si le layout interne ajoute une marge/padding en tête, on les annule */ .page-locpilot #offres-lp .detail-inner { padding-top: 0 !important; } .page-locpilot #offres-lp .detail-inner > :first-child { margin-top: 0 !important; } /* ============ LocPilot — Responsive Upgrade ============ */ /* Conteneur fluide et image safe */ .page-locpilot .detail-inner { width: min(1100px, 100% - 2rem); margin-inline: auto; } .page-locpilot img { max-width: 100%; height: auto; display: block; } /* Titres à taille fluide */ .page-locpilot .detail-heading { text-align: center; font-size: clamp(1.4rem, 2.6vw, 2.25rem); line-height: 1.2; } /* ---- 1) Section intro ("Pourquoi…") ---- */ .page-locpilot .detail-service .intro { display: grid; gap: clamp(16px, 2.4vw, 32px); } .page-locpilot .detail-service .intro .detail-text { order: 1; } .page-locpilot .detail-service .intro .detail-image { order: 2; } @media (min-width: 768px) { .page-locpilot .detail-service .intro { grid-template-columns: 1.15fr 0.85fr; align-items: center; } .page-locpilot .detail-service .intro .detail-text { order: 1; } .page-locpilot .detail-service .intro .detail-image { order: 2; justify-self: end; } } /* Listes plus lisibles sur mobile */ .page-locpilot .detail-service ul { margin: 0; padding-left: 1.1em; display: grid; gap: .4rem; } /* ---- 2) Section packs (carousel) ---- */ /* Wrapper: respire un peu sur petits écrans */ .page-locpilot .offers-packs-section .offers-packs-wrapper { padding-inline: clamp(0px, 3vw, 24px); } /* Track par défaut = flex (desktop, piloté par JS) */ .page-locpilot .offers-packs-section .offers-packs-cards { display: flex; gap: clamp(16px, 2.5vw, 32px); will-change: transform; } /* Cartes: largeur min/max fluide pour éviter les sauts */ .page-locpilot .offers-packs-section .offer-card { min-width: clamp(300px, 34vw, 420px); padding: clamp(16px, 2.2vw, 24px); border-radius: 14px; } /* Bouton plein-largeur sur mobile */ @media (max-width: 480px) { .page-locpilot .offers-packs-section .offer-card .btn-primary { width: 100%; } } /* Arrows: centrées verticalement, cliquables, mais cachées en mobile */ .page-locpilot .offers-packs-section .offers-prev, .page-locpilot .offers-packs-section .offers-next { top: 50%; transform: translateY(-50%); z-index: 2; } @media (max-width: 900px) { .page-locpilot .offers-packs-section .offers-prev, .page-locpilot .offers-packs-section .offers-next { display: none; } } /* Mobile/Tablet: on passe le track en grille -> 1 carte/ligne (JS le gère) */ @media (max-width: 900px) { .page-locpilot .offers-packs-section .offers-packs-cards { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2.2vw, 24px); transform: none !important; /* sécurité visuelle */ } .page-locpilot .offers-packs-section .offer-card { min-width: 0; } } /* Ultra serré entre "Ce que vous obtenez" et "Trois packs…" (tu l’avais demandé) */ .page-locpilot .detail-service .section-block:last-child { margin-bottom: 4px !important; } .page-locpilot #offres-lp { margin-top: 4px !important; padding-top: 0 !important; } /* ---- 3) FAQ & CTA ---- */ .page-locpilot .faq-block h4 { margin-top: clamp(10px, 1.6vw, 18px); margin-bottom: .4rem; } .page-locpilot .faq-block p { margin-top: 0; } .page-locpilot .cta-block { text-align: center; padding-block: clamp(16px, 3vw, 36px); } .page-locpilot .cta-block h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: .5rem; } .page-locpilot .cta-block p { max-width: 60ch; margin-inline: auto; margin-bottom: .9rem; } /* ---- 4) Petits écrans très étroits ---- */ @media (max-width: 360px) { .page-locpilot .detail-inner { width: calc(100% - 1.25rem); } .page-locpilot .detail-heading { font-size: 1.25rem; } .page-locpilot .offer-card { padding: 14px; } } /* ---- 5) Grands écrans ---- */ @media (min-width: 1200px) { .page-locpilot .detail-inner { width: min(1200px, 100% - 3rem); } .page-locpilot .offers-packs-section .offer-card { min-width: clamp(340px, 28vw, 420px); } } /* Micro-typo SEO/UX */ .page-locpilot .offer-blurb { margin:.35rem 0 .6rem; font-size: .98rem; opacity:.95; } .page-locpilot .faq-block h4 { font-size:1.02rem; margin-top:.9rem; margin-bottom:.3rem; } .page-locpilot ol { padding-left: 1.2rem; display:grid; gap:.35rem; } .page-locpilot ul { padding-left: 1.1rem; } .page-locpilot .detail-heading strong { font-weight: 800; } .page-locpilot a { text-underline-offset: 2px; } /* Accessibilité : focus clair au clavier */ :focus-visible { outline: 3px solid #b08040; outline-offset: 2px; } /* Lien “aller au contenu” (visible seulement au focus) */ .skip-link { position: absolute; left: -9999px; top: 0; background: #b08040; color: #0c1518; padding: .5rem .75rem; border-radius: 4px; z-index: 2000; } .skip-link:focus { left: 1rem; top: 1rem; } /* Contraste renforcé si l’utilisateur le demande */ @media (prefers-contrast: more) { .btn-primary, .btn-secondary, .btn-tertiary { border-width: 3px; } a { text-decoration: underline; } } /* Réduction des animations pour motion-sensitive */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* ===== Révélations homogènes (up/left/right) + stagger ===== */ .reveal-hidden { opacity: 0; transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; } .reveal-visible { opacity: 1; transform: none !important; } /* directions */ .reveal-up.reveal-hidden { transform: translateY(24px); } .reveal-left.reveal-hidden { transform: translateX(-28px); } .reveal-right.reveal-hidden { transform: translateX(28px); } /* délai via data attr (– custom property fallback) */ .reveal-hidden { transition-delay: var(--reveal-delay, 0ms); } /* petit lift homogène sur les cartes lors du hover */ .offer-card:hover, .faq-block blockquote:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0,0,0,.6); } /* accessibilité : animations coupées si demandé par l’utilisateur */ @media (prefers-reduced-motion: reduce) { .reveal-hidden { transition: none !important; } } /* LocPilot : on n'anime plus le conteneur, seulement ses enfants .reveal */ .page-locpilot .hero-inner { opacity: 1 !important; transform: none !important; transition: none !important; } /* Le conteneur du hero ne fade plus : visible dès le 1er paint */ .page-locpilot .hero-inner { opacity: 1 !important; transform: none !important; transition: none !important; } /* Système reveal existant : on coupe uniquement l'opacité pour les éléments .nofade */ .reveal-hidden.nofade { opacity: 1 !important; } /* visibles tout de suite */ .reveal-visible.nofade { opacity: 1 !important; } /* aucune transition d'opacité */ .reveal.nofade { transition: transform .6s cubic-bezier(.2,.7,.2,1) !important; } /* Petit décalage au départ, mais déjà visible → pas d'impact LCP */ .reveal-hidden.reveal-up { transform: translateY(14px); } .reveal-visible.reveal-up { transform: translateY(0); } /* Bonus : si l’utilisateur préfère réduire les animations, on coupe le slide */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-hidden, .reveal-visible { transition: none !important; transform: none !important; } } /* ============== PRESSE (Ils parlent de nous) ============== */ .press { background: var(--bg); padding-block: clamp(2rem, 5vw, 4rem); /* air haut/bas */ } .press-inner { width: min(1000px, 100% - 2rem); margin-inline: auto; text-align: center; } .press .detail-heading { margin: 0 0 clamp(1.25rem, 3vw, 2.5rem) 0; /* espace sous le titre */ color: var(--gold); font-weight: 800; } /* grille simple et centrée */ .press-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); place-items: center; gap: clamp(0.75rem, 2vw, 1.25rem); } /* item + logo */ .press-logo a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .press-logo img { display: block; width: auto; max-height: 64px; /* 56px en mobile juste dessous */ height: auto; /* pas de filtre: on garde le rouge d'origine */ transition: transform .25s ease, opacity .25s ease; opacity: 0.98; } .press-logo a:focus-visible img, .press-logo a:hover img { transform: translateY(-2px); opacity: 1; } @media (max-width: 480px) { .press-logo img { max-height: 56px; } } /* Petite entrée en douceur (respecte ton système reveal existant) */ @media (prefers-reduced-motion: no-preference) { .press-list .press-logo { animation: press-in .45s ease both; } .press-list .press-logo:nth-child(2) { animation-delay: .06s; } .press-list .press-logo:nth-child(3) { animation-delay: .12s; } } @keyframes press-in { from { opacity: .001; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* -------------------------------------------- FIN DU CSS