/*
Theme Name: Newcomers Template Theme
Theme URI: https://example.com/newcomers-template-theme
Author: Your Name
Author URI: https://example.com
Description: Un thème WordPress basé sur le modèle "Newcomers". Il reproduit la mise en page et le style du modèle HTML original et permet d'ajouter des photos et vidéos dans plusieurs formats.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newcomers-template-theme
*/

/* Basic reset and typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #000;
  background: #fff;
}
/* Top navigation bar */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  /* Centre le logo horizontalement dans l’en-tête.  Nous conservons l’affichage flex
     pour gérer l’alignement vertical, mais ajoutons également text-align afin de
     centrer l’élément et utilisons !important pour forcer le centrage si
     d’autres règles de WordPress tentent de l’écraser. */
  justify-content: center !important;
  text-align: center;
  align-items: center;
  padding: 1rem 2rem;
  background: #fff;
  z-index: 1000;
  /* Make the divider between the logo and the content a solid black line. */
  border-bottom: 1px solid #000;
}
header .left,
header .right {
  display: flex;
  gap: 1rem;
  font-weight: bold;
}
header a {
  text-decoration: none;
  color: inherit;
}
header .logo {
  font-size: 1.5rem;
  line-height: 1;

  /* Centrer la boîte du logo lorsque l’en‑tête ne contient plus de liens.
     Les marges automatiques de chaque côté et le text-align centrent
     l’élément dans la barre de navigation. */
  margin: 0 auto;
  text-align: center;
}

/*
 * Logo size adjustment
 * When a custom logo is set via the WordPress Customizer, it may appear too large.
 * This rule constrains the height of the logo image so that it fits neatly into
 * the header. Adjust the max-height value to your preference.
 */
header .logo img {
  max-height: none;
  height: auto;
  width: auto;
}

/* Assure que le lien et l'image du logo se comportent comme des éléments en ligne
   bloqués et qu'ils sont également centrés dans leur conteneur. */
header .logo a,
header .logo img {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------------
   Responsive header adjustments

   Sur les petits écrans, les liens du header risquent de déborder ou de se
   masquer. Ces règles réduisent les marges et la taille du texte et
   autorisent le retour à la ligne afin de s’assurer que des éléments comme
   le lien Instagram restent visibles.
*/
/* By default, hide the short version of the label; it will be shown on small
   screens via the media query below. */
header .nav-link .label-short {
  display: none;
}

/* Responsive header adjustments for small screens (<=600px)
 *
 * - Switch from the full label ("Informations") to a shorter one ("Infos")
 *   for the information link to save horizontal space.
 * - Reduce the horizontal gap and font size to prevent the Instagram link from
 *   overflowing the viewport.
 */
@media (max-width: 600px) {
  /* Show the short label and hide the full label for the information link */
  header .nav-link .label-full {
    display: none;
  }
  header .nav-link .label-short {
    display: inline;
  }
  /* Reduce spacing and font size for header links */
  header .left,
  header .right {
    gap: 0.25rem;
    font-size: 0.8rem;
  }
  header .nav-link {
    font-size: 0.8rem;
  }
}

/* Main content container */
main {
  /*
   * Increase the maximum width of the main content container.
   *
   * The original layout capped the content at 1200px wide, which
   * resulted in fairly small thumbnails in the mosaic grid.  To
   * better match the proportions in the provided mock‑up (where each
   * cell appears larger), we expand the max width to 1600px.  This
   * change allows each mosaic tile to occupy more horizontal space
   * while keeping the three‑column rhythm on large screens.  The
   * container remains centred via auto margins and still includes
   * padding on either side.
   */
  max-width: 1600px;
  margin: 0 auto;
  /* Increase top padding to ensure the page title is not hidden under the
     fixed header on small devices and when the WordPress customizer icons are displayed. */
  padding: 8rem 2rem 2rem;
  /* top padding accounts for fixed header */
}
h1 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  /* Permet au nom de l'artiste de se répartir sur plusieurs lignes afin
     d'éviter une coupure ou un débordement. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.username {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #555;
}
.username a {
  color: #555;
  text-decoration: none;
}
.tagline {
  font-style: italic;
  margin-bottom: 1.5rem;
}
.bio {
  margin-bottom: 2rem;
  max-width: 800px;
}

/* Image grid for hero gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
  margin-bottom: 3rem;
}
/* Image styling for older markup – kept here for backward compatibility.
   When using the new `.media` wrappers, the child <img> or <video>
   automatically inherits `width: 100%` and `height: 100%`. */
.gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  background: #f0f0f0;
}

