* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color:#fff6e9;
}

@keyframes page-enter {
  from {
    opacity: 0.2;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  animation: page-enter 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Cache le curseur natif partout */
*, *:hover {
  cursor: none !important;
}

/* ---------- 2) POLICES LOCALES (@font-face) ----------
   @font-face permet d’utiliser une police qui est dans ton dossier /font/
   IMPORTANT :
   - font-family : le “nom” que tu utiliseras ensuite dans font-family: ...
   - src         : le chemin vers le fichier + le format
   - font-weight : le “poids” (100,200,...700) ; ex: 700 = bold
   - font-style  : normal ou italic (pas “regular”, pas “medium”)
   - font-display: swap = affiche une police de secours puis remplace quand chargée
   Ici : on regroupe toutes les variantes sous une seule famille : "PPRader"
*/
@font-face{
  font-family:"Satoshi";
  src:url("font/Satoshi-Regular.woff") format("woff");
  font-weight:400;     /* regular */
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("font/Satoshi-Medium.woff") format("woff");
  font-weight:500;     /* medium */
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("font/Satoshi-Bold.woff") format("woff");
  font-weight:700;     /* bold */
  font-style:normal;
  font-display:swap;
}

.cursor-dot {
  position: fixed;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 99999;   /* toujours au-dessus de tout */
}


/*police par défault du document*/
body {
  font-family: "Satoshi", sans-serif;
  font-weight: 400;
  font-size: 1em;

}

/*enlever le souligné pour tout les liens*/
a,
a:hover,
a:visited,
a:link,
a:focus,
a:active {
    text-decoration: none;
    color: gray;
}


/*grille de base du site commence ici*/
.wrapper {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 100vw;
  height: 100vh;
}

header {
  grid-column-start: 1;   /* ← était 2 */
  grid-column-end: 10;    /* ← était 9 */
  
}

/* Desktop — marges proportionnelles */
main {
  grid-column-start: 1;
  grid-column-end: 10;
  padding: 0 3vw;   /* proportionnel à la largeur */
}

footer {
    grid-row-start: 9;
    grid-row-end: 10;
    grid-column-start: 1;
    grid-column-end: 10;
}

/*grille de base du site fini ici*/

/*couleur du menu de la navigation principale*/
nav a {
    color: gray;
}

/*couleur ausurvol du menu de la navigation principale*/
nav a:hover {
    text-decoration: none;
    color: lightgray;
}

.close-menu {
    display: none;
    /* Initialement caché */
    position: fixed;
    /* Position fixe par rapport à la fenêtre du navigateur */
    top: 20px;
    /* Espace du haut */
    right: 20px;
    /* Espace du côté droit */
    font-size: 2em;
    /* Taille similaire au menu hamburger */
    font-weight: bold;
    /* Gras */
    color: gray;
    /* Couleur grise */
    background: none;
    /* Pas de fond */
    border: none;
    /* Pas de bordure */
    cursor: pointer;
    /* Style du curseur en pointeur */
    z-index: 1010;
    /* S'assure qu'il est au-dessus du menu déployé */
}

.actif {
    font-weight: bold;
    color: black !important;
}

.entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;   /* aligne logo et menu vers le haut */
  width: 98%;
  margin: 0 auto;
}


.entete img {
    width: 60%;
    object-fit: contain;
}

.illu {
  width: 350px;
  max-width: 80vw;   /* ne dépasse jamais 80% de l'écran */
  max-height: 100%;
  display: block;
  height: auto;
}


.item1 {
  display: flex;
  align-items: center;
}

.item1 a {
  display: flex;
  align-items: center;
  line-height: 0;
}

.item1 img {
  display: block;
  width: 12vh;
  height: auto;
  max-width: 160px;
  transition: transform 0.3s ease;
}

.item1 img:hover {
  transform: scale(1.05);
}

.carousel {
  width: 100%;
  overflow: hidden;
  
  padding:50px;
}


.group {
  display: flex;
  will-change: transform;
  align-items: flex-end;  /* ← ajoute cette ligne */
  margin-bottom: 5%;
}

.group figure {
  flex-shrink: 0;
  display: flex;
justify-content: center;   /* centre horizontalement */
  align-items: center;       /* centre verticalement */
  padding-right: 5%;
}

/* Carousel intégré dans l'entête */
.entete-gauche {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;   /* empêche le groupe logo+carousel de s'étirer */
}

.entete-gauche .carousel {
  padding: 0;
  overflow: visible;   /* laisse la rotation du hover s'afficher sans coupure */
  width: 45px;
  min-height: 45px;
  flex-shrink: 0;
  align-self: stretch;   /* occupe toute la hauteur de entete-gauche */
  display: flex;
  align-items: center;   /* centre le group verticalement dans cet espace */
}

.entete-gauche .carousel .group {
  margin-bottom: 0;
  width: 45px;
  flex-shrink: 0;
  height: 100%;
}

.entete-gauche .carousel .group figure {
  top: 50% !important;
  transform: translateY(-50%);
}

.entete-gauche .carousel .illu {
  width: 45px;         /* même que le conteneur */
  height: auto;
  max-width: none;
  max-height: none;
}

/* Pause plus longue 
35%  { transform: translateX(-33.33%); }
55%  { transform: translateX(-33.33%); }    pause de 20% du temps total */


  

.menu-projets {
  position: relative;
}

.dropdown-projets {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background: white;   /* fond blanc */
  padding: 8px 12px;
  transition: opacity 0.2s ease;
  z-index: 100;
}


.menu-projets:hover .dropdown-projets {
  opacity: 1;
  pointer-events: auto;
}

.dropdown-projets a {
  display: block;
  width: auto;
  height: auto;
  border: none;
  font-size: 0.9em;
  color: gray;
  padding: 6px 0;
  background: white;
}




.menu1 {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  font-size: 1em;
  padding-top: 0;
  align-items: center;
}

.menu1 a {
    text-decoration: none;
    /* Enlève le soulignement */
    color: gray;
    /* Définit la couleur des liens */
    text-align: center;
    /* Assure que le texte est centré si la largeur est spécifiée */
}


a {
    text-decoration: none;
    color: gray;
}

a:hover {
    color: lightgray;
    /* couleur au survol */
}

.actif {
    font-weight: bold;
    color: black;
}

.motitit {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.motitit a {
    display: block;
}

.motitit a:hover {
    color: gray;
}


/*styles de l'entete*/

/*logo*/
header img {
    width: 20%;
}

.item1 img {
    width: 12vh;
}




h1 {
  text-align: center;
  font-size: clamp(0.2rem, 5vw, 2.5rem);   /* fluide : min, proportionnel, max */
}

h1 p {
  font-family: "Satoshi", sans-serif;
  font-weight: 400;
  font-size: 1w;
  letter-spacing: 0.2em;
  white-space: nowrap;   /* force tout sur une ligne */
  padding: 50px;
}
/*style pour les recettes*/

.images_recettes img {
    margin-top: 50px;
    width: 100%;
}

.entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



/*style de la grille d'images*/
/* Configuration du conteneur de la grille */
.grille_images {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* Définit une grille de 12 colonnes */
    gap: 10px;
    /* Espacement uniforme entre les éléments de la grille */
    padding: 10px;
    /* Espace uniforme autour des bords de la grille */
    overflow: hidden;

}

.grille_projets {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* Définit une grille de 12 colonnes */
    gap: 60px;
    /* Espacement uniforme entre les éléments de la grille */
    padding: 10px;
    /* Espace uniforme autour des bords de la grille */
    overflow: hidden;
}

.grille_projets figure {
  align-self: start;
}

.grille_projets p {
    margin-bottom: 20px;
    font-weight: 100;
    text-align: left;
}

.grille_projets p.specialisation {
    margin-top: 40px;
}

.grille_projets p.cta-label {
    font-weight: 600;
    margin-bottom: 5px;
}

.grille_projets h1 {
  text-align: left;
  margin-bottom: 10px;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

.grille_projets h2 {
    margin-bottom: 20px;
    text-align: right;

}

.grille_projets h3 {
    margin-bottom: 20px;

}

.grille_projets small {
    display: block;
    text-align: right;
    margin-top: 30px;
    color: lightgray;
}

.grille_projets small.credits-collab {
    color: #888;
}

.video-projet {
    grid-column: 1 / -1;
}

.video-projet video {
    width: 100%;
    height: auto;
    display: block;
}

/* Pour les texte en hover */
/* La figure contient le zoom */
.grille_images figure {
  position: relative;
  display: inline-block;
  overflow: hidden;      /* empêche l'image de sortir du cadre */
  cursor: pointer;
}

/* L'image zoome mais reste dans le cadre */
.grille_images img {
  width: 100%;
  transition: transform 0.3s ease, brightness 0.3s ease;
  display: block;
}

.grille_images figure:hover img {
  transform: scale(1.07);
  filter: brightness(0.7);   /* assombrit sans flouter */
}

/* Le texte hover reste par-dessus */
.hover-text {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: transparent;
  color: white;
  padding: 8px;
  white-space: nowrap;
  z-index: 2;
}

.grille_images figure:hover .hover-text {
  display: block;
}

/* Supprime l'ancienne règle .im:hover qui causait le débordement */
.im:hover {
  filter: none;
  transform: none;
  opacity: 1;
  transition: none;
}

.grille_images figure:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}


/* Styles communs pour les images */
.im {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* Maintient un ratio carré pour toutes les images */
    object-fit: cover;
    /* Assure que les images couvrent l'espace sans déformation */
    box-sizing: border-box;
    /* Pour inclure les marges et les paddings dans la largeur/hauteur */
    display: block;
    /* Élimine l'espace supplémentaire sous l'image */
}

/* Positionnement individuel des images */
/* Première ligne : deux carrés et un rectangle */
.im1 {
    grid-column: 1 / 4;
    /* Le premier carré occupe 3 colonnes */
    grid-row: 1 / 3;
    /* S'étend sur 2 rangées pour former un carré */
}

.im2 {
    grid-column: 4 / 7;
    /* Le deuxième carré, à côté du premier */
    grid-row: 1 / 3;
}

.im3 {
    grid-column: 7 / 10;
    /* Un grand rectangle occupant le reste de la ligne */
    grid-row: 1 / 3;
}

/* Deuxième ligne : deux carrés sous les premiers */
.im4 {
    grid-column: 10 / 13;
    /* Continue avec un autre carré sous le .im1 */
    grid-row: 1 / 3;
}

.im5 {
    grid-column: 1 / 4;
    /* Carré sous le .im2 */
    grid-row: 3 / 5;
}

/* Troisième ligne : commence par un rectangle, suivi de deux carrés */
.im6 {
    grid-column: 4 / 7;
    /* Grand rectangle occupant la moitié gauche */
    grid-row: 3 / 5;
}

.im7 {
    grid-column: 7 / 10;
    /* Carré à droite du rectangle */
    grid-row: 3 / 5;
}

.im8 {
    grid-column: 10 / 13;
    /* Un autre carré à côté du .im7 */
    grid-row: 3 / 5;
}

/* Quatrième ligne : deux carrés sous ceux de la troisième ligne */
.im9 {
    grid-column: 1 / 4;
    /* Carré sous le .im7 */
    grid-row: 5 / 8;
}

.im10 {
    grid-column: 4 / 7;
    /* Carré sous le .im8 */
    grid-row: 5 / 8;
}

/* Remplissage de la dernière ligne avec quatre carrés */
.im11 {
    grid-column: 7 / 10;
    /* .im11 et .im13 sont placés à gauche, .im13 est ajouté */
    grid-row: 5/ 8;
    /* Ils s'étendent tous les deux sur 2 rangées */
}

.im12 {
    grid-column: 10 / 13;
    /* .im11 et .im13 sont placés à gauche, .im13 est ajouté */
    grid-row: 5/ 8;
    /* Ils s'étendent tous les deux sur 2 rangées */
}



.pages>div {
    
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    margin-left: 20px;
    cursor: pointer;
    border-radius: 50%;
    width: 20px;
}

.pages>div:hover {
    background-color: #3783A3;
}


.carrousel-projet {
  position: relative;
}

.cp-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-viewport {
  flex: 1;
  overflow: hidden;
}

.cp-track {
  display: flex;
  transition: transform 0.4s ease;
}

.cp-slide {
  flex-shrink: 0;
  width: 100%;
}

.cp-slide img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.cp-btn {
  background: none;
  border: none;
  font-size: 1.5em;
  padding: 8px 14px;
  cursor: pointer;
  color: gray;
  transition: color 0.2s;
  flex-shrink: 0;
}

.cp-btn:hover { color: lightgray; }

.cp-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.cp-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: lightgray;
  display: block;
  cursor: pointer;
  transition: background 0.2s;
}

.cp-dots span.actif { background: gray; }



.pied {
  padding-top: 30px;    /* espace entre nav-projets et small */
  padding-bottom: 24px;
  padding-left: 30px;
  padding-right: 30px;
}

.pied > small {
  display: block;
  color: lightgray;
  font-size: 0.75em;
  margin-bottom: 4px;
  text-align: right;
}

.nav-projets {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 0 20px;
}

.nav-prev,
.nav-next {
  display: flex;
  align-items: center;
  gap: 8px;
  color: gray;
  text-decoration: none;
  font-size: 1em;
  transition: color 0.3s;
  line-height: 1;
}

.nav-prev:hover,
.nav-next:hover {
  color: black;
}

.nav-label {
  font-size: 0.7em;
  letter-spacing: 0.08em;
  line-height: 1;
}


.sociaux a {
  color: gray;
  font-size: inherit;   /* était 30px — on réinitialise */
}

.sociaux a:hover {
    color: lightgray;
    
}

.sociaux p {
    margin-top: 10px;
    margin-bottom: 30px;
    color: gray;
    text-align: center;
    color: gray;
    font-size: 0.8em;
}

.sociaux {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 8px;
  gap: 20px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: gray;
}

/* Cible uniquement les icônes du footer */
.footer-icon {
  font-size: 0.8em !important;
  padding: 0 !important;
  color: gray !important;
  line-height: 1;
}

.social-link > span:not(.footer-icon) {
  font-size: 0.8em;   /* même taille que .credits-copy */
  color: gray;
}

.social-link:hover .footer-icon,
.social-link:hover span {
  color: lightgray !important;
}

.credits-copy {
  font-size: 0.8em;
  color: gray;
  margin: 0;
  display:flex;
  text-align: center;
  align-items: center;
}

.sociaux .credits-copy {
  margin: 0;
}

.social-link:hover,
.social-link:hover .fa {
  color: lightgray;
}

.icons-wrapper {
    display: flex;
    justify-content: center;
    /* Centre les icônes horizontalement */
    flex-wrap: wrap;
    /* Permet aux icônes de passer à la ligne si nécessaire */
    gap: 10px;
    /* Espacement entre les icônes */
    width: 100%;
    /* Assure que le wrapper prend toute la largeur */
}

.fa {
    
    /* Ajuste la taille des icônes */
    padding: 8px;
    /* Ajuste l'espacement autour des icônes */
    color: gray;
    /* Couleur des icônes */
}

.fa:hover {
    color: lightgray;
    /* Couleur des icônes au survol */
}

/* Styles spécifiques pour les crédits */
.credits {
    margin-top: 10px;
    /* Ajoute un espace entre les icônes et les crédits */
    font-size: 1em;
    /* Ajuste la taille de la police pour les crédits */
    width: 100%;
    /* Assure que les crédits prennent toute la largeur et restent centrés */
}

/* Styles pour le bouton menu hamburger */
.hamburger-menu {
    display: none;
    /* Caché par défaut, sera affiché sur mobile */
    align-items: center;
    justify-content: center;
}

.hamburger-menu button {
    background: none;
    border: none;
    font-size: 2em;
    /* Taille de l'icône du menu hamburger */
    color: gray;
}

.hamburger-menu button .fa-bars {
    cursor: pointer;
}

/* Micro-interaction au survol des images: flou léger, changement d'opacité et légère mise à l'échelle */
.im:hover {
    filter: blur(2px);
    opacity: 0.9;
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
}

/* Annule le zoom pour les images du carrousel de projet */
.carrousel-projet .im:hover {
    transform: none;
    filter: none;
    opacity: 1;
    transition: none;
}

/* Annule le hover sur l'image de la page À propos */
.grille_projets figure img.im {
    transition: none;
}
.grille_projets figure:hover img.im,
.grille_projets figure img.im:hover {
    transform: none;
    filter: none;
    opacity: 1;
}

/* Effet on-click sur tous les éléments cliquables */
a:active {
  color: black !important;
}

button:active {
  opacity: 0.6;
}

.menu1 a:active {
  color: black !important;
  font-weight: 700;
}

.grille_images figure a:active img {
  opacity: 0.7;
}

/* Media Query pour les écrans mobiles */

@media (max-width: 1200px) {

    body {
        padding: 0px;
        /* Marge autour du contenu */
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        z-index: 1030;
       
        /* Plus élevé que le z-index de tous les autres éléments de contenu */
        /* Alignement des éléments à la base */

    }

    .entete img {
        width: 10vh;
        /* Hauteur fixe pour le logo pour contrôler sa taille */
    }

    

    main {
  grid-row-start: 2;
  grid-row-end: 9;
  grid-column-start: 2;
  grid-column-end: 9;
  padding: 0;   /* plus de padding global sur main */
}
   

    h1 {
       
        /* Augmente l'espace au-dessus du h1 pour plus de clarté */
        text-align: center;
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 1.8em;
    }

    .contexte{
        grid-column-start: 2;
        }

    .type{
        grid-column-start: 4;
        }

    .date{
        grid-column-start: 4;
        }

    h4 {
        margin-top: 80px;
        /* Augmente l'espace au-dessus du h1 pour plus de clarté */
        text-align: center;
        margin-bottom: 40px;
        display:flex;
        font-size: 1em;
    }

    main {
        grid-row-start: 2;
        grid-row-end: 9;
        grid-column-start: 2;
        grid-column-end: 9;
        padding: 85px 10px 10px;

    }

    /* Rend le conteneur de l'en-tête responsive */
    header .entete {
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
        padding: 10px;
    }

    /* Affiche le logo et le bouton menu hamburger */
    .entete .item1,
    .entete .hamburger-menu {
        grid-column: auto;
    }

  .grille_projets {
    gap: 20px;
  }

  .grille_images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 4 colonnes */
    gap: 8px;
    padding: 8px;
  }

/* Annule toutes les positions de grille desktop */
.grille_images figure {
  width: 100%;
  display: block;
}

.im1, .im2, .im3, .im4, .im5, .im6,
.im7, .im8, .im9, .im10, .im11, .im12 {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  height: auto;
  aspect-ratio: auto;       /* laisse la hauteur naturelle de l'image */
}

.hover-text {
  display: block;        /* visible en permanence */
  position: static;
  background: transparent;
  color: gray;
  padding: 6px 0 0 0;
  font-size: 0.85em;
}

/* Désactive l'affichage au hover (déjà visible tout le temps) */
.grille_images figure:hover .hover-text {
  display: block;
}


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

    .sociaux {
        margin-top: 60px;
    }

    /* Assignation des images aux cellules de la grille */
    /* Configuration initiale pour toutes les images */
    .im {
        width: 100%;
        height: auto;
        object-fit: cover;
        /* Ajuste l'image pour couvrir l'espace disponible */
        /* Annule les positions spécifiques de la grille pour le bureau */
        grid-column: span 1;
        /* Prend 1 colonne */
        grid-row: span 1;
        /* Prend 1 rangée */
    }

    /* Styles génériques pour chaque image dans la grille */
    .im1,
    .im2,
    .im3,
    .im4,
    .im5,
    .im6,
    .im7,
    .im8,
    .im9,
    .im10,
    .im11,
    .im12,
    .im13,
    .im14 {
        width: 100%;
        /* Largeur complète de la cellule de grille */
        height: auto;
        /* Hauteur automatique pour maintenir l'aspect ratio */
        object-fit: cover;
        /* Ajuste l'image pour couvrir l'espace disponible */
        grid-column: auto;
        /* Place automatiquement en colonne */
        grid-row: auto;
        /* Place automatiquement en ligne */
    }

    /* Styles pour s'assurer que le texte survolé ne s'affiche pas sur mobile */
    /* Annule spécifiquement les effets de flou et de mise à l'échelle */
    .im:hover {
        filter: none;
        /* Annule le flou */
        transform: none;
        /* Annule la mise à l'échelle */
        opacity: 1;
        /* Rétablit l'opacité à la normale */
        transition: none;
        /* Annule les transitions */
    }

    .hover-text {
        display: none;
        /* Cache le texte sur les appareils mobiles */
    }

    .grille_images figure:hover .hover-text {
        display: none;
        /* Désactive l'affichage du texte */
    }

    .grille_images figure:hover img {
        transform: none;
        /* Annule la transformation */
        opacity: 1;
        /* Rétablit l'opacité */
    }

    

    }





