/* =========================================================

COULEURS DU SITE (VARIABLES) & CURSEURS PERSONNALISÉS
========================================================= */
:root {
--fond-blanc: #ffffff;
--texte-noir: #131313;
--bordure-noire: #131313;
--rose-surlignage: #ffb3d9;
--rose-titre: #d63384;
--jaune-surlignage: #ffea59;
}

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* Application de tes 3 curseurs SVG sur tout le site */
html, body {
cursor: url('cursor-default.svg') 2 0, auto;
}

a, button, [role="button"], .vignette-projet, .point, .ligne-index, .bouton-web, .bouton-miniature, .lien-secret-faq, .encart-blog, .ligne-article-blog, .encart-musique {
cursor: url('cursor-pointer.svg') 8 0, pointer !important;
color: var(--texte-noir);
text-decoration: none;
}

p, h1, h2, h3, em, figcaption, .texte-intro-serif, .texte-courant, .texte-interet, .texte-reponse-faq, .texte-description-modale, .corps-article-blog p {
cursor: url('cursor-text.svg') 6 19, text;
}

/* Couleur quand le visiteur surligne du texte avec sa souris */
::selection {
background-color: var(--rose-surlignage);
color: var(--texte-noir);
}

p:nth-child(even)::selection, h2::selection, span::selection {
background-color: var(--jaune-surlignage);
color: var(--texte-noir);
}