/* Hide the default gallery and projects sections when using the mosaic */
.gallery,
#projects {
  display: none;
}

/* Project sections */
.project {
  margin-bottom: 3rem;
}
.project h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
.project-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
}
.project-images img {
  /* The old image styling is no longer used directly – see the .media
     wrapper and aspect‑ratio classes below for flexible sizing */
}

/* =====================================================================
   Media containers

   To make it easy to swap photos or videos in a variety of formats
   without breaking the layout, each piece of content is wrapped in a
   `.media` element.  The wrapper uses CSS’s `aspect-ratio` property to
   enforce the correct proportions and allows its child (an <img> or
   <video>) to fill the space.  Replace the placeholder sources with
   your own files.
   --------------------------------------------------------------------- */
.media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: #f0f0f0;
}
.media img,
  .media video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centre le cadrage pour que les images et vidéos soient bien ajustées */
  object-position: center;
}
/* Aspect ratio utility classes.  Apply one of these to a `.media`
   wrapper to set the desired aspect ratio.  The numbers correspond to
   width/height proportions and common content sizes. */
.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-9-16 { aspect-ratio: 9 / 16; }
.aspect-1-1 { aspect-ratio: 1 / 1; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-5-4 { aspect-ratio: 5 / 4; }

/* =====================================================================
   Grille de projets

   Cette grille est utilisée dans la section « Projets » pour afficher
   des images et des vidéos à taille homogène.  Vous pouvez modifier
   les breakpoints pour ajuster le nombre de colonnes selon les
   tailles d'écran (bureau, tablette, mobile).
   --------------------------------------------------------------------- */
.project-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 3rem;
}
@media (max-width: 1024px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
}

