/*** 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: 'Round'; src: url('../fonts/RoundWEBL-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face{ font-family: 'Round Condensed'; src: url('../fonts/RoundCondensedWEBL-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; } body{ font-family: 'Round', Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1.1; text-rendering: optimizeLegibility; } .header h1, .menu-principal, .tt34{ font-family: 'Round Condensed', Helvetica, Arial, sans-serif; font-weight: bold; font-size: 3.5rem; line-height: 0.8; } .header.mini .menu-principal, body.template-projet .header .menu-principal, .projet-texte h3, .section-texte h3, .tt18{ font-family: 'Round Condensed', Helvetica, Arial, sans-serif; font-weight: bold; font-size: 2.4rem; } body, .t16{ font-size: 2.1rem; } /* Medium */ @media (min-width: 730px) and (max-width: 1349px){ .header .menu-principal{ font-size: 2.4rem; } } /* -729 */ @media (max-width: 729px){ .menu-principal, .header.mini .menu-principal{ font-size: 5vw; } body.template-grille .header .menu-principal, body.template-projets .header .menu-principal{ font-size: 6vw; } .header h1{ font-size: 7.5vw; } .mobile-stamp{ font-size: 7vw; } } /* ----------------------------- */ /* Zoom typo /* ----------------------------- */ /* +1920 */ @media (min-width: 1920px){ html{ font-size: 70%; font-size: calc(1em * 0.70); } } /* -1199 */ @media (max-width: 1199px){ html{ font-size: 52%; font-size: calc(1em * 0.52); } } /* ----------------------------- */ /* Variables /* ----------------------------- */ :root{ --marge: 1.8rem; --gutter: 0.2rem; --couleur1: #000; --couleur2: #FFF; --couleur3: #CBCBCB; --couleur4: #8080FF; color-scheme: only light; } @media (max-width: 999px){ :root{ --marge: 1.2rem; } } /* ----------------------------- */ /* Couleurs /* ----------------------------- */ body, .header menu li a:hover, .header menu li a.current, .header menu li .select-wrapper:hover, .sorting .column:hover, .moreinfo div:hover{ color: var(--couleur1); } .header menu li a, .header menu li .select-wrapper, .mobile-stamp, .sorting .column, .moreinfo div, .section-titre{ background-color: var(--couleur1); } .header menu li a, .header menu li .select-wrapper, .mobile-stamp, .sorting .column, .moreinfo div, .section-titre{ color: var(--couleur2); } body{ background-color: var(--couleur2); } /*.header h1:hover,*/ .projet-textes a:hover, .section-texte a:hover{ color: var(--couleur3); } .header menu li a:hover, .header menu li a.current, .header menu li .select-wrapper:hover, .accueil figcaption, .grille figcaption, .item:nth-child(odd of :not(.is-hidden)), .prevnext a{ background-color: var(--couleur3); } .accueil figcaption:hover, .item:hover, .item:nth-child(odd of :not(.is-hidden)):hover, .sorting .column:hover, .moreinfo div:hover, .prevnext a:hover, .section-titre:hover{ background-color: var(--couleur4); } ::-moz-selection{ color: var(--couleur1); background-color: var(--couleur4); } ::selection{ color: var(--couleur1); background-color: var(--couleur4); } /* ----------------------------- */ /* Liens / boutons /* ----------------------------- */ /* Liens */ .projet-textes a, .section-texte a{ text-decoration: underline; text-decoration-thickness: 0.2rem; text-underline-offset: 0.2em; } aaa a:hover{ opacity: 0.6; } .logo:hover{ opacity: 0.2; } /* Liens blocs */ .item, .grille-item figure, .linkzone{ position: relative; } .item a::after, .grille-item a::after{ content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0); z-index: 2; } /* ----------------------------- */ /* Corners / bordures /* ----------------------------- */ .accueil-item{ overflow: hidden; } /*.header menu li a, .header menu li .select-wrapper, .mobile-stamp, .accueil-item, .grille-item, .accueil-item figure img, .grille-item figure img, .accueil-item figcaption, .grille-item figcaption, .item-image img, .sorting .column, .item, .projet-diapo figure img, .moreinfo div, .prevnext a, .section-titre{ corner-shape: bevel; }*/ .accueil-item, .grille-item, .accueil-item figure img, .grille-item figure img, .accueil-item figcaption, .grille-item figcaption, .item-image img, .projet-diapo figure img{ /*border-radius: 0.7rem;*/ clip-path: polygon(0 0.7rem,0.7rem 0,calc(100% - 0.7rem) 0,100% 0.7rem,100% calc(100% - 0.7rem),calc(100% - 0.7rem) 100%,0.7rem 100%,0 calc(100% - 0.7rem)); } .header menu li a, .header menu li .select-wrapper, .sorting .column, .item, .moreinfo div, .prevnext a, .section-titre{ /*border-radius: 0.5rem;*/ clip-path: polygon(0 0.4rem,0.4rem 0,calc(100% - 0.4rem) 0,100% 0.4rem,100% calc(100% - 0.4rem),calc(100% - 0.4rem) 100%,0.4rem 100%,0 calc(100% - 0.4rem)); } /* -729 */ @media (max-width: 729px){ .accueil-item, .grille-item, .accueil-item figure img, .grille-item figure img, .accueil-item figcaption, .grille-item figcaption, .projet-diapo figure img{ border-radius: 0.6rem; } .header menu li a, .header menu li .select-wrapper, .mobile-stamp, .sorting .column, .item, .moreinfo div, .prevnext a, .section-titre{ border-radius: 0.4rem; } } /* ----------------------------- */ /* Page fade in /* ----------------------------- */ .js body{ opacity: 0; transition: opacity 0.4s ease; } .js body.visible{ opacity: 1; } /* ----------------------------- */ /* 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__sr{ display: none !important; } .splide__track{ cursor: move; cursor: grab; } .splide__arrows, .splide__pagination{ display: none; } .splide__slide img{ display: block; width: 100%; height: 100%; margin: 0 auto; object-fit: cover; cursor: move; cursor: grab; } /* +730 */ @media (min-width: 730px){ .projet .splide__slide img{ width: auto; } } /* ----------------------------- */ /* Layout /* ----------------------------- */ header{ padding: var(--marge); } .projets-liste, .page-standard{ padding: calc(var(--marge) * 0.5) var(--marge) var(--marge); } .projet-textes{ padding: var(--marge) calc( var(--marge) + 0.5em ); } .section-texte{ padding: var(--marge) 0.5em; } .projet-moreinfo{ padding: var(--marge) var(--marge) 0 var(--marge); } .prevnext{ padding: var(--gutter) var(--marge) var(--marge) var(--marge); } /* -729 */ @media (max-width: 729px){ .page-standard{ padding-top: 0; } } /* -499 */ @media (max-width: 499px){ .projets-liste{ padding: var(--marge) 0; } } /* ----------------------------- */ /* Header + Menu principal /* ----------------------------- */ .mobile-stamp{ display: none; } .header{ position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%); } .logo a{ display: block; width: 22rem; } .header menu{ display: flex; } .header menu li a{ display: block; text-align: center; padding: 0.4em 1.6em 0.35em; white-space: nowrap; } .header menu li select{ padding: 0.4em 1.5em 0.3em 0.6em; } .header menu li .select-wrapper::after{ top: 0.3em; } /* Header mini */ .header{ transition: padding 0.25s ease; } .header.mini{ padding-bottom: calc( var(--marge) * 2); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%); } /* +730 */ @media (min-width: 730px){ .menu-principal{ margin-top: -0.5rem; } body.template-projet .menu-principal{ margin-top: 0; } .header menu li{ min-width: 6em; } .header menu li + li{ margin-left: var(--gutter); } /* Header mini */ .logo a, .menu-principal{ transition: all 0.25s ease; } .header.mini .logo a{ width: 14rem; } } /* Medium */ @media (min-width: 730px) and (max-width: 1349px){ .logo a{ width: 13.5rem; } } /* -729 */ @media (max-width: 729px){ .logo a{ width: 54vw; } .header h1{ padding-top: 0.1em; } body.homepage .menu-principal, body.template-default .menu-principal{ margin-top: -0.7vw; } .header menu{ display: block; } body.template-grille .menu-principal, body.template-projets .menu-principal, body.template-grille .header menu, body.template-projets .header menu{ display: flex; } body.template-projet .header menu, body.template-grille .header menu li.menu-images, body.template-projets .header menu li.menu-index{ display: none; } .header menu li{ width: 100%; } .header menu li + li{ margin-top: var(--gutter); } body.template-grille .header .menu-principal, body.template-projets .header .menu-principal, body.template-grille .header menu, body.template-projets .header menu{ width: 100%; } body.template-grille .header menu li, body.template-projets .header menu li{ margin-top: 0; margin-right: var(--gutter); } .header menu li a{ padding: 0.3em 1em 0.25em; } body.template-grille .logo, body.template-projets .logo, body.template-projet .logo{ display: none; } .mobile-stamp{ padding: 0.2em 0.3em 0.1em 0.3em; } .mobile-stamp.history-back{ display: none; } body.template-grille .mobile-stamp, body.template-projets .mobile-stamp, body.template-projet .mobile-stamp{ display: inline-block; } body.template-grille .mobile-stamp.history-back, body.template-projets .mobile-stamp.history-back{ display: none; } } /* ----------------------------- */ /* Titres, légendes et survol d'images /* ----------------------------- */ .accueil figcaption, .grille figcaption{ position: absolute; bottom: 0; width: 100%; text-align: center; z-index: 2; transform: translateY(100%); transition: transform 0.15s ease; } .accueil-item:hover figcaption, .grille-item:hover figcaption{ transform: translateY(0); } .accueil figcaption a, .grille figcaption a{ display: block; padding: 0.35em 1em 0.25em; } .accueil img, .grille img{ transition: padding-bottom 0.15s ease; } .accueil figure:hover img, .grille figure:hover img{ border-radius: 0; transition: padding-bottom 0.45s ease; } /* +730 */ @media (min-width: 730px){ .accueil figure:hover img, .grille figure:hover img{ padding-bottom: 2.8rem; } } /* -729 */ @media (max-width: 729px){ .accueil-item figcaption{ transform: none; transition: none; } } /* ----------------------------- */ /* Accueil /* ----------------------------- */ body.homepage{ /*height: 100dvh; display: flex; flex-direction: column; justify-content: space-between;*/ overflow: hidden; } /* ----------------------------- */ /* Grille d'images /* ----------------------------- */ .grille{ display: grid; grid-gap: var(--gutter); } .grille figure{ position: relative; overflow: hidden; } .grille img{ width: 100%; display: block; aspect-ratio: 2 / 3; object-fit: cover; } .grille figure a{ display: block; } /* +730 */ @media (min-width: 730px){ .grille{ grid-template-columns: repeat(4, 1fr); } } /* +1920 */ @media (min-width: 1920px){ .grille{ grid-template-columns: repeat(6, 1fr); } } /* -729 */ @media (max-width: 729px){ .grille{ grid-template-columns: repeat(3, 1fr); } } /* -549 */ @media (max-width: 549px){ .grille{ grid-template-columns: repeat(2, 1fr); } } /* ----------------------------- */ /* Select + sort + prev/next buttons /* ----------------------------- */ .sort-button{ position: relative; } .sort-button::after{ position: absolute; top: 0.3em; right: 0.4em; content: url('../images/icon-sort2.svg'); width: 0.7em; } .sort-button:hover::after{ content: url('../images/icon-sort1.svg'); } .select-wrapper, .section-titre, .moreinfo div{ position: relative; } .select-wrapper::after, .section-titre::after, .moreinfo div::after{ pointer-events: none; position: absolute; top: 0.1em; right: 0.4em; content: url('../images/icon-dropdown2.svg'); width: 0.7em; } .select-wrapper:hover::after, .section-titre:hover::after, .moreinfo div:hover::after{ content: url('../images/icon-dropdown1.svg'); } .select-wrapper select{ width: 100%; } .prevnext a{ position: relative; padding-left: 1em !important; padding-right: 1em !important; } .projet-prev::after{ pointer-events: none; position: absolute; top: calc(50% + 0.1em); transform: translateY(-50%); left: 0.5em; content: url('../images/icon-prev1.svg'); width: 0.35em; } .projet-next::after{ pointer-events: none; position: absolute; top: calc(50% + 0.1em); transform: translateY(-50%); right: 0.5em; content: url('../images/icon-next1.svg'); width: 0.35em; } /* ----------------------------- */ /* Liste des projets /* ----------------------------- */ .sorting, .item{ display: flex; width: 100%; } .item.is-hidden{ display: none; } .sorting{ column-gap: var(--gutter); } .sorting .column, .item .column, p.noresults{ padding: 0.25em 0.5em 0.15em; } .column-titre{ width: 30%; } .column-categorie{ width: 30%; } .column-commanditaire{ width: 30%; } .column-annee{ width: 10%; } .item .column-annee{ text-align: right; } /*.item{ transition: background-color 0.3s ease; } .item:hover{ transition: background-color 0.15s ease; }*/ .item-categorie span:not(:last-child)::after{ content: ','; } .item-categorie span:not(:first-child){ text-transform: lowercase; } .item-image{ display: none; position: fixed; width: 28rem; } /* +730 */ @media (min-width: 730px) and (hover: hover) { .item:hover + .item-image{ display: block; z-index: 2; } } /* -1023 */ @media (max-width: 1023px){ .column-titre{ width: 40%; } .column-categorie{ width: 40%; } .column-commanditaire{ display: none; } .column-annee{ width: 20%; } } /* -659 */ @media (max-width: 1023px){ .column-titre{ width: 60%; } .column-categorie{ width: 40%; } .column-annee{ display: none; } } /* -499 */ @media (max-width: 1023px){ .column-titre{ width: 50%; } .column-categorie{ width: 50%; } } /* ----------------------------- */ /* Editorial /* ----------------------------- */ .projet-texte p + p, .section-texte p + p{ text-indent: 2em; } .projet-texte li::before, .colonne li::before{ content: '– '; } .projet-texte * + h3, .section-texte * + h3{ margin-top: 1em; } /* ----------------------------- */ /* Détail projet /* ----------------------------- */ .projet-diapo img.cropped{ display: none; } .projet-textes{ display: none; grid-template-columns: repeat(7, 1fr); grid-gap: 5rem; } .projet-texte{ grid-column: span 4; } .projet-infos{ grid-column: span 3; } .projet-infos li{ display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 3rem; } .projet-infos li div:first-child{ grid-column: span 2; } .projet-infos li div:last-child{ grid-column: span 3; } .projet-infos ul + ul{ margin-top: 1em; } .moreinfo div{ user-select: none; } .moreinfo div, .prevnext a{ padding: 0.25em 0.5em 0.15em; } .prevnext{ display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--gutter); } .prevnext a{ display: flex; align-items: center; justify-content: center; text-align: center; } /* +730 */ @media (min-width: 730px){ .projet-textes.is-open{ display: grid; } } /* -729 */ @media (max-width: 729px){ .projet-textes.is-open{ display: block; } .projet-infos{ margin-top: 1em; } .projet-diapo img.paysage{ display: none; } .projet-diapo img.cropped{ display: block; } } /* ----------------------------- */ /* Page à propos /* ----------------------------- */ .article-section + .article-section{ margin-top: var(--gutter); } .section-titre{ padding: 0.25em 0.5em 0.15em; user-select: none; } .section-texte{ display: none; grid-template-columns: repeat(2, 1fr); grid-column-gap: 5rem; padding-bottom: 1.2em; } .section-texte.is-open{ display: grid; } /* -729 */ @media (max-width: 729px){ .section-texte{ grid-template-columns: 1fr; } .section-texte .colonne + .colonne{ margin-top: 1em; } }