/* remiengel.com — reprise fidèle du thème « gridly » personnalisé (css/reset.css + custom.css + mobile.css) */

/* ---------- reset (Eric Meyer v2.0, abrégé) ---------- */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, center, ul, li, figure {
  margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
figure { display: block; }

/* ---------- polices ---------- */
@font-face {
  font-family: 'Ostrich Rounded';
  src: url('/webfonts/ostrich-sans-rounded.woff') format('woff'),
       url('/webfonts/ostrich-sans-rounded.ttf') format('truetype');
  font-display: swap;
}

/* ---------- base ---------- */
body { background: #FFFFFF; font-size: 12px; line-height: 20px; font-family: 'Ostrich Rounded', sans-serif; color: #000000; }
#wrap { width: 100%; }

h1 { font-size: 142px; line-height: 112px; color: #000; margin: 5px 50px; text-align: center; font-family: 'Ostrich Rounded', sans-serif; }
h2 { font-size: 72px; line-height: 38px; color: #000; margin: 2px 0 5px; letter-spacing: 1px; font-weight: 100; font-family: 'Helvetica', Arial, sans-serif; text-align: center; }
h3 { font-size: 36px; line-height: 32px; color: #000; margin: 10px 0 5px; letter-spacing: 1px; }
h4 { font-size: 36px; line-height: 32px; color: #000; letter-spacing: 1px; }
p  { font-family: 'Tinos', Georgia, serif; font-size: 16px; line-height: 21px; padding: 8px 0; letter-spacing: 1px; }

a:link, a:visited, a:active { color: #000; text-decoration: none; letter-spacing: 1px; }
a:hover { color: #CCCCCC; letter-spacing: 1px; }
a:focus { outline-style: none; }

/* ---------- en-tête de l'accueil ---------- */
#fondnoir {
  position: absolute; top: 0; left: 0; width: 100%; height: 446px; z-index: -50;
  background: #000 url(/img/fond_noir@2x.jpg) top / cover;
}
#carte { width: 310px; height: 420px; padding-bottom: 2px; margin: 38px auto 0; background: #FFFFFF; text-align: center; }
#animatedlogo { padding-top: 38px; margin-bottom: 16px; animation: fadeInDown 1s; }
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-38px); }
  to   { opacity: 1; transform: translateY(0); }
}
#fleche { position: absolute; width: 100%; top: 264px; }
#fleche h2 { color: #16CF26; }

/* bandeau vert (accueil) / teinté (projets) */
#logo {
  position: absolute; top: 346px; width: 100%; padding: 26px 0 24px; text-align: center;
  background: #28c928 url(/img/fond_test2.jpg) center / cover;
  font-family: 'Tinos', Georgia, serif; color: #FFFFFF; font-size: 16px; font-style: italic; letter-spacing: 1px; line-height: 24px;
}
/* curseur « retour à l'accueil » : flèche vers la gauche (w-resize en secours) */
.single #logo { top: 0; cursor: url(/assets/curseur-retour.svg) 1 9, w-resize; transform: translateZ(0); }

/* ---------- grille des projets ---------- */
#post-area { margin: 0 auto; position: relative; text-align: center; }
#post-area > a { display: inline-block; vertical-align: top; }   /* sans JS : simple flux centré */
#post-area .post {
  width: 310px; margin: 15px 10px 17px; padding-top: 15px; position: relative;
  font-size: 36px; line-height: 28px; color: #000; letter-spacing: 1px;
  filter: grayscale(100%); transform: translateZ(0);
}
#post-area .post:hover { filter: none; color: var(--c); }
#post-area .post img { display: block; margin-top: 0; }
#post-area .post .gridly-link {
  width: 150px; margin: 10px auto 0; padding: 8px 0 10px; border-top: 1px dotted #777777; color: #494e51;
}
#post-area .post:hover .gridly-link { color: var(--c); }

/* grille positionnée par site.js (équivalent de jQuery Masonry, isFitWidth) */
#post-area.masonry > a { position: absolute; transition: left .2s linear, top .2s linear; }

/* ---------- pied de page ---------- */
.email { color: #28c928; font-style: italic; text-align: center; padding-top: 50px; }
.copyright { text-align: right; color: #B8B8B8; font-size: 12px; margin: 0 38px 21px 0; }

/* ---------- page projet ---------- */
/* colonne centrale de 770px, comme .type-post dans le thème d'origine : une grande image par ligne */
#singlePage { background: #FFFFFF; padding-top: 132px; text-align: center; width: 770px; max-width: 100%; margin: 0 auto; }
#nextProject { position: fixed; top: 85%; left: 50%; margin-left: 410px;  width: 200px; text-align: left; }
#prevProject { position: fixed; top: 85%; left: 50%; margin-left: -610px; width: 200px; text-align: right; }

.description a:link, .description a:visited { color: #000; }
.description figure { margin: 0 0 12px; }
.description figure img { height: auto; max-width: 100%; vertical-align: bottom; }

.galerie img { max-width: calc(100% - 20px); height: auto; }
.video { width: 720px; height: 405px; max-width: 100%; }

.credits { font-family: 'Tinos', Georgia, serif; color: #B8B8B8; font-size: 12px; letter-spacing: 1px; margin-left: 25px; line-height: 16px; text-align: left; }
.credits a, .credits a:visited { color: #777777; }
.credits a:hover { color: #000000; }

.retour hr { width: 310px; height: 10px; margin: 0 auto; border: 0; border-top: 1px dotted #777777; }

/* ---------- mobile (ancien mobile.css, ≤ 480px) ---------- */
@media (max-width: 480px) {
  #wrap { width: 310px; margin: 0 auto; overflow: hidden; }
  #logo, #fleche { width: 310px; }
  #singlePage { padding-top: 112px; width: 310px; margin: 0 auto; }
  h1 { font-size: 62px; line-height: 56px; margin-left: 0; margin-right: 0; }
  .galerie img, .description figure img { width: 290px; height: auto; }
  .video { width: 290px; height: 163px; }
  #post-area .post { filter: none; }
}