/* ============================================================ SITE DE GRÉGOIRE DE FOMBELLE — FEUILLE DE STYLE COMMUNE ------------------------------------------------------------ Ce fichier contrôle TOUTE l'apparence du site (couleurs, polices, espacements, animations). Il est partagé par toutes les pages. ▸ Pour changer une couleur du site entier : modifie une valeur dans le bloc « :root » juste en dessous. ▸ Le reste du fichier est organisé en sections clairement titrées. En cas de doute, reviens vers Claude. ============================================================ */ /* ------------------------------------------------------------ 1. VARIABLES GLOBALES (la "palette" du site) Change ici et tout le site suit. ------------------------------------------------------------ */ :root { --creme: #f4efe6; /* fond principal, chaleureux */ --creme-fonce: #e8e0d2; /* fond secondaire / cartes */ --encre: #1a2b4a; /* bleu d'encre profond — texte & titres */ --bleu-vif: #2b547e; /* accent principal (liens, détails) */ --terracotta: #c2613d; /* accent chaud secondaire */ --gris-doux: #6b6457; /* texte secondaire, dates */ --noir-doux: #20201d; /* texte le plus foncé */ /* Polices : chargées depuis Google Fonts dans le de chaque page */ --titre: "Fraunces", Georgia, serif; /* police d'affichage, à caractère */ --corps: "Newsreader", Georgia, serif; /* police de lecture, élégante */ --mono: "Space Mono", "Courier New", monospace; /* détails, étiquettes */ } /* ------------------------------------------------------------ 2. RÉGLAGES DE BASE ------------------------------------------------------------ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* défilement doux entre les ancres */ } body { background-color: var(--creme); color: var(--noir-doux); font-family: var(--corps); font-size: 19px; line-height: 1.65; /* léger grain en fond pour donner de la texture (purement décoratif) */ background-image: radial-gradient(var(--creme-fonce) 0.5px, transparent 0.5px); background-size: 14px 14px; overflow-x: hidden; } /* Conteneur centré réutilisable */ .contenu { width: 90%; max-width: 1080px; margin: 0 auto; } a { color: var(--bleu-vif); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--terracotta); } /* ------------------------------------------------------------ 3. EN-TÊTE / BARRE DE NAVIGATION ------------------------------------------------------------ */ .entete { position: sticky; /* la barre reste en haut au défilement */ top: 0; z-index: 100; background-color: rgba(244, 239, 230, 0.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--creme-fonce); } .entete .contenu { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; } .logo { font-family: var(--mono); font-size: 15px; letter-spacing: 0.5px; color: var(--encre); font-weight: 700; } .logo span { color: var(--terracotta); } .nav-liens { display: flex; gap: 28px; align-items: center; } .nav-liens a { font-family: var(--mono); font-size: 13px; letter-spacing: 0.5px; color: var(--gris-doux); text-transform: uppercase; } .nav-liens a:hover { color: var(--encre); } /* Bouton de bascule de langue */ .lang-switch { font-family: var(--mono); font-size: 13px; border: 1px solid var(--encre); border-radius: 50px; padding: 6px 14px; color: var(--encre); } .lang-switch:hover { background-color: var(--encre); color: var(--creme); } /* ------------------------------------------------------------ 4. SECTION HÉRO (le grand titre d'accueil) ------------------------------------------------------------ */ .hero { padding: 90px 0 70px; position: relative; } .hero .surtitre { font-family: var(--mono); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--terracotta); margin-bottom: 24px; } .hero h1 { font-family: var(--titre); font-weight: 600; font-size: clamp(48px, 9vw, 124px); /* s'adapte à la taille de l'écran */ line-height: 0.95; color: var(--encre); letter-spacing: -2px; margin-bottom: 30px; } .hero h1 em { font-style: italic; color: var(--terracotta); } .hero .accroche { font-size: clamp(20px, 2.5vw, 27px); max-width: 620px; color: var(--noir-doux); line-height: 1.45; } .hero .meta-hero { display: flex; gap: 30px; margin-top: 40px; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; color: var(--gris-doux); text-transform: uppercase; letter-spacing: 1px; } .hero .meta-hero span { display: flex; align-items: center; gap: 8px; } .hero .meta-hero .point { color: var(--terracotta); font-size: 18px; } /* ------------------------------------------------------------ 5. TITRES DE SECTION ------------------------------------------------------------ */ .titre-section { display: flex; align-items: baseline; gap: 18px; margin-bottom: 50px; padding-top: 30px; } .titre-section .num { font-family: var(--mono); font-size: 15px; color: var(--terracotta); } .titre-section h2 { font-family: var(--titre); font-weight: 600; font-size: clamp(32px, 5vw, 56px); color: var(--encre); letter-spacing: -1px; } .titre-section .ligne { flex: 1; height: 1px; background-color: var(--gris-doux); opacity: 0.3; } section { padding: 50px 0; } /* ------------------------------------------------------------ 6. SECTION PROFIL / À PROPOS ------------------------------------------------------------ */ .profil-grille { display: grid; grid-template-columns: 0.85fr 1.1fr 1fr; gap: 48px; align-items: start; } /* Photo de profil */ .profil-photo { position: relative; margin: 0; } .profil-photo img { width: 100%; border-radius: 4px; display: block; filter: saturate(0.96) contrast(1.02); } /* petit cadre décalé derrière la photo, façon éditorial */ .profil-photo::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--terracotta); border-radius: 4px; z-index: -1; } .profil-photo figcaption { font-family: var(--mono); font-size: 12px; color: var(--gris-doux); letter-spacing: 0.5px; margin-top: 26px; text-align: right; } .profil-texte p { margin-bottom: 22px; font-size: 21px; } .profil-texte p:first-child::first-letter { /* lettrine décorative sur le premier paragraphe */ font-family: var(--titre); font-size: 76px; float: left; line-height: 0.8; padding: 6px 12px 0 0; color: var(--terracotta); } .profil-encart { background-color: var(--encre); color: var(--creme); padding: 36px; border-radius: 4px; } .profil-encart h3 { font-family: var(--mono); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--terracotta); margin-bottom: 20px; } .profil-encart ul { list-style: none; } .profil-encart li { padding: 10px 0; border-bottom: 1px solid rgba(244, 239, 230, 0.15); font-size: 17px; } .profil-encart li:last-child { border-bottom: none; } /* ------------------------------------------------------------ 7. EXPÉRIENCE (frise verticale) ------------------------------------------------------------ */ .exp-item { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 34px 0; border-top: 1px solid var(--creme-fonce); } .exp-item:hover .exp-poste { color: var(--terracotta); } .exp-gauche .exp-date { font-family: var(--mono); font-size: 13px; color: var(--gris-doux); letter-spacing: 0.5px; } .exp-gauche .exp-lieu { font-family: var(--mono); font-size: 13px; color: var(--bleu-vif); margin-top: 6px; } .exp-poste { font-family: var(--titre); font-size: 27px; font-weight: 600; color: var(--encre); transition: color 0.2s ease; margin-bottom: 6px; } .exp-orga { font-style: italic; color: var(--gris-doux); margin-bottom: 16px; } .exp-desc { font-size: 18px; } .exp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .exp-tags span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; background-color: var(--creme-fonce); color: var(--gris-doux); padding: 4px 10px; border-radius: 50px; } /* ------------------------------------------------------------ 8. COMPÉTENCES / OUTILS (grille de cartes) ------------------------------------------------------------ */ .outils-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .outil-carte { background-color: var(--creme-fonce); padding: 26px; border-radius: 4px; border-left: 3px solid var(--terracotta); transition: transform 0.25s ease, box-shadow 0.25s ease; } .outil-carte:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(26, 43, 74, 0.12); } .outil-carte h4 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--bleu-vif); margin-bottom: 12px; } .outil-carte p { font-size: 17px; color: var(--noir-doux); } /* Bandeau de langues + atouts */ .bandeau-double { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; } .bandeau-double .bloc { background-color: var(--encre); color: var(--creme); padding: 26px; border-radius: 4px; } .bandeau-double h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--terracotta); margin-bottom: 14px; } .bandeau-double .ligne-comp { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(244,239,230,0.12); font-size: 16px; } .bandeau-double .ligne-comp:last-child { border-bottom: none; } /* ------------------------------------------------------------ 9. APERÇU PORTFOLIO / BLOG (cartes) ------------------------------------------------------------ */ .cartes-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; } .carte-lien { display: block; background-color: var(--creme-fonce); border-radius: 4px; padding: 32px; transition: transform 0.25s ease, box-shadow 0.25s ease; height: 100%; } .carte-lien:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(26, 43, 74, 0.14); } .carte-lien .cat { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--terracotta); } .carte-lien h3 { font-family: var(--titre); font-size: 25px; color: var(--encre); margin: 12px 0; line-height: 1.15; } .carte-lien p { font-size: 16px; color: var(--gris-doux); } .carte-lien .fleche { font-family: var(--mono); margin-top: 18px; color: var(--bleu-vif); font-size: 14px; } /* ------------------------------------------------------------ 10. SECTION CONTACT ------------------------------------------------------------ */ .contact { background-color: var(--encre); color: var(--creme); border-radius: 6px; padding: 60px; margin: 40px 0; } .contact h2 { font-family: var(--titre); font-size: clamp(34px, 5vw, 60px); margin-bottom: 16px; color: var(--creme); } .contact h2 em { color: var(--terracotta); font-style: italic; } .contact p { max-width: 520px; margin-bottom: 36px; color: var(--creme-fonce); } .form-champ { margin-bottom: 20px; } .form-champ label { display: block; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--terracotta); margin-bottom: 8px; } .form-champ input, .form-champ textarea { width: 100%; background-color: rgba(244, 239, 230, 0.08); border: 1px solid rgba(244, 239, 230, 0.25); border-radius: 4px; padding: 14px 16px; color: var(--creme); font-family: var(--corps); font-size: 17px; transition: border-color 0.2s ease; } .form-champ input:focus, .form-champ textarea:focus { outline: none; border-color: var(--terracotta); } .form-champ textarea { resize: vertical; min-height: 130px; } .bouton-envoi { font-family: var(--mono); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; background-color: var(--terracotta); color: var(--creme); border: none; border-radius: 50px; padding: 16px 36px; cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; } .bouton-envoi:hover { background-color: var(--creme); color: var(--encre); transform: translateY(-2px); } .contact-direct { margin-top: 36px; display: flex; gap: 30px; flex-wrap: wrap; font-family: var(--mono); font-size: 14px; } .contact-direct a { color: var(--creme); border-bottom: 1px solid var(--terracotta); } .contact-direct a:hover { color: var(--terracotta); } /* ------------------------------------------------------------ 11. PIED DE PAGE ------------------------------------------------------------ */ .pied { padding: 50px 0; border-top: 1px solid var(--creme-fonce); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; font-family: var(--mono); font-size: 13px; color: var(--gris-doux); } /* ------------------------------------------------------------ 12. ANIMATIONS AU DÉFILEMENT Les éléments avec la classe « apparait » montent en fondu quand ils entrent à l'écran (géré par script.js). ------------------------------------------------------------ */ .apparait { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .apparait.visible { opacity: 1; transform: translateY(0); } /* Apparition décalée du titre héro au chargement */ @keyframes monteFondu { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .hero .surtitre { animation: monteFondu 0.8s ease both; } .hero h1 { animation: monteFondu 0.9s ease 0.15s both; } .hero .accroche { animation: monteFondu 0.9s ease 0.35s both; } .hero .meta-hero{ animation: monteFondu 0.9s ease 0.55s both; } /* ------------------------------------------------------------ 13. ADAPTATION MOBILE (écrans étroits) ------------------------------------------------------------ */ @media (max-width: 820px) { body { font-size: 18px; } .nav-liens { gap: 16px; } .nav-liens a:not(.lang-switch) { display: none; } /* on garde l'essentiel sur mobile */ .profil-grille { grid-template-columns: 1fr; gap: 36px; } .profil-photo { max-width: 320px; } .profil-photo::before { inset: 12px -12px -12px 12px; } .exp-item { grid-template-columns: 1fr; gap: 12px; } .bandeau-double { grid-template-columns: 1fr; } .contact { padding: 36px 26px; } }