Ajout des nouveaux visuels et changement des couleurs

index.html

@@ -34,64 +34,31 @@
     </p>
 </main>
 
+<div class="jour-container">
     <div id="premier-jour">
-    <p class="titre-accueil"><strong>Premier jour : Le Kabärêve !</strong></p>
+        <p class="titre-accueil"><strong>Premier jour : Le Kabärêve!<br/></strong></p>
-    <p class="soustitre">
+        <p class="soustitre"><br/>Le 5 juillet à Saint Genest d’Ambière et le 11 juillet à Saint-Vitte !</p>
-        Le 5 juillet à Saint Genest d’Ambière et le 11 juillet à Saint-Vitte !
+        <p class="soustitre">Venez plongez dans l’univers du rêve avec un dîner spectaculaire sous chapiteau !</p>
-    </p>
+        <p class="soustitre">Entrée-Plat-Dessert et Spectacle !</p>
-    <p class="infos-date">
+        <p class="soustitre">19h : Ouverture du site<br/>20h : Kabärêve</p>
-        Venez plongez dans l’univers du rêve avec un dîner spectaculaire sous chapiteau !
+        <p class="soustitre">Au programme une cuisine faite maison mettant en avant des produits locaux et de saison...<br/></p>
-    </p>
+        <p class="soustitre"><strong><br/>Prix fourchette au choix entre 30€ et 18€.<br/>Prix -12 ans : 10€</strong></p>
-    <p class="infos-date">
-        Entrée-Plat-Dessert et Spectacle !
-    </p>
-    <p class="infos-date">
-        19h : Ouverture du site<br/>
-        20h : Kabärêve
-    </p>
-    <p class="infos-date">
-        Au programme une cuisine faite maison mettant en avant des produits locaux et de saison...
-    </p>
-    <p class="infos-date">
-        <strong>Prix fourchette au choix entre 30€ et 18€.</strong>
-    </p>
     </div>
-
+    <img src="images/affiche-jour1.jpg" alt="Affiche jour 1" class="image-jour" />
-<div class="banner-image">
-    <img src="images/photo_kabaret.webp" alt="Kabärêve ambiance chapiteau">
 </div>
 
 <div class="jour-container">
-    <div class="jour-image">
+    <img src="images/flyer-verso.jpg" alt="Affiche jour 2" class="image-jour" />
-        <img src="images/journee_festive.webp" alt="Chapiteau et public">
+    <div id="deuxieme-jour">
-    </div>
-
-    <div id="deuxième-jour">
         <p class="titre-accueil"><strong>Deuxième jour : Journée festive</strong></p>
-        <p class="soustitre">
+        <p class="soustitre"><br/>Le 6 juillet à Saint Genest d’Ambière et le 12 juillet à Saint-Vitte !</p>
-            Le 6 juillet à Saint Genest d’Ambière et le 12 juillet à Saint-Vitte !
+        <p class="soustitre"><br/><strong>Prix Libre !</strong></p>
-        </p>
+        <p class="soustitre"><br/>14h Ouverture du site ( buvette et crêpes aussi!)</p>
-        <p class="soustitre">
+        <p class="soustitre">15h "Jus de chaussettes", Cie L’éffémémère...</p>
-            Prix Libre !
+        <p class="soustitre">15h45 – 18h : Ateliers, animations, jeux...</p>
-        </p>
+        <p class="soustitre">18h : « Les désacordées », Cie Asso Téléplomb...</p>
-        <p class="soustitre">
+        <p class="soustitre">19h PIZZA</p>
-            14h Ouverture du site ( buvette et crêpes aussi!)
+        <p class="soustitre">20h Scène ouverte</p>
-        </p>
-        <p class="soustitre">
-            15h "Jus de chaussettes", Cie L’éffémémère...
-        </p>
-        <p class="soustitre">
-            15h45 – 18h : Ateliers, animations, jeux...
-        </p>
-        <p class="soustitre">
-            18h : « Les désacordées », Cie Asso Téléplomb...
-        </p>
-        <p class="soustitre">
-            19h PIZZA
-        </p>
-        <p class="soustitre">
-            20h Scène ouverte
-        </p>
     </div>
 </div>
 