.project-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}
.project-item .media {
  border-radius: 0;
  background: #f0f0f0;
}
.project-description {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* =====================================================================
   Mosaic Grid

   The mosaic grid displays a larger number of images and videos in a
   flexible editorial-style layout.  Each cell uses the same `.media`
   wrapper and one of the aspect ratio classes defined earlier
   (e.g. `.aspect-4-5`, `.aspect-9-16`, etc.) to control its proportions.
   The grid automatically flows content into three columns on large
   screens, two columns on medium screens and a single column on small
   devices.  Adjust the breakpoints or number of columns to suit your
   design.
   --------------------------------------------------------------------- */
.mosaic-grid {
  display: grid;
  /* Display four items per row instead of three.  Each cell will take up
     one quarter of the available horizontal space on large screens. */
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  /* Add vertical space above and below the mosaic to prevent the
     photos from sitting flush against the fixed header.  The top
     margin creates breathing room between the bar (header) and the
     first row of photos, while the bottom margin retains the
     existing spacing below the grid. */
  /* Increase the top margin drastically to create a larger gap
     between the logo bar (header) and the mosaic of photos.  A
     6rem margin roughly equals 96 pixels on a default 16px base,
     ensuring the first row of photos sits well below the header.  You
     can adjust this value (e.g., 4rem or 5rem) depending on the
     desired amount of space. */
  margin-top: 6rem;
  margin-bottom: 3rem;
}

/*
 * Responsive behaviour for the mosaic grid: the design calls for 3 items
 * per row on all devices (desktop, tablet and mobile).  Therefore we
 * intentionally omit any breakpoint that would reduce the number of
 * columns.  If you wish to change this behaviour in the future, you
 * can uncomment and adjust the media queries below.
 */
/*
@media (max-width: 1024px) {
  .mosaic-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .mosaic-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
*/

/* Optional: ensure videos fill their containers and maintain the aspect
   ratio.  This is redundant with the `.media video` rule defined above,
   but kept here for clarity. */
.mosaic-grid .media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------------
   Enhanced mosaic grid sizing

   The original 4‑column mosaic grid kept the images at the proper
   aspect ratios but resulted in fairly small thumbnails.  To more
   closely match the reference mock‑up (which uses rows of three and
   four items, with some wider horizontal tiles), we redefine the
   mosaic grid as a 12‑column layout and assign column spans based on
   each media’s aspect ratio.  This approach ensures that
   portrait‑oriented items remain narrow, while landscape formats take up
   more horizontal space.

   The grid uses `grid-auto-flow: dense` to pack items tightly and
   minimise gaps.  If desired, you can tweak the `span` values below
   to achieve different rhythms.  Removing the specific rules will
   cause all items to span three columns by default, yielding four
   equally sized items per row on large screens.
*/

.mosaic-grid {
  /* Keep the grid display and gap defined above but override the
     column definition.  A 12‑column grid allows for a flexible
     arrangement of different tile widths. */
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
}

/* By default, each media item spans three columns (1/4 of the
   available width).  Items with no specific aspect‑ratio rule will
   inherit this value. */
/* Default column span for most tiles.  By increasing the span to 4
   columns (one third of the mosaic width) we enlarge portrait and
   square images compared to the original 4‑column grid.  If no
   specific aspect‑ratio rule matches, the media will use this value. */
.mosaic-grid .media {
  /*
   * Définition de la largeur par défaut des tuiles de la mosaïque.
   * Chaque tuile occupe désormais trois colonnes sur douze (soit un
   * quart de la largeur totale).  Cette valeur permet d’aligner
   * jusqu’à quatre images sur une même ligne et reflète les lignes
   * comportant quatre vignettes dans la maquette.
   */
  grid-column: span 3;
}

/* Very wide landscapes (16:9) should stretch across two thirds of
   the mosaic, commanding attention as in the mock‑up. */
/*
 * Les formats très panoramiques (16:9) s’étendent sur six colonnes
 * (soit la moitié de la largeur).  Ainsi, une image 16:9 peut se
 * placer avec deux images de format 3 colonnes (3 + 3 + 6 = 12)
 * ou deux autres formats 6 + 6 pour occuper toute la ligne.  Cette
 * largeur intermédiaire permet de composer des lignes de deux ou
 * trois éléments comme dans la maquette.
 */
.mosaic-grid .media.aspect-16-9 {
  grid-column: span 6;
}

/* Moderately wide landscapes (5:4) should command more space than
   standard portrait and square images.  In the original CSS they
   occupied half of the 12‑column grid (span 6), which produced
   relatively narrow thumbnails.  To mirror the mock‑up—in which
   horizontally oriented images stretch across roughly two thirds of
   the mosaic—we increase their span to 8 columns.  This allows a
   5:4 tile to sit beside a single portrait tile (span 4) and fill
   the full row (8 + 4 = 12), or to stand alone when paired with
   another wide item.
 */
/*
 * Les formats paysages modérés (5:4) occupent également six colonnes.
 * Cela leur donne une présence similaire aux images 16:9, tout en
 * permettant l’assemblage avec des vignettes plus étroites (3 + 3 +
 * 6 = 12) ou la juxtaposition de deux formats 5:4 pour composer
 * une ligne de deux images.
 */
.mosaic-grid .media.aspect-5-4 {
  grid-column: span 6;
}

/* Portrait and square formats retain the default span (4 columns) so
   that three such items fit per row.  These selectors are included
   for clarity but could be omitted. */
/*
 * Les formats carrés (1:1), portrait (4:5) et vertical (9:16)
 * utilisent la valeur par défaut (3 colonnes).  Cette largeur permet
 * d’afficher jusqu’à quatre de ces images sur une même ligne, comme
 * observé sur la maquette, tout en conservant des proportions
 * harmonieuses.
 */
.mosaic-grid .media.aspect-1-1,
.mosaic-grid .media.aspect-4-5,
.mosaic-grid .media.aspect-9-16 {
  grid-column: span 3;
}

/* Footer language switch */
footer {
  text-align: right;
  padding: 2rem;
  font-size: 0.9rem;
  color: #555;
}

/*
 * Style pour le texte final d'information.  Ce bloc est affiché en bas de la page
 * et utilise une police légèrement plus petite et un alignement centré.  La
 * largeur est limitée pour éviter que le texte ne s'étale sur toute la page.
 */
.info-text {
  margin-top: 2rem;
  font-size: 0.9rem;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Style pour le texte de bas de page (contact/inquiries).
 * Ce bloc est centré et utilise les mêmes valeurs que
 * .info-text pour assurer une cohérence visuelle.
 */
.footer-text {
  margin-top: 2rem;
  font-size: 0.9rem;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Style for language switch button */
.lang-switch {
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1px solid #000;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  text-transform: lowercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lang-switch:hover {
  background-color: #000;
  color: #fff;
}

/* ------------------------------------------------------------------
   Réglage de la taille du titre de l'artiste sur mobile

   Le nom de l'artiste (affiché dans l'élément <h1>) est volontairement
   grand sur les écrans de bureau (3rem).  Sur les smartphones, il peut
   occuper trop d'espace et dépasser la largeur de l'écran.  Ce
   media‑query réduit la taille de la police à 2rem lorsque la largeur
   de la fenêtre est inférieure ou égale à 600px afin d'améliorer la
   lisibilité et le rendu sur mobile.
*/
@media (max-width: 600px) {
  h1 {
    font-size: 2rem;
  }
}

/* =====================================================================
   AI Creations Section Heading

   The mosaic pages display a title "AI creations" above the grid.  To
   stylistically separate the header area (logo) from the gallery and
   draw attention to the section, we create a horizontally centred
   heading with a thin line across the page and a thicker bar directly
   underneath the text.  The span element serves as the label and
   overlays the thin line, while the pseudo-element on the span
   provides the heavier underline.  Adjust margin values as needed to
   control spacing above and below the heading.
   --------------------------------------------------------------------- */
/*
 * Section title for the AI creations gallery
 *
 * We reuse the bottom border of the header as the long horizontal line.
 * The AI creations label is positioned so that it sits on this line and
 * includes its own thicker underline behind the text.  This mimics the
 * visual from the mock‑up: a single horizontal rule across the page with
 * the section name centered and highlighted by a thicker bar.
 */
/* Section heading for the AI creations gallery */
/* Section heading for the AI creations gallery.
   We draw a thin horizontal rule across the page and a thicker bar
   behind the text, as in the provided mockup. */
.ai-creations-title {
  position: relative;
  text-align: center;
  /* Top and bottom margin create spacing around the heading */
  margin: 2.5rem 0 1.5rem;
}

/* Thin horizontal line across full width */
.ai-creations-title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #000;
  transform: translateY(-50%);
}

/* Hide any previously defined ::before rule to avoid a second line */
.ai-creations-title::before {
  display: none;
}

/* Style the AI creations label: small and bold */
/* The label itself sits on a white box to mask the horizontal rule */
.ai-creations-title span {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.35rem 1rem;
  background: #fff;
  z-index: 1;
}

/* Draw the thicker underline behind the AI creations label.
   We centre this bar vertically on the line by anchoring it at 50%
   and translating it upwards by half its own height. */
/* Draw the thicker underline behind the label.  The bar is centred on
   the horizontal rule, so it appears flush with the line and extends
   beyond the text on both sides. */
.ai-creations-title span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: #000;
  z-index: -1;
}

/* ------------------------------------------------------------------------
   Subtitle under the logo (logo-subtitle)

   The subtitle appears centred beneath the site logo on a bold bar that
   integrates seamlessly with the header’s bottom border.  The bar’s
   thickness emphasises the text while the thin border from the header
   continues on either side, matching the design from the provided
   reference.  The subtitle text is small, bold, and legible; its
   background masks the underlying border to ensure a clean overlap. */
header .logo-subtitle {
  /* Position the subtitle absolutely within the header so it can overlay
     the header’s bottom border.  Horizontally centre it by moving
     left 50% and translating half its own width back. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Pull the subtitle down slightly so that the top of the thick underline
     aligns with the 1 px border at the bottom of the header.  A negative
     offset of about −3 px positions the bar (drawn below the text)
     flush with the header line. */
  /* Raise the subtitle slightly so the thick bar aligns flush with the
     thin header line (no gap).  A smaller negative offset pulls the
     bar closer to the line. */
  bottom: -2px;
  text-align: center;
}
header .logo-subtitle span {
  position: relative;
  display: inline-block;
  font-weight: 700;
  /* Reduce the font size slightly to make the label more discreet */
  font-size: 0.6rem;
  /* Horizontal padding allows the thick bar to extend beyond the text
     on both sides.  No vertical padding keeps the bar snug against
     the label. */
  padding: 0 0.75rem;
  background: #fff;

  /* Draw the thick underline below the text.  This bar extends beyond
     the text thanks to the horizontal padding. */
  border-bottom: 4px solid #000;
}

/* Draw the thick bar above the subtitle text.  Using a ::before pseudo‑
   element allows the bar to sit above the text while still being
   centred.  The bar height should match the previous underline.
   Adjust the bottom offset on the parent (.logo-subtitle) if you
   change the bar height. */
header .logo-subtitle span::before {
  /* Disable the ::before pseudo‑element since the bar is now drawn
     using border-bottom on the span itself. */
  display: none;
}

/*