/* ==========================================================================
   magali-castellan.com — CSS d'origine (thème WordPress « magali », 2017)
   repris à l'identique, chemins adaptés à Kirby + compléments en fin de fichier
   ========================================================================== */

@font-face {  font-family: raleway; src: url("../fonts/Raleway-Regular.ttf"); font-display: swap; }
@font-face {  font-family: raleway_bold; src: url("../fonts/Raleway-Bold.ttf"); font-display: swap; }
@font-face {  font-family: raleway_thin; src: url("../fonts/Raleway-Thin.ttf"); font-display: swap; }
@font-face {  font-family: raleway_medium; src: url("../fonts/Raleway-Medium.ttf"); font-display: swap; }
@font-face { font-family: typo_titre;  src: url("../fonts/PT_Serif/PT_Serif-Web-Italic.ttf"); font-display: swap; }

body, html { overflow-x: hidden; font-family: raleway; letter-spacing: 0.08em; font-size: 14px; background: #000; text-rendering: optimizeLegibility; }
div{ display: block; }
* {  margin:0;  padding:0;  box-sizing: border-box;  }
img{ max-width: 100%; height: auto; }
section{ width: 100%; overflow-x:hidden;  position: relative;  transform-style: preserve-3d;  clear: both; display: table;  }
h1, h2, h3{ font-weight: normal; }
p{     line-height: 2.3em;  font-family: raleway_medium; }
ul{ margin: 1em; list-style-type: square; text-transform: uppercase; }
li{ margin: 0.2em 0; font-family: raleway;  font-size: .9em; letter-spacing: 0.18em; line-height: 1.8em; }
a{ text-decoration: none; color: #fff }
article{ max-width: 100%; }
/* utils */

  .bold{ font-family: raleway_bold  }
  .center {  text-align: center;  position: absolute;  left: 50%;  top: 50%;    transform: translate3d(-50%, -50%, 0);}
  .titre{ font-weight: lighter; opacity: 0.95; font-family: 'Lora'; display: block;  font-size: 3.8em;  letter-spacing: 0.03em; margin-bottom: 25px;  }
  .sstitre{     font-family: raleway; display: block;  font-size: .8em; letter-spacing: 0.18em; text-transform: uppercase; width: 100%;   }
  .lien_rounded{  width: 180px; padding: .8em 2em;border-radius: 18px;  text-decoration: none; font-size: .8em; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 30px;
    text-align: center; transition: all .8s; font-family: raleway_bold ; overflow: hidden; border: 1px solid #fff;  color: #fff; text-decoration: none; position: relative; float: left;  }

  .lien_rounded:hover{ background: #fff; color: #000; transition: all .3s; }
  .lien_rounded_cv{ padding: .8em; float: left; width: 44px; }
  .lien_rounded_black{  border: 1px solid #000; background: #000; color: #fff;  }
  .lien_rounded_black:hover{ cursor: pointer;color: #000;  background: #fff;}
  .lien_rounded_white{  border: 1px solid #fff; background: #000; color: #fff;  }
  .lien_rounded_white:hover{ cursor: pointer;color: #000;  background: #fff;}
  .midwidth_container{ width: 50%; position: relative; }
  .viewport_container{  width: 100%; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0;   }
  .only_onMobile{ display: none; }
  .layout_maxWidth_container{ width: 100%; max-width: 1400px; display: table; position: relative; margin-left: 50%; transform:translateX(-50%); }
  .layout_max50pc_container{ padding: 0 80px; width: 50%; position: relative; float: left; display: inline-grid; overflow: hidden; }
  .hidden_txt{ opacity: 0; font-size: 0; display: none; }
  .reveal_photo{ position: relative;  }
  .reveal_photo .masque{ position: absolute; width: 100%; background: #FFF; height: 100%; z-index: 2;  }
  .reveal_photo img{ position: relative; width: 100%; height: auto; z-index: 1;  }
  .active .reveal_photo .masque{ animation: anim_reveal_photo .6s cubic-bezier(.28,.05,.39,1.01) .4s 1 normal forwards; }

  /* background */

  .bg_welcome{ opacity: 0; transform:scale(1.3);  z-index: 0!important; transition:all 5s cubic-bezier(.15,.59,.38,.95) .2s;  position: fixed; background-size: cover }
  .bg_welcome.active { opacity: 1;  transform:scale(1); }

  /* topScreen */

  .topscreen{ perspective : 400px; background-color: #191617; background-image: url("../img/bg_texture.png"); background-repeat: repeat; z-index: 10; width: 100%; height: 100vh; max-height: 100%; overflow: hidden; color: #fff; display: block!important;  }
  /* fond d'ambiance du hero (repris de la maquette v3 : home_bg bleuté) */
  .topscreen_fond{ position: absolute; inset: -4%; z-index: 0; pointer-events: none; opacity: 0; mix-blend-mode: var(--fond-blend, screen); transition: opacity 4s cubic-bezier(.15,.59,.38,.95); }
  .topscreen_fond.show{ opacity: var(--fond-opacity, .5); }
  .topscreen_fond_img{ position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.12); transition: transform 6s cubic-bezier(.15,.59,.38,.95); will-change: transform; }
  .topscreen_fond.show .topscreen_fond_img{ transform: scale(1.04); }
  .topscreen_fond::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 45%, transparent 35%, rgba(0,0,0,.65) 100%); }
  .topscreen .card{ transform-style: preserve-3d; }
  .topscreen .img_container{ z-index: 3; width: 62vw;  display: block;   height: auto;  position: absolute; top: 50%; left:70%;  }
  .topscreen .img_container .sketchholder{ z-index: 2; position: absolute; width: 100%; height: 100%;}
  .topscreen .img_container .sketchholder canvas{ z-index: 2; position: absolute; width: 100%; height: auto;}
  .topscreen .img_container img{ z-index: 1; border: 2px solid rgba(255,255,255,0.05); position: relative; width: 100%;  left: 0; box-shadow:   0px 40px 40px -20px rgba(0, 0, 0, 0.5); }
  .illus_topscreen_ombre{  top:-8vw; }
  /* NB : sur l'original « font-family: raleway_bold opacity: 0.8; » (point-virgule manquant) → déclaration ignorée, rendu conservé */
  .topscreen h1{  padding: 0.3em 1em; z-index: 4; font-weight: bold; position: absolute; font-size: 18px; top: 8vh; left: 8vh;  text-align: left; letter-spacing: 0.15em; }
  .topscreen h2{ font-family: 'typo_titre', serif;  letter-spacing: 0em;  line-height: .4em; z-index: 5; position: absolute; top: 50%; font-size: 9vw; left: 38%;   width: 40%; text-align: left; }
  .topscreen h2 .small{ font-size: 0.5em; letter-spacing: 0.1em; margin-left: 30px; }
  .topscreen .text_mov{   padding: 0.3em 1em; transition: all .3s; font-family: raleway_medium;  position: absolute; bottom: 8vh; font-size: 18px; right: 8vh; width: 20%;  letter-spacing: 0.2em; text-transform: uppercase;  text-align: center;  color: #ccc;  }
  .topscreen .ligne_v{ display: none; z-index: 0;  border-left: 1px solid white; height: 70px; width: 0; position: absolute; left: 50%; bottom: 40px; opacity: 0.6}
  .topscreen .ligne_h{ display: none; z-index: 0;  border-bottom: 8px solid white; width: 0; position: absolute; left: 50%; top: 60%; opacity: 0.6}

  /* fx card */

  .card-wrapper {  position: absolute;  width : 50vw;    height : 32vw;    top:50%;  left:50%;      transform:translate( -50%, -50% );    perspective : 400px;    overflow: hidden;  }
  .card { width : 100%; height: 100%; transform-style: preserve-3d;  transform:rotateX(5deg);    }
  .plan1 { z-index: 1; transform : translate3d(-50%, -50%, -120px) scale(1)   }
  .plan2 { z-index: 2; transform : translate3d(-50%, -50%, 120px) scale(0.6)  }
  .plan3 { z-index: 3; transform : translate3d(-50%, -50%, 120px) scale(0.6) ; }

  /* présentation */

  .section_txt_bgWhite{  display: block; transition:all cubic-bezier(.28,.05,.39,1.01) .6s .3s; z-index: 11; padding: 60px 0; box-shadow: 0px 0px 40px rgba(0,0,0,0.5); background:#fff; color: #000; overflow: hidden; z-index: 10; font-size: 14px;   }

  /* savoir-faire */

  .section_savoirfaire{  display: block;  padding: 60px 0; background-color: #151515;  background-image: url("../img/bg_texture.png"); color: #fff;  z-index: 10; font-size: 14px;  }
  #swiper_savoirfaire{ width: 100%; height: 315px; overflow: hidden; }
  #swiper_savoirfaire .swiper-wrapper{ width: 100%; height: 315px; overflow: hidden; }
  #swiper_savoirfaire .swiper-slide{ width: 100%; height: 315px; overflow: hidden;  background-image: url("../img/bg_texture.png");}
  #swiper_savoirfaire img{ position: absolute; height: auto; width: 100%; top: 50%; transform:translateY(-50%); }
  #swiper_savoirfaire .swiper-wrapper{ width: 100%; position: absolute; top: 50%; transform:translateY(-50%); }

  /* titre réalisations */

  .section_titre_realisations{ background:#fff; color: #000; text-align: center; padding: 70px 0 80px 0; z-index: 10; font-size: 12px;  }

  /* description projets */

  .section_description{ padding: 60px 60px 15px 60px; z-index: 11; background-color: #151515; background-image: url("../img/bg_texture.png") ; background-repeat: repeat;   }
  .section_description .descriptif{     padding: 0 1%; display: table;  color: #fff; font-size:12px; width: 1400px; max-width: 100%; margin: 0 auto; }
  .section_description .titre{ font-family: typo_titre; opacity: 0; max-width: 65%;  line-height: 1em; display: block; font-size: 6em;  letter-spacing: 0.05em; margin-bottom: 55px;  }
  .section_description .sstitre{ opacity: 0; max-width: 75%;  font-family: raleway_thin; display: block;  font-size: 1.4em; letter-spacing: 0.18em; text-transform: uppercase; width: 100%;  margin-bottom: 25px;  }
  .section_description .sssstitre{ opacity: 0;  font-size: .9em; font-family: raleway; display: block;   letter-spacing: 0.18em; text-transform: uppercase; width: 100%;  margin-bottom: 25px;  }
  .section_description .descriptif .col1{   display: block;  width: 50%; float:left; padding-right: 5% }
  .section_description .descriptif .col2{  display: block;  width: 50%; float:left; }
  .section_description p{ opacity: 0; font-size: 1em; line-height: 1.8em;  font-family: raleway_thin; }
  .section_description li{ opacity: 0; color: #fff;  }
  .section_description .signature{ opacity: 0;display: inline-block; clear: both; margin: 12px 0 0 0px;  font-size: 0.9em;  color: #666; }
  .section_description .photographe{ opacity: 0;  display: inline; color: #666; transition:all .3s; }
  .section_description .photographe:hover{ color: #fff; }
  /* fx */
  .section_description.active .titre  { animation: anim_reveal_titre .5s cubic-bezier(.15,.59,.38,.95) 0s 1 normal forwards;  }
  .section_description.active .sstitre  { animation: anim_reveal1 .6s ease-out .15s 1 normal forwards;  }
  .section_description.active .sssstitre  { animation: anim_reveal1 .6s ease-out .25s 1 normal forwards;  }
  .section_description.active p:nth-child(1) { animation: anim_reveal1 .6s ease-out .35s 1 normal forwards;  }
  .section_description.active p:nth-child(2) { animation: anim_reveal1 .6s ease-out .45s 1 normal forwards;  }
  .section_description.active p:nth-child(3) { animation: anim_reveal1 .6s ease-out .55s 1 normal forwards;  }
  .section_description.active li:nth-child(1)  { animation: anim_reveal1 .5s ease-out .4s 1 normal forwards;  }
  .section_description.active li:nth-child(2)  { animation: anim_reveal1 .5s ease-out .5s 1 normal forwards;  }
  .section_description.active li:nth-child(3)  { animation: anim_reveal1 .5s ease-out .6s 1 normal forwards;  }
  .section_description.active .signature{ animation: anim_reveal1 .5s ease-out .7s 1 normal forwards;  }
  .section_description .photographe{  animation: anim_reveal1 .5s ease-out .8s 1 normal forwards; }

  /* grandes photos */

  .banner_container{  overflow: hidden; display: block; position: relative; height: 55vw; background-image: url("../img/home_bg.jpg"); background-size: cover; background-attachment: fixed;   }
  .banner_layer{ opacity: 0.85; background-position: center; background-repeat: no-repeat; background-size: cover; height: 75vw; width: 100vw;  position: absolute;  left: 0; top: 0 }

  /* petites photos */

  .section_photos{  padding-top: 15px; padding-bottom: 60px; z-index: 10;  box-shadow: 0px 0px 60px #000;  background-color: #151515; background-image: url("../img/bg_texture.png") ; background-repeat: repeat; position: relative;  display: flex;  }
  .section_photos .photo_container{  width: 100%; max-width: 1400px; left: 50%;   transform: translateX(-50%);  position: relative; overflow: hidden;  display: inline-block; }
  .section_photos .photo_crop{ opacity: 0; z-index: 10; border-bottom:1px solid #000;background: #000; display: block; box-sizing: border-box; transition:all 2s; width: 23%; margin: 1%; height: 210px; float: left; overflow: hidden;  position: relative;  }
  .section_photos .photo_crop:hover {  cursor: zoom-in;  }
  .section_photos .photo_crop img{  height: auto; width: 100%; position: absolute; top: 50%; left: 50%; transition:all 0.2s ease-out; transform:translateY(-30%) translateX(-50%); opacity: 0; }
  .section_photos .photo_crop:hover img{ cursor: zoom-in; opacity: 0.5;cursor: pointer; transform:translateY(-50%) translateX(-50%) scale(1.05); }
  .swiper_projet .photo_crop img{ height: 100%!important; width: auto!important;  }
  .section_photos.active .photo_crop{ display: block;  opacity: 1; transition: all  1s; }

  .section_photos.active .photo_crop:nth-child(4n+1) img { transition: all .3s .3s ease-out; opacity: 1; transform:translateY(-50%) translateX(-50%); }
  .section_photos.active .photo_crop:nth-child(4n+2) img {  transition: all .3s .5s ease-out; opacity: 1; transform:translateY(-50%) translateX(-50%); }
  .section_photos.active .photo_crop:nth-child(4n+3) img  {  transition: all .3s .6s ease-out; opacity: 1; transform:translateY(-50%) translateX(-50%); }
  .section_photos.active .photo_crop:nth-child(4n+4) img {  transition: all .3s .8s ease-out; opacity: 1; transform:translateY(-50%) translateX(-50%); }

  /* photos swiper */
  .section_photos .photo_crop.swiper-slide{ height: 180px; width: auto;  }
  .section_photos .photo_crop.swiper-slide img{ position: relative; height: 180px; width: auto; }

  .section_photos .swiper-button-prev{ transform: scale(0.6); left: -5px;    z-index: 111;  background-color: rgba(0,0,0,0.3); padding: 5px; width: 80px; height: 80px; border-radius: 40px;}
  .section_photos  .swiper-button-next{ transform: scale(0.6); right: -5px;   z-index: 111;  background-color: rgba(0,0,0,0.3); padding: 5px; width: 80px; height: 80px; border-radius: 40px; }

  /* zoom */

  .overlay{ display: none;  position: fixed; top: 0; left: 0; background: #000; z-index: 1000; width: 100%; height: 100vh; }
  .overlay:hover{  cursor: zoom-out;  }
  .overlay.show {  display: block; }
  .overlay div{ opacity: 0;  }
  .overlay.show div{  width: 100%; height: 100vh;  animation: anim_overlay_div 1s cubic-bezier(0, 0.72, 0.45, 0.98) 0.4s 1 normal forwards; }
  .overlay.show img{ height: 80%; position: absolute; top: 50%; left: 50%; transform:translateY(-50%) translateX(-50%); }
  .overlay.show img.small{ height: 80%;  }

  /* responsive */

@media (max-width: 1400px) {
  .section_photos .photo_crop{  height: 10vw; }
  .section_description .descriptif { width: 100%; }
}
@media (max-width: 600px) {
  .layout_max50pc_container{ width: 100%; }
  #swiper_savoirfaire{ display: none; }
  .section_txt_bgWhite img{ margin-top: 40px; }
  .titre { font-size: 4em; }
  section{ box-sizing:border-box; margin: 0; position: relative; display: table-cell; }
  div{ box-sizing:border-box; }
  .no_onMobile{ display: none }
  .only_onMobile{ display: block }

  .section_savoirfaire{ font-size: 12px; text-align: center; }
  .section_savoirfaire .content_savoirfaire { width: 80%; padding: 0; margin: 40px 10%; }
  .section_savoirfaire .titre{  font-size: 3em; }

  .section_description{ width: 100%; padding: 0; margin: 20px 0; }
  .section_description .titre { opacity: 1; text-align: center; font-size: 3em; padding: 0 10%; width: 100%; max-width: 100%;   margin: 10px auto ;  }
  .section_description .sstitre { text-align: center; max-width: 100%; padding: 0 10%; width: 100%;   margin: 20px auto ;   }
  .section_description .sssstitre { text-align: center; max-width: 100%; padding: 0 10%; width: 100%;    margin-bottom: 20px; }
  .overlay.show img {  height: auto; max-width: 90%; max-height: 90% }
  .overlay.show img.small{ height: auto; max-width: 90%; max-height: 90% }

  ul{ margin: 1em; list-style-type: none; text-transform: uppercase; text-align: center;  }
  .col1,.col2,
  .midwidth_container{ width: 100%!important; position: relative!important; text-align: center; padding: 0!important ; margin: 0!important;  }
  .section_description .descriptif { width: 100%; padding: 10% }
}

/* keyframes party **************************************************************************/

  @keyframes fadeIn{ from { opacity: 0; } to { opacity: 1; } }
  @keyframes anim_reveal1{ from { opacity: 0; } to { opacity: 1; } }
  @keyframes anim_reveal_titre{ from { opacity: 0; } to { opacity: 0.8; } }
  @keyframes anim_reveal2{ from { opacity: 0; transform: translate3d(0px, -20px, 0) } to { opacity: 1; transform: translate3d(0px, 0, 0) } }
  @keyframes anim_reveal_photo{ from { height: 100%; top: 0 } to { height: 0; top: 100% } }
  @keyframes anim_overlay_div{
      0% {  opacity:  0;  transform: translate3d(0, 30px, 0) scale(.7); }
      100% {  opacity:  1;  transform: translate3d(0, 0, 0) scale(1) }
  }


/* ==========================================================================
   Compléments Kirby (n'altèrent pas le rendu d'origine)
   ========================================================================== */

/* champs « writer » : le <div> conteneur remplace le <p> d'origine */
.txt_writer p + p { margin-top: 0; }
.txt_writer a { color: inherit; text-decoration: underline; }
.section_description .col1 p + p,
.section_description .col2 p + p { margin-top: .6em; }

/* signature webdesign (même rendu que l'original : petit lien discret) */
.manu_signature { color: #000; font-size: .75em; letter-spacing: .12em; opacity: .5; transition: opacity .3s; display: inline-block; clear: both; }
.manu_signature:hover { opacity: 1; }

/* page d'erreur */
.tpl_error .topscreen h1 a, .tpl_error .text_mov a { color: inherit; }

/* préférence « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  .section_description .titre, .section_description .sstitre, .section_description .sssstitre,
  .section_description p, .section_description li, .section_description .signature, .section_description .photographe { opacity: 1 !important; animation: none !important; }
  .banner_layer { transform: none !important; opacity: .85 !important; }
  .topscreen_fond, .topscreen_fond_img { transition: none !important; }
}