diff --git a/.DS_Store b/.DS_Store index c3efa20..8c3a873 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000..651e227 --- /dev/null +++ b/.htaccess @@ -0,0 +1,11 @@ +RewriteEngine On + +# 1. Rediriger l'index.html vers la racine (évite le duplicate content) +RewriteCond %{THE_REQUEST} /index\.html [NC] +RewriteRule ^(.*)index\.html$ /$1 [L,R=301] + +# 2. Supprimer l'extension .html des URLs +# Permet d'accéder à site.com/about au lieu de site.com/about.html +RewriteCond %{REQUEST_FILENAME} !-d +RewriteCond %{REQUEST_FILENAME}\.html -f +RewriteRule ^(.*)$ $1.html [NC,L] \ No newline at end of file diff --git a/about.html b/about.html index 8384161..7732475 100644 --- a/about.html +++ b/about.html @@ -7,34 +7,40 @@ +
+ +
diff --git a/assets/.DS_Store b/assets/.DS_Store index 3a2e2d6..c71ba94 100644 Binary files a/assets/.DS_Store and b/assets/.DS_Store differ diff --git a/assets/gallery/.DS_Store b/assets/gallery/.DS_Store new file mode 100644 index 0000000..0e5a823 Binary files /dev/null and b/assets/gallery/.DS_Store differ diff --git a/assets/gallery/1.jpg b/assets/gallery/1.jpg new file mode 100644 index 0000000..2303bcc Binary files /dev/null and b/assets/gallery/1.jpg differ diff --git a/assets/gallery/2.jpg b/assets/gallery/2.jpg new file mode 100644 index 0000000..10be26e Binary files /dev/null and b/assets/gallery/2.jpg differ diff --git a/assets/gallery/3.JPG b/assets/gallery/3.JPG new file mode 100644 index 0000000..6eb1118 Binary files /dev/null and b/assets/gallery/3.JPG differ diff --git a/assets/gallery/4.WEBP b/assets/gallery/4.WEBP new file mode 100644 index 0000000..b74cb61 Binary files /dev/null and b/assets/gallery/4.WEBP differ diff --git a/assets/gallery/5.jpeg b/assets/gallery/5.jpeg new file mode 100644 index 0000000..2433574 Binary files /dev/null and b/assets/gallery/5.jpeg differ diff --git a/assets/gallery/6.jpeg b/assets/gallery/6.jpeg new file mode 100644 index 0000000..528eed0 Binary files /dev/null and b/assets/gallery/6.jpeg differ diff --git a/assets/gallery/7.jpeg b/assets/gallery/7.jpeg new file mode 100644 index 0000000..0be74e4 Binary files /dev/null and b/assets/gallery/7.jpeg differ diff --git a/assets/gallery/8.jpeg b/assets/gallery/8.jpeg new file mode 100644 index 0000000..5d76171 Binary files /dev/null and b/assets/gallery/8.jpeg differ diff --git a/assets/img/.DS_Store b/assets/img/.DS_Store index 223d328..a38a73d 100644 Binary files a/assets/img/.DS_Store and b/assets/img/.DS_Store differ diff --git a/assets/img/abyssales-cover.jpg b/assets/img/abyssales-cover.jpg new file mode 100644 index 0000000..4efbe15 Binary files /dev/null and b/assets/img/abyssales-cover.jpg differ diff --git a/assets/img/favicon.png b/assets/img/favicon.png new file mode 100644 index 0000000..7d693d9 Binary files /dev/null and b/assets/img/favicon.png differ diff --git a/assets/img/live-preview.png b/assets/img/live-preview.png new file mode 100644 index 0000000..b0e5f49 Binary files /dev/null and b/assets/img/live-preview.png differ diff --git a/assets/img/logo.png b/assets/img/logo.png index 82bf697..3e8818a 100644 Binary files a/assets/img/logo.png and b/assets/img/logo.png differ diff --git a/assets/img/tkst.jpg b/assets/img/tkst.jpg deleted file mode 100644 index 5745574..0000000 Binary files a/assets/img/tkst.jpg and /dev/null differ diff --git a/assets/img/tkst.png b/assets/img/tkst.png new file mode 100644 index 0000000..4162112 Binary files /dev/null and b/assets/img/tkst.png differ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..72a675a --- /dev/null +++ b/contact.html @@ -0,0 +1,63 @@ + + + + + + Contact | REDSCAPEFACTORY + + + + + +
+ +
+ +
+
+
GET IN TOUCH
+

