/*
Theme Name: 4775 Joaillerie
Description: Thème WordPress sur mesure pour 47.75 Joaillerie
Version: 1.0
Requires PHP: 7.4
Text Domain: joaillerie-4775
Author: BennyWeB
Author URI: https://www.bennyweb.fr
*/

/* ==========================================================================
   MAISON — Feuille de style
   Palette :
     --color-blue  : #0024bc
     --color-grey : #e8e9e3
     --color-gold  : #dbb624
   Typographie : Jost (titres fins + texte) — police géométrique fine,
   proche des supports de la marque (cartes de visite)
   ========================================================================== */

:root{
  --color-blue: #0024bc;
  --color-grey: #e8e9e3;
  --color-gold: #dbb624;
  --color-white: #ffffff;
  --color-blue-grey: #3a4856;

  --font-display: 'Jost', 'Century Gothic', 'Futura', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;

  --header-height: 92px;
  --footer-height: 44px;
  --transition-slide: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
}

/* Le mode "slider plein écran" (scroll interne géré en JS, header/footer
   masqués par défaut) ne s'applique qu'à la page d'accueil. Les autres
   gabarits (ex: Mentions légales via index.php) restent en flux normal,
   avec le footer affiché sous le contenu. */
html.is-front-page,
html.is-front-page body{
  height: 100%;
  overflow: hidden;
}

body{
  /* Le footer est en flux normal (pas en position fixed) : ce flex column
     lui réserve automatiquement sa place, et le slider (flex: 1) absorbe le
     reste de la hauteur disponible. */
  display: flex;
  flex-direction: column;
}

body{
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-blue);
  background: var(--color-grey);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2{
  font-family: var(--font-display);
  font-weight: 300;
  margin: 0;
}

p{ margin: 0 0 1.1em; }

::selection{
  background: var(--color-gold);
  color: var(--color-blue);
}

/* ============ HEADER ============ */

.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--color-white);
  z-index: 100;
  border-bottom: 1px solid rgba(0, 36, 188, 0.12);

  /* Visible par défaut (gabarits normaux, header en flux "fixed" classique).
     Sur la page d'accueil (html.is-front-page), il reste masqué tant que le
     panneau actif n'est pas "présentation"/"contact" (html.has-header,
     piloté par script.js) : voir la règle ci-dessous. */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0s;
}