@media (max-width: 900px) {
  main {
    padding: 75px 2vw 0;
  }

  .entete-gauche {
    gap: 10px;
    align-items: center;
  }

  .entete-gauche .carousel {
    width: 35px;
  }

  .entete-gauche .carousel .group {
    width: 35px;
  }

  .entete-gauche .carousel .illu {
    width: 35px;
    height: auto;
  }

  h1 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: clamp(0.8rem, 4vw, 2rem);
  }

  .hamburger-menu {
    display: flex;
    align-items: center;
  }

  .dropdown-projets {
    position: static;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    padding: 8px 0 8px 20px;
    background: white;
    display: none;
  }

  .dropdown-projets.ouvert {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid lightgray;
    padding: 12px 16px;
    margin: 4px 0 12px 0;
    background: white;
    width: auto;
    align-self: center;
  }

  .dropdown-projets.ouvert a {
    font-size: 0.85em;
    color: gray;
    padding: 4px 0;
    text-align: center;
  }

  .menu1 a,
  .menu1 a:hover {
    text-decoration: none;
    color: gray;
    background-color: transparent;
  }

  .menu1 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .menu1 a {
    padding: 20px;
  }

  .close-menu {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
    color: gray;
  }

  .menu-deployed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 1000;
    padding-top: 50px;
  }

  .menu-projets {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: white !important;
  }

  .menu-projets > a {
    display: block;
    text-align: center;
    background: white !important;
    color: gray;
    padding: 20px;
    width: 100%;
  }

  .menu1,
  .menu-deployed {
    background: white !important;
  }

  .menu1 * {
    background-color: white;
  }

  .menu1 .actif {
    color: black;
  }

  .grille_images {
    grid-template-columns: repeat(3, 1fr);
  }

  .grille_projets {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .grille_projets > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .grille_projets h2 {
    margin-top: 30px;
    text-align: right;
  }

  .grille_projets small {
    display: block;
    margin-top: 40px;
    text-align: right;
  }

  .motitit {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
    gap: 0;
    align-items: flex-start;
  }

  .motitit a {
    font-size: clamp(0.5rem, 3vw, 0.85rem);
    word-break: normal;
    overflow-wrap: normal;
  }

  .grille_projets p {
    font-weight: 300;
  }

  *, *:hover {
    cursor: auto !important;
  }
}




