.elementor-kit-9{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#000000;--e-global-color-text:#F2F2E7;--e-global-color-accent:#FF091B;--e-global-color-1640656:#121212;--e-global-color-8f23a78:#1F1F1F;--e-global-color-e5bdad1:#FFFFFF00;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-weight:600;background-color:var( --e-global-color-secondary );color:var( --e-global-color-text );font-family:"Outfit", Sans-serif;font-size:16px;font-weight:400;line-height:24px;overscroll-behavior:auto;}.elementor-kit-9 button:hover,.elementor-kit-9 button:focus,.elementor-kit-9 input[type="button"]:hover,.elementor-kit-9 input[type="button"]:focus,.elementor-kit-9 input[type="submit"]:hover,.elementor-kit-9 input[type="submit"]:focus,.elementor-kit-9 .elementor-button:hover,.elementor-kit-9 .elementor-button:focus{background-color:var( --e-global-color-primary );border-style:solid;border-width:0px 0px 6px 0px;border-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 a{color:var( --e-global-color-accent );font-weight:400;}.elementor-kit-9 h1{color:var( --e-global-color-primary );font-size:5.5em;font-weight:600;text-transform:uppercase;line-height:0.85em;letter-spacing:-4px;}.elementor-kit-9 h2{color:var( --e-global-color-primary );font-size:5em;font-weight:600;text-transform:uppercase;line-height:1em;letter-spacing:0px;}.elementor-kit-9 h3{color:var( --e-global-color-primary );font-size:42px;font-weight:600;text-transform:uppercase;line-height:38px;letter-spacing:0px;}.elementor-kit-9 h4{color:var( --e-global-color-primary );font-family:"Commissioner", Sans-serif;font-size:24px;font-weight:400;text-transform:uppercase;line-height:26px;letter-spacing:-0.7px;}.elementor-kit-9 h5{color:var( --e-global-color-primary );font-family:"Commissioner", Sans-serif;font-size:17px;font-weight:300;text-transform:uppercase;line-height:19px;}.elementor-kit-9 h6{color:var( --e-global-color-primary );}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{font-family:"Noto Sans", Sans-serif;font-weight:700;text-transform:uppercase;color:var( --e-global-color-1640656 );border-style:solid;border-width:0px 0px 6px 0px;border-color:var( --e-global-color-primary );border-radius:0px 0px 0px 0px;padding:16px 24px 12px 24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(min-width:1440px){.elementor-kit-9 h1{font-size:100px;line-height:1em;letter-spacing:-6px;}.elementor-kit-9 h2{font-size:90px;line-height:88px;}.elementor-kit-9 h3{font-size:46px;line-height:42px;}.elementor-kit-9 h4{font-size:26px;line-height:28px;letter-spacing:-0.5px;}.elementor-kit-9 h5{font-size:18px;line-height:20px;}}@media(max-width:1024px){.elementor-kit-9 h1{font-size:5em;letter-spacing:-2px;}.elementor-kit-9 h2{font-size:4em;letter-spacing:-3.5px;}.elementor-kit-9 h3{font-size:3em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:768px){.elementor-kit-9 h1{font-size:3.2em;letter-spacing:-2px;}.elementor-kit-9 h2{font-size:2.5em;letter-spacing:-2px;}.elementor-kit-9 h3{font-size:2em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.awards {
  font-size: 146px;
  font-weight: 400;
  text-transform: uppercase!important;
  line-height: 0.8em!important;
  letter-spacing: -15px!important;
	color:#FFE500 !important;
}
@media (max-width: 1440px) {
  .awards {
    font-size: 150px !important;
    line-height: 120px !important;
    letter-spacing: -15px!important;
  }
}
@media (max-width: 1024px) {
  .awrds {
    font-size: 8em !important;
    letter-spacing: -9px!important;
  }
}

@media (max-width: 768px) {
  .awards {
    font-size: 3em !important;
    letter-spacing: -4px !important;
  }
  .hide{
      display:none !important;
  }
}
.pourcent{
    font-size:0.5em;
}