Contact

+

+ Pour toute demande de collaboration, production de podcast ou simple message, utilisez les liens ci-dessous. +

+
+ +
+
+ + +
+

Follow

+ +
+
+
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/gallery.html b/gallery.html index 1136afb..0dbb800 100644 --- a/gallery.html +++ b/gallery.html @@ -1,32 +1,94 @@ -
-
-
- VISUAL ARCHIVE -
-

Gallery

-

- Fragments of industrial landscapes, studio sessions, and visual experiments - related to the REDSCAPEFACTORY universe. -

-
+ + + + + + Gallery | REDSCAPEFACTORY + + + + +
+ +
+ +
+
+
+ VISUAL ARCHIVE
-
+ + -
\ No newline at end of file + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/index.html b/index.html index 5a9ee03..4f74d21 100644 --- a/index.html +++ b/index.html @@ -3,38 +3,52 @@ - REDSCAPEFACTORY | Home + RedscapeFactory | The Factory Of Sounds + + + + + + - + -
- -
+ +
+ +
diff --git a/music/arisi-namaz.html b/music/arisi-namaz.html index e69de29..8905b19 100644 --- a/music/arisi-namaz.html +++ b/music/arisi-namaz.html @@ -0,0 +1,53 @@ + + + + + + Arisi Namaz | REDSCAPEFACTORY + + + +
+ +
+ +
+
+
+ ARISI NAMAZ +
+

+ Arisi Namaz is the anagram of maiden name Redscape mother. With this project, it's a progressive house style +

+
\ No newline at end of file diff --git a/music/asceptic-siliceum.html b/music/asceptic-siliceum.html index 6808630..0d520a1 100644 --- a/music/asceptic-siliceum.html +++ b/music/asceptic-siliceum.html @@ -8,23 +8,38 @@
- +
diff --git a/music/asceptic.html b/music/asceptic.html index 85bc4f5..4922309 100644 --- a/music/asceptic.html +++ b/music/asceptic.html @@ -8,23 +8,38 @@
- +
diff --git a/music/physical-science.html b/music/physical-science.html index e69de29..c8fde1f 100644 --- a/music/physical-science.html +++ b/music/physical-science.html @@ -0,0 +1,34 @@ +
+ +
\ No newline at end of file diff --git a/podcasts.html b/podcasts.html index c063268..d34fef5 100644 --- a/podcasts.html +++ b/podcasts.html @@ -6,33 +6,42 @@ REDSCAPEFACTORY | Home -
- -
+ + +
+ +
@@ -49,58 +58,82 @@
- Le Trajet -
-

Le Trajet

- VIEW SERIES +
+ Le Trajet +
+
+

Le Trajet - 2019

+

Podcast d'un seul épisode

- Hors Sons -
-

Hors Sons

- VIEW SERIES +
+ Hors Sons +
+
+

Hors Sons - 2022

+

Un regard sur l'actualité, tout en sons

- Le TechCast -
-

Le TechCast

- VIEW SERIES +
+ TKST +
+
+

Le TechCast - 2012

+

Le podcast de l'act tech & gaming

- En Flux Libre -
-

En Flux Libre

- VIEW SERIES +
+ En Flux Libre +
+
+

En Flux Libre - 2011-2012

+

L'actualité de Linux et du logiciel libre

- Parlons Sport Auto -
-

Parlons Sport Auto

- VIEW SERIES +
+ Parlons Sport Auto +
+
+

Parlons Sport Auto - 2016-2020 - Quentin & RedscapeFactory

+

Du sport auto, un sujet et des chroniqueurs pour en débattre

+
+
+ + +
+ LesAbyssales +
+
+

LesAbyssales - 2014-

+

Le Podcast de toutes les musiques électroniques

- L'Invité -
-

L'Invité

- VIEW SERIES +
+ L'Invité +
+
+