@media (max-width: 600px) {

    main {
    padding: 65px 0 0;
  }

  .entete-gauche {
    gap: 10px;
    align-items: center;
  }

  .entete-gauche .carousel {
    width: 28px;
  }

  .entete-gauche .carousel .group {
    width: 28px;
  }

  .entete-gauche .carousel .illu {
    width: 28px;
    height: auto;
  }

   .entete img {
        width: 8vh;
        /* Hauteur fixe pour le logo pour contrôler sa taille */
    }

  .illu {
    max-width: 50vw;   /* illus plus petites, jamais coupées */
    max-height: 100%;
  }

  .grille_images {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
  }

  .im1, .im2, .im3, .im4, .im5, .im6,
  .im7, .im8, .im9, .im10, .im11, .im12 {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }

  .hover-text {
    display: block !important;
    position: static;
    background: transparent;
    color: gray;
    padding: 6px 0 0 0;
    font-size: 0.85em;
    white-space: normal;
  }

  .grille_images figure:hover img {
    transform: none;
    opacity: 1;
    filter: none;
  }

    .sociaux {
    flex-direction: column;      /* empile les éléments verticalement */
    align-items: center;      
    justify-content: center;
    gap: 8px;
  }

  .social-link,
  .credits-copy {
    align-items: center;
  }

}


