/* =============================================================
   NLA PHOTO — feuille de style
   Remplace assets/css/natation.css (nom hérité d'un ancien
   projet — un club de natation — d'où les couleurs et le
   thème actuels, jamais pensés pour un site de photographe).

   Toutes les classes et IDs existants sont conservés à
   l'identique : ce fichier peut remplacer natation.css sans
   toucher au HTML ni au JS.
   ============================================================= */

:root{
  /* Typographie */
  --font-display: 'Syne', sans-serif;   /* titres — déjà chargée par le site, jamais appliquée */
  --font-body: 'Work Sans', sans-serif; /* texte courant — déjà chargée par le site */

  /* Couleurs — fond bleu très pâle, accent bleu foncé */
  --ink: #1A2233;         /* texte principal, encre bleu-nuit */
  --ink-soft: #5C6673;    /* texte secondaire */
  --paper: #F3F6FA;       /* fond principal, bleu très léger */
  --paper-alt: #E7EDF4;   /* fond des sections alternées */
  --surface: #FFFFFF;     /* cartes, encarts clairs */
  --line: #DCE3EC;        /* filets, séparateurs */
  --accent: #1F3A5C;      /* bleu foncé — liens, boutons, accents */
  --accent-deep: #142A45; /* variante encore plus foncée (hover) */
  --dark: #12192A;        /* fond sombre (pied de page, bandeau témoignages) */
  --dark-line: #263248;
  --dark-text: #C7D0DC;
}

/* ---------- Base ---------- */
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
p{ line-height: 1.7; color: var(--ink-soft); }
a{ color: var(--ink); }

/* ---------- Wordmark (remplace logo.jpg / logo_petit.jpg) ---------- */
.logo-wordmark{
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  text-decoration: none;
  cursor: pointer;
}
.logo-wordmark-bold{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.logo-wordmark-light{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink-soft);
}
.logo-wordmark-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  margin-left: 4px;
  transform: translateY(-8px);
}
.logo-wordmark-sm .logo-wordmark-bold,
.logo-wordmark-sm .logo-wordmark-light{
  font-size: 17px;
}

