* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* toutes les largeurs incluent padding et border */
}

.menu-toggle-input,
.hamburger,
.nav-overlay {
  display: none;
}

body {
    min-height: 100vh;        /* la page fait au minimum toute la hauteur de l'écran */
    display: flex;
    flex-direction: column;   /* empile header, main, footer verticalement */
}

body.page-index {
    background-repeat: no-repeat;
    background-size: cover;
    animation: diaporama 5s steps(1) infinite;
}

@keyframes diaporama {
    0%   { background-image: url("images/DSC_1691 copie.jpg"); }
    25%  { background-image: url("images/DSC_1692 copie.jpg"); }
    50%  { background-image: url("images/IMG_3806copie.jpg"); }
    75%  { background-image: url("images/IMG_3809copie.jpg"); }
    100% { background-image: url("images/IMG_3810copie.jpg"); }
}

body.page-index header {
    background-color: transparent;
}

body.page-nav { /* faire en sorte qu'il n'y ait pas d'animation sur les pages de navigation*/
    background-image: none;
    animation: none;
    background-color: white;
}

body.page-nav header { /* Fond blanc UNIQUEMENT sur les pages de navigation */
    background-color: white;
}

header { /* l'en-tête de chaque page (Index et les pages de navigation */
    display: flex;
    justify-content: space-between;  /* titre à gauche, menu à droite */
    align-items: flex-end;           /* aligne tout vers le bas */
    padding: 20px 40px;              /* marges extérieures */
    position: fixed;                 /* reste en haut même en scrollant */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;                /* pour faire en sorte que le header soit toujours au dessus */
    background-color: white;
    box-sizing: border-box;
}

nav { /* les pages de navigation */
    display: flex;
    align-items: flex-end;        /* aligne avec le bas du titre */
    gap: 17px;                    /* espace entre les liens — ajuste à ta guise */
    margin-left: 60px;            /* marge depuis le bord gauche — ajuste */
    margin-bottom: 5px;           /* marge depuis le bas — ajuste pour aligner */
}

nav a {
    text-decoration: none;
    color: black;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: italic;                 
    font-size: 30px;
    display: inline-block;
    transform: scaleY(0.8);              /* échelle verticale 80% */
    transform-origin: bottom;            /* l'écrasement part du bas */
}

nav a:hover {
    opacity: 0.6;
}

main { /* faire en sorte qu'il y ait de l'espace entre l'en-tête et le contenu de la page */
    margin-top: 80px;           /* ajuste selon la hauteur de ton header */
    padding: 20px;              /* marge intérieure — ajuste à ta guise */
    flex: 1;                  /* le main prend tout l'espace disponible */

}

/*Page INDEX différence entre mobile et desk*/ /* Cache le hero mobile sur desktop — le logo reste dans le header */
.index-hero {
  display: none;
}

/* FOOTER CHARACTERISTIQUES*/
footer { /* faire en sorte qu'il y ait de l'espace entre l'en-tête et le contenu de la page */
    margin-top: auto;         /* pousse le footer vers le bas */
    padding: 0;       /* marges intérieures — ajuste à ta guise */
    width: 100%;        /* ← force le footer à prendre toute la largeur */
    box-sizing: border-box;  /* ← évite que padding/border débordent */
}

.site-footer { /*zone conteneur du footer*/
  margin-top: 60px;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.footer-inner { /*le cadre visible du footer*/
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
 
  background-color: #f7f5f2;   /* blanc cassé / ivoire chaud */
  padding: 22px 40px 18px; 
  width: 100%;
  max-width: 100%;
}

.footer-links { /* les liens vers les pages qui apparaissent sur le footer*/
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.footer-links a {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;                          
  font-style: normal; 
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #111;
  text-decoration: none;
  transition: color 0.2s ease;
}
 
 
.footer-links a:hover { /*   État du lien quand la souris passe dessus.*/
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}
 

.footer-sep { /*Le séparateur "·" entre les liens.*/
  color: #bbb;
  font-size: 0.75rem;
  user-select: none;
}
 

.footer-insta { /*   Le lien qui entoure l'icône SVG Instagram.*/
  color: #111;
  display: flex;
  align-items: center;
  transition: color 0.2s ease, transform 0.2s ease;
}
 
.footer-insta:hover { /*   État de l'icône Instagram au survol*/
  color: #111;
  transform: scale(1.1);
}
 
 
.footer-copy { /*   La ligne de copyright tout en bas du cadre.*/
  font-family: inherit;
  font-size: 0.72rem;
  color: #aaa;
  margin: 0;
  letter-spacing: 0.03em;
}


/* TRIPTYCHS PAGE*/
.grille { /* Grille 2 colonnes sur la page Triptych*/
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 2 colonnes égales */
    gap: 40px 60px;                   /* espace vertical / horizontal — ajuste */
    padding: 40px;                    /* marge extérieure — ajuste */
}

/* Chaque objet A REPRENDRE */
.objet a {
    text-decoration: none;
    color: black;
    display: block;
}

.objet img {
    width: 100%;                      /* l'image prend toute la largeur de sa colonne */
    max-width: 100%;              /* ne dépasse jamais la colonne */
    height: auto;
    display: block;
}

/* Titre sous l'image */
.titre-objet {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: normal;               /* pas d'italique */
    font-size: 18px;                  /* plus petit que le nav — ajuste */
    transform: scaleY(0.8);
    transform-origin: top;
    display: inline-block;
    margin-top: 8px;
}

/* Effet hover */
.objet a:hover img {
    opacity: 0.9;
}

/*ABOUT PAGE*/
/* Conteneur principal : texte à gauche, image à droite */
.about-contenu {
    display: flex;
    flex-direction: row;          /* image à gauche, texte à droite */
    align-items: flex-start;      /* aligne en haut */
    gap: 60px;                    /* espace entre texte et image — à ajuster */
    padding: 40px;                /* marge extérieure — ajuste */
}

/* Bloc texte */
.about-texte {
    flex: 1;                      /* prend l'espace disponible */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1;
    padding-top: 20px;            /* alignement vertical du texte — ajuste */

}

/* Bloc image */
.about-image {
    flex: 0 0 45%;                /* image fixée à 45% de la largeur —  à ajuster entre 25% et 45% */
    margin-top: 80px;             /* décalage vers le bas — à ajuster si besoin */
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
}

.about-texte p {
    margin-bottom: 10px;          /* espace entre les paragraphes — ajuste */