L'invité des Abyssales - 2015-2020

+

Spin-off des Abyssales centré sur un invité.

- Deep Sea Project -
-

Deep Sea Project

- VIEW SERIES +
+ Deep Sea Project +
+
+

Deep Sea Project - 2017-2020

+

Spin-off des Abyssales centré sur les musique électroniques extrêmes.

diff --git a/podcasts/.DS_Store b/podcasts/.DS_Store index 7840e60..285c817 100644 Binary files a/podcasts/.DS_Store and b/podcasts/.DS_Store differ diff --git a/podcasts/curl_error.log b/podcasts/curl_error.log deleted file mode 100644 index e69de29..0000000 diff --git a/podcasts/deepseaproject/episodes.json b/podcasts/deepseaproject/episodes.json new file mode 100644 index 0000000..0d4f101 --- /dev/null +++ b/podcasts/deepseaproject/episodes.json @@ -0,0 +1,2 @@ +[ +] diff --git a/podcasts/deepseaproject/podcast.json b/podcasts/deepseaproject/podcast.json new file mode 100644 index 0000000..72f4892 --- /dev/null +++ b/podcasts/deepseaproject/podcast.json @@ -0,0 +1,5 @@ +{ + "title": "Deep Sea Project", + "description": "Production Redscape Factory", + "copyright": "REDSCAPEFACTORY" +} diff --git a/podcasts/fromfeed.sh b/podcasts/fromfeed.sh index 4e6d9eb..43cbd53 100644 --- a/podcasts/fromfeed.sh +++ b/podcasts/fromfeed.sh @@ -1,81 +1,115 @@ #!/bin/bash -# 1. CONFIGURATION -RSS_FILE="deepseaproject/rss" -LAYOUT_FILE="layout.txt" -ENCLOSURE_DIR="deepseaproject/enclosure" -EPISODE_DIR="deepseaproject/episodes" -IMAGE_DIR="deepseaproject/images" +# --- CONFIGURATION À ADAPTER --- +# Exemple pour le Deep Sea Project +PODCAST_NAME="deepseaproject" +RSS_URL="$PODCAST_NAME/rss" +# Le dossier racine de ton site (à adapter si besoin) +BASE_DIR="$PODCAST_NAME" +# Le dossier spécifique du podcast +WORKING_DIR="podcasts/$PODCAST_NAME" -# Création des dossiers -mkdir -p "$IMAGE_DIR" "$EPISODE_DIR" "$ENCLOSURE_DIR" temp_items +## DOSSIERS INTERNES +IMAGE_DIR="$WORKING_DIR/images" +EPISODE_DIR="$WORKING_DIR/episodes" +ENCLOSURE_DIR="$WORKING_DIR/enclosure" +EPISODE_JSON="$WORKING_DIR/episodes.json" -echo "Analyse du flux RSS..." +# Chemins relatifs pour le HTML (on est dans podcasts/nom/episodes/) +# On doit remonter de 3 niveaux pour la racine : ../../../ +REL_PATH="../../../" -# 1. Découpage (Méthode Bash pure pour éviter les erreurs awk/csplit sur Mac) -count=0 -inside=false -while IFS= read -r line || [ -n "$line" ]; do - if [[ "$line" == *""* ]]; then - inside=true - count=$((count + 1)) - echo "" > "temp_items/item_$count.xml" - continue - fi - if [[ "$line" == *""* ]]; then - echo "" >> "temp_items/item_$count.xml" - inside=false - continue - fi - if [ "$inside" = true ]; then - echo "$line" >> "temp_items/item_$count.xml" - fi -done < "$RSS_FILE" +mkdir -p "$IMAGE_DIR" "$EPISODE_DIR" "$ENCLOSURE_DIR" -# 2. Traitement -for f in temp_items/item_*.xml; do - [ -e "$f" ] || continue +# Nettoyage JSON compatible Mac +clean_json_text() { + echo "$1" | sed 's///g; s/\\/\\\\/g; s/"/\\"/g' | tr -d '\n' | tr -d '\r' +} - # Extraction brute - TITLE=$(grep "" "$f" | sed -e 's/<!\[CDATA\[//g' -e 's/\]\]>//g' -e 's/.*<title>\(.*\)<\/title>.*/\1/' | xargs) +# Téléchargement du flux RSS en local pour le traitement +curl -L -s -o "temp_rss.xml" "$RSS_URL" + +echo "--- DÉBUT DU TRAITEMENT : $PODCAST_NAME ---" + +# 1. Découpage des items sans csplit (via AWK) +awk '/<item>/{n++}{print > "item_" n ".xml"}' temp_rss.xml + +echo "[" > "$EPISODE_JSON" +FIRST_ITEM=true + +for f in item_*.xml; do + # On saute le premier fichier s'il ne contient pas d'item (en-tête du flux) + if ! grep -q "<item>" "$f"; then rm "$f"; continue; fi + + # Extraction des données + TITLE=$(grep "<title>" "$f" | sed 's/.*<title><!\[CDATA\[\(.*\)\]\]><\/title>.*/\1/') + PUBDATE=$(grep "<pubDate>" "$f" | sed 's/.*<pubDate>\(.*\)<\/pubDate>.*/\1/' | cut -d',' -f2 | cut -d':' -f1,2) + REMOTE_AUDIO=$(grep "<enclosure" "$f" | sed 's/.*url="\([^"]*\)".*/\1/') + REMOTE_COVER=$(grep "itunes:image" "$f" | sed 's/.*href="\([^"]*\)".*/\1/') - # On capture l'URL entre les guillemets de url="..." - REMOTE_AUDIO=$(sed -n 's/.*url="\([^"]*\)".*/\1/p' "$f" | head -n 1) - REMOTE_COVER=$(sed -n 's/.*href="\([^"]*\)".*/\1/p' "$f" | head -n 1) + # ID / Slug + ID=$(echo "$TITLE" | tr '[:upper:]' '[:lower:]' | sed "s/[^a-z0-9]/-/g; s/--*/-/g; s/^-//; s/-$//") - ID=$(echo "$TITLE" | tr '[:upper:]' '[:lower:]' | iconv -f UTF-8 -t ASCII//TRANSLIT | sed "s/[^a-z0-9]/-/g; s/--*/-/g; s/^-//; s/-$//") + echo " > Episode : $ID" - echo "--- Épisode : $TITLE ---" + # Téléchargement AUDIO (Ajout de -L pour les redirections et -k au cas où) + curl -Lk -s -o "$ENCLOSURE_DIR/$ID.mp3" "$REMOTE_AUDIO" + # Téléchargement IMAGE + curl -Lk -s -o "$IMAGE_DIR/$ID.jpg" "$REMOTE_COVER" - # TELECHARGEMENT (La partie critique) - if [ -n "$REMOTE_AUDIO" ]; then - echo " > Récupération du média..." - # On utilise des doubles guillemets pour protéger l'URL - # On ajoute -k (ignore certificats si besoin) et -L (redirection) - curl -L -s -o "$REMOTE_AUDIO" -o "$ENCLOSURE_DIR/$ID.mp3" - - # VERIFICATION IMMEDIATE - if [ -f "$ENCLOSURE_DIR/$ID.mp3" ]; then - SIZE=$(stat -f%z "$ENCLOSURE_DIR/$ID.mp3" 2>/dev/null || stat -c%s "$ENCLOSURE_DIR/$ID.mp3" 2>/dev/null) - echo " [OK] Taille : $SIZE octets" - else - echo " [!] ERREUR : Le fichier n'a pas été créé." - fi - fi + # Description + DESC_HTML=$(sed -n '/<description>/,/<\/description>/p' "$f" | sed -e 's/<description>//g' -e 's/<\/description>//g' -e 's/<!\[CDATA\[//g' -e 's/\]\]>//g') - # GENERATION HTML - DESC_HTML=$(sed -n '/<description>/,/<\/description>/p' "$f" | sed -e 's/<description>//g' -e 's/<\/description>//g' -e 's/<!\[CDATA\[//g' -e 's/\]\]>//g' | tr -d '\n\r') + # --- GÉNÉRATION HTML --- + cat <<EOF > "$EPISODE_DIR/$ID.html" +<!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="UTF-8"> + <title>$TITLE | REDSCAPEFACTORY + + + +
+ +
+
+
+
$PODCAST_NAME • $PUBDATE
+

