) */
.chapeau {
font-size: 2.2rem;
line-height: 1.45;
color: var(--noir);
margin-bottom: 3rem;
}
/* Encadré (dates, conditions…) :
*/
.encadre {
background: #eef9fd;
padding: 2rem 2.4rem;
margin: 3rem 0;
}
.encadre > :first-child { margin-top: 0; }
.encadre > :last-child { margin-bottom: 0; }
/* ---------- Actualités ---------- */
.art-date {
display: block;
font-size: 1.3rem;
font-weight: 700;
color: var(--gris);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: .6rem;
}
.article-list {
padding: 3.5rem 0;
border-bottom: 1px solid var(--filet);
}
.article-list:first-of-type { padding-top: 0; }
.article-list h2 {
margin: 0 0 1rem;
font-size: 2.6rem;
}
.article-list h2 a { text-decoration: none; }
.article-list h2 a:hover { text-decoration: underline; text-decoration-color: var(--turquoise); }
.article img.art_thumbnail {
float: none;
display: block;
padding: 0;
margin: 1rem 0 2rem;
}
.back { margin-top: 4rem; }
.pagination {
margin: 4rem 0 0;
font-size: 1.5rem;
}
.pagination a,
.pagination span {
display: inline-block;
margin-right: 1.5rem;
}
/* ---------- Pied de page ---------- */
.footer {
border-top: 1px solid var(--filet);
padding: 4rem 0 5rem;
font-size: 1.4rem;
color: var(--gris);
}
.footer p { margin: 0 0 1rem; }
.footer a { color: var(--gris); }
.footer strong { color: var(--noir); }
.footer-signature {
font-size: 1.6rem;
color: var(--noir);
max-width: 52rem;
margin-bottom: 2rem !important;
}
.footer-small { font-size: 1.2rem; }
/* ---------- Téléphone ---------- */
@media (max-width: 767px) {
body { font-size: 1.6rem; }
h1 { font-size: 2.8rem; }
h2 { font-size: 2.1rem; }
.chapeau { font-size: 1.9rem; }
.header { padding: 2rem 0 1.5rem; }
.header-inner { align-items: center; }
.logo img { width: 18rem; }
.baseline { font-size: 1.1rem; }
.responsive-menu label {
display: block;
background: transparent;
color: var(--noir);
font-size: 2.8rem;
height: auto;
line-height: 1;
padding: 0;
}
.responsive-menu label::after { content: '\2630'; }
.responsive-menu > ul.menu {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: #fff;
border-bottom: 1px solid var(--filet);
padding: 1rem 2rem 2rem;
text-align: left;
}
.menu > li,
.responsive-menu ul li {
display: block;
margin: 0;
font-size: 1.8rem;
}
.responsive-menu ul li:hover { background: none; }
.responsive-menu ul li a {
display: inline-block;
height: auto;
line-height: 1.4;
padding: 1rem 0 .3rem;
}
.responsive-menu ul li.active a,
.responsive-menu ul li.active:hover {
background: none;
color: var(--noir);
}
}
/* ---------- Sous-menus (groupes de pages statiques) ---------- */
.menu > li { position: relative; }
.menu > li > span {
cursor: default;
border-bottom: 3px solid transparent;
padding-bottom: .3rem;
white-space: nowrap;
}
.menu > li > span::after {
content: '\25BE';
font-size: .9em;
padding-left: .4rem;
}
.menu > li > span.active,
.menu > li:hover > span { border-bottom-color: var(--ciel); }
.menu > li ul {
position: absolute;
right: 0;
top: 100%;
min-width: 22rem;
margin: 0;
padding: 1.2rem 1.6rem;
list-style: none;
text-align: left;
background: #fff;
border: 1px solid var(--filet);
z-index: 10;
}
.menu > li:not(:hover):not(:focus-within) ul { display: none; }
.menu > li ul li {
display: block;
margin: 0;
padding: .4rem 0;
}
@media (max-width: 767px) {
.menu > li > span { display: inline-block; padding: 1rem 0 .3rem; font-size: 1.8rem; }
.menu > li > span::after { content: none; }
.menu > li ul,
.menu > li:not(:hover):not(:focus-within) ul {
display: block;
position: static;
border: 0;
padding: 0 0 0 1.6rem;
min-width: 0;
}
.menu > li ul li a { font-size: 1.6rem; padding-top: .6rem !important; }
}
/* La page d'accueil n'affiche pas son titre « Accueil » */
#static-page-1 > header { display: none; }
/* ---------- Pages en deux colonnes : titre à gauche, texte à droite ---------- */
.container { max-width: 130rem; }
.page-deux-colonnes {
max-width: none;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.page-titre h1 {
font-size: 6.4rem;
line-height: 1.02;
letter-spacing: -.02em;
margin: 0;
padding-right: 3rem;
hyphens: manual;
}
.page-texte {
border-left: 1px solid var(--filet);
padding-left: 3rem;
max-width: 80rem;
font-size: 1.8rem;
line-height: 1.85;
}
.page-texte .chapeau {
font-size: 3rem;
line-height: 1.55;
font-weight: 350;
margin: 0 0 6rem;
}
.page-texte h2:first-child { margin-top: 0; }
/* L'accueil garde une seule colonne, sans titre */
#static-page-1 { display: block; }
#static-page-1 .page-texte { border-left: 0; padding-left: 0; }
@media (max-width: 900px) {
.page-deux-colonnes { grid-template-columns: 1fr; }
.page-titre h1 { font-size: 4rem; padding: 0 0 2.5rem; }
.page-texte { border-left: 0; padding-left: 0; font-size: 1.7rem; line-height: 1.75; }
.page-texte .chapeau { font-size: 2.2rem; margin-bottom: 4rem; }
}
/* ======================================================================
Version inspirée de la maquette : grand logo, petit menu en haut à
droite séparé par des barres, phrase forte en accueil, « contact ».
====================================================================== */
.header { padding: 1.6rem 0 0; }
.header-inner {
flex-direction: column-reverse; /* menu au-dessus, logo dessous */
align-items: stretch;
gap: 1.2rem;
}
.logo img { width: 42rem; max-width: 100%; margin-left: -1rem; }
.baseline {
/* présente pour le référencement, masquée comme sur la maquette */
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.nav { align-self: flex-end; }
.menu > li {
margin-left: 0;
font-size: 1.5rem;
font-weight: 700;
text-transform: lowercase;
}
.menu > li + li::before {
content: "|";
padding: 0 .6rem;
font-weight: 700;
}
ul.menu li a { border-bottom-width: 2px; padding-bottom: .1rem; }
.menu > li > span { border-bottom-width: 2px; padding-bottom: .1rem; }
.menu > li > span::after { content: none; }
.menu > li ul li { text-transform: none; font-weight: 400; }
.menu > li ul li::before { content: none; }
.main { padding-top: 8rem; }
/* Accueil : la phrase forte */
.manifeste {
font-size: 3.4rem;
line-height: 1.32;
font-weight: 700;
letter-spacing: -.005em;
color: var(--noir);
max-width: 100rem;
margin: 8rem 0 16rem;
}
/* Pied de page : « contact » */
.footer { border-top: 0; padding-top: 8rem; }
.footer-contact { margin-bottom: 2.5rem !important; }
.footer-contact a {
font-size: 3.4rem;
font-weight: 700;
color: var(--noir);
text-decoration: none;
}
.footer-contact a:hover { text-decoration: underline; text-decoration-color: var(--turquoise); }
@media (max-width: 767px) {
.logo img { width: 26rem; }
.header-inner { flex-direction: row; align-items: center; }
.nav { align-self: center; }
.menu > li + li::before { content: none; }
.menu > li { font-size: 1.8rem; }
.main { padding-top: 4rem; }
.manifeste { font-size: 2.4rem; margin: 3rem 0 8rem; }
.footer-contact a { font-size: 2.6rem; }
}
#static-page-1 .page-texte { max-width: none; }
#static-page-1 .page-texte > :not(.manifeste) { max-width: 80rem; }
/* Menu sur la même ligne que le logo, centré verticalement ; logo agrandi */
.header { padding-top: 3rem; }
.header-inner { flex-direction: row; align-items: center; justify-content: space-between; }
.nav { align-self: center; }
.logo img { width: 50rem; }
@media (max-width: 1000px) { .logo img { width: 38rem; } }
@media (max-width: 767px) { .logo img { width: 26rem; } }
@media (min-width: 768px) { ul.menu { display: flex; align-items: baseline; } }
#soutenir { scroll-margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--filet); }
.footer-contact a + a { margin-left: 4rem; }
@media (max-width: 767px) { .footer-contact a { display: block; } .footer-contact a + a { margin: 1rem 0 0; } }
/* Sections suivantes d'une page (titres de niveau 1 dans le texte) */
.page-titre h2.h1 {
font-size: 6.4rem;
line-height: 1.02;
letter-spacing: -.02em;
margin: 0;
padding-right: 3rem;
}
.section-suite { margin-top: 10rem; }
.section-suite .page-texte { padding-top: .8rem; }
#soutenir { border-top: 0; padding-top: 0; }
.article.static { max-width: none; }
#static-page-1 .page-deux-colonnes { display: block; }
#static-page-1 .page-texte { border-left: 0; padding-left: 0; }
#static-page-1 .page-titre { display: none; }
@media (max-width: 900px) {
.page-titre h2.h1 { font-size: 4rem; padding: 0 0 2.5rem; }
.section-suite { margin-top: 6rem; }
}
/* ---------- Sommaire dans la colonne de gauche ---------- */
html { scroll-behavior: smooth; }
.page-texte h2[id], .page-texte h1[id], section[id] { scroll-margin-top: 3rem; }
.page-titre {
position: sticky;
top: 3rem;
align-self: start;
}
.sommaire { margin-top: 3rem; padding-right: 3rem; }
.sommaire ul { list-style: none; margin: 0; padding: 0; }
.sommaire li { margin: 0 0 .9rem; font-size: 1.5rem; line-height: 1.35; }
.sommaire a {
color: var(--gris);
text-decoration: none;
border-left: 3px solid transparent;
padding-left: 1rem;
margin-left: -1.3rem;
display: inline-block;
transition: color .15s, border-color .15s;
}
.sommaire a:hover { color: var(--noir); }
.sommaire a.actif { color: var(--noir); font-weight: 700; border-left-color: var(--ciel); }
@media (max-width: 900px) {
.page-titre { position: static; }
.sommaire { display: none; }
}
/* Sommaire : soulignement progressif de la partie en cours */
.sommaire a {
border-left: 0;
padding-left: 0;
margin-left: 0;
padding-bottom: .2rem;
background-image: linear-gradient(var(--ciel), var(--ciel));
background-repeat: no-repeat;
background-position: left bottom;
background-size: var(--progression, 0%) 3px;
transition: color .2s, background-size .12s linear;
}
.sommaire a.actif { font-weight: 700; color: var(--noir); }
@media (prefers-reduced-motion: reduce) { .sommaire a { transition: none; } }
/* Menu et sommaire en noir (la couleur est réservée aux boutons et encadrés) */
ul.menu li a:hover,
ul.menu li.active a,
.menu > li > span.active,
.menu > li:hover > span { border-bottom-color: var(--noir); }
ul.menu li a, .menu > li > span { border-bottom-width: 1px; }
.sommaire a {
background-image: linear-gradient(var(--noir), var(--noir));
background-size: var(--progression, 0%) 1.5px;
}
a:hover { text-decoration-color: var(--noir); }
.article-list h2 a:hover, .footer-contact a:hover { text-decoration-color: var(--noir); }
/* ---------- Accueil : photo plein écran en ouverture ---------- */
body:has(.ouverture) .header {
position: absolute;
top: 0; left: 0; right: 0;
background: transparent;
padding-top: 0;
}
body:has(.ouverture) .header-inner { align-items: flex-start; }
body:has(.ouverture) .logo { padding-top: 4rem; }
/* Menu dans un cartouche blanc, collé en haut à droite, comme sur la maquette */
body:has(.ouverture) .nav {
align-self: flex-start;
background: #fff;
padding: 1.6rem 2.4rem 1.8rem;
margin-right: -2rem;
}
.ouverture {
height: 100vh;
height: 100svh;
min-height: 48rem;
overflow: hidden;
background: #b39a72;
}
.ouverture img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 40%;
}
body:has(.ouverture) .main { padding-top: 0; }
body:has(.ouverture) .manifeste { margin-top: 12rem; }
@media (max-width: 767px) {
body:has(.ouverture) .logo { padding-top: 2rem; }
body:has(.ouverture) .nav {
align-self: flex-start;
padding: 1.2rem 1.4rem;
margin-right: -2rem;
}
body:has(.ouverture) .header-inner { align-items: flex-start; }
body:has(.ouverture) .manifeste { margin-top: 5rem; }
}
/* Accueil : bandeau blanc avec logo et menu, comme les autres pages,
puis la photo qui remplit le reste de l'écran */
body:has(.ouverture) .header {
position: relative;
background: #fff;
padding-top: 3rem;
padding-bottom: 2rem;
}
body:has(.ouverture) .header-inner { align-items: center; }
body:has(.ouverture) .logo { padding-top: 0; }
body:has(.ouverture) .nav {
align-self: center;
background: transparent;
padding: 0;
margin-right: 0;
}
.ouverture { height: calc(100svh - var(--hauteur-entete, 12rem)); min-height: 36rem; }
@media (max-width: 767px) {
body:has(.ouverture) .header { padding: 2rem 0 1.5rem; }
body:has(.ouverture) .header-inner { align-items: center; }
body:has(.ouverture) .nav { align-self: center; padding: 0; margin-right: 0; }
body:has(.ouverture) .logo { padding-top: 0; }
}
/* Accueil : la photo laisse dépasser le début de la phrase en bas de l'écran */
.ouverture { height: calc(100svh - var(--hauteur-entete, 12rem) - 13rem); min-height: 30rem; }
body:has(.ouverture) .manifeste { margin-top: 5rem; }
@media (max-width: 767px) {
.ouverture { height: calc(100svh - var(--hauteur-entete, 8rem) - 11rem); }
body:has(.ouverture) .manifeste { margin-top: 3.5rem; }
}
/* ---------- Pied de page en deux colonnes, aligné sur les pages ---------- */
.footer {
border-top: 1px solid var(--filet);
margin-top: 8rem;
padding: 6rem 0 7rem;
font-size: 1.5rem;
line-height: 1.6;
color: var(--noir);
}
.pied {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.footer-contact { margin: 0 !important; }
.footer-contact a {
display: block;
font-size: 4rem;
line-height: 1.15;
margin: 0 0 .4rem;
}
.footer-contact a + a { margin-left: 0; }
.pied-droite { padding-left: 3rem; border-left: 1px solid var(--filet); }
.footer-signature {
font-size: 2.2rem;
line-height: 1.45;
max-width: 60rem;
margin: 0 0 4rem !important;
}
.pied-infos {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: start;
gap: 1rem 6rem;
color: var(--gris);
}
.pied-infos p { margin: 0; }
.pied-infos strong { color: var(--noir); }
.footer .pied-infos a { color: var(--gris); }
.footer .pied-infos a:hover { color: var(--noir); }
@media (max-width: 900px) {
.pied { grid-template-columns: 1fr; gap: 4rem; }
.pied-droite { padding-left: 0; border-left: 0; }
.footer-contact a { font-size: 3rem; }
.footer-signature { font-size: 1.9rem; }
.pied-infos { grid-template-columns: 1fr; gap: 2rem; }
}
/* ---------- Pied de page sur fond foncé ---------- */
.footer {
background: #161616;
color: #f2f2f2;
border-top: 0;
}
.footer-contact a,
.footer-signature { color: #fff; }
.footer-contact a:hover { text-decoration-color: #fff; }
.pied-droite { border-left-color: #3a3a3a; }
.pied-infos { color: #a8a8a8; }
.pied-infos strong { color: #fff; }
.footer .pied-infos a { color: #a8a8a8; text-decoration-color: #555; }
.footer .pied-infos a:hover { color: #fff; text-decoration-color: #fff; }
.lien-instagram { display: inline-flex; align-items: center; gap: .7rem; margin-top: .4rem; }
.lien-instagram img {
width: 2rem; height: 2rem;
filter: invert(1); /* logo noir rendu blanc sur le fond foncé */
opacity: .7;
transition: opacity .15s;
}
.lien-instagram:hover img { opacity: 1; }
/* Pied de page : gris foncé plus doux */
.footer { background: #3d3c3a; }
.pied-droite { border-left-color: #5c5a57; }
.pied-infos { color: #cfcdca; }
.footer .pied-infos a { color: #cfcdca; text-decoration-color: #7a7874; }
/* ---------- Gabarit « projet » (ex. micro-résidence) ---------- */
.projet {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: 8rem;
max-width: none;
align-items: start;
}
.projet-texte { max-width: 68rem; font-size: 1.8rem; line-height: 1.8; }
.projet-artiste {
font-size: 3.6rem;
font-weight: 700;
line-height: 1.1;
margin: 0 !important;
}
.projet-numero {
font-size: 1.5rem;
font-weight: 700;
margin: .4rem 0 6rem !important;
}
.projet-texte h1 {
font-size: 5.2rem;
line-height: 1.05;
letter-spacing: -.02em;
margin: 0 0 6rem;
max-width: 14ch;
}
.projet-texte blockquote { font-size: 2.1rem; }
/* Image de droite : jusqu'au bord de l'écran, fixe pendant la lecture */
.projet-visuel {
position: sticky;
top: 2rem;
margin-right: calc((100vw - min(100vw, 130rem)) / -2 - 2rem);
}
.projet-visuel figure { margin: 0; }
.projet-visuel img {
display: block;
width: 100%;
height: calc(100vh - 4rem);
object-fit: cover;
object-position: 30% 30%;
}
.projet-visuel figcaption {
font-size: 1.3rem;
color: var(--gris);
padding: .8rem 2rem 0 0;
}
/* Présentation de l'artiste, en bas du texte */
.artiste {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: 3rem;
margin-top: 8rem;
padding-top: 4rem;
border-top: 1px solid var(--filet);
font-size: 1.6rem;
line-height: 1.6;
}
.artiste img, .artiste .portrait-a-venir {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
filter: grayscale(1);
display: block;
}
.portrait-a-venir {
background: #eceae6;
color: var(--gris);
display: flex !important;
align-items: center;
justify-content: center;
font-size: 1.4rem;
}
.artiste p { margin: 0 0 1.5rem; }
.artiste ul { list-style: none; padding: 0; margin: 0; font-weight: 700; }
.artiste li::before { content: "+ "; }
.lien-suite { font-weight: 700; }
@media (max-width: 900px) {
.projet { grid-template-columns: 1fr; gap: 0; }
.projet-visuel {
position: static;
order: -1;
margin: -2rem -2rem 4rem;
}
.projet-visuel img { height: auto; max-height: 75vh; }
.projet-texte h1 { font-size: 3.6rem; margin-bottom: 4rem; }
.projet-artiste { font-size: 2.8rem; }
.projet-numero { margin-bottom: 4rem !important; }
.artiste { grid-template-columns: 1fr; }
.artiste img, .artiste .portrait-a-venir { max-width: 32rem; }
}
/* Évite la barre de défilement horizontale due à l'image pleine largeur */
body { overflow-x: clip; }
.projet-visuel img { height: calc(100vh - 7rem); }
.article blockquote { border-left-color: var(--noir); border-left-width: 2px; }
@media (max-width: 900px) { .projet-visuel figcaption { padding: .8rem 2rem 0; } }
/* Carte de renvoi vers une page projet */
a.carte-projet {
display: block;
color: var(--noir);
text-decoration: none;
margin: 2rem 0 1rem;
}
.carte-projet img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
margin-bottom: 2rem;
transition: opacity .2s;
}
.carte-projet:hover img { opacity: .88; }
.carte-titre { display: block; font-size: 2.4rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
.carte-texte { display: block; margin-bottom: 1.2rem; }
.carte-projet .lien-suite { display: inline-block; border-bottom: 1px solid var(--noir); }
.carte-projet:hover .lien-suite { border-bottom-width: 2px; }
/* Emplacements en attente (vidéo, visuels) */
.video-a-venir, .visuel-a-venir {
background: #eceae6;
color: var(--gris);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 1.4rem;
}
.video-a-venir { aspect-ratio: 16 / 9; margin: 0 0 4rem; }
.visuel-a-venir { height: calc(100vh - 7rem); }
.projet-texte .chapeau { font-size: 2.4rem; line-height: 1.5; margin-bottom: 4rem; }
@media (max-width: 900px) { .visuel-a-venir { height: 40vh; } .projet-texte .chapeau { font-size: 2rem; } }
.video-a-venir, .visuel-a-venir { display: grid; place-content: center; }
.artiste { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 900px) { .artiste { grid-template-columns: 1fr; } }
/* ---------- Accueil en sections : titre à gauche, texte à droite ---------- */
#static-page-1 .section-suite { display: grid; margin-top: 12rem; }
#static-page-1 .section-suite .page-titre { display: block; }
#static-page-1 .section-suite .page-texte {
border-left: 1px solid var(--filet);
padding-left: 3rem;
max-width: 80rem;
}
#static-page-1 .manifeste { margin-bottom: 4rem; }
#static-page-1 .page-texte .chapeau { margin-bottom: 3rem; }
.parlons { margin-top: 4rem; font-size: 1.9rem; line-height: 1.6; }
.lien-suite { text-decoration: none; border-bottom: 1px solid var(--noir); font-weight: 700; }
a.lien-suite:hover { border-bottom-width: 2px; text-decoration: none; }
@media (max-width: 900px) {
#static-page-1 .section-suite { margin-top: 7rem; }
#static-page-1 .section-suite .page-texte { border-left: 0; padding-left: 0; }
}
/* Flèche des liens « Découvrir → » : glisse vers la droite au survol */
.fleche {
display: inline-block;
transition: transform .25s ease;
}
a:hover .fleche,
a.carte-projet:hover .fleche { transform: translateX(.6rem); }
@media (prefers-reduced-motion: reduce) { .fleche { transition: none; } }
/* Étiquette « Candidatures bientôt ouvertes » */
.etiquette {
display: inline-block;
background: var(--turquoise);
color: var(--noir);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: .5rem 1.1rem;
line-height: 1.3;
}
/* Carte : légende sous l'image et étiquettes */
.carte-projet img { margin-bottom: .8rem; }
.carte-legende { display: block; font-size: 1.3rem; color: var(--gris); margin-bottom: 2.4rem; }
.carte-etiquettes { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.4rem; }
.carte-legende .etiquette { margin-right: .8rem; vertical-align: .1rem; }
.carte-legende { margin-bottom: 2rem; line-height: 2.2; }
/* Carte « action » : titre, texte, lien, puis image avec lien vers le projet */
.carte-action { margin: 0 0 1rem; }
.carte-action .carte-titre { margin: 0 0 1rem; }
.carte-action .carte-texte { margin: 0 0 1.2rem; }
.carte-action > p:has(.lien-suite) { margin: 0 0 3rem; }
a.carte-image { display: block; color: var(--noir); text-decoration: none; }
.carte-image img {
display: block; width: 100%; height: auto;
aspect-ratio: 3 / 2; object-fit: cover;
margin-bottom: .8rem;
transition: opacity .2s;
}
.carte-image:hover img { opacity: .88; }
.carte-image .etiquette { transition: background .15s; }
.carte-image:hover .etiquette { background: var(--noir); color: #fff; }
.carte-image:hover .fleche { transform: translateX(.4rem); }
/* Pas de césure : les mots ne sont jamais coupés en fin de ligne */
*, *::before, *::after { hyphens: manual; -webkit-hyphens: manual; }
html body *, html body *::before, html body *::after { hyphens: manual !important; -webkit-hyphens: manual !important; }
/* Logo un peu plus petit */
.logo img { width: 40rem; }
@media (max-width: 1000px) { .logo img { width: 32rem; } }
@media (max-width: 767px) { .logo img { width: 24rem; } }
/* Menu plus grand */
@media (min-width: 768px) {
.menu > li { font-size: 1.9rem; }
.menu > li + li::before { padding: 0 .8rem; }
.menu > li ul li { font-size: 1.6rem; }
}
.note { font-size: 1.4rem; line-height: 1.6; color: var(--gris); max-width: 56rem; }
/* Logo Instagram : glyphe blanc, pas d'inversion */
.lien-instagram img { filter: none; opacity: .8; }
/* Icône enveloppe à côté de l'adresse mail (même style que le logo Instagram) */
.lien-mail { display: inline-flex; align-items: center; gap: .7rem; }
.lien-mail svg { width: 2rem; height: 2rem; color: #fff; opacity: .8; transition: opacity .15s; flex: none; }
.lien-mail:hover svg { opacity: 1; }
/* La colonne de droite commence légèrement sous le haut du titre de gauche */
@media (min-width: 901px) {
.page-deux-colonnes > .page-texte { padding-top: 1.8rem; }
.section-suite > .page-texte { padding-top: 1.8rem; }
.pied-droite { padding-top: 1.2rem; }
}
/* Page d'erreur */
.liens-erreur { list-style: none; padding: 0; margin: 2rem 0 4rem; }
.liens-erreur li { margin: 0 0 1.4rem; font-size: 1.9rem; }
.article ul.liens-erreur { padding-left: 0; }
/* Présentation de l'artiste en gras, comme sur la maquette */
.artiste p { font-weight: 700; }
/* Présentation de l'artiste sans portrait : une seule colonne */
.artiste { display: block; max-width: 62rem; }
/* Accueil : blocs « Pour les artistes » et cartes « Projets accompagnés » */
.bloc-action { margin: 0 0 5rem; }
.bloc-action:last-child { margin-bottom: 0; }
.bloc-action .carte-titre { font-size: 2.6rem; margin: 0 0 1.4rem; }
.bloc-action .etiquette { margin-bottom: .4rem; }
#static-page-1 .bloc-action .chapeau { font-size: 2.2rem; margin-bottom: 1.6rem; }
.bloc-action + .bloc-action { padding-top: 4rem; border-top: 1px solid var(--filet); }
.cartes-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); gap: 4rem 3rem; }
/* ---------- Projets accompagnés (articles) ---------- */
.page-projets { max-width: none; }
.cartes-projets { margin-top: 1rem; }
.carte-sans-image { display: grid !important; place-content: center; aspect-ratio: 3 / 2; margin-bottom: .8rem; }
.tous-projets { margin-top: 3rem; }
.projet-numero .etiquette { font-size: 1.3rem; }
/* ---------- Code couleur des étiquettes ---------- */
:root {
--c-micro: #77dcd8; /* turquoise : micro-résidences */
--c-pouce: #a1e1f7; /* bleu ciel : coups de pouce */
--c-traversees: #f2858f; /* rose rouge : Bourse Traversées */
}
.etiquette-micro { background: var(--c-micro); }
.etiquette-pouce { background: var(--c-pouce); }
.etiquette-traversees { background: var(--c-traversees); }
/* Cartes de projets : étiquette, puis artiste et titre en titre */
.carte-image img, .carte-sans-image { margin-bottom: 1.4rem; }
.carte-etiquette { display: block; margin-bottom: 1rem; }
.carte-artiste { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1.2; color: var(--noir); }
.carte-projet-titre { display: block; font-size: 1.8rem; line-height: 1.35; font-style: italic; color: var(--noir); margin-top: .3rem; }
.carte-image:hover .carte-artiste { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* Page de la bourse : encadré rose très pâle */
#static-page-4 .encadre { background: #fdf0f1; }
/* Cartes : étiquette et titres au-dessus de l'image */
.carte-image img, .carte-sans-image { margin: 1.6rem 0 0; }
/* Carte sans vignette : emplacement au format de l'image, pas en pleine hauteur */
.carte-image .carte-sans-image { height: auto; aspect-ratio: 3 / 2; }
.cartes-projets { align-items: start; }
/* Cartes de projets alignées : étiquette, artiste, titre et image sur les mêmes lignes
d'une carte à l'autre, même si un titre est plus long */
.cartes-projets { grid-auto-rows: auto; align-items: stretch; }
.cartes-projets > .carte-image {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
row-gap: 0;
align-content: start;
}
.cartes-projets > .carte-image > img,
.cartes-projets > .carte-image > .carte-sans-image { align-self: end; }
/* Liste de liens « + » (artistes, partenaires) */
.article ul.liens-plus { list-style: none; padding: 0; margin: 2rem 0 0; font-weight: 700; }
.liens-plus li { margin: 0 0 .5rem; }
.liens-plus li::before { content: "+ "; }
/* ---------- Icônes devant les liens des artistes ---------- */
/* L'icône est choisie automatiquement selon l'adresse du lien :
Instagram -> appareil photo, YouTube / Vimeo -> lecture, autre -> globe (site web) */
.liens-plus li::before, .artiste li::before { content: none; }
.liens-plus a, .artiste li a { display: inline-flex; align-items: center; gap: .8rem; }
.liens-plus a::before, .artiste li a::before {
content: "";
flex: none;
width: 1.8rem;
height: 1.8rem;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c2.6 2.8 3.9 6 3.9 9.5s-1.3 6.7-3.9 9.5M12 2.5C9.4 5.3 8.1 8.5 8.1 12s1.3 6.7 3.9 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c2.6 2.8 3.9 6 3.9 9.5s-1.3 6.7-3.9 9.5M12 2.5C9.4 5.3 8.1 8.5 8.1 12s1.3 6.7 3.9 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.liens-plus a[href*="instagram.com"]::before, .artiste li a[href*="instagram.com"]::before {
-webkit-mask-image: url("../img/instagram.png");
mask-image: url("../img/instagram.png");
}
.liens-plus a[href*="youtube.com"]::before, .artiste li a[href*="youtube.com"]::before,
.liens-plus a[href*="youtu.be"]::before, .artiste li a[href*="youtu.be"]::before,
.liens-plus a[href*="vimeo.com"]::before, .artiste li a[href*="vimeo.com"]::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M10 8.3v7.4l6-3.7z' fill='black'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M10 8.3v7.4l6-3.7z' fill='black'/%3E%3C/svg%3E");
}
.artiste ul { margin-top: 1.5rem; }
.artiste li { margin: 0 0 .5rem; }
/* Présentations du duo d'AVEC : plus discrètes que celle de l'artiste soutenu */
.artiste.artiste-duo { margin-top: 2.5rem; padding-top: 0; border-top: 0; }
.artiste.artiste-duo p { font-weight: 400; }
/* ---------- Présentations au public (pages de projet) ---------- */
.diffusion {
border-top: 2px solid var(--noir);
border-bottom: 1px solid var(--filet);
padding: 2rem 0 2.2rem;
margin: 4rem 0;
}
.diffusion h2 {
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: .06em;
margin: 0 0 1.6rem;
}
.article .diffusion ul { list-style: none; padding: 0; margin: 0; }
.diffusion li {
display: grid;
grid-template-columns: 16rem 1fr;
gap: 2rem;
margin: 0 0 1.4rem;
line-height: 1.5;
}
.diffusion li:last-child { margin-bottom: 0; }
.diffusion-date { font-weight: 700; }
@media (max-width: 600px) { .diffusion li { grid-template-columns: 1fr; gap: .2rem; } }
/* Présentations au public : date au-dessus du texte, une seule colonne */
.diffusion li { display: block; margin-bottom: 1.8rem; }
.diffusion-date { display: block; margin-bottom: .2rem; }
/* Bloc de diffusion : petit trait court au-dessus du titre, pas de trait en dessous */
.diffusion { border-top: 0; border-bottom: 0; padding: 0; margin: 4rem 0 0; }
.diffusion h2::before {
content: "";
display: block;
width: 4rem;
height: 2px;
background: var(--noir);
margin-bottom: 1.2rem;
}
/* Rubriques des pages de projet (« Diffusion », « À propos ») : même style */
.article h2.rubrique {
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: .06em;
margin: 0 0 1.6rem;
font-weight: 700;
}
.article h2.rubrique::before {
content: "";
display: block;
width: 4rem;
height: 2px;
background: var(--noir);
margin-bottom: 1.2rem;
}
.diffusion h2::before { content: none; }
.diffusion h2.rubrique::before { content: ""; }
.artiste { border-top: 0; padding-top: 0; margin-top: 5rem; }
.artiste .rubrique + p { margin-top: 0; }
.generique { margin: 4rem 0 0; }
.generique p { margin: 0; }
/* Rubriques de fin de page de projet : détails plus petits, blocs plus espacés */
.generique, .diffusion, .artiste { margin-top: 7rem; }
.artiste.artiste-duo { margin-top: 3rem; }
.generique p, .diffusion li, .artiste p, .artiste li { font-size: 1.5rem; line-height: 1.65; }
.diffusion-date { font-size: 1.6rem; }
.diffusion li { margin-bottom: 1.6rem; }
/* Rubriques dans les pages ordinaires : garder de l'espace au-dessus */
.page-texte h2.rubrique { margin-top: 6rem; }
.page-texte h2.rubrique + p { font-size: 1.6rem; }
/* Plus d'espace entre l'en-tête et le contenu (hors accueil, qui commence par la photo) */
.main { padding-top: 11rem; }
body:has(.ouverture) .main { padding-top: 0; }
@media (max-width: 767px) { .main { padding-top: 5rem; } }
/* Pied de page : gris plus clair */
.footer { background: #6a6864; }
.pied-droite { border-left-color: #85827d; }
.pied-infos, .footer .pied-infos a { color: #f1f0ee; }
.footer .pied-infos a { text-decoration-color: #a9a6a1; }
/* Phrases d'introduction des pages intérieures : en gras, avec plus d'espace */
.page-texte .chapeau, .projet-texte .chapeau {
font-weight: 700;
line-height: 1.45;
letter-spacing: -.005em;
}
.page-texte .chapeau { margin-bottom: 8rem; }
.projet-texte .chapeau { margin-bottom: 5rem; }
/* l'accueil : chapeau en gras aussi, mais moins d'espace dessous */
#static-page-1 .page-texte .chapeau { margin-bottom: 3rem; }
@media (max-width: 900px) { .page-texte .chapeau { margin-bottom: 5rem; } }
/* ==========================================================================
BOUTONS – style unique du site
Pour toutes les actions : HelloAsso (don, adhésion), contact, candidature.
Utilisation dans une page :
Texte
========================================================================== */
a.bouton {
display: inline-block;
min-width: 22rem;
padding: .7rem 2rem;
margin: 1rem 0;
background: var(--noir);
color: #fff;
border: 2px solid var(--noir);
font-size: 1.6rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
text-decoration: none;
transition: background .15s, color .15s;
}
a.bouton:hover {
background: #fff;
color: var(--noir);
text-decoration: none;
}
/* ---------- ESPACES ET FILET VERTICAL (essai inspiré de Lafayette Anticipations) ----------
- grand écart entre deux parties, intérieur un peu plus serré
- filet vertical continu entre les deux colonnes, d'une partie à l'autre */
@media (min-width: 901px) {
.page-deux-colonnes {
margin-top: 0 !important;
background: linear-gradient(var(--filet), var(--filet)) no-repeat 33.3333% 0 / 1px 100%;
}
.page-deux-colonnes:has(+ .page-deux-colonnes) { padding-bottom: 17rem; }
.page-texte, #static-page-1 .section-suite .page-texte { border-left: 0; }
/* accueil : pas de filet sur la phrase d'ouverture */
#static-page-1 .page-deux-colonnes:not(.section-suite) { background: none; }
/* intérieur des parties */
.page-texte .chapeau { margin-bottom: 6rem; }
.page-texte h2.rubrique { margin-top: 5rem; }
}
/* ---------- PIED DE PAGE CLAIR (essai inspiré de Lafayette Anticipations) ----------
haut sur fond blanc en deux colonnes avec le filet, bas sur bandeau gris clair */
.footer { background: #fff; color: var(--noir); border-top: 0; margin-top: 17rem; padding: 0; font-size: 1.6rem; line-height: 1.6; }
.pied-haut .pied { padding-bottom: 8rem; }
.pied-haut .pied-droite { border-left: 1px solid var(--filet); padding-left: 3rem; }
.pied-titre { font-size: 4rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.footer .footer-signature { color: var(--noir); font-weight: 700; font-size: 2.2rem; line-height: 1.45; max-width: 60rem; margin: 0 0 3rem !important; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 1rem 4rem; margin: 0 0 2rem !important; }
.footer .pied-liens a { color: var(--noir); text-decoration: none; }
.footer .pied-liens a:hover { text-decoration: underline; }
.lien-mail svg { color: var(--noir); opacity: 1; }
.footer .lien-instagram img { filter: brightness(0); opacity: 1; }
.footer .lien-suite { color: var(--noir); }
.pied-bas { background: #efebea; padding: 4rem 0 5rem; font-size: 1.4rem; color: var(--gris); }
.pied-bas p { margin: 0 0 .8rem; }
.pied-asso strong { color: var(--noir); }
.pied-legal { display: flex; flex-wrap: wrap; gap: .5rem 3rem; }
.footer .pied-legal a { color: var(--gris); }
.footer .pied-legal a:hover { color: var(--noir); }
@media (min-width: 901px) { .pied-haut .pied-droite { padding-top: 1.2rem; } }
@media (max-width: 900px) {
.footer { margin-top: 10rem; }
.pied-haut .pied { gap: 2rem; padding-bottom: 5rem; }
.pied-haut .pied-droite { border-left: 0; padding-left: 0; padding-top: 0; }
.pied-titre { font-size: 3rem; }
.footer .footer-signature { font-size: 1.9rem; }
}
/* ---------- MENU SOBRE (essai inspiré de Lafayette, Cartier, Lambert) ----------
majuscule initiale, graisse normale, pas de barres, page en cours soulignée,
bouton gris clair « Nous soutenir » au bout */
.menu > li { text-transform: none; font-weight: 400; }
.menu > li + li::before { content: none; }
@media (min-width: 768px) {
ul.menu { align-items: center; }
.menu > li { font-size: 1.8rem; }
.menu > li + li { margin-left: 3.2rem; }
.menu > li.menu-soutenir { margin-left: 3.6rem; }
}
ul.menu li.menu-soutenir a {
display: inline-block;
background: #efebea;
padding: .6rem 1.4rem;
border-bottom: 0;
font-weight: 500;
transition: background .15s;
}
ul.menu li.menu-soutenir a:hover { background: #e2dcda; }
@media (max-width: 767px) {
ul.menu li.menu-soutenir { margin-top: 1.2rem; }
}
/* ---------- SOUS-MENU « Pour les artistes » ----------
petite flèche sur le libellé, panneau aligné à gauche sous le libellé,
sans cadre, ombre légère, liens plus lisibles */
@media (min-width: 768px) {
.menu > li > span { cursor: pointer; }
.menu > li > span::after { content: "\25BE"; font-size: .75em; padding-left: .5rem; color: var(--gris); }
.menu > li ul {
left: -2rem; right: auto; top: 100%;
min-width: 0;
margin-top: 1.2rem;
padding: 1.4rem 2rem 1.6rem;
background: #fff;
border: 0;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, .10);
}
/* zone invisible entre le libellé et le panneau, pour que le survol ne se perde pas */
.menu > li ul::before { content: ""; position: absolute; left: 0; right: 0; top: -1.4rem; height: 1.4rem; }
.menu > li ul li { padding: .5rem 0; font-size: 1.7rem !important; }
ul.menu li ul li a { border-bottom: 1px solid transparent; padding-bottom: .1rem; }
ul.menu li ul li a:hover,
ul.menu li ul li.active a { border-bottom-color: var(--noir); }
}
/* Icône Instagram dans le menu, à côté de « Nous soutenir » */
ul.menu li.menu-instagram a { display: inline-flex; align-items: center; border-bottom: 0; padding: 0; }
ul.menu li.menu-instagram img { width: 2.2rem; height: 2.2rem; filter: brightness(0); opacity: .85; transition: opacity .15s; }
ul.menu li.menu-instagram a:hover img { opacity: 1; }
@media (min-width: 768px) { .menu > li.menu-instagram { margin-left: 2rem; } }
@media (max-width: 767px) { ul.menu li.menu-instagram { margin-top: 1.6rem; } }
@media (min-width: 768px) { .menu > li.menu-instagram { line-height: 0; align-self: center; } }
/* Correctif téléphone : la grille des projets ne doit jamais élargir la page */
.cartes-projets { grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr)); }
@media (max-width: 900px) { .page-deux-colonnes, #static-page-1 .section-suite { grid-template-columns: minmax(0, 1fr); } }
/* Auteur d'une citation, et phrase « Une question sur l'appel ? » */
.citation-auteur { display: block; margin-top: 1rem; font-size: 1.5rem; font-style: normal; font-weight: 700; }
.citation-auteur::before { content: "— "; }
.question-appel { margin-top: 6rem; }
/* Rubrique posée directement dans le texte d'un projet (ex. « AVEC ») : même écart que les autres */
.projet-texte > h2.rubrique { margin-top: 7rem; }
/* ---------- ESSAI : photo d'accueil en noir et blanc ----------
(réglage réversible : supprimer ce bloc pour retrouver la couleur) */
.ouverture { filter: grayscale(.75) contrast(1.03); }
/* Bandeau des liens d'aperçu (projets en brouillon) */
.bandeau-apercu { position: sticky; top: 0; z-index: 50; padding: .8rem 2rem; background: #fff3c4; color: var(--noir); font-size: 1.4rem; font-weight: 700; text-align: center; }
/* Suite d'images verticale dans la colonne de droite d'un projet :
![]()
![]()
… */
.projet-visuel:has(.suite) { position: static; }
.projet-visuel .suite { display: flex; flex-direction: column; gap: 1.2rem; }
.projet-visuel .suite img { height: auto; max-height: none; object-fit: contain; }
@media (max-width: 900px) { .projet-visuel:has(.suite) { order: 1; margin-top: 4rem; } }
/* Liens Site / Instagram dans les pages (ex. Le bureau) : plus petits, sur une ligne */
.page-texte ul.liens-plus { display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; margin: .8rem 0 2.4rem; font-size: 1.5rem; }
.page-texte ul.liens-plus li { margin: 0; }
.page-texte ul.liens-plus a::before { width: 1.5rem; height: 1.5rem; }
/* Vidéo YouTube chargée au clic : image du clip + bouton lecture, puis lecteur 16/9 */
.video-youtube { margin: 0 0 4rem; }
.video-youtube button, .video-youtube iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: #000; }
.video-youtube button { position: relative; cursor: pointer; overflow: hidden; }
.video-youtube button img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; transition: opacity .2s; }
.video-youtube button:hover img { opacity: 1; }
.video-play { position: absolute; left: 50%; top: 50%; width: 7.2rem; height: 7.2rem; margin: -3.6rem 0 0 -3.6rem; border-radius: 50%; background: rgba(0,0,0,.6); transition: background .2s; }
.video-play::after { content: ""; position: absolute; left: 2.9rem; top: 2.2rem; border-style: solid; border-width: 1.4rem 0 1.4rem 2.2rem; border-color: transparent transparent transparent #fff; }
.video-youtube button:hover .video-play { background: rgba(0,0,0,.85); }
.video-note { font-size: 1.3rem; color: var(--gris); margin: .8rem 0 0 !important; }
.video-note a { color: var(--gris); }
.video-youtube button { height: auto !important; min-height: 0 !important; line-height: 0; }
/* Pages projets : liens Site / Instagram / YouTube sur une ligne, en petit (comme Le bureau) */
.article .artiste ul, .article ul.liens-plus { display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; list-style: none; padding: 0; font-size: 1.5rem; }
.article .artiste ul li, .article ul.liens-plus li { margin: 0; }
.article .artiste li a::before, .article ul.liens-plus a::before { width: 1.5rem; height: 1.5rem; }