/* ---------- Éléments génériques déjà utilisés ---------- */
.img_accueil{
  width: 1024px;
}
.topnav_PC {
  overflow: hidden;
  background-color: var(--paper);
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}
.topnav_PC a {
  float: left;
  display: block;
  color: var(--ink);
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.topnav_PC a:hover {
  background-color: transparent;
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.topnav_PC a.active {
  background-color: transparent;
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}


.topnav_responsive {
  overflow: hidden;
  background-color: var(--paper);
  display: flex;
  justify-content: center;
  height: 90px;
  border-bottom: 1px solid var(--line);
}
.topnav_responsive a {
  float: left;
  display: block;
  color: var(--ink);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}
.topnav_responsive a:hover {
  background-color: transparent;
  color: var(--accent);
}

.topnav_responsive a.active {
  background-color: transparent;
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 600px) {
  .topnav_PC {display: none;}
  .topnav_responsive {display: block;padding: 10px 12px;}
}

@media (min-width: 600px) {
  .topnav_responsive {display: none;}
  .topnav_PC {display: block;}
}

.position_burger{
    position: absolute;
    right: 8px;
    color: var(--ink);
    font-size: 20px;
}

.hide_menu{
  visibility: hidden;
  z-index: 1;
}

.topnav::-webkit-scrollbar {
  display: none;
}

.sous_menu_langue{
    position: absolute;
    right: 0px;
    top: 60;
    float: none;
}

.petit_logo{
    position: absolute;
    left: -10px;
    top: -5px;
    float: none;
}

.sous_menu_actu{
    position: absolute;
    right: 250px;
    top: 60;
    float: none;
}

.sous_menu_club{
    position: absolute;
    right: 60px;
    top: 60px;
    float: none;
}
.sous_menu_infos{
    position: absolute;
    right: 150px;
    top: 60px;
    float: none;
}

.body_no_marge{
  margin: 0px;
  background-color: var(--paper);
}
.photo_accueil{
  width: 100%;
}
.logo_class{
  height: 120px;
  width: 120px;
  padding: 0px;
  margin: 0px;
}
.shootUrbain1{
  height: 413px;
  width: 500px;
  padding: 0px;
  margin: 0px;
}
.lang-choice{
  width: 34px;
  height: 20px;
  padding: 0px;
  margin: 0px;
  border-radius: 2px;
  transition: opacity .15s ease;
}
.lang-choice:hover{
  opacity: 0.7;
}

.shootUrbain_small{
  height: 591px;
  width: 400px;
  padding: 0px;
  margin: 0px;
}
.titre_1{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.footer_class{
  text-align: center;
  max-width: 100%;
  margin: 0px;
  padding: 28px 20px;
  background-color: var(--dark);
  color: var(--dark-text);
}
.footer_item{
  padding: 6px 14px;
  font-size: 13px;
  display: inline-block;
}
#mentionsLegales, #contact-button{
  cursor: pointer;
  transition: color .15s ease;
}
#mentionsLegales:hover, #contact-button:hover{
  color: var(--accent);
}
.footer_item a{
  color: var(--dark-text);
}
.footer_item a:hover{
  color: var(--accent);
}
.no_scroll{
  overflow: hidden;
  background-color: var(--paper);
}
.footer_class_index{
  width: 100%;
  background-color: var(--dark);
}
.header_in{
  width: 100%;
  max-width: 1200px;
  background-color: var(--paper);
}
.header_class{
  width: 100%;
  max-width: 1200px;
  text-align: center;
  min-height: 50px;
  padding: 0px;
  margin: 0px auto;
  overflow: hidden;
  background-color: var(--paper);
}

.body_cadre{
  max-width: 100%;
}

.porfolio_photo{
  width: 305px;
  margin: 8px;
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(26,34,51,0.08);
  transition: box-shadow .2s ease;

  /*height: 346px;*/
}
.porfolio_photo:hover{
  box-shadow: 0 6px 16px rgba(26,34,51,0.16);
}

@media (max-width: 600px) {
  .porfolio_photo {width: 100%;height: auto;margin: 0px;margin-top: 8px;}
}
.unArt{
  display: block;
}
.unArtImg{
  width: 180px;
  border-radius: 2px;
}
.unRencontreImg{
  width: 120px;
  border-radius: 2px;
}

.laTechniqueImg{
  width: 180px;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .unArt{display: none;}
}
.unArt_res{
  display: none;
}
@media (max-width: 600px) {
  .unArt_res{display: block;}
}



.portfolioLigne{
  width: 100%;
  text-align: center;
}

.moi_photo{
  width: 100%;
  border: none;
  border-radius: 0;
}
.div_center{
  text-align: center;
}

.width-full {
width:100%;
}

.width-2500 {
width:2500px;
height: 330px;
max-height: 330px;
}

.temoignage_fond {
	background-color: var(--paper-alt);
	height: 380px;
  display:inline-block;
}

.web-center {
text-align: center;
text-align: -webkit-center;
text-align: -moz-center;
}

.screenshot-temoignage {
border: 2px solid var(--accent);
border-radius: 50%;
margin-bottom: 2px;
margin-top: 2px;
padding: 0px;
width: 76px;
height: 76px;
object-fit: cover;
box-shadow: 0 2px 6px rgba(26,34,51,0.18);
z-index: 3;
position: relative;
top: -38px;
}

.temoignage-paragraphe-text {
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-webkit-user-select: none;
user-select: none;
background-color: var(--surface);
border: 1px solid var(--line);
border-radius: 4px;
font-size: 14.5px;
font-weight: 400;
height: 230px;
line-height: 1.6;
margin: 30px 10px;
padding: 22px 20px 20px;
text-align: left;
vertical-align: middle;
max-width: 100%;
position: relative;
top: -70px;
word-wrap: break-word;
width: 290px;
white-space: break-spaces;
box-shadow: 0 2px 10px rgba(26,34,51,0.06);
}




/* General */
.main_scroll {
  height: 400px;
  width: 100%;
}

.container_scroll {
  margin: 5px;
  width: 100%;
  height: 350px;
  border: 0px;
  white-space: nowrap;
}

.item_scroll {
  border: none;
  background-color: transparent;
  width: 300px;
}

/* Inline-block */
.inline_scroll {
  vertical-align: middle;
  overflow-x: scroll;
  overflow-y: hidden;

}
.inline-item_scroll {
  display: inline-block;
  vertical-align: middle;
  height: 140px;
  margin-right: -4px;
  margin: 2px;
  padding: 5px;
}



/* external css: flickity.css */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gallery {
  background: var(--paper-alt);
}

.image_presta1{background: url("../images/prestation/presta_1.jpg") no-repeat;background-size:cover;}
.image_presta2{background: url("../images/prestation/presta_2.jpg") no-repeat;background-size:cover;}
.image_presta3{background: url("../images/prestation/presta_3.jpg") no-repeat;background-size:cover;}
.image_presta4{background: url("../images/prestation/presta_4.jpg") no-repeat;background-size:cover;}
.ella_urbain{background: url("../images/prestation/Ella.jpg") no-repeat;     background-size: contain;}
.maya_urbain{background: url("../images/prestation/Maya.jpg") no-repeat;     background-size: contain;}
.hodahalawanii_urbain{background: url("../images/prestation/hodahalawanii.jpg") no-repeat;     background-size: contain;}
.nesrine_urbain{background: url("../images/prestation/Nesrine.jpg") no-repeat;     background-size: contain;}


.carousel-cell-urbain{
  width: 780px;
  height: 500px;
  margin-right: 10px;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-cell {
  width: 800px;
  height: 600px;
  margin-right: 10px;
  background-color: var(--dark);
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel.is-fullscreen .carousel-cell {
  height: 100%;
}

.carousel-cell-image {
  display: block;
  max-height: 100%;
}

.carousel.is-fullscreen .carousel-cell-image {
  max-width: 100%;
}

.prestation_commentaire {
  font-size: 14px;
  line-height: 1.6;
  background-color: rgba(243,246,250,0.94);
  color: var(--ink);
  position: absolute;
  right: 20px;
  top: 400px;
  float: none;
  width: 100%;
  max-width: 750px;
  padding: 14px 18px;
  border-radius: 2px;
}
.prestation_commentaire_ella{
  font-size: 14px;
  line-height: 1.6;
  background-color: rgba(243,246,250,0.94);
  color: var(--ink);
  position: absolute;
  right: 30px;
  top: 420px;
  float: none;
  width: 100%;
  max-width: 750px;
  padding: 14px 18px;
  border-radius: 2px;
}
.prestation_commentaire_hodahalawanii{
  font-size: 14px;
  line-height: 1.6;
  background-color: rgba(243,246,250,0.94);
  color: var(--ink);
  position: absolute;
  right: 30px;
  top: 370px;
  float: none;
  width: 100%;
  max-width: 750px;
  padding: 14px 18px;
  border-radius: 2px;
}
.prestation_titre_carrousel{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  background-color: rgba(243,246,250,0.94);
  color: var(--ink);
  position: absolute;
  right: 30px;
  top: 500px;
  float: none;
  padding: 8px 16px;
}

@media (max-width: 600px) {
  .prestation_titre_carrousel{ font-size: 20px; top: 480px; right:20px;}
  .carousel-cell {width:400px;height: 550px;}
  .image_presta1{background: url("../images/prestation/presta_1_res.jpg") no-repeat;background-size:cover;}
  .image_presta2{background: url("../images/prestation/presta_2_res.jpg") no-repeat;background-size:cover;}
  .image_presta3{background: url("../images/prestation/presta_3_res.jpg") no-repeat;background-size:cover;}
  .image_presta4{background: url("../images/prestation/presta_4_res.jpg") no-repeat;background-size:cover;}
  .ella_urbain{background: url("../images/prestation/Ella_res.jpg") no-repeat;}
  .maya_urbain{background: url("../images/prestation/Maya_res.jpg") no-repeat;}
  .hodahalawanii_urbain{background: url("../images/prestation/hodahalawanii_res.jpg") no-repeat;}
  .prestation_commentaire{right:220px;top:285px;width:320px;height: 530px;}
  .prestation_commentaire_ella{right:220px;top:370px;width:320px;height: 530px;}
  .prestation_commentaire_mugi{right:220px;top:380px;width:320px;height: 530px;}
  .prestation_commentaire_hodahalawanii{right:auto;top:250px;width:350px;height: 530px;}
}

.tarif_prestation{
  text-align: center;
  font-size: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
}

/* ---------- Petits utilitaires prêts à l'emploi (optionnels) ---------- */
.btn-accent{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  background: var(--accent);
  color: var(--paper);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: 2px;
  text-decoration: none;
  transition: background .15s ease;
}
.btn-accent:hover{
  background: var(--accent-deep);
}
.btn-outline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: 2px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.btn-outline:hover{
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Héros (page d'accueil) ---------- */
.hero{
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 88px;
  display: flex;
  gap: 56px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-copy{
  flex: 1 1 420px;
  min-width: 280px;
}
.hero-eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 20px;
}
.hero-copy h1{
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
  font-weight: 800;
}
.hero-subtitle{
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 440px;
}
.hero-cta{
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hero-photo-wrap{
  flex: 1 1 320px;
  min-width: 240px;
  max-width: 420px;
  position: relative;
}
.hero-photo-frame{
  position: absolute;
  top: 18px;
  left: -18px;
  right: 18px;
  bottom: -18px;
  border: 1px solid var(--accent);
  z-index: 0;
}
.hero-photo{
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 20px 40px -18px rgba(26,34,51,0.35);
}
.hero-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-photo-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 700px){
  .hero{padding: 48px 20px 64px;}
  .hero-photo-frame{display: none;}
}

/* ---------- Blocs numérotés (page d'accueil) ---------- */
.value-props{
  background: var(--paper-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.value-props-grid{
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 48px;
}
@media (max-width: 800px){
  .value-props-grid{grid-template-columns: 1fr;gap: 36px;}
}
.value-prop-num{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
}
.value-prop h2{
  font-size: 20px;
  font-weight: 700;
  margin-top: 12px;
}
.value-prop p{
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---------- Cadre photo (même effet que la photo d'accueil) ---------- */
.framed-photo{
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.framed-photo::before{
  content: "";
  position: absolute;
  top: 14px;
  left: -14px;
  right: 14px;
  bottom: -14px;
  border: 1px solid var(--accent);
  z-index: 0;
}
.framed-photo img{
  position: relative;
  z-index: 1;
  display: block;
  box-shadow: 0 18px 36px -18px rgba(26,34,51,0.35);
}

/* variante compacte pour les grilles de vignettes (portfolio) */
.framed-photo-sm::before{
  top: 6px;
  left: -6px;
  right: 6px;
  bottom: -6px;
}
.framed-photo-sm img{
  box-shadow: 0 8px 16px -10px rgba(26,34,51,0.3);
}
@media (max-width: 600px){
  .framed-photo-sm::before{display: none;}
}