/* Grille 3 colonnes sur TON DOM */
.elementor-widget-loop-grid.projects-grid .elementor-loop-container{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-auto-flow: row dense;
  gap: 10px; /* adapte au besoin */
}

/* Par défaut : 1/3 */
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item{
  grid-column: span 1;
}

/* MOTIF (par blocs de 8 e-loop-item, en ignorant les <style>) */

/* 1) Pleine largeur */
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 1){
  grid-column: 1 / -1;
}

/* 2) 2/3 */
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 2){
  grid-column: span 2;
}

/* 5) 2/3 */
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 5){
  grid-column: span 2;
}

/* --- Responsive --- */
@media (max-width:1024px){
  .elementor-widget-loop-grid.projects-grid .elementor-loop-container{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 1){
    grid-column: 1 / -1;
  }
  .elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 2),
  .elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 5){
    grid-column: span 2;
  }
}

//* ===== MOBILE ≤768px ===== */
@media (max-width: 767.98px){

  /* 1) Forcer la grille à 2 colonnes (Elementor impose souvent 1 col en mobile) */
  #grid-projets.elementor-widget-loop-grid .elementor-loop-container{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-flow: row dense !important;
    gap: 10px;
  }

  /* 2) Reset des spans hérités du motif desktop */
  #grid-projets .elementor-loop-container > div.e-loop-item{
    grid-column: span 1 !important;
  }

  /* 3) Motif mobile : 1 plein, puis 2 x demi (et on répète) */
  #grid-projets .elementor-loop-container > div.e-loop-item:nth-of-type(3n + 1){
    grid-column: 1 / -1 !important; /* plein cadre */
  }

  /* 4) Kill les hauteurs/flex Elementor sur TOUTES les cartes en mobile */
  #grid-projets .project-card{
    --display: block !important;   /* au cas où Elementor le force en flex */
    --min-height: 0px !important;  /* annule la min-height variable */
    min-height: 0 !important;      /* ceinture et bretelles */
    height: auto !important;
    position: relative;            /* nécessaire pour les calques absolute */
    width: 100%;
    padding: 0 !important;
    overflow: hidden;
  }

  /* 5) Ratio 446/571 UNIQUEMENT sur les deux demi-largeurs */
  #grid-projets .elementor-loop-container > div.e-loop-item:nth-of-type(3n + 2) .project-card,
  #grid-projets .elementor-loop-container > div.e-loop-item:nth-of-type(3n + 3) .project-card{
    aspect-ratio: 446 / 571; /* ≈0.781 (portrait) */
  }

  /* 6) Calques : plein cadre sans créer de hauteur */
  #grid-projets .project-card .project-media,
  #grid-projets .project-card .alt-media,
  #grid-projets .project-card .project-overlay{
    position: absolute; inset: 0;
  }

  /* 7) Image alternative 1/3 visible sur les demi, masquée sur le plein */
  #grid-projets .elementor-loop-container > div.e-loop-item:nth-of-type(3n + 2) .alt-media,
  #grid-projets .elementor-loop-container > div.e-loop-item:nth-of-type(3n + 3) .alt-media{
    opacity: 1 !important;
    z-index: 0; /* sous l’overlay texte/bouton */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #grid-projets .elementor-loop-container > div.e-loop-item:nth-of-type(3n + 1) .alt-media{
    opacity: 0 !important; /* laisse le background principal visible */
  }

  /* 8) Masque noir au survol reste sous le texte/bouton */
  #grid-projets .project-card::after{ z-index: 1; }
  #grid-projets .project-card .project-overlay{ z-index: 2; }
}


  /* Optionnel : si tu veux forcer l’image standard pour l’item plein cadre */
  .elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(3n + 1) .alt-media{
    opacity: 0;
  }
}

/* ---- Image alternative pour les items en 1/3 ---- */
/* (Ton Loop Item contient un calque .alt-media en absolute avec l'image ACF 1/3) */
.project-card{ position: relative; overflow: hidden; }
.project-card .alt-media{
  position: absolute; inset: 0;
  background-position: center; background-repeat: no-repeat; background-size: cover;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}

