This commit is contained in:
2026-04-13 00:34:05 +02:00
parent ef126bc177
commit ee37e0041f
5 changed files with 68 additions and 217 deletions

View File

@@ -11,7 +11,6 @@
<section class="fiche_concert_wp">
<div class="fiche_header_wp_gauche"></div>
<div class="fiche_header_inner">
<div class="fiche_header_titres">
<div>
@@ -342,15 +341,11 @@
display: grid;
@media (min-width: 0px) and (max-width: 600px) {
@media (min-width: 0px) and (max-width: 700px) {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
padding-top: 40px;
}
@media (min-width: 600px) {
grid-template-columns: minmax(10px, 10px) 580px 0px;
grid-template-rows: 40px auto;
}
@media (min-width: 700px) {
grid-template-columns: minmax(10px, 10px) 660px 0px;
grid-template-rows: 70px auto;
@@ -388,80 +383,69 @@
grid-template-rows: 90px auto;
}
.fiche_header_wp_gauche {
@media (min-width: 0px) and (max-width: 600px) {
display: none;
}
@media (min-width: 600px) {
grid-column: 1;
}
}
.fiche_header_inner {
@media (min-width: 0px) and (max-width: 600px) {
@media (min-width: 0px) and (max-width: 700px) {
grid-column: 1;
grid-row: 1/3;
}
@media (min-width: 600px) {
@media (min-width: 700px) {
grid-column: 2;
grid-row: 1/3;
}
display: grid;
@media (min-width: 0px) and (max-width: 600px) {
grid-template-columns: 4fr 1fr 0.5fr;
grid-template-rows: auto 510px 20px 200px;
}
@media (min-width: 600px) {
width: 575px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 40px 280px 20px 230px;
@media (min-width: 0px) and (max-width: 700px) {
grid-template-columns: 1fr;
grid-template-rows: auto auto min-content auto auto;
}
@media (min-width: 700px) {
width: 675px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 70px 250px 90px 300px;
grid-template-columns: 4fr 4fr;
grid-template-rows: 70px auto min-content auto auto;
}
@media (min-width: 800px) {
width: 780px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 60px 280px 70px 300px;
grid-template-columns: 4fr 4fr;
grid-template-rows: 60px auto min-content auto auto;
}
@media (min-width: 900px) {
width: 860px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 90px 340px 100px 250px;
grid-template-columns: 4fr 4fr;
grid-template-rows: 90px auto min-content auto auto;
}
@media (min-width: 1000px) {
width: 950px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 90px 340px 120px 270px;
grid-template-columns: 4fr 4fr;
grid-template-rows: 90px auto min-content auto auto;
}
@media (min-width: 1100px) {
width: 1020px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 90px 340px 140px 290px;
grid-template-columns: 4fr 4fr;
grid-template-rows: 90px auto min-content auto auto;
}
@media (min-width: 1200px) {
width: 1100px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 90px 340px 160px 330px;
grid-template-columns: 4fr 4fr;
grid-template-rows: 90px auto min-content auto auto;
}
@media (min-width: 1300px) {
width: 1200px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 90px 340px 160px 330px;
grid-template-columns: 4fr 4fr;
grid-template-rows: 90px auto min-content auto auto;
}
@media (min-width: 1400px) {
width: 1300px;
grid-template-columns: 4fr 0.5fr 0.5fr 6.5fr;
grid-template-rows: 90px 340px 160px 380px;
grid-template-columns: 4fr 4fr;
grid-template-rows: 90px auto min-content auto auto;
}
@media (min-width: 1500px) {
width: 1400px;
grid-template-columns: 4fr 4fr 0.5fr;
grid-template-columns: 4fr 4fr;
grid-template-rows: 90px auto min-content auto auto;
}
@@ -470,29 +454,28 @@
.fiche_header_titres {
//background-color: rgba(255, 166, 0, 0.674);
@media (min-width: 0px) and (max-width: 600px) {
@media (min-width: 0px) and (max-width: 700px) {
grid-column: 1;
grid-row: 1;
padding-bottom: 20px;
padding-left: 10px;
}
@media (min-width: 600px) {
@media (min-width: 700px) {
grid-column: 1;
grid-row: 2;
}
display: grid;
align-content: start;
gap: 0.75rem;
padding-right: 10px;
padding-bottom: 10px;
h1 {
font-size: 55px;
@media (min-width: 0px) and (max-width: 600px) {
@media (min-width: 0px) and (max-width: 700px) {
font-size: 25px;
}
@media (min-width: 600px) {
font-size: 25px;
}
@media (min-width: 700px) {
font-size: 30px;
}
@@ -534,11 +517,11 @@
.fiche_header_img {
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1 / 4;
grid-row: 1 / 4;
@media (min-width: 0px) and (max-width: 700px) {
grid-column: 1;
grid-row: 2;
}
@media (min-width: 600px) {
@media (min-width: 700px) {
grid-column: 2;
grid-row: 1 / 5;
}
@@ -550,23 +533,25 @@
.fiche_header_infos {
background-color: var(--c-text);
@media (min-width: 0px) and (max-width: 600px) {
grid-column: 1 / 2;
@media (min-width: 0px) and (max-width: 700px) {
grid-column: 1;
grid-row: 4;
margin-top: -30px;
}
@media (min-width: 600px) {
@media (min-width: 700px) {
grid-column: 2;
grid-row: 5;
}
display: grid;
align-content: center;
align-content: start;
justify-content: end;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 10px;
width: 96%;
@media (min-width: 0px) and (max-width: 700px) {
width: 100%;
}
margin-top: -18px;
@media (min-width: 0px) and (max-width: 700px) {
gap: 7px;
@@ -603,7 +588,10 @@
.fiche_header_distrib_wp {
background-color: var(--c-backgroud-brandreverse);
grid-column: 1;
grid-row: 3/5;
grid-row: 3;
@media (min-width: 0px) and (max-width: 700px) {
width: 96%;
}
.programme_list {
display: flex;
flex-wrap: wrap;
@@ -635,7 +623,7 @@
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
@media (min-width: 0px) and (max-width: 600px) {
@media (min-width: 0px) and (max-width: 700px) {
padding-left: 20px;
padding-right: 5px;
}
@@ -690,143 +678,7 @@
}
}
/* ============================ */
/* DISTRIBUTION / PROGRAMME */
/* ============================ */
.fiche_details_wp {
.distribution_wp {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 20px;
.distribution_item {
display: flex;
.distribution_item_poste {
padding-right: 10px;
font-weight: 200;
}
.direction {
font-weight: 400;
}
}
}
.programme_wp {
background-color: var(--c-backgroud-brandreverse);
margin-bottom: 70px;
padding-top: 50px;
padding-right: 30px;
padding-left: 50px;
@media (max-width: 599px) {
padding-left: 40px;
}
padding-bottom: 50px;
/* DÉCALAGE DU BLOC VERS LA DROITE */
position: relative;
@media (min-width: 0px) and (max-width: 700px) {
width: 89vw;
left: 5%;
}
@media (min-width: 700px) {
width: 67vw;
left: 30%;
}
@media (min-width: 800px) {
width: 50vw;
left: 49%;
}
transform: translateX(0px);
margin-left: 0px;
margin-right: 0px;
box-sizing: border-box;
display: block;
justify-content: initial;
align-items: initial;
.programme_titre {
padding-bottom: 20px;
}
.programme_list {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 20px;
}
.programme_item {
flex: 1 0 200px;
background-color: var(--c-surface);
padding-top: 14px;
padding-right: 20px;
padding-left: 18px;
padding-bottom: 10px;
}
}
}
/* ============================ */
/* REPRÉSENTATIONS */
/* ============================ */
.representation_wp {
display: flex;
flex-wrap: wrap;
/* justify-content: center; */
column-gap: 30px;
row-gap: 30px;
padding-bottom: 70px;
@media (min-width: 0px) and (max-width: 600px) {
padding-left: 20px;
padding-right: 5px;
}
.representation_item {
@media (min-width: 0px) and (max-width: 500px) {
width: 100%;
}
@media (min-width: 500px) {
max-width: 215px;
}
@media (min-width: 600px) {
max-width: 262px;
}
@media (min-width: 700px) {
max-width: 300px;
}
flex: 1 1 300px;
display: grid;
border: 2px var(--c-brand_rouge) solid;
padding-top: 20px;
> * {
padding-left: 20px;
padding-right: 20px;
}
.representation_item_comment_wp {
padding-top: 5px;
}
.representation_item_comment {
background-color: lightgray;
padding: 5px;
}
}
.representation_cta {
color: var(--c-surface);
background-color: var(--c-brand_rouge);
margin-top: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
a {
font-family: var(--font-roboto);
font-weight: 600;
font-size: 18px;
}
}
}
/* ============================ */
/* GALERIES */

View File

@@ -333,7 +333,7 @@
{
id: '3',
title: "BEETHOVEN : LA SYMPHONIE N°4, CHEF-DOEUVRE À LA FOIS CLASSIQUE ET ROMANTIQUE",
description: `Avant la première exécution publique de lœuvre au Theater an der Wien, la partition de la Quatrième symphonie de Beethoven avait dabord été créée dans le palais du prince Lobkowitz en mars 1807.`,
description: `Avant la première exécution publique de lœuvre au Theater an der Wien, la partition de la Quatrième symphonie de Beethoven avait dabord été créée dans le palais du prince Lobkowitz en mars 1807.`,
url:"#",
},
])