/* ========================================================================== Géraldine Dubois — gouzouland.com Feuille de style du site — surcouche personnalisée de Bootstrap 5.3 -------------------------------------------------------------------------- Tout le design du site est réglé ici. Bootstrap est chargé avant ce fichier (via le CDN, dans le de chaque page) : ce fichier ne fait que redéfinir les variables de Bootstrap et ajouter quelques classes maison. SOMMAIRE 1. Variables (couleurs, polices) ← pour changer les couleurs, c'est ici 2. Base (corps de page, liens, titres) 3. En-tête / navigation 4. Boutons 5. Blocs de titre de section 6. Page d'accueil 7. Pages Projets / Regards (galeries) 8. Pages Livres 9. Page Éditions 10. Page Parcours 11. Page Contact 12. Pied de page 13. Divers (visionneuse, animations) ========================================================================== */ /* ========================================================================== 1. VARIABLES ========================================================================== */ :root { /* --- Palette du site --------------------------------------------------- Modifiez ces 7 valeurs pour changer l'ambiance de tout le site. */ --gd-bg: #faf8f3; /* fond principal, crème */ --gd-bg-2: #f2eee5; /* fond alterné des sections */ --gd-ink: #1f1d1a; /* texte principal, presque noir */ --gd-ink-soft: #5c574e; /* texte secondaire, gris chaud */ --gd-line: #e3ddd0; /* filets et bordures */ --gd-accent: #6d7355; /* vert de gris, accents */ --gd-accent-deep:#4f5440; /* vert foncé, survols */ /* --- Polices ----------------------------------------------------------- */ --gd-serif: 'Roboto Serif', Georgia, serif; /* italiques poétiques */ --gd-display: 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif; /* titres, menus */ --gd-sans: 'Inter', -apple-system, system-ui, sans-serif; /* texte courant */ /* --- Reprise dans les variables Bootstrap ------------------------------ Ces lignes font que les composants Bootstrap (boutons, cartes, formu- laires…) utilisent automatiquement la palette ci-dessus. */ --bs-body-bg: var(--gd-bg); --bs-body-color: var(--gd-ink); --bs-body-font-family: var(--gd-sans); --bs-body-font-weight: 300; --bs-body-line-height: 1.65; --bs-emphasis-color: var(--gd-ink); --bs-secondary-color: var(--gd-ink-soft); --bs-border-color: var(--gd-line); --bs-link-color: var(--gd-accent-deep); --bs-link-hover-color: var(--gd-ink); --bs-primary: var(--gd-accent); --bs-primary-rgb: 109, 115, 85; } /* ========================================================================== 2. BASE ========================================================================== */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { text-decoration: none; } /* --- Familles de polices utilisables comme classes --- */ .font-display { font-family: var(--gd-display); } .font-serif { font-family: var(--gd-serif); } .font-sans { font-family: var(--gd-sans); } /* --- Couleurs utilisables comme classes --- */ .text-accent { color: var(--gd-accent) !important; } .text-accent-deep { color: var(--gd-accent-deep) !important; } .text-soft { color: var(--gd-ink-soft) !important; } .text-ink { color: var(--gd-ink) !important; } .bg-cream { background-color: var(--gd-bg) !important; } .bg-cream-2 { background-color: var(--gd-bg-2) !important; } .bg-ink { background-color: var(--gd-ink) !important; } /* --- Titres --- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--gd-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.08; } /* Mot en italique serif à l'intérieur d'un titre : */ h1 em, h2 em, h3 em, .title-em { font-family: var(--gd-serif); font-style: italic; font-weight: 400; color: var(--gd-accent-deep); letter-spacing: 0; } /* --- Petits intertitres en capitales espacées --- */ .eyebrow { font-family: var(--gd-display); font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gd-accent); display: block; margin-bottom: .9rem; } .eyebrow-lg { font-size: .82rem; letter-spacing: .3em; } /* --- Citation poétique --- */ .quote { font-family: var(--gd-serif); font-style: italic; font-size: 1.12rem; color: var(--gd-accent-deep); border-left: 1px solid var(--gd-line); padding-left: 1.1rem; margin: 1.5rem 0; } /* --- Chapeau de texte --- */ .lead-soft { font-size: 1.1rem; color: var(--gd-ink-soft); max-width: 56ch; } /* --- Espacement vertical standard des sections --- */ .section { padding: 6.5rem 0; } .section-sm { padding: 4.5rem 0; } @media (max-width: 767.98px) { .section { padding: 3.75rem 0; } .section-sm { padding: 2.75rem 0; } } /* --- Fil d'Ariane --- */ .crumb { font-family: var(--gd-display); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gd-ink-soft); } .crumb a { color: var(--gd-ink-soft); } .crumb a:hover { color: var(--gd-accent); } .crumb .sep { margin: 0 .55rem; color: var(--gd-line); } .crumb .here { color: var(--gd-ink); } /* ========================================================================== 3. EN-TÊTE / NAVIGATION -------------------------------------------------------------------------- La barre est transparente au-dessus d'une image (classe .navbar-over posée sur la page d'accueil) puis devient crème au défilement (classe .scrolled ajoutée automatiquement par js/site.js). ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: var(--gd-bg); border-bottom: 1px solid var(--gd-line); transition: background .3s, border-color .3s, padding .3s; } .site-header .navbar { padding: .9rem 0; transition: padding .3s; } .site-header.scrolled .navbar { padding: .55rem 0; } /* Variante transparente (accueil) */ .site-header.navbar-over { background: transparent; border-bottom-color: transparent; } .site-header.navbar-over .navbar-brand, .site-header.navbar-over .navbar-brand small, .site-header.navbar-over .nav-link { color: #fff; } .site-header.navbar-over .navbar-brand small { color: rgba(255,255,255,.82); } .site-header.navbar-over .navbar-toggler { color: #fff; border-color: rgba(255,255,255,.5); } .site-header.navbar-over.scrolled { background: var(--gd-bg); border-bottom-color: var(--gd-line); } .site-header.navbar-over.scrolled .navbar-brand, .site-header.navbar-over.scrolled .nav-link { color: var(--gd-ink); } .site-header.navbar-over.scrolled .navbar-brand small { color: var(--gd-ink-soft); } .site-header.navbar-over.scrolled .navbar-toggler { color: var(--gd-ink); border-color: var(--gd-line); } /* Marque */ .navbar-brand { font-family: var(--gd-display); font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--gd-ink); } .navbar-brand small { display: block; font-family: var(--gd-sans); font-size: .58rem; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: var(--gd-ink-soft); margin-top: 5px; } /* Liens du menu */ .site-header .nav-link { font-family: var(--gd-sans); font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gd-ink-soft); padding: .35rem 0; margin-left: 1.75rem; position: relative; } .site-header .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: currentColor; transition: width .3s; } .site-header .nav-link:hover::after, .site-header .nav-link.active::after { width: 100%; } .site-header .nav-link.active { color: var(--gd-ink); } .navbar-toggler { border: 1px solid var(--gd-line); color: var(--gd-ink); padding: .3rem .55rem; font-size: 1.15rem; line-height: 1; } .navbar-toggler:focus { box-shadow: none; } /* Menu déroulé sur mobile */ @media (max-width: 991.98px) { .site-header .navbar-collapse { background: var(--gd-bg); margin: .9rem -1rem -.9rem; padding: .5rem 1rem 1.25rem; border-top: 1px solid var(--gd-line); } .site-header .nav-link { margin-left: 0; font-size: .95rem; padding: .6rem 0; color: var(--gd-ink) !important; border-bottom: 1px solid var(--gd-line); } .site-header.navbar-over .navbar-collapse { background: var(--gd-bg); } } /* Décale le contenu sous la barre fixe (sauf sur l'accueil) */ .has-fixed-header { padding-top: 84px; } /* ========================================================================== 4. BOUTONS ========================================================================== */ .btn { --bs-btn-border-radius: 0; font-family: var(--gd-display); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; padding: .95rem 2.1rem; transition: .28s; } /* Bouton contour sombre (fond clair) */ .btn-ink { border: 1px solid var(--gd-ink); color: var(--gd-ink); background: transparent; } .btn-ink:hover { background: var(--gd-ink); color: var(--gd-bg); } /* Bouton contour clair (sur photo) */ .btn-light-outline { border: 1px solid rgba(255,255,255,.7); color: #fff; background: transparent; } .btn-light-outline:hover { background: #fff; color: var(--gd-ink); border-color: #fff; } /* Bouton plein accent */ .btn-accent { background: var(--gd-accent-deep); border: 1px solid var(--gd-accent-deep); color: #fff; } .btn-accent:hover { background: var(--gd-ink); border-color: var(--gd-ink); color: #fff; } /* Lien fléché souligné */ .link-arrow { display: inline-block; font-family: var(--gd-display); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gd-accent-deep); border-bottom: 1px solid var(--gd-accent); padding-bottom: 4px; transition: letter-spacing .25s, color .25s; } .link-arrow:hover { letter-spacing: .18em; color: var(--gd-ink); } .link-quiet { font-family: var(--gd-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gd-ink-soft); border-bottom: 1px solid var(--gd-line); padding-bottom: 4px; transition: .25s; } .link-quiet:hover { color: var(--gd-accent); border-color: var(--gd-accent); } /* ========================================================================== 5. BLOCS D'INTRODUCTION DE PAGE ========================================================================== */ .page-intro { padding: 8rem 0 4rem; } .page-intro h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .98; } .page-intro .sub { font-size: 1.12rem; color: var(--gd-ink-soft); max-width: 60ch; } @media (max-width: 767.98px) { .page-intro { padding: 5.5rem 0 2.5rem; } } /* ========================================================================== 6. PAGE D'ACCUEIL ========================================================================== */ /* --- Grande image d'ouverture --- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,16,.45) 0%, rgba(20,22,16,.15) 30%, rgba(20,22,16,.34) 62%, rgba(20,22,16,.8) 100%); z-index: -1; } .hero .hero-body { color: #fff; padding-bottom: 8vh; text-shadow: 0 1px 22px rgba(0,0,0,.4); } .hero .eyebrow { color: rgba(255,255,255,.88); } .hero h1 { font-size: clamp(2.45rem, 8vw, 6.4rem); line-height: .92; margin-bottom: 1.4rem; } .hero h1 em { color: #dfe3d3; } .hero .hero-sub { max-width: 48ch; color: rgba(255,255,255,.92); font-size: 1.1rem; } .hero .hero-cap { position: absolute; right: 5vw; bottom: 8vh; font-family: var(--gd-display); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); } @media (max-width: 767.98px) { .hero .hero-cap { display: none; } } /* --- Portrait / image d'atelier --- */ .portrait-frame { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--gd-bg-2); } .portrait-frame img { width: 100%; height: 100%; object-fit: cover; } /* Même précaution que pour le mur d'images : la légende est blanche. */ .portrait-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(transparent, rgba(20, 18, 15, .62)); pointer-events: none; } .portrait-frame .label { position: absolute; left: 1rem; bottom: .9rem; z-index: 2; font-family: var(--gd-serif); font-style: italic; color: rgba(255,255,255,.94); font-size: 1.1rem; text-shadow: 0 1px 12px rgba(0,0,0,.45); } /* --- Cartes d'agenda --- */ .card-agenda { display: block; color: inherit; } .card-agenda .thumb { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--gd-bg); margin-bottom: 1.15rem; } .card-agenda .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .card-agenda:hover .thumb img { transform: scale(1.05); } .card-agenda .date { font-family: var(--gd-display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gd-accent); margin-bottom: .4rem; } .card-agenda h3 { font-size: 1.45rem; margin-bottom: .35rem; } .card-agenda p { color: var(--gd-ink-soft); font-size: .94rem; margin: 0; } /* --- Deux grandes portes d'entrée --- */ .xcard { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16/11; overflow: hidden; padding: 2.5rem; color: #fff; } .xcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; } .xcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(20,18,15,.7)); } .xcard:hover img { transform: scale(1.04); } .xcard .xcard-body { position: relative; z-index: 2; } .xcard .k { font-family: var(--gd-display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .88; margin-bottom: .4rem; } .xcard h3 { font-size: 2rem; margin-bottom: .6rem; color: #fff; } .xcard .go { font-family: var(--gd-display); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; opacity: .9; } /* ========================================================================== 7. PROJETS & GALERIES DES REGARDS ========================================================================== */ /* --- Les trois regards : image + texte en alternance --- */ .regard-row .regard-visual { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--gd-bg-2); } .regard-row .regard-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; } .regard-row .regard-visual:hover img { transform: scale(1.04); } .regard-row .regard-visual .tag { position: absolute; left: 1.1rem; top: 1.1rem; background: rgba(31,29,26,.62); color: #fff; font-family: var(--gd-display); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; padding: .45rem .8rem; } .regard-row h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 1rem; } .regard-row p { color: var(--gd-ink-soft); } .regard-row .count { color: var(--gd-accent); } /* --- Mur d'images (galerie) --- Colonnes CSS : les images gardent leur proportion d'origine et se répartissent en 1, 2 ou 3 colonnes selon la largeur de l'écran. */ .photo-wall { column-count: 3; column-gap: 1.75rem; } @media (max-width: 991.98px) { .photo-wall { column-count: 2; column-gap: 1.1rem; } } @media (max-width: 575.98px) { .photo-wall { column-count: 1; } } .photo-wall .shot { break-inside: avoid; margin-bottom: 1.75rem; position: relative; display: block; background: var(--gd-bg-2); cursor: zoom-in; } .photo-wall .shot img { width: 100%; height: auto; display: block; transition: opacity .4s; } .photo-wall .shot:hover img { opacity: .88; } /* Voile sombre au survol : sans lui, une légende blanche posée sur une photo claire (un ciel, une glace, un mur blanc) devient illisible. */ .photo-wall .shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(transparent, rgba(20, 18, 15, .72)); opacity: 0; transition: opacity .3s; pointer-events: none; } .photo-wall .shot:hover::after { opacity: 1; } .photo-wall .shot .meta { position: absolute; left: .9rem; bottom: .8rem; z-index: 2; font-family: var(--gd-display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.6); opacity: 0; transition: opacity .3s; } .photo-wall .shot:hover .meta { opacity: 1; } .photo-wall .shot .plus { position: absolute; right: .8rem; top: .7rem; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.85); color: var(--gd-ink); font-size: 1.05rem; line-height: 1; opacity: 0; transition: opacity .3s; } .photo-wall .shot:hover .plus { opacity: 1; } /* --- Navigation entre regards / livres --- */ .pager { border-top: 1px solid var(--gd-line); border-bottom: 1px solid var(--gd-line); padding: 2.25rem 0; } .pager a { display: block; color: inherit; } .pager .dir { display: block; font-family: var(--gd-display); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gd-accent); margin-bottom: .3rem; } .pager .t { font-family: var(--gd-display); font-size: 1.35rem; font-weight: 600; } .pager a:hover .t { color: var(--gd-accent-deep); } /* ========================================================================== 8. LIVRES D'ARTISTE ========================================================================== */ /* --- Couverture d'un livre ------------------------------------------------- Les livres n'ont pas tous le même format (carré, A5, à l'italienne). Le cadre garde donc une hauteur constante pour aligner la grille, et l'image s'y inscrit ENTIÈREMENT (object-fit: contain) : aucune couverture n'est rognée. Variantes : .square (cadre carré) et .auto (le cadre épouse exactement les proportions de la photo — utilisé sur la fiche d'un livre). ------------------------------------------------------------------------- */ .book-cover { position: relative; aspect-ratio: 3/4; overflow: hidden; margin-bottom: .9rem; display: flex; align-items: center; justify-content: center; } .book-cover.square { aspect-ratio: 1/1; } .book-cover.auto { aspect-ratio: auto; display: block; } .book-cover.auto img { position: static; } .book-cover:empty { background: var(--gd-bg-2); } .book-cover:empty::after { content: "Couverture à venir"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--gd-display); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gd-ink-soft); opacity: .55; border: 1px solid var(--gd-line); } .book-cover img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 2px 18px rgba(31,29,26,.10); transition: transform .7s ease; } .book-item:hover .book-cover img { transform: scale(1.03); } .book-item { display: block; color: inherit; } .book-item > a { display: block; color: inherit; } .book-item h4 { font-size: 1.12rem; margin-bottom: .25rem; } .book-item .m { font-size: .82rem; color: var(--gd-ink-soft); } .book-item .rl, .book-item a.rl { display: inline-block; font-size: .78rem; color: var(--gd-accent); border-bottom: 1px solid transparent; } .book-item .rl:hover { border-color: var(--gd-accent); } /* --- Mention « épuisé » ----------------------------------------------------- */ .tag-epuise { display: inline-block; font-family: var(--gd-display); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gd-ink-soft); border: 1px solid var(--gd-line); padding: .12rem .45rem; margin-left: .5rem; vertical-align: middle; white-space: nowrap; } .epuise-note { background: var(--gd-bg-2); border-left: 3px solid var(--gd-line); padding: .9rem 1.1rem; font-size: .94rem; color: var(--gd-ink-soft); margin-bottom: 0; } /* --- Dernière parution (bandeau) --- */ .feature-book { background: var(--gd-bg-2); } .feature-book .tag { display: inline-block; font-family: var(--gd-display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; background: var(--gd-accent-deep); color: #fff; padding: .4rem .8rem; margin-bottom: 1rem; } .feature-book h2 { font-size: clamp(2rem, 4vw, 3rem); } .feature-book .by { font-family: var(--gd-serif); font-style: italic; color: var(--gd-accent-deep); font-size: 1.15rem; margin-bottom: 1rem; } /* --- Fiche d'un livre : caractéristiques --- */ .specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; border-top: 1px solid var(--gd-line); padding-top: 1.4rem; margin: 1.75rem 0; } .specs span { display: block; font-family: var(--gd-display); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gd-ink-soft); margin-bottom: .15rem; } .specs b { font-weight: 500; font-size: .98rem; } /* --- Feuilletage : doubles pages --- */ .spread { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--gd-line); box-shadow: 0 4px 30px rgba(31,29,26,.1); } .spread .page { aspect-ratio: 3/4; background: var(--gd-bg); overflow: hidden; position: relative; } .spread .page img { width: 100%; height: 100%; object-fit: cover; } .spread .page.txt { display: flex; flex-direction: column; justify-content: center; padding: 2rem; } .spread .page.txt .k { font-family: var(--gd-serif); font-style: italic; font-size: 1.15rem; color: var(--gd-ink); line-height: 1.5; } .spread .page.txt .lines { margin-top: 1.5rem; } .spread .page.txt .lines span { display: block; height: 1px; background: var(--gd-line); margin-bottom: .7rem; } .spread-cap { font-family: var(--gd-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gd-ink-soft); margin-top: .9rem; } /* ========================================================================== 9. ÉDITIONS ========================================================================== */ .band-img { height: 46vh; min-height: 280px; position: relative; overflow: hidden; } .band-img img { width: 100%; height: 100%; object-fit: cover; } .band-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(transparent, rgba(20,18,15,.6)); } /* Photo de la vitrine : une image posée dans la page, pas un bandeau. Elle occupe la colonne qui la contient ; baissez max-width pour la réduire. */ .vitrine { max-width: 100%; margin: 0; } .vitrine img { width: 100%; height: auto; display: block; } .vitrine figcaption { margin-top: .7rem; font-family: var(--gd-display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gd-ink-soft); } .band-img .tag { position: absolute; left: 5vw; bottom: 1.5rem; z-index: 2; font-family: var(--gd-display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.5); } .fab-step .n { font-family: var(--gd-display); font-size: 2.6rem; font-weight: 600; color: var(--gd-line); line-height: 1; margin-bottom: .6rem; } .fab-step h3 { font-size: 1.35rem; margin-bottom: .6rem; } .fab-step p { color: var(--gd-ink-soft); font-size: .96rem; margin: 0; } .titles-list > div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .9rem 0; border-bottom: 1px solid var(--gd-line); } .titles-list b { font-weight: 500; } .titles-list span { color: var(--gd-ink-soft); font-size: .88rem; text-align: right; } .titles-list .soon b::after { content: "à paraître"; font-family: var(--gd-display); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; background: var(--gd-accent-deep); color: #fff; padding: .2rem .5rem; margin-left: .6rem; vertical-align: middle; } .cta-band { background: var(--gd-ink); color: #e9e5da; } .cta-band h2 { color: #fff; } .cta-band p { color: #c3bdb0; } /* ========================================================================== 10. PARCOURS ========================================================================== */ .cv-group { margin-bottom: 3.5rem; } .cv-group h2 { font-size: 1.3rem; display: flex; align-items: baseline; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--gd-line); margin-bottom: .5rem; } .cv-group h2 .idx { font-size: .74rem; letter-spacing: .2em; color: var(--gd-accent); font-weight: 600; } .cv-entry { display: flex; justify-content: space-between; gap: 2rem; padding: .85rem 0; border-bottom: 1px solid var(--gd-bg-2); } .cv-entry .d em { display: block; font-family: var(--gd-serif); font-style: italic; color: var(--gd-ink-soft); font-size: .92rem; } .cv-entry .y { font-family: var(--gd-display); font-size: .84rem; letter-spacing: .08em; color: var(--gd-ink-soft); white-space: nowrap; } /* ========================================================================== 11. CONTACT ========================================================================== */ .form-label { font-family: var(--gd-display); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gd-ink-soft); margin-bottom: .45rem; } .form-control { border-radius: 0; border: 1px solid var(--gd-line); background: transparent; padding: .85rem 1rem; font-size: .98rem; } .form-control:focus { border-color: var(--gd-accent); box-shadow: none; background: #fff; } .contact-info .item { padding: 1rem 0; border-bottom: 1px solid var(--gd-line); } .contact-info .l { font-family: var(--gd-display); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gd-ink-soft); margin-bottom: .25rem; } .contact-info a { color: var(--gd-ink); } .contact-info a:hover { color: var(--gd-accent); } .contact-note { background: var(--gd-bg-2); padding: 1.4rem; margin-top: 1.75rem; font-size: .92rem; color: var(--gd-ink-soft); } /* Champ anti-spam : invisible pour les visiteurs, rempli par les robots */ .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* ========================================================================== 12. PIED DE PAGE ========================================================================== */ .site-footer { background: var(--gd-ink); color: #e9e5da; padding: 4.5rem 0 2.25rem; } .site-footer .navbar-brand { color: #fff; font-size: 1.6rem; } .site-footer .navbar-brand small { color: #b7bda0; } .site-footer h5 { font-family: var(--gd-display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #b7bda0; margin-bottom: .9rem; } .site-footer a { display: block; color: #cfc9bc; padding: .22rem 0; font-size: .92rem; } .site-footer a:hover { color: #fff; } .site-footer .foot-top { padding-bottom: 2.25rem; border-bottom: 1px solid rgba(255,255,255,.14); } .site-footer .foot-bottom { padding-top: 1.6rem; font-size: .76rem; color: #9a9484; } .site-footer .foot-bottom a { display: inline; color: #9a9484; } /* ========================================================================== 13. DIVERS ========================================================================== */ /* --- Visionneuse d'image (modale Bootstrap) --- */ .lightbox .modal-content { background: rgba(20,19,17,.97); border: 0; border-radius: 0; } .lightbox .modal-body { padding: 0; } .lightbox img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; } .lightbox .btn-close { position: absolute; right: 1rem; top: 1rem; z-index: 5; filter: invert(1) grayscale(1) brightness(2); opacity: .8; } .lightbox .lb-caption { color: #cfc9bc; font-family: var(--gd-display); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; padding: .9rem 1rem; text-align: center; } .lightbox .lb-image { cursor: pointer; } /* un clic sur l'image = image suivante */ /* Boutons précédent / suivant — toujours visibles, et cliquables au doigt */ .lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20,19,17,.55); border: 1px solid rgba(255,255,255,.55); color: #fff; font-size: 1.9rem; line-height: 1; padding: 0 0 4px; box-shadow: 0 4px 18px rgba(0,0,0,.45); transition: background .2s, color .2s, border-color .2s; } .lightbox .lb-nav:hover, .lightbox .lb-nav:focus-visible { background: #fff; color: var(--gd-ink); border-color: #fff; } .lightbox .lb-prev { left: 1rem; } .lightbox .lb-next { right: 1rem; } /* Sur téléphone : les flèches descendent de part et d'autre de la légende, à portée de pouce. Le glissement du doigt fonctionne aussi. */ @media (max-width: 767.98px) { .lightbox .lb-nav { top: auto; bottom: .5rem; transform: none; width: 46px; height: 46px; font-size: 1.6rem; } .lightbox .lb-prev { left: .5rem; } .lightbox .lb-next { right: .5rem; } .lightbox .lb-caption { padding: 1rem 3.8rem; font-size: .68rem; } } /* --- Apparition en douceur au défilement (js/site.js) --- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* --- Bandeau de note de travail (à supprimer en ligne) --- */ .worknote { background: var(--gd-bg-2); border-left: 3px solid var(--gd-accent); padding: 1.25rem 1.4rem; font-size: .9rem; color: var(--gd-ink-soft); }