html.is-front-page:not(.has-header) .site-header{
  /* Masqué (en fondu + léger glissement) sur le panneau accueil du slider. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}

.site-header__inner{
  width: 100%;
  max-width: 980px;
  height: 100%;
  margin: 0 auto;
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__brand{
  display: flex;
  align-items: center;
  height: 100%;
}

.site-header__logo-img{
  display: block;
  height: 34px;
  width: auto;
}

.site-nav{
  position: relative;
  display: flex;
  align-items: center;
}

.site-nav__list{
  display: flex;
  gap: 2.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link{
  position: relative;
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.32rem;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  color: var(--color-blue);
  padding-bottom: 6px;
  transition: color 0.3s ease;
}

.site-nav__link:hover{
  color: var(--color-gold);
}

.site-nav__indicator{
  position: absolute;
  bottom: -1px;
  height: 1px;
  background: var(--color-gold);
  transition: left 0.4s cubic-bezier(0.65,0,0.35,1), width 0.4s cubic-bezier(0.65,0,0.35,1);
}

.site-header__burger{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.site-header__burger span{
  display: block;
  height: 1px;
  width: 100%;
  background: var(--color-blue);
}

/* ============ SLIDER (3 onglets qui glissent horizontalement) ============ */

.slider{
  position: relative;
  /* Le footer étant en flux normal (voir body{ display:flex }), il occupe
     toujours sa vraie hauteur : le slider (flex: 1) se contente d'absorber
     le reste de l'espace vertical disponible, header fixe déduit via le
     padding-top ci-dessous. */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding-top: var(--header-height);
  /* Pas de transition ici : le contenu doit se positionner instantanément
     à sa taille finale, sinon le titre reste caché sous le header (fixe,
     superposé) le temps que ce recalcul de hauteur se termine. Seul le
     header (voir html.is-front-page:not(.has-header) .site-header)
     s'anime, en fondu. */
  overflow: hidden;
  /* "clip" (contrairement à "hidden") empêche ce conteneur de devenir une
     cible de défilement programmatique. Sans ça, quand la page est rechargée
     sur une ancre (#presentation, #contact...), le navigateur "scrolle"
     nativement ce conteneur pour amener la section ciblée en vue — ce qui
     désynchronise le scroll natif avec le translateX() du JS et casse le
     slider au clic suivant. "clip" est ignoré par les navigateurs qui ne
     le supportent pas, "hidden" reste alors le filet de sécurité. */
  overflow: clip;
}

html.is-front-page:not(.has-header) .slider{
  padding-top: 0;
}

/* ============ FOOTER ============ */

.site-footer{
  flex-shrink: 0;
  background: #333333;
  overflow: hidden;

  /* Visible par défaut (gabarits normaux) : en flux normal (pas en position
     fixed), sous le contenu. Sur la page d'accueil (html.is-front-page), il
     reste masqué tant que le panneau actif n'est pas "contact" (voir
     ci-dessous, html.has-footer piloté par script.js), pour que le slider
     (flex: 1) récupère l'espace libéré sur les panneaux accueil/présentation. */
  height: var(--footer-height);
  opacity: 1;
  transition: height 0.45s ease, opacity 0.45s ease;
}

html.is-front-page:not(.has-footer) .site-footer{
  height: 0;
  opacity: 0;
}

.site-footer__inner{
  width: 100%;
  max-width: 980px;
  height: 100%;
  margin: 0 auto;
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.site-footer__left{
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.site-footer__title{
  color: var(--color-white);
}

.site-footer a{
  color: var(--color-grey);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.site-footer a:hover{
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.site-footer__right a{
  white-space: nowrap;
}

.slider__track{
  display: flex;
  width: 300%;
  height: 100%;
  transition: var(--transition-slide);
}

.panel{
  width: calc(100% / 3);
  height: 100%;
  display: flex;
  /* "safe center" ne centre verticalement que si le contenu tient dans la
     hauteur disponible ; sinon il s'aligne en haut. Sans ça, un panneau
     dont le contenu dépasse la hauteur de l'écran (ex: Contact sur mobile)
     se retrouve centré avec le haut du contenu poussé hors de la zone
     scrollable et donc inaccessible — la page semble alors s'ouvrir "au
     milieu". Le repli align-items: flex-start couvre les navigateurs qui
     ne connaissent pas encore le mot-clé "safe". */
  align-items: flex-start;
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
}

.panel__inner{
  width: 100%;
  max-width: 980px;
  padding: 4rem 6%;
}

.panel__inner--center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  justify-content: safe center;
  text-align: center;
  height: 100%;
  max-width: none;
}

/* ---- Panel Accueil (image de fond, logo et texte blancs) ---- */

.panel--accueil{
  background: var(--color-grey) url("img/fond.jpg") center center / cover no-repeat;
}

.hero-logo-img{
  display: block;
  width: min(320px, 70vw);
  height: auto;
  margin: 0 0 2.2rem;
}

.hero-tagline{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-grey);
  margin: 0 0 3.2rem 2px;
  opacity: 0.9;
}

.hero-scroll{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-gold);
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.hero-scroll:hover{ opacity: 1; }

.hero-scroll__line{
  width: 1px;
  height: 34px;
  background: var(--color-gold);
}

.hero-scroll__text{
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ---- Panel Présentation (fond blanc, texte bleu) ---- */

.panel--presentation{
  background: var(--color-grey);
  color: var(--color-blue);
}

.panel__title{
  display: none;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 300;
  color: var(--color-blue);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2.6rem;
  position: relative;
  padding-bottom: 1.4rem;
}

.panel__title::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 54px;
  height: 1px;
  background: var(--color-gold);
}

.panel__title--light{ color: var(--color-grey); }

.presentation__text p{
  font-family: var(--font-serif);
  font-size: 1.32rem;
  line-height: 1.75;
  font-weight: 400;
  font-style: italic;
  color: var(--color-blue);
}

/*
.presentation__text p strong{
  font-weight: 400;
  color: var(--color-blue-grey);
  text-decoration: underline;
}
*/

.presentation__figure{
  float: right;
  width: min(320px, 40%);
  margin: 0.3rem 0 1.6rem 3rem;
}

.presentation__frame{
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--color-gold);
  position: relative;
}

.presentation__frame::before{
  content: "";
  position: absolute;
  inset: 14px;
  background: linear-gradient(160deg, var(--color-grey) 0%, #d3d4cb 100%);
  opacity: 0.92;
}

/* Photo (champ ACF "photo") : remplit l'intérieur du cadre doré, par-dessus
   le fond dégradé de ::before. */
.presentation__frame img{
  position: absolute;
  inset: 14px;
  z-index: 1;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  object-fit: cover;
  display: block;
}

.panel--presentation .panel__title,
.panel--presentation .presentation__text p{
  color: var(--color-blue-grey)
}

/* ---- Panel Contact (fond bleu, texte blanc, titres dorés) ---- */

.panel--contact{
  background: var(--color-grey) url("img/fond.jpg") center center / cover no-repeat;
  color: var(--color-white);
}

.contact__message{
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.contact__message a{
  color: inherit;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-gold);
  transition: border-color 0.3s ease;
}

.contact__message a:hover{
  border-color: transparent;
}

.contact__content{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4.5rem;
  margin-top: 1rem;
}

.contact__block{
  margin-bottom: 2.1rem;
}

.panel--contact .panel__title{
  color: var(--color-white);
}

.contact__block h2{
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-blue-grey);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.contact__block p{
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-blue-grey);
}

.contact__block a{
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.contact__block a:hover{
  border-color: var(--color-gold);
}

.contact__social{
  display: flex;
  gap: 1.2rem;
}

/* Form */

.contact__form{
  display: flex;
  flex-direction: column;
}

.form__row{
  display: flex;
  flex-direction: column;
  margin-bottom: 1.6rem;
}

.form__row label{
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-blue-grey);
  margin-bottom: 0.55rem;
}

.form__row input,
.form__row textarea{
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-blue-grey);
  color: var(--color-blue-grey);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.98rem;
  padding: 0.5rem 0.1rem;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.form__row input:focus,
.form__row textarea:focus{
  outline: none;
  border-color: var(--color-gold);
}

.form__row input::placeholder,
.form__row textarea::placeholder{
  color: rgba(232, 233, 227, 0.5);
}

.form__submit{
  align-self: flex-start;
  margin-top: 0.6rem;
  padding: 0.9rem 2.4rem;
  background: transparent;
  border: 1px solid var(--color-blue-grey);
  color: var(--color-blue-grey);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease;
}

.form__submit:hover{
  background: var(--color-gold);
  color: var(--color-blue);
}

.form__status{
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  min-height: 1.2em;
  color: var(--color-gold);
}

/* ============ RESPONSIVE ============ */

@media (max-width: 900px){
  .contact__content{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .presentation__figure{
    float: none;
    width: min(280px, 70%);
    margin: 0 auto 2rem;
  }
}

@media (max-width: 720px){
  :root{ --header-height: 76px; --footer-height: 64px; }

  .site-footer__inner{
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    text-align: center;
    font-size: 0.68rem;
  }

  .site-footer__left{ justify-content: center; }

  .site-nav{
    position: fixed;
    top: var(--header-height);
    right: 0;
    height: calc(100vh - var(--header-height) - var(--footer-height));
    width: 100%;
    background: var(--color-blue);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.6rem 2.2rem;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    z-index: 99;
  }

  .site-nav.is-open{ transform: translateX(0); }

  .site-nav__list{
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
  }

  .site-nav__list li{
    position: relative;
  }

  .site-nav__list li:not(:first-child)::before{
    content: "";
    position: absolute;
    top: -0.9rem;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 1px;
    background: var(--color-gold);
    opacity: 0.5;
  }

  .site-nav__link{ color: var(--color-grey); font-style: normal; }
  .site-nav__link:hover{ color: var(--color-gold); }
  .site-nav__indicator{ display: none; }

  .site-header__burger{ display: flex; }

  .hero-logo-img{ width: min(240px, 78vw); }

  .panel__inner{ padding: 4rem 7%; }
}

.wp-block-heading{
  color: var(--color-blue-grey);
  font-weight: bold;
}

/* mentions légales */
body.page.page-id-36 .site-header{
  display: none;
}