$TITLE

+
+ +
+
$DESC_HTML
+ ← RETOUR +
+
+
+ + +EOF - python3 -c " -import sys -with open('$LAYOUT_FILE', 'r') as l: data = l.read() -data = data.replace('[[TITLE]]', \"$TITLE\") -data = data.replace('[[CONTENT]]', \"\"\"$DESC_HTML\"\"\") -data = data.replace('[[AUDIO]]', '../enclosure/$ID.mp3') -data = data.replace('[[IMAGE]]', '../images/$ID.jpg') -with open('$EPISODE_DIR/$ID.html', 'w') as out: out.write(data) -" + # JSON + if [ "$FIRST_ITEM" = false ]; then echo "," >> "$EPISODE_JSON"; fi + cat <> "$EPISODE_JSON" + { + "id": "$ID", + "title": "$(clean_json_text "$TITLE")", + "audio": "enclosure/$ID.mp3", + "cover": "images/$ID.jpg", + "file": "episodes/$ID.html" + } +EOF + FIRST_ITEM=false + rm "$f" done -rm -rf temp_items -echo "Terminé." \ No newline at end of file +echo "]" >> "$EPISODE_JSON" +rm temp_rss.xml +echo "--- TERMINÉ ---" \ No newline at end of file diff --git a/podcasts/layout.txt b/podcasts/layout.txt deleted file mode 100644 index 6e03f71..0000000 --- a/podcasts/layout.txt +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - [[TITLE]] | REDSCAPEFACTORY - - - - -
- -
- -
-
-
-
EPISODE
-

