/*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* ----------------------------- */ /* Général /* ----------------------------- */ html { /* set base font-size to equiv "10px", which is adapted to rem unit */ font-size: 62.5%; /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ font-size: calc(1em * 0.625); } *[role=button]{ user-select: none; } *[role=button], button, .select-wrapper, select{ cursor: pointer; } h1.hidden{ display: none; } ::-moz-placeholder{ opacity: 1; } html{ scroll-behavior: smooth; } strong{ font-weight: bold; } em{ font-style: italic; } /* ----------------------------- */ /* Typo /* ----------------------------- */ @font-face { font-family: 'Antique Olive'; src: url('../fonts/AntiqueOliveStd-Roman.woff2') format('woff2'), url('../fonts/AntiqueOliveStd-Roman.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Antique Olive'; src: url('../fonts/AntiqueOliveStd-Bold.woff2') format('woff2'), url('../fonts/AntiqueOliveStd-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'RageDOT'; src: url('../fonts/RageDOT-Regular.woff2') format('woff2'), url('../fonts/RageDOT-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } body{ font-family: 'Antique Olive', Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.1; text-rendering: optimizeLegibility; } .item-date .item-journum, .r100{ font-family: 'RageDOT', 'Brush Script MT', cursive; font-size: 13rem; line-height: 0.66; letter-spacing: -0.05em; } .item-date.multi .item-journum, .r80{ font-family: 'RageDOT', 'Brush Script MT', cursive; font-size: 10.4rem; line-height: 0.66; letter-spacing: -0.05em; } .menu-principal, .projet-titre, .post-titre, .t50{ font-size: 6.5rem; line-height: 0.93; letter-spacing: -0.02em; } .item-jour, .item-mois, .itemprojet-titre, .t30{ font-size: 3.9rem; line-height: 1; letter-spacing: -0.01em; } .item-titre, p.noresults, .t24{ font-size: 3.12rem; letter-spacing: -0.005em; } body, .projet-texte h2, .t15{ font-size: 1.95rem; } .itemprojet-descriptif, .projet-texte, .post-texte, .t12-5{ font-size: 1.625rem; } .footer, .projet-programme, .projet-infos h3 + *, .section-texte *:not(h2), .slide-legende, .t8{ font-size: 1.2rem; font-weight: bold; } /* +1200 -1439 */ @media (min-width: 1200px) and (max-width: 1439px){ .menu-principal, .projet-titre, .post-titre, .t50{ font-size: 5.6rem; } } /* +1000 -1199 */ @media (min-width: 1000px) and (max-width: 1199px){ .projet-titre, .post-titre{ font-size: 6rem; } .menu-principal{ font-size: 4.8rem; } } /* +768 -999 */ @media (min-width: 768px) and (max-width: 999px){ .projet-titre, .post-titre{ font-size: 5rem; } } /* -999 */ @media (max-width: 999px){ .menu-principal{ font-size: 17vw; line-height: 1; } } /* -767 */ @media (max-width: 767px){ .itemprojet-titre{ font-size: 3.12rem; } .projet-titre, .post-titre{ font-size: 11vw; } .filtres-tags, .t12-5{ font-size: 1.625rem; } } /* ----------------------------- */ /* Variables /* ----------------------------- */ :root{ --marge: 2.4rem; --gutter: 2rem; --couleur1: #FF5A9E; --couleur1-light: #FFCEE2; --couleur2: #EDEDED; } /* -999 */ @media (max-width: 999px){ :root{ --marge: 1.6rem; } } /* ----------------------------- */ /* Couleurs /* ----------------------------- */ body{ color: var(--couleur1); } .filtres-tags a:hover{ background-color: var(--couleur1); } .filtres-tags a:hover{ border: 2px solid var(--couleur1); } .filtres-tags a:hover{ color: var(--couleur2); } body{ background-color: var(--couleur2); } .menu-principal menu > li > a:hover, .menu-principal menu > li > a.current{ -webkit-text-stroke-width: 0.02em; -webkit-text-stroke-color: var(--couleur1); color: var(--couleur1-light); } ::-moz-selection{ color: var(--couleur2); background-color: var(--couleur1); } ::selection{ color: var(--couleur2); background-color: var(--couleur1); } /* ----------------------------- */ /* Liens / boutons /* ----------------------------- */ /* Liens */ .projet-details a, .projet-generique a, .projet-texte a, .post > section a, .article-chapeau a, .article-section a{ text-decoration: underline; text-decoration-thickness: 0.1rem; } .projet-details a:hover, .projet-generique a:hover, .projet-texte a:hover, .projet-infos a:hover, .post > section a:hover, .article-chapeau a:hover, .article-section a:hover, footer a:hover{ opacity: 0.6; } /* Liens blocs */ .item, .itemprojet, .linkzone{ position: relative; } .item h2 a::after, .itemprojet h2 a::after{ content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0); z-index: 2; } /* ----------------------------- */ /* Images /* ----------------------------- */ /* Ratio des images */ .item-image img, .itemprojet-image img, .article-image img{ display: block; aspect-ratio: 3 / 2; object-fit: cover; } /* Bichromie */ figure.duotone{ position: relative; overflow: hidden; } figure.duotone img{ -webkit-filter: url('#duotone'); filter: url('#duotone'); width: 100%; } @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm){ /* Fix pour Chrome en attendant */ figure.duotone img{ -webkit-filter: url('#duotone') saturate(0.85) hue-rotate(1.5deg); filter: url('#duotone') saturate(0.85) hue-rotate(1.5deg); } } /* ----------------------------- */ /* Splide slider / galerie /* ----------------------------- */ .splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} .splide__track{ cursor: move; cursor: grab; } .splide__arrows, .splide__pagination{ display: none; } .splide__slide img{ display: block; height: 100%; margin: 0 auto; object-fit: cover; } .splide, .splide__track, .splide__slide{ aspect-ratio: 3 / 2; } /* Légendes */ .slide-legende{ display: none; margin-top: 1em; justify-content: space-between; } .article-image + .slide-legende{ display: flex; } .slide-legende .counter{ margin-right: 4em; } /* ----------------------------- */ /* Lightbox (lightgallery) /* ----------------------------- */ .lg-counter, .lg-download{ display: none; } .lg-backdrop{ background-color: var(--couleur2); } .lg-container img{ user-select: none; } .lg-toolbar{ padding: var(--marge); text-align: right; } .lg-close{ background-image: url('../images/miroirs/icon-close.svg'); width: 4rem; height: 4rem; } .lg-sub-html{ text-align: center; padding-bottom: 1rem; } /* +900 */ @media (min-width: 900px){ .lg-img-wrap{ padding: 0 var(--marge) var(--marge); } } /* -899 */ @media (max-width: 899px){ .lg-close{ width: 7.74vw; height: 7.74vw; position: relative; top: 0.43vw; right: 0.43vw; } } /* ----------------------------- */ /* Layout /* ----------------------------- */ body{ display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } main{ flex-grow: 1; } .header{ padding: 0 var(--marge); } .footer, .programme .noresults{ padding: var(--marge); } .projets .noresults{ padding: var(--marge) 0; } .projet, .post{ padding: 0 var(--marge); } .filtres-tags, .separateur, .projets, .page-standard{ margin: 0 var(--marge); } /* -767 */ @media (max-width: 767px){ .page-standard{ margin: 0; } } /* ----------------------------- */ /* Header + menu principal /* ----------------------------- */ .header{ margin-bottom: calc(2rem + 1.5vw) } .logo{ width: 47%; user-select: none; } .logo a, .logo a img{ display: block; } .logo a{ position: relative; margin-bottom: -7%; } .logo .etendus{ transform: translateY(-27%); transition: all 0.25s ease; } .logo:hover .etendus{ transform: translateY(4%); } .logo .ensemble-musical{ position: absolute; top: 54.5%; left: 50%; width: 58.5%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); transition: all 0.12s ease; } .logo:hover .ensemble-musical{ opacity: 1; transform: translate(-50%, -50%) scale(1); transition: all 0.25s ease; } .menu-principal{ width: 10.5em; user-select: none; z-index: 9; } .menu-principal menu{ text-align: center; } /* +1000 */ @media (min-width: 1000px){ .toggle-menu{ display: none; } .header{ display: flex; justify-content: space-between; } .menu-principal{ padding-top: var(--marge); } .menu-principal li{ display: inline-block; } .menu-principal li:nth-child(odd)::after{ content: '\002022'; } } /* -999 */ @media (max-width: 999px){ .header{ margin-bottom: calc(1.5rem + 3vw) } .logo{ width: 85%; margin-top: 1rem; } .toggle-menu{ position: fixed; top: var(--marge); right: var(--marge); width: 8.6vw; height: 8.6vw; z-index: 10; } .toggle-menu img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .toggle-menu img.close-menu{ width: 90%; left: 5%; display: none; } header.menu-open img.open-menu{ display: none; } header.menu-open img.close-menu{ display: block; } .menu-principal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; background-color: var(--couleur2); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; } header.menu-open .menu-principal{ opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; } .menu-principal menu{ margin: auto; transform: scale(0.9); transition: transform 0.3s; } header.menu-open menu{ transform: scale(1); transition: transform 0.5s ease; } .logo, main, footer{ transition: transform 0.3s ease; } header.menu-open .logo{ transform: translateY(-120%); } header.menu-open + main, header.menu-open + main + footer{ transform: translateY(33vw); } } /* ----------------------------- */ /* Footer /* ----------------------------- */ .footer{ display: flex; justify-content: flex-end; align-items: flex-end; } .footer-menu menu{ columns: 3; column-width: 10em; column-gap: var(--gutter); } /* -767 */ @media (max-width: 767px){ .footer{ justify-content: flex-start; } .footer-menu menu{ column-width: 8em; } } /* ----------------------------- */ /* Tags / filtres / boutons /* ----------------------------- */ .filtres-tags{ display: flex; flex-wrap: wrap; column-gap: var(--gutter); row-gap: 1rem; padding-bottom: 1.8rem; background-image: url('../images/miroirs/line-h1.png'); background-size: 156rem; background-position: bottom left; background-repeat: repeat-x; } .filtres-tags .aside-button{ margin-left: auto; } .filtres-tags .select-wrapper{ position: relative; width: 8em; } .filtres-tags .select-wrapper::after{ content: url('../images/miroirs/icon-select.svg'); display: inline-block; position: absolute; top: 0.3em; right: 0.5em; width: 1.5rem; height: 1rem; pointer-events: none; } .filtres-tags select{ width: 100%; } .filtres-tags select, .filtres-tags a{ border: 2px solid; border-radius: 3em; display: flex; line-height: 0.95; padding: 0.32em 0.6em 0em; align-items: end; padding-bottom: 0.1em; white-space: nowrap; user-select: none; } .post-retour{ padding-right: 1em; } .post-retour::after{ content: url('../images/miroirs/icon-retour.svg'); display: inline-block; width: 0.85em; margin-left: 0.5em; margin-top: -0.1em; margin-right: -0.2em; } .post-retour:hover::after{ content: url('../images/miroirs/icon-retour2.svg'); } /* +768 */ @media (min-width: 768px){ } /* -767 */ @media (max-width: 767px){ .filtres-tags{ flex-wrap: nowrap; } .filtres-tags .aside-button{ display: none; } } /* ----------------------------- */ /* Programme / Agenda /* ----------------------------- */ .item{ display: flex; min-height: 24rem; } .item.is-hidden{ display: none; } .item-date{ display: flex; flex-direction: column; justify-content: space-between; margin-right: var(--gutter); min-width: 12rem; } .item-jour, .item-mois{ text-transform: capitalize; } .item-journum{ position: relative; top: 0.15em; left: -0.15em; } .item-date.multi .item-journum{ top: 1.5rem; left: -0.1em; } .item-journum .tiret{ position: relative; top: -0.2em; } .item-mois{ position: relative; top: 0.08em; } .item-texte{ display: flex; flex-direction: column; justify-content: space-between; } .item-texte-part1{ margin-bottom: var(--gutter); } .item-image{ display: none; } /* +768 */ @media (min-width: 768px){ .events{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 38rem), 1fr)); } .item{ position: relative; margin-top: var(--gutter); padding: 0 var(--gutter) var(--gutter); background-image: url('../images/miroirs/line-h1.png'), url('../images/miroirs/line-v1.png'); background-size: 156rem, 0.25rem; background-position: bottom left, top right; background-repeat: repeat-x, repeat-y; } .item-image{ position: absolute !important; bottom: 0; right: 0; width: 60%; } .item:hover .item-image{ display: block; } .item:hover .item-texte-part2{ opacity: 0; } .item-image img{ display: block; } } /* -767 */ @media (max-width: 767px){ .item{ margin: 0 var(--gutter); padding: var(--gutter) 0; background-image: url('../images/miroirs/line-h1.png'); background-size: 156rem; background-position: bottom left; background-repeat: repeat-x; } } /* ----------------------------- */ /* Projets (listing) /* ----------------------------- */ .itemprojet{ padding-top: 0.3rem; display: grid; grid-template-columns: repeat(3, 1fr); background-image: url('../images/miroirs/line-h1.png'); background-size: 156rem; background-position: bottom left; background-repeat: repeat-x; } .itemprojet.is-hidden{ display: none; } .itemprojet-titre{ padding: calc( var(--gutter) - 0.3rem) var(--gutter) var(--gutter) 0; } .itemprojet-details{ padding: calc( var(--gutter) - 0.3rem) var(--gutter) var(--gutter) var(--gutter); } .itemprojet-descriptif{ padding: calc( var(--gutter) - 0.3rem) 0 var(--gutter) var(--gutter); } .itemprojet-details, .itemprojet-descriptif{ background-image: url('../images/miroirs/line-v1.png'); background-size: 0.25rem; background-position: top left; background-repeat: repeat-y; } .itemprojet-image{ display: none; } /* +768 */ @media (min-width: 768px){ .itemprojet-details{ position: relative; } .itemprojet-image{ position: absolute !important; top: -0.3rem; left: 0; width: 24rem; z-index: 2; pointer-events: none; } .itemprojet:hover .itemprojet-image{ display: block; } .itemprojet-image img{ display: block; } } /* +768 -999 */ @media (min-width: 768px) and (max-width: 999px){ .itemprojet-titre{ grid-column: span 2; } .itemprojet-descriptif{ display: none; } } /* -767 */ @media (max-width: 767px){ .itemprojet{ display: block; } .itemprojet-details, .itemprojet-descriptif{ display: none; } } /* ----------------------------- */ /* Éditorial /* ----------------------------- */ .projet-texte p + p, .projet-infos p + p, .post > section p + p, .event-texte p + p, .article-chapeau p + p, .article-section p + p{ margin-top: 1em; } .article-section h2{ margin-bottom: 0.5em; } .projet-texte p + h2, .article-section * + h2{ margin-top: 1.4em; } .projet-programme{ padding-top: 1em; } /* ----------------------------- */ /* Page projet / spectacle /* + Post (article de présentation biennale) /* ----------------------------- */ .separateur{ height: 0.5rem; background-image: url('../images/miroirs/line-h1.png'); background-size: 156rem; background-position: bottom left; background-repeat: repeat-x; } .projet-infos > h3{ cursor: pointer; user-select: none; } .projet-infos > h3::before{ display: inline-block; content: '▾'; transition: transform 0.2s ease; transform: rotate(-90deg); position: relative; top: -0.12em; } .projet-infos > h3.is-open::before{ transform: rotate(0) translateX(-0.2em); } .projet-infos > h3 + *{ padding: 0; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: visibility 0s 0.2s, max-height 0.2s ease, padding 0.2s ease, opacity 0.2s ease; } .projet-infos > h3.is-open + *{ padding: 1.2em 0 1.5em 0; max-height: 100rem; opacity: 1; visibility: visible; transition: visibility 0s, max-height 0.2s ease, padding 0.2s ease, opacity 0.2s ease; } .projet-infos > ul li{ display: flex; padding-bottom: 0.2em; border-bottom: 0.1em solid; } .projet-infos > ul li + li{ padding-top: 0.6em; } .projet-infos > ul li span:first-child{ min-width: 14em; } /* +768 */ @media (min-width: 768px){ .projet, .post{ display: grid; } } /* +1200 */ @media (min-width: 1200px){ .projet, .post{ grid-template-columns: repeat(3, 1fr); } .projet-titre, .projet-details, .post-titre, .post-infos1{ margin-top: var(--gutter); padding: 0 var(--gutter) var(--gutter) var(--gutter); } .projet-generique, .post-infos2{ margin-top: var(--gutter); padding: 0 0 var(--gutter) var(--gutter); } .projet-galerie, .projet-texte, .post-galerie, .post-chapeau{ padding: var(--gutter) var(--gutter) 0 var(--gutter); } .projet-infos, .post-texte{ padding: var(--gutter) 0 0 var(--gutter); } .projet-titre, .projet-galerie, .post-titre, .post-galerie{ padding-left: 0; } .projet-titre, .projet-details, .post-titre, .post-infos1{ background-image: url('../images/miroirs/line-h1.png'), url('../images/miroirs/line-v1.png'); background-size: 156rem, 0.25rem; background-position: bottom left, top right; background-repeat: repeat-x, repeat-y; } .projet-generique, .post-infos2{ background-image: url('../images/miroirs/line-h1.png'); background-size: 156rem; background-position: bottom left; background-repeat: repeat-x; } .projet-galerie, .projet-texte, .post-galerie, .post-chapeau{ background-image: url('../images/miroirs/line-v1.png'); background-size: 0.22rem; background-position: top right; background-repeat: repeat-y; } } /* +768-1199 */ @media (min-width: 768px) and (max-width: 1199px){ .projet, .post{ grid-template-columns: repeat(2, 1fr) } .projet-titre, .post-titre{ margin-top: var(--gutter); padding: 0 var(--gutter) var(--gutter) 0; } .projet-details, .post-infos1{ margin-top: var(--gutter); padding: 0 0 var(--gutter) var(--gutter); } .projet-generique, .post-infos2{ padding: var(--gutter) var(--gutter) var(--gutter) 0; } .projet-galerie, .post-galerie{ padding: var(--gutter) 0 var(--gutter) var(--gutter); } .projet-texte, .post-chapeau{ padding: var(--gutter) var(--gutter) 0 0; } .projet-infos, .post-texte{ padding: var(--gutter) 0 0 var(--gutter); } .projet-titre, .projet-generique, .post-titre, .post-infos2{ background-image: url('../images/miroirs/line-h1.png'), url('../images/miroirs/line-v1.png'); background-size: 156rem, 0.25rem; background-position: bottom left, top right; background-repeat: repeat-x, repeat-y; } .projet-details, .projet-galerie, .post-infos1, .post-galerie{ background-image: url('../images/miroirs/line-h1.png'); background-size: 156rem; background-position: bottom left; background-repeat: repeat-x; } .projet-texte, .post-chapeau{ background-image: url('../images/miroirs/line-v1.png'); background-size: 0.22rem; background-position: top right; background-repeat: repeat-y; } } /* -999 */ @media (max-width: 999px){ .projet-infos > ul li span:first-child{ width: 8em; } } /* -767 */ @media (max-width: 767px){ .projet > section, .post > section{ padding: var(--gutter) 0; background-image: url('../images/miroirs/line-h1.png'); background-size: 156rem; background-position: bottom left; background-repeat: repeat-x; } } /* ----------------------------- */ /* Page standard /* ----------------------------- */ .page-standard{ padding-bottom: var(--marge); } .article-sections{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); } .article-section{ margin-bottom: 0.5rem; } * + .section-logos{ margin-top: 1.5em; } .section-logos{ display: flex; flex-wrap: wrap; align-items: center; } .section-logos .logo-partenaire{ display: inline-block; vertical-align: middle; margin: 0 var(--gutter) var(--gutter) 0; display: flex; } .logo-partenaire.landscape img{ max-width: 11rem; max-height: 8rem; } .logo-partenaire.portrait img{ max-width: 8rem; max-height: 11rem; } .logo-partenaire.square img{ max-width: 8rem; max-height: 8rem; } .logo-partenaire img{ display: block; width: 100%; } /* +768 */ @media (min-width: 768px){ .page-standard{ display: grid; grid-template-columns: repeat(2, 1fr); } .article-chapeau{ margin-top: var(--gutter); padding: 0.4rem var(--gutter) var(--gutter) 0; } .article-section{ margin-top: var(--gutter); padding: 0.4rem var(--gutter) 0 var(--gutter); background-image: url('../images/miroirs/line-v1.png'); background-size: 0.22rem; background-position: top left; background-repeat: repeat-y; } } /* +1440 */ @media (min-width: 1440px){ .page-standard{ grid-template-columns: repeat(3, 1fr); } .article-sections{ grid-column: span 2; } } /* -767 */ @media (max-width: 767px){ .article-chapeau{ padding: var(--gutter); background-image: url('../images/miroirs/line-h1.png'); background-size: 156rem; background-position: bottom left; background-repeat: repeat-x; } .article-section{ margin-top: var(--gutter); padding: 0 var(--gutter) var(--gutter); background-image: url('../images/miroirs/line-h1.png'), url('../images/miroirs/line-v1.png'); background-size: 156rem, 0.25rem; background-position: bottom left, top right; background-repeat: repeat-x, repeat-y; } }