/* Lightbox */
#cp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85) !important;
  z-index: 99998;
  align-items: center;
  justify-content: center;
}

#cp-lightbox.actif {
  display: flex;
}

#cp-lightbox .cp-lb-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  background-color: transparent !important;
  display: block;
}

.cp-lb-close {
  position: fixed;
  top: 20px;
  right: 24px;
  font-size: 2em;
  color: white;
  background-color: transparent !important;
  border: none;
  cursor: pointer !important;
  line-height: 1;
  z-index: 99999;
  padding: 0;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.cp-lb-close:hover {
  opacity: 1;
}

/* ---- Ajustements spécifiques 901px – 1200px ---- */
@media (min-width: 901px) and (max-width: 1200px) {

  /* Réduit les labels de motitit et autorise le retour à la ligne */
  .motitit {
    align-items: flex-start;   /* ancrage en haut si les items ont des hauteurs différentes */
  }

  .motitit a {
    font-size: 0.75em;
    letter-spacing: 0.04em;
    max-width: 30%;            /* limite la largeur pour forcer le retour à la ligne */
    white-space: normal;       /* autorise le wrapping */
    word-break: break-word;    /* coupe au bord si nécessaire */
    text-align: left;
  }

  /* Aligne l'image et le texte en haut sur la page À propos */
  .grille_projets {
    align-items: start;
  }

  .entete-gauche {
    gap: 20px;
    align-items: center;
  }
}