/* Les positions 1/3 (dans le motif) : 3,4,6,7,8 */
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 3) .alt-media,
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 4) .alt-media,
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 6) .alt-media,
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 7) .alt-media,
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 8) .alt-media{
  opacity: 1;
}

/* --- Calque alternatif, au-dessus du fond standard, sous l’overlay --- */
.project-card{ position: relative; overflow: hidden; }

/* Assure l’overlay au-dessus de tout */
.project-card .project-overlay{ z-index: 2; }

/* --- Afficher l'image alternative sur les items 1/3 du motif --- */
/* Rappel du motif (par 8) : 
   1: plein, 2: 2/3, 3: 1/3, 4: 1/3, 5: 2/3, 6: 1/3, 7: 1/3, 8: 1/3  */
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 3) .alt-media,
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 4) .alt-media,
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 6) .alt-media,
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 7) .alt-media,
.elementor-widget-loop-grid.projects-grid .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 8) .alt-media{
  opacity: 1;  /* on “remplace visuellement” le background par l’ACF 1/3 */
}


/* Base carte */
.project-card{
  position: relative;
  overflow: hidden;
}

/* Calque image alternative 1/3 (si tu l’utilises) */
.project-card .alt-media{
  position: absolute; inset: 0;
  background-position: center; background-repeat: no-repeat; background-size: cover;
  z-index: 0;         /* sous le masque et sous l’overlay texte */
  pointer-events: none;
}

/* Overlay texte/bouton au-dessus de tout */
.project-card .project-overlay{
  position: relative;
  z-index: 2;
}

/* === Masque noir global pour TOUTES les cartes ===
   (0 -> 0.8 en 0.35s sur hover/focus-within) */
.project-card::after{
  content:"";
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 1;   /* au-dessus des médias, sous .project-overlay */
  pointer-events: none;
}

.project-card:hover::after,
.project-card:focus-within::after{
  opacity: .8;
}

/* Option accessibilité mobile : si tu veux que l’overlay soit
   visible par défaut quand il n’y a pas de hover, décommente : */
/*
@media (hover: none){
  .project-card::after{ opacity: .8; }
}
*/


/* ===== FIX MOBILE: 1 plein, puis 2 moitiés (répété) ===== */
@media (max-width: 767.98px){
  /* 2 colonnes en mobile (sécurité) */
  #grid-projets.elementor-widget-loop-grid .elementor-loop-container{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-auto-flow: row dense !important;
    gap: 10px;
  }

  /* Reset global: tout le monde en 1/2 par défaut */
  #grid-projets .elementor-loop-container > div.e-loop-item{
    grid-column: span 1 !important;
  }

  /* SEUL celui-ci est plein cadre */
  #grid-projets .elementor-loop-container > div.e-loop-item:nth-of-type(3n + 1){
    grid-column: 1 / -1 !important;
  }

  /* Kill explicitement les spans du motif desktop s'ils traînent */
  #grid-projets .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 2),
  #grid-projets .elementor-loop-container > div.e-loop-item:nth-of-type(8n + 5){
    grid-column: span 1 !important;
  }
}


/* --- CONTENEUR GLOBAL --- */
.agence-photo-gallery {
    display: block;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* --- L'ITEM PHOTO --- */
.photo-item {
    display: block;
    width: 100%;
    margin-bottom: 40px; /* Espace de 40px */
    position: relative;
    /* Optionnel : permet de centrer l'image si elle est plus petite que l'écran */
    text-align: center; 
}

.photo-item:last-child {
    margin-bottom: 0;
}

/* --- L'IMAGE (Optimisation) --- */
.project-photo-img {
    /* 1. Empêche l'image de dépasser sa taille réelle */
    width: auto; 
    
    /* 2. Mais lui permet de rétrécir si l'écran est plus petit qu'elle (Responsive) */
    max-width: 100%; 
    
    /* 3. Garde le ratio (pas d'écrasement) */
    height: auto;
    
    /* 4. Centre l'image dans le bloc (si elle est petite) */
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.cky-btn-revisit-wrapper .cky-btn-revisit {
  background: none !important;
  border: none !important;
}

.project-photo-img {
  max-height: 100vh;
}/* End custom CSS */