[[TITLE]]

- -
- [[CONTENT]] -
- -
- ÉCOUTER L'ÉPISODE - -
- - ← Retour à la série -
- -
- [[TITLE]] -
-
-
- - - - - \ No newline at end of file diff --git a/podcasts/podcasts/deepseaproject/episodes.json b/podcasts/podcasts/deepseaproject/episodes.json new file mode 100644 index 0000000..0d4f101 --- /dev/null +++ b/podcasts/podcasts/deepseaproject/episodes.json @@ -0,0 +1,2 @@ +[ +] diff --git a/style.css b/style.css index 027b1e4..c197591 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,7 @@ +html { + scroll-behavior: smooth; +} + /* ========================================== 1. BASES & TYPOGRAPHIE (Le look "classe") ========================================== */ @@ -9,11 +13,19 @@ --accent-color: #ffffff; } +::selection { + background: #333; /* Un gris acier */ + color: #fff; +} + * { box-sizing: border-box; } body { + display: flex; + flex-direction: column; + min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-color); color: var(--text-color); @@ -22,13 +34,17 @@ body { -webkit-font-smoothing: antialiased; } +main { + flex: 1; +} + /* ========================================== - 2. HEADER & NAVIGATION (Blanc pur) + 2. HEADER & NAVIGATION ========================================== */ header { background-color: var(--bg-color); border-bottom: 1px solid var(--border-color); - padding: 30px 40px; /* On augmente légèrement le padding vertical */ + padding: 10px 40px; position: sticky; top: 0; z-index: 1000; @@ -41,49 +57,112 @@ nav { } .logo img { - height: 60px; /* On double presque la taille (était à 35px) */ + height: 60px; width: auto; display: block; transition: transform 0.3s ease; } -.logo img:hover { - transform: scale(1.02); -} - -nav ul { - list-style: none; +/* Configuration de la liste principale */ +.nav-links { display: flex; + list-style: none; gap: 30px; margin: 0; padding: 0; + align-items: center; } -nav a { +/* Style des liens principaux */ +.nav-links > li > a { text-decoration: none; color: var(--accent-color); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 2px; font-weight: 600; + position: relative; + padding-bottom: 5px; } -/* Dropdown */ -.dropdown { position: relative; } -.submenu { - display: none; +/* Effet de soulignement (uniquement sur les liens principaux) */ +.nav-links > li > a::after { + content: ''; + position: absolute; + width: 0; + height: 1px; + bottom: 0; + left: 0; + background-color: var(--accent-color); + transition: width 0.3s ease; +} + +.nav-links > li:hover > a::after { + width: 100%; +} + +/* --- Gestion du Dropdown --- */ +.has-dropdown { + position: relative; /* Référentiel pour le sous-menu */ +} + +.dropdown { position: absolute; top: 100%; left: 0; - background: #1a1a1a; + background-color: #000; border: 1px solid var(--border-color); - list-style: none; - padding: 15px 0; - min-width: 180px; + padding: 8px 0; /* Réduit (était à 15px) */ + margin: 0; + min-width: 200px; /* Plus étroit */ + display: none; + z-index: 999; + list-style: none; /* FORCE la suppression du point/puce */ +} + +/* On s'assure que les éléments internes n'ont pas de puce non plus */ +.dropdown li { + list-style: none; + margin: 0; + padding: 0; +} + +/* On crée un "pont" invisible pour que la souris ne quitte jamais la zone active */ +.has-dropdown::after { + content: ""; + position: absolute; + top: 100%; + left: 0; + width: 100%; + height: 35px; /* Doit correspondre à la distance à combler */ + display: block; +} + +/* Affiche au survol */ +.has-dropdown:hover .dropdown { + display: block; +} + +.dropdown li a { + padding: 8px 20px; /* Moins d'espace vertical pour un menu plus fin */ + display: block; + color: #fff; + text-decoration: none; + font-size: 0.7rem; /* Taille plus discrète */ + letter-spacing: 1px; + text-transform: uppercase; + transition: background 0.3s; +} + +.dropdown li a:hover { + background-color: #111; + color: var(--accent-color); +} + +/* On désactive l'effet de soulignement dans le sous-menu */ +.dropdown li a::after { + display: none; } -.submenu li { padding: 5px 20px; } -.submenu a { font-size: 0.6rem; letter-spacing: 1px; } -.dropdown:hover .submenu { display: block; } /* ========================================== 3. STRUCTURES DE PAGES (Centrage & Largeur) @@ -106,16 +185,20 @@ nav a { } .hero-container { - display: grid; + display: flex; grid-template-columns: 1fr 1.1fr; gap: 80px; - align-items: center; + align-items: stretch; } .hero-description { + display: flex; + flex-direction: column; + justify-content: space-between; /* Centre le texte verticalement par rapport à l'image */ font-size: 1.1rem; font-weight: 300; line-height: 1.8; + margin: 0; /* Nettoie les marges par défaut */ } .hero-visual img { @@ -125,8 +208,8 @@ nav a { /* Liste Projets Horizontale */ .home-projects-list { - padding: 60px 40px; - margin-bottom: 40px; + padding: 60px 40px 20px 40px; + margin-bottom: 20px; } .projects-horizontal-container { @@ -182,7 +265,7 @@ nav a { display: grid; grid-template-columns: 1fr 1.2fr; gap: 100px; /* Aération entre texte et image */ - padding: 0 40px 120px 40px; + padding: 0 40px 6cm 40px; align-items: start; } @@ -252,7 +335,7 @@ nav a { .zake-footer { grid-template-columns: 1fr; gap: 40px; } } -/* --- Grille des Podcasts (Covers) --- */ +/* --- Grille des Podcasts Unifiée --- */ .podcasts-grid-container { max-width: 1200px; margin: 0 auto 100px auto; @@ -261,125 +344,160 @@ nav a { .podcasts-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 30px; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 40px; + padding: 60px 0; } .podcast-card { - position: relative; - display: block; - overflow: hidden; + background: #000; border: 1px solid var(--border-color); + text-decoration: none; + display: flex; + flex-direction: column; + transition: border-color 0.3s ease; + /* On enlève le transform global qui peut causer des bugs de collision */ +} + +/* Conteneur d'image pour isoler le zoom */ +.podcast-image-wrapper { + width: 100%; aspect-ratio: 1 / 1; + overflow: hidden; /* Important pour que le zoom ne dépasse pas */ + position: relative; } .podcast-card img { width: 100%; height: 100%; object-fit: cover; - transition: transform 0.5s ease; + filter: grayscale(20%); + transition: transform 0.5s ease, filter 0.5s ease; } -.podcast-overlay { - position: absolute; - inset: 0; - background: rgba(255, 255, 255, 0.9); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - opacity: 0; - transition: opacity 0.3s ease; +/* Effets au survol de la carte */ +.podcast-card:hover { + border-color: #666; } -.podcast-card:hover img { transform: scale(1.05); } -.podcast-card:hover .podcast-overlay { opacity: 1; } - -.podcast-overlay h3 { - font-size: 0.9rem; - letter-spacing: 2px; - margin-bottom: 15px; - text-transform: uppercase; +.podcast-card:hover img { + transform: scale(1.05); + filter: grayscale(0%); } -.view-btn { - font-size: 0.6rem; - letter-spacing: 1px; - border: 1px solid var(--text-color); - padding: 8px 15px; -} - -/* --- Styles liens et player --- */ -.podcast-links { - display: flex; - gap: 20px; - margin: 20px 0; -} - -.rss-link, .platform-link { - font-size: 0.65rem; - letter-spacing: 1px; - text-decoration: none; - color: var(--text-color); - font-weight: 600; -} - -.audio-player-box { - margin: 30px 0; +/* Infos sous l'image */ +.podcast-info { padding: 20px; - background: #151515; - border: 1px solid var(--border-color); + background: #0a0a0a; } -.audio-player-box audio { width: 100%; } +.podcast-info h3 { + font-size: 0.8rem; + letter-spacing: 2px; + text-transform: uppercase; + margin: 0 0 10px 0; + color: var(--accent-color); +} -/* --- Styles Galerie --- */ +.podcast-info p { + font-size: 0.7rem; + color: #666; + margin: 0; + line-height: 1.4; +} + +/* --- Styles de la Galerie --- */ .gallery-container { max-width: 1200px; - margin: 0 auto 100px auto; - padding: 0 40px; + margin: 60px auto; + padding: 0 20px; } .gallery-grid { - column-count: 3; /* Nombre de colonnes */ - column-gap: 20px; -} - -.gallery-item { - break-inside: avoid; /* Évite de couper une image entre deux colonnes */ - margin-bottom: 20px; - background-color: #111; - border: 1px solid var(--border-color); - overflow: hidden; - transition: border-color 0.3s ease; + display: grid; + /* Crée 3 colonnes de taille égale */ + grid-template-columns: repeat(3, 1fr); + gap: 20px; /* Espace entre les photos */ } .gallery-item img { width: 100%; height: auto; display: block; - filter: grayscale(30%); /* Petit effet désaturé pour le look industriel */ - transition: all 0.5s ease; + border: 1px solid var(--border-color); + transition: transform 0.3s ease; } -.gallery-item:hover { +.gallery-item img:hover { + transform: scale(1.02); border-color: #666; } -.gallery-item:hover img { - filter: grayscale(0%); - transform: scale(1.03); -} - -/* Responsive Galerie */ -@media (max-width: 900px) { +/* Version Mobile : 1 seule colonne */ +@media (max-width: 768px) { .gallery-grid { - column-count: 2; + grid-template-columns: 1fr; } } +/* --- Styles Contact --- */ +.contact-container { + max-width: 800px; + margin: 0 auto 100px auto; + padding: 0 40px; +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + border-top: 1px solid var(--border-color); + padding-top: 40px; +} + +.contact-method h3 { + text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 2px; + color: #666; + margin-bottom: 20px; +} + +.contact-link { + font-size: 1.5rem; + color: var(--accent-color); + text-decoration: none; + transition: opacity 0.3s; +} + +.contact-link:hover { + opacity: 0.7; +} + +.social-list { + list-style: none; + padding: 0; +} + +.social-list li { + margin-bottom: 10px; +} + +.social-list a { + color: var(--text-color); + text-decoration: none; + font-size: 1.1rem; + transition: color 0.3s; +} + +.social-list a:hover { + color: var(--accent-color); +} + +/* Responsive Contact */ @media (max-width: 600px) { - .gallery-grid { - column-count: 1; + .contact-grid { + grid-template-columns: 1fr; + gap: 40px; } } \ No newline at end of file