karafon_style.css

@@ -1,14 +1,17 @@
+/* karafon_style.css */
+
 html, body {
     margin: 0;
     padding: 0;
     font-family: Georgia, Verdana, sans-serif;
-    background-color: #fde47d;
+    background-color: #e3bd98;
+    color: #6c324b;
 }
 
 header {
     width: 100vw;
     align-items: center;
-    background-color: #3897d1;
+    background-color: #411431;
     padding: 20px;
     text-align: center;
 }
@@ -29,7 +32,7 @@ li {
 }
 
 li a {
-    color: rgb(250, 250, 200);
+    color: #fdcb74;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
@@ -49,36 +52,31 @@ li a {
 }
 
 #collectif_karafon {
-    color: rgb(248, 248, 218);
+    color: #fdcb74;
     font-size: 2.2em;
     margin: 0;
 }
 
 #festival_itinerant {
-    color: rgb(248, 248, 218);
+    color: #fdcb74;
     font-size: 1.3em;
     margin: 1em 0 1.2em;
 }
 
 .corps {
-    margin-top: 4em;
+    margin: 4em 10%;
-    margin-left: 20%;
-    margin-right: 20%;
     text-align: center;
-    color: rgb(29, 92, 117);
     font-size: 1em;
 }
 
-
 #on_attend {
-    margin-top: 0.5em;
+    margin: 2em auto;
-    margin-left: 20%;
+    max-width: 80%;
-    margin-right: 20%;
     text-align: center;
-    color: rgb(29, 92, 117);
     font-size: 2.5em;
 }
 
+/* ===== Titres & sous-titres ===== */
 .titre-accueil {
     font-size: 2.2em;
     font-weight: bold;
@@ -90,11 +88,11 @@ li a {
     margin-bottom: 0.5em;
 }
 
-
 strong {
     font-weight: bold;
 }
 
+
 #equipe {
     position: absolute;
     right: 7%;
@@ -115,15 +113,15 @@ strong {
 }
 
 .encadre {
-    color:rgb(29,92,117);
+    color: #6c324b;
     padding: 5%;
     font-size: 1.7em;
     font-weight: 600;
 }
 
 footer {
-    background-color: #3897d1;
+    background-color: #411431;
-    color: rgb(248, 248, 218);
+    color: #fdcb74;
     text-align: center;
     padding: 20px;
     margin-top: 3em;
@@ -138,48 +136,41 @@ footer {
     margin-top: 10px;
 }
 
-#premier-jour {
-    margin: 4em 10% 0 10%;
-    text-align: left;
-    color: rgb(29, 92, 117);
-    font-size: 1em;
-}
-
-#deuxième-jour {
-    flex: 0 1 55%;
-    text-align: right;
-    color: rgb(29, 92, 117);
-    font-size: 1em;
-    margin: 0;
-}
-
-
-.banner-image {
-    width: 100%;
-    text-align: center;
-    margin: 0;
-}
-
-.banner-image img {
-    width: 100%;
-    max-width: 1000px;
-    height: auto;
-    border-radius: 10px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-.jour-image img {
-    max-width: 100%;
-    height: auto;
-    border-radius: 8px;
-}
-
 .jour-container {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
-    gap: 2em;
+    justify-content: space-between;
-    margin: 4em 10%;
+    gap: 1.5em;
+    margin: 3em auto;
+    max-width: 90%;
 }
 
+.image-jour {
+    flex: 0 1 45%;
+    max-width: 45%;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+}
 
+#premier-jour {
+    flex: 0 1 45%;
+    max-width: 45%;
+    margin: 0;
+    box-sizing: border-box;
+    text-align: left;
+    color: #6c324b;
+    font-size: 1em;
+}
+
+#deuxieme-jour {
+    flex: 0 1 45%;
+    max-width: 45%;
+    margin: 0;
+    box-sizing: border-box;
+    text-align: right;
+    color: #6c324b;
+    font-size: 1em;
+}