/* Fond blanc avec le quadrillage léger façon carnet d'atelier */
body {
  background-color: var(--fond-blanc);
  background-image: 
    linear-gradient(to right, rgba(19, 19, 19, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(19, 19, 19, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--texte-noir);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
}

/* =========================================================
2. REGROUPEMENT DES TYPOGRAPHIES ET RENDUS D'IMAGES
========================================================= /
/ Typographie Serif */
.texte-intro-serif, .titre-blog-serif, .grand-titre-note, .grand-titre-colonne, .titre-modale-serif, .phrase-contact {
font-family: 'Instrument Serif', Georgia, serif;
font-weight: 400;
}

/* Typographie Monospace */
.texte-machine, .etiquette-rose, .petit-titre-rose, .bouton-web, .titre-fenetre, .barre-fenetre, .menu-navigation a, .question-etoile, .legende-diapo, .sous-titre-rose, .categorie-interet, .bouton-onglet-musique, .lien-souligne, .bouton-miniature, .annee-modale-rose, .corps-photo figcaption, .image-article-blog figcaption {
font-family: 'Space Mono', monospace;
}

/* Images Pixel Art */
.icone-texte, .icone-moyenne, .icone-grande, .autocollant, .icone-deco, .bouton-88x31 {
image-rendering: pixelated;
}

/* =========================================================
3. PETITES IMAGES HYPERCARD (PIXELS NETS)
========================================================= */
.icone-texte {
height: 20px;
width: auto;
vertical-align: middle;
margin-right: 6px;
}

.ligne-titre-icone {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}

.ligne-titre-icone .petit-titre-rose {
margin-bottom: 0;
}

.icone-moyenne {
height: 26px;
width: auto;
flex-shrink: 0;
}

.icone-grande {
height: 36px;
width: auto;
flex-shrink: 0;
}

/* Autocollants posés sur les coins des fenêtres */
.autocollant {
position: absolute;
width: 44px;
height: auto;
z-index: 15;
pointer-events: none;
filter: drop-shadow(2px 2px 0px #ffffff);
}

.coin-haut-droite { top: -18px; right: -14px; transform: rotate(8deg); }
.coin-haut-gauche { top: -18px; left: -14px; transform: rotate(-8deg); }
.coin-bas-droite { bottom: -16px; right: -12px; transform: rotate(-6deg); }

.deco-bas-colonne {
margin-top: 28px;
display: flex;
gap: 16px;
align-items: center;
}

.icone-deco {
height: 42px;
width: auto;
}

/* =========================================================
4. MENU DU HAUT (ENTÊTE) & BOUTONS
========================================================= */
.entete-site {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 24px;
border-bottom: 1px solid var(--bordure-noire);
background-color: var(--fond-blanc);
font-size: 12px;
position: sticky;
top: 0;
z-index: 40;
flex-wrap: wrap;
gap: 12px;
}

.nom-site {
font-weight: 700;
padding: 2px 6px;
display: inline-flex;
align-items: center;
}

.nom-site:hover {
background-color: var(--rose-surlignage);
}

.menu-navigation {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.menu-navigation a {
font-size: 12px;
padding: 2px 6px;
}

.menu-navigation a:hover, .menu-navigation a.page-active {
background-color: var(--rose-surlignage);
text-decoration: underline;
}

.bouton-web {
font-size: 11px;
padding: 5px 10px;
background: var(--fond-blanc);
border: 1px solid var(--bordure-noire);
box-shadow: 2px 2px 0px var(--bordure-noire);
display: inline-block;
}

.bouton-web:hover {
background: var(--rose-surlignage);
}

.bouton-web:active {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0px var(--bordure-noire);
}

/* Couleur jaune quand l'adresse mail vient d'être copiée */
.bouton-web.mail-copie {
background-color: var(--jaune-surlignage);
font-weight: 700;
}

/* =========================================================
5. GRILLE DE LA PAGE D'ACCUEIL & FENÊTRES STYLE WINDOWS
========================================================= */
.conteneur-accueil {
max-width: 1180px;
margin: 0 auto;
padding: 36px 24px 30px;
}

.grille-accueil {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 22px;
}

.largeur-4 { grid-column: span 4; }
.largeur-5 { grid-column: span 5; }
.largeur-7 { grid-column: span 7; }
.largeur-12 { grid-column: span 12; }

.fenetre {
position: relative;
background-color: var(--fond-blanc);
border: 1px solid var(--bordure-noire);
box-shadow: 4px 4px 0px var(--bordure-noire);
display: flex;
flex-direction: column;
min-height: 290px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pencher-gauche { transform: rotate(-1.1deg); }
.pencher-droite { transform: rotate(1.1deg); }
.pencher-gauche-leger { transform: rotate(-0.6deg); }

.fenetre:hover, .vignette-projet:hover, .cadre-photo:hover, .miniature-album-top:hover {
transform: rotate(0deg) translateY(-2px);
}

.barre-fenetre {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-bottom: 1px solid var(--bordure-noire);
background-color: var(--fond-blanc);
font-size: 11px;
}

.fenetre:hover > .barre-fenetre, .mini-fenetre:hover > .barre-fenetre {
background-color: var(--rose-surlignage);
}

.titre-fenetre {
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}

.boutons-fenetre {
display: flex;
gap: 4px;
flex-shrink: 0;
}

.boutons-fenetre span, .petit-carre-fermer {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
border: 1px solid var(--bordure-noire);
background: var(--fond-blanc);
font-size: 10px;
line-height: 1;
}

.corps-fenetre {
padding: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}

.petit-titre-rose {
display: inline-block;
font-size: 12px;
font-weight: 700;
color: var(--rose-titre);
margin-bottom: 10px;
}

.etiquette-rose {
background-color: var(--rose-surlignage);
padding: 1px 6px;
border: 1px solid var(--bordure-noire);
font-size: 11px;
}

.texte-intro-serif {
font-size: 27px;
line-height: 1.2;
margin-bottom: 12px;
}

.texte-courant { font-size: 14px; }

.pied-fenetre {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
padding-top: 10px;
border-top: 1px solid var(--bordure-noire);
}

.texte-machine { font-size: 11px; }

/* =========================================================
6. CONTENU DES BOÎTES D'ACCUEIL (DIAPORAMA, MUSIQUE, BLOG...)
========================================================= */
.cadre-diaporama {
display: block;
border: 1px solid var(--bordure-noire);
background: var(--fond-blanc);
}

.scene-diaporama {
position: relative;
height: 230px;
width: 100%;
}

.diapo {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
}

.diapo.active { opacity: 1; }

.diapo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.legende-diapo {
position: absolute;
bottom: 8px;
left: 8px;
background: var(--fond-blanc);
border: 1px solid var(--bordure-noire);
padding: 3px 8px;
font-size: 11px;
}

.points-diaporama {
display: flex;
gap: 6px;
}

.point {
width: 10px;
height: 10px;
border: 1px solid var(--bordure-noire);
background: var(--fond-blanc);
}

.point.active { background: var(--rose-surlignage); }

.lien-souligne {
font-size: 11px;
text-decoration: underline;
padding: 2px 4px;
}

.lien-souligne:hover { background-color: var(--rose-surlignage); }

/* Boîte Musique */
.encart-musique {
display: flex;
gap: 12px;
align-items: center;
padding: 10px;
border: 1px solid var(--bordure-noire);
background: var(--fond-blanc);
margin-bottom: 14px;
}

.pochette-album {
width: 60px;
height: 60px;
flex-shrink: 0;
border: 1px solid var(--bordure-noire);
}

.pochette-album img {
width: 100%;
height: 100%;
object-fit: cover;
}

.sous-titre-rose {
font-size: 10.5px;
font-weight: 700;
color: var(--rose-titre);
margin-bottom: 4px;
}

.titre-morceau {
font-size: 15px;
font-weight: 700;
}

.nom-artiste { font-size: 12.5px; }

.titre-morceau, .nom-artiste {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

a.encart-musique:hover { background-color: var(--rose-surlignage); }

.ligne-morceau {
display: flex;
justify-content: space-between;
font-size: 12.5px;
padding: 4px 0;
border-bottom: 1px dotted var(--bordure-noire);
}

/* Boîte Intérêts */
.liste-interets {
display: flex;
flex-direction: column;
gap: 10px;
}

.bloc-interet {
border: 1px solid var(--bordure-noire);
padding: 8px 10px;
background: var(--fond-blanc);
}

.categorie-interet {
font-size: 10px;
font-weight: 700;
display: inline-block;
background-color: var(--rose-surlignage);
padding: 0 4px;
margin-bottom: 4px;
}

.texte-interet { font-size: 13px; }

/* Onglets dans la boîte musique */
.onglets-musique {
display: flex;
gap: 6px;
margin-bottom: 8px;
border-bottom: 1px solid var(--bordure-noire);
padding-bottom: 6px;
}

.bouton-onglet-musique {
font-size: 10px;
padding: 2px 6px;
background: var(--fond-blanc);
border: 1px solid var(--bordure-noire);
}

.bouton-onglet-musique.active,
.bouton-onglet-musique:hover {
background-color: var(--rose-surlignage);
font-weight: 700;
}

.contenu-onglet-musique { display: none; }
.contenu-onglet-musique.active { display: block; }

.grille-top-albums {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
padding-top: 2px;
}

.miniature-album-top {
display: block;
aspect-ratio: 1 / 1;
border: 1px solid var(--bordure-noire);
background: var(--fond-blanc);
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.miniature-album-top:hover {
box-shadow: 2px 2px 0px var(--rose-titre);
}

.miniature-album-top img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Boîte Blog */
.encart-blog {
display: block;
padding: 12px;
background: var(--fond-blanc);
border: 1px solid var(--bordure-noire);
margin-bottom: 12px;
}

.encart-blog:hover { background: var(--rose-surlignage); }

.titre-blog-serif {
font-size: 23px;
line-height: 1.15;
margin-bottom: 6px;
}

.ligne-article-blog {
display: flex;
justify-content: space-between;
font-size: 12.5px;
padding: 5px 2px;
border-bottom: 1px solid var(--bordure-noire);
}

.ligne-article-blog:hover { background-color: var(--jaune-surlignage); }

/* Boîte Contact */
#contact { min-height: auto; }

.zone-contact {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}

.titre-contact-icones {
display: flex;
align-items: center;
gap: 12px;
}

.phrase-contact { font-size: 24px; }

.boutons-contact {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

/* =========================================================
7. PIED DE PAGE CENTRÉ AU MILIEU (SUR L'ACCUEIL)
========================================================= */
.pied-de-page-centre {
width: 100%;
margin: 10px auto 60px;
padding: 0 24px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 18px;
text-align: center;
}

.bannieres-footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
max-width: 820px;
}

.bouton-88x31 {
height: 31px;
width: auto;
border: 1px solid var(--bordure-noire);
box-shadow: 2px 2px 0px var(--bordure-noire);
transition: transform 0.15s ease;
}

.bouton-88x31:hover { transform: translateY(-2px); }

/* =========================================================
8. PAGE FAQ & CRÉDITS
========================================================= */
.feuille-note-faq {
max-width: 760px;
margin: 48px auto 90px;
padding: 44px 52px;
background-color: var(--fond-blanc);
border: 1px solid var(--bordure-noire);
box-shadow: 4px 4px 0px var(--bordure-noire);
}

.intro-note-faq {
border-bottom: 1px solid var(--bordure-noire);
padding-bottom: 24px;
margin-bottom: 32px;
}

.grand-titre-note {
font-size: 38px;
line-height: 1.1;
margin: 8px 0 14px;
}

.texte-intro-note {
font-size: 15px;
line-height: 1.75;
}

.liste-questions-faq {
display: flex;
flex-direction: column;
gap: 32px;
}

.bloc-question-faq {
padding-bottom: 28px;
border-bottom: 1px dotted var(--bordure-noire);
}

.question-etoile {
font-size: 13px;
color: var(--rose-titre);
margin-bottom: 10px;
}

.texte-reponse-faq {
font-size: 15px;
line-height: 1.85;
}

.surligner-rose, .surligner-jaune {
padding: 1px 4px;
border: none;
border-radius: 2px;
}

a.surligner-rose, a.surligner-jaune {
text-decoration: underline;
text-underline-offset: 3px;
}

.surligner-rose { background-color: var(--rose-surlignage); }
.surligner-jaune { background-color: var(--jaune-surlignage); }

a.surligner-rose:hover, a.surligner-jaune:hover {
background-color: var(--texte-noir);
color: var(--fond-blanc);
}

.bas-note-faq {
margin-top: 32px;
display: flex;
align-items: center;
justify-content: space-between;
}

/* =========================================================
9. PAGE PROJETS & MODALE D'OUVERTURE
========================================================= */
.mise-en-page-galerie {
display: grid;
grid-template-columns: 290px 1fr;
min-height: calc(100vh - 45px);
}

.colonne-index-gauche {
border-right: 1px solid var(--bordure-noire);
padding: 24px;
background: var(--fond-blanc);
}

.grand-titre-colonne {
font-size: 36px;
line-height: 1;
margin-bottom: 8px;
}

.texte-explication-colonne {
font-size: 12px;
margin-bottom: 20px;
}

.liste-projets-index {
display: flex;
flex-direction: column;
}

.ligne-index {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
text-align: left;
background: var(--fond-blanc);
border: none;
border-bottom: 1px solid var(--bordure-noire);
padding: 8px 4px;
font-family: inherit;
font-size: 12.5px;
}

.ligne-index:hover, .ligne-index.active {
background: var(--rose-surlignage);
}

.espace-rhizome {
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-content: start;
}

.vignette-projet {
  position: relative;
  max-width: 100%;
  width: 100%;
  transition: transform 0.2s ease;
}

.texte-description-modale a:hover {
  background-color: var(--texte-noir);
  color: var(--fond-blanc);
}

.placement-projet-1 { grid-column: 2 / span 4; margin-top: 50px; }
.placement-projet-2 { grid-column: 4 / span 4; margin-top: 55px; }
.placement-projet-3 { grid-column: 9 / span 3; margin-top: -300px; }

.placement-projet-4 { grid-column: 2 / span 3; margin-top: 40px; }
.placement-projet-5 { grid-column: 8 / span 4; margin-top: 70px; }


.mini-fenetre {
background: var(--fond-blanc);
border: 1px solid var(--bordure-noire);
box-shadow: 3px 3px 0px var(--bordure-noire);
}

.corps-mini-fenetre { padding: 8px; }
.corps-mini-fenetre img {
width: 100%;
height: auto;
display: block;
border: 1px solid var(--bordure-noire);
}

.fond-modale-projet {
position: fixed;
inset: 0;
background: rgba(19, 19, 19, 0.4);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 100;
}

.fond-modale-projet.ouverte { display: flex; }

.fenetre-modale-projet {
background: var(--fond-blanc);
border: 1px solid var(--bordure-noire);
box-shadow: 6px 6px 0px var(--bordure-noire);
max-width: 980px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
}

.grille-interieure-modale {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 24px;
padding: 20px;
}

.colonne-media-modale {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}

.cadre-affichage-media {
border: 1px solid var(--bordure-noire);
background: var(--fond-blanc);
min-height: 320px;
max-height: 440px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.cadre-affichage-media img, .cadre-affichage-media video {
width: 100%;
height: 100%;
max-height: 440px;
object-fit: contain;
display: block;
}

.barre-boutons-media {
display: flex;
justify-content: space-between;
align-items: center;
}

.bande-miniatures {
display: flex;
gap: 8px;
overflow-x: auto;
padding-top: 6px;
}

.bouton-miniature {
width: 64px;
height: 48px;
border: 1px solid var(--bordure-noire);
background: var(--fond-blanc);
padding: 0;
flex-shrink: 0;
font-size: 10px;
overflow: hidden;
}

.bouton-miniature.active {
border: 2px solid var(--rose-titre);
box-shadow: 2px 2px 0px var(--rose-surlignage);
}

.bouton-miniature img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.titre-modale-serif {
font-size: 34px;
line-height: 1.1;
margin-bottom: 6px;
}

.annee-modale-rose {
font-size: 11px;
background-color: var(--rose-surlignage);
display: inline-block;
padding: 2px 6px;
border: 1px solid var(--bordure-noire);
margin-bottom: 14px;
}

.texte-description-modale {
font-size: 14px;
line-height: 1.6;
}

.texte-description-modale a {
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
padding: 0 3px;
}

/* =========================================================
10. PAGE PHOTOS : CADRES LÉGÈREMENT AGRANDIS
========================================================= */
.grille-photos-vrac {
max-width: 1380px;
margin: 0 auto;
padding: 48px 32px 90px;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 32px;
align-items: start;
}

.cadre-photo {
position: relative;
background: var(--fond-blanc);
border: 1px solid var(--bordure-noire);
box-shadow: 4px 4px 0px var(--bordure-noire);
transition: transform 0.2s ease;
}

.corps-photo { padding: 10px; }
.corps-photo img {
width: 100%;
height: auto;
display: block;
border: 1px solid var(--bordure-noire);
}

.corps-photo figcaption {
font-size: 11px;
margin-top: 8px;
}

.placement-photo-1 { grid-column: 1 / span 4; max-width: 285px; margin-top: 10px; }
.placement-photo-2 { grid-column: 5 / span 4; max-width: 255px; margin-top: 40px; }
.placement-photo-3 { grid-column: 9 / span 4; max-width: 310px; margin-top: -230px; }
.placement-photo-4 { grid-column: 2 / span 4; max-width: 275px; margin-top: 25px; }
.placement-photo-5 { grid-column: 6 / span 4; max-width: 295px; margin-top: 40px; }
.placement-photo-6 { grid-column: 10 / span 3; max-width: 250px; margin-top: -300px; }
.placement-photo-7 { grid-column: 3 / span 4; max-width: 300px; margin-top: 35px; }
.placement-photo-8 { grid-column: 8 / span 4; max-width: 265px; margin-top: 20px; }

/* =========================================================
11. PAGE BLOG INTERNE (STYLE CARNET & FENÊTRE)
========================================================= */
.mise-en-page-blog {
max-width: 1140px;
margin: 0 auto;
padding: 38px 24px 80px;
display: grid;
grid-template-columns: 330px 1fr;
gap: 32px;
align-items: start;
}

.colonne-blog-gauche .fenetre { min-height: auto; }
.fenetre-article-blog { min-height: 480px; }
.corps-article-blog { padding: 34px 42px; }

.entete-article-blog {
border-bottom: 1px solid var(--bordure-noire);
padding-bottom: 18px;
margin-bottom: 24px;
}

.meta-article-blog {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}

.titre-article-grand {
font-size: 38px;
line-height: 1.1;
}

.texte-article-blog p {
font-size: 15px;
line-height: 1.8;
margin-bottom: 16px;
}

.image-article-blog {
margin: 22px 0;
border: 1px solid var(--bordure-noire);
padding: 8px;
background: var(--fond-blanc);
}

.image-article-blog img {
width: 100%;
max-height: 360px;
object-fit: cover;
display: block;
border: 1px solid var(--bordure-noire);
}

.image-article-blog figcaption {
font-size: 11px;
margin-top: 6px;
}

.boite-contexte-photos {
grid-column: 1 / span 5;
min-height: auto;
margin-bottom: 10px;
}

@media (max-width: 900px) {
.boite-contexte-photos { grid-column: span 12; }
}

/* =========================================================
12. ADAPTATION PETITS ÉCRANS (TABLETTE & MOBILE)
========================================================= */
@media (max-width: 900px) {
.largeur-4, .largeur-5, .largeur-7 { grid-column: span 12; }
.mise-en-page-galerie, .mise-en-page-blog { grid-template-columns: 1fr; }

.colonne-index-gauche {
border-right: none;
border-bottom: 1px solid var(--bordure-noire);
padding: 20px;
}

.espace-rhizome {
padding: 24px 20px 50px;
gap: 18px;
}

.placement-projet-1, .placement-projet-2, .placement-projet-3,
.placement-projet-4, .placement-projet-5, .placement-projet-6,
.placement-projet-7, .placement-projet-8, .placement-projet-9,
.placement-photo-1, .placement-photo-2, .placement-photo-3, .placement-photo-4,
.placement-photo-5, .placement-photo-6, .placement-photo-7, .placement-photo-8 {
grid-column: span 6;
margin-top: 0;
max-width: 100%;
}

.fond-modale-projet { padding: 12px; }
.grille-interieure-modale {
grid-template-columns: 1fr;
gap: 16px;
padding: 14px;
}

.cadre-affichage-media {
min-height: 200px;
max-height: 300px;
}

.titre-modale-serif { font-size: 26px; }
.feuille-note-faq, .corps-article-blog { padding: 24px 20px; }
}

@media (max-width: 560px) {
.entete-site { padding: 10px 14px; }

.placement-projet-1, .placement-projet-2, .placement-projet-3,
.placement-projet-4, .placement-projet-5, .placement-projet-6,
.placement-projet-7, .placement-projet-8, .placement-projet-9,
.placement-photo-1, .placement-photo-2, .placement-photo-3, .placement-photo-4,
.placement-photo-5, .placement-photo-6, .placement-photo-7, .placement-photo-8 {
grid-column: span 12;
}

.barre-boutons-media .bouton-web, #fermer-modale {
font-size: 10px;
padding: 4px 8px;
}

.bouton-miniature { width: 52px; height: 40px; }
}