/*
Theme Name: Rublens Child
Theme URI: https://www.rublens.com
Description: Theme enfant de Rublens. Direction artistique "Noir cinematique".
Author: Rublens
Template: hello-elementor
Version: 0.1.0
Text Domain: rublens-child
*/

/* ==========================================================================
   1. Jetons de design
   Toutes les valeurs du site vivent ici. Changer une couleur ou une taille
   se fait a un seul endroit, jamais dans les pages Elementor.
   ========================================================================== */

:root {
  /* Surfaces */
  --rb-encre:      #14120F;  /* fond principal */
  --rb-surface:    #1C1915;  /* blocs, cartes, bandeaux */
  --rb-surface-2:  #24201B;  /* survol, zones actives */

  /* Texte */
  --rb-blanc-casse: #EFE9DE;  /* texte principal */
  --rb-grege:      #9B9081;  /* texte secondaire */
  --rb-sourdine:   #6E6355;  /* filets, bordures visibles */
  --rb-filet:      #2A251E;  /* separations discretes */

  /* Accent unique, employe avec parcimonie */
  --rb-laiton:     #C0B4A2;

  /* Typographie */
  --rb-serif:  "Cormorant Garamond", Georgia, serif;
  --rb-sans:   "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;

  /* Echelle typographique (base 16, rapport 1.333) */
  --rb-t-xs:   0.75rem;   /* 12px  mentions */
  --rb-t-sm:   0.875rem;  /* 14px  legendes */
  --rb-t-base: 1rem;      /* 16px  corps */
  --rb-t-md:   1.333rem;  /* 21px  chapeau */
  --rb-t-lg:   2.369rem;  /* 38px  titres de section */
  --rb-t-xl:   4.209rem;  /* 67px  titre de banniere */

  /* Rythme vertical */
  --rb-esp-1: 0.5rem;
  --rb-esp-2: 1rem;
  --rb-esp-3: 2rem;
  --rb-esp-4: 4rem;
  --rb-esp-5: 7rem;

  /* Mouvement */
  --rb-duree:  0.9s;
  --rb-courbe: cubic-bezier(0.16, 0.84, 0.3, 1);
  /* Duree d'un aller de la lumiere de fond. Plus bas = plus visible. */
  --rb-derive-duree: 14s;
}


/* ==========================================================================
   1 bis. Mode clair
   Les jetons sont simplement inverses : tout le site suit sans qu'aucune
   autre regle ait a etre reecrite. Deux exceptions plus bas, pour les
   elements poses sur un voile sombre, qui doivent rester clairs.
   ========================================================================== */

body.rb-clair {
  --rb-encre:       #EFE9DE;  /* fond principal */
  --rb-surface:     #E6DFD3;
  --rb-surface-2:   #DBD3C5;
  --rb-blanc-casse: #1A1713;  /* texte principal */
  --rb-grege:       #5A5348;
  --rb-sourdine:    #8A8072;
  --rb-filet:       #D6CDBE;
  --rb-laiton:      #7A6A52;
}

/* La lumiere de fond est un halo sombre : sur fond clair elle ferait une
   tache. Elle devient un halo chaud, et la photo de banniere s'attenue. */
body.rb-clair .rb-hero__lueur {
  background: radial-gradient(circle, #E3D8C2 0%, rgba(239, 233, 222, 0) 68%);
  mix-blend-mode: multiply;
}
/* En mode clair, poser la photo en simple transparence la delaverait sur le
   fond pale. Le mode de fusion multiply garde ses noirs et laisse ses clairs
   disparaitre dans le fond : le rendu est celui d'une encre imprimee. */
body.rb-clair .rb-hero__photo.rb-visible {
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* Elements poses sur une photo ou un voile sombre : ils gardent un texte
   clair quel que soit le mode. */
body.rb-clair .rb-vignette__lieu { color: #EFE9DE; }
body.rb-clair .rb-visionneuse { background: rgba(10, 9, 7, 0.97); }
body.rb-clair .rb-visionneuse__legende,
body.rb-clair .rb-visionneuse__compteur { color: #9B9081; }
body.rb-clair .rb-visionneuse__btn { color: #9B9081; border-color: #2A251E; }
body.rb-clair .rb-visionneuse__btn:hover { color: #EFE9DE; border-color: #6E6355; }

/* Le portrait en attente reste lisible sur fond clair. */
body.rb-clair .rb-portrait-vide { background: var(--rb-surface); }

/* ==========================================================================
   2. Socle
   ========================================================================== */

body.rb-site {
  background-color: var(--rb-encre);
  transition: background-color 0.5s ease, color 0.5s ease;
  color: var(--rb-blanc-casse);
  font-family: var(--rb-sans);
  font-weight: 300;
  font-size: var(--rb-t-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body.rb-site h1,
body.rb-site h2,
body.rb-site h3 {
  font-family: var(--rb-serif);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: var(--rb-blanc-casse);
  margin: 0;
}

body.rb-site h1 { font-size: clamp(2.4rem, 6vw, var(--rb-t-xl)); }
body.rb-site h2 { font-size: clamp(1.9rem, 4vw, var(--rb-t-lg)); }
body.rb-site h3 { font-size: var(--rb-t-md); }

body.rb-site p { max-width: 62ch; }

body.rb-site a { color: inherit; text-decoration: none; }

/* Focus clavier visible : obligatoire, ne jamais supprimer. */
body.rb-site a:focus-visible,
body.rb-site button:focus-visible {
  outline: 1px solid var(--rb-laiton);
  outline-offset: 3px;
}

/* ==========================================================================
   3. Classes utilitaires
   A saisir dans Elementor : onglet Avance > Classes CSS du widget.
   ========================================================================== */

/* --- Texte --- */
.rb-chapeau   { font-size: var(--rb-t-md); color: var(--rb-grege); font-weight: 300; }
.rb-legende   { font-size: var(--rb-t-sm); color: var(--rb-grege); }
.rb-mention   { font-size: var(--rb-t-xs); color: var(--rb-sourdine); }
.rb-sourdine  { color: var(--rb-grege); }
.rb-laiton    { color: var(--rb-laiton); }

/* --- Boutons et liens --- */
.rb-btn {
  display: inline-block;
  border: 1px solid var(--rb-sourdine);
  padding: 0.9rem 1.6rem;
  font-size: var(--rb-t-sm);
  letter-spacing: 0.1em;
  color: var(--rb-blanc-casse);
  background: transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.rb-btn:hover { background-color: var(--rb-surface-2); border-color: var(--rb-laiton); }

.rb-lien {
  display: inline-block;
  font-size: var(--rb-t-sm);
  letter-spacing: 0.1em;
  color: var(--rb-grege);
  border-bottom: 1px solid var(--rb-filet);
  padding-bottom: 4px;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.rb-lien:hover { color: var(--rb-blanc-casse); border-color: var(--rb-laiton); }

/* --- Banniere d'accueil --- */
.rb-hero {
  position: relative;
  overflow: hidden;
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--rb-esp-5) var(--rb-esp-3) var(--rb-esp-4);
}

/* Lumiere qui derive lentement en fond. Purement decorative. */
/* La position est calculee par rublens.js, qui tire un point au hasard
   dans toute la banniere puis laisse la transition faire le trajet.
   L'element est centre sur son origine par les marges negatives. */
.rb-hero__lueur {
  position: absolute;
  left: 0;
  top: 0;
  width: 72vw;
  height: 72vw;
  min-width: 480px;
  min-height: 480px;
  margin-left: -36vw;
  margin-top: -36vw;
  pointer-events: none;
  background: radial-gradient(circle, #3B3225 0%, rgba(20, 18, 15, 0) 68%);
  transition: transform var(--rb-derive-duree) ease-in-out;
}

.rb-hero__titre { max-width: 18ch; }

/* Photo de banniere, tiree au sort a chaque chargement par rublens.js.
   Le masque la fait disparaitre vers la gauche : le texte n'est jamais
   pose sur l'image, seulement sur le fond. */
.rb-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  /* Degrade horizontal simple. La transition s'etale sur 72 % du calque
     au lieu de 38 % : elle est a la fois plus epaisse et repoussee vers
     la droite, donc vers l'image. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 72%);
  mask-image: linear-gradient(to right, transparent 0%, #000 72%);
}
.rb-hero__photo.rb-visible { opacity: 0.42; }

/* Le texte de la banniere repasse au-dessus des deux calques decoratifs. */
.rb-hero > *:not(.rb-hero__lueur):not(.rb-hero__photo) { position: relative; z-index: 1; }

/* --- Reveal de texte ligne par ligne (pose par rublens.js) --- */
.rb-ligne { display: block; overflow: hidden; }
.rb-ligne > span {
  display: block;
  transform: translateY(115%);
  transition: transform var(--rb-duree) var(--rb-courbe);
}
.rb-pret .rb-ligne > span { transform: translateY(0); }

/* --- Apparition en fondu au chargement --- */
.rb-fondu { opacity: 0; transition: opacity var(--rb-duree) ease; }
.rb-pret .rb-fondu { opacity: 1; }
.rb-fondu--1 { transition-delay: 0.45s; }
.rb-fondu--2 { transition-delay: 0.60s; }
.rb-fondu--3 { transition-delay: 0.75s; }

/* --- Apparition au defilement (a n'utiliser que sur 2 ou 3 blocs par page) --- */
.rb-apparait { opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s var(--rb-courbe); }
.rb-apparait.rb-vu { opacity: 1; transform: none; }

/* --- Grille de portfolio --- */
.rb-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3px; }
.rb-grille--large { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

/* --- Cadre image protege --- */
.rb-cadre { position: relative; overflow: hidden; background: var(--rb-surface); }
.rb-cadre img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Calque transparent : intercepte le clic droit et le glisser sur l'image. */
.rb-cadre::after { content: ""; position: absolute; inset: 0; }

/* Protection appliquee a toutes les images du site. */
body.rb-site img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* Exception : les images cliquables doivent rester cliquables. */
body.rb-site a img,
body.rb-site button img { pointer-events: auto; }

/* --- Sections --- */
.rb-section { padding: var(--rb-esp-5) var(--rb-esp-3); }
.rb-section--serre { padding: var(--rb-esp-4) var(--rb-esp-3); }
.rb-filet { border-top: 1px solid var(--rb-filet); }

/* ==========================================================================
   3 ter. En-tete fixe et pied de page
   ========================================================================== */

.rb-entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 2rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: padding 0.4s var(--rb-courbe), background-color 0.4s ease, border-color 0.4s ease;
}
/* Etat compact, pose par rublens.js des que la page defile. */
.rb-entete.rb-defile {
  padding: 0.8rem 2rem;
  background: rgba(20, 18, 15, 0.94);
  border-bottom-color: var(--rb-filet);
  /* Pas de backdrop-filter ici : il ferait de l'en-tete le cadre de
     reference du menu mobile, qui est en position fixe a l'interieur,
     et le panneau ne couvrirait plus l'ecran une fois la page defilee.
     Le fond est deja opaque a 94 %, le flou ne se voyait presque pas. */
}

.rb-marque {
  font-family: var(--rb-serif);
  font-size: 1.4rem;
  letter-spacing: 0.26em;
  transition: font-size 0.4s var(--rb-courbe);
}
.rb-entete.rb-defile .rb-marque { font-size: 1.15rem; }

.rb-menu { display: flex; gap: 1.6rem; }
.rb-menu a {
  font-size: var(--rb-t-sm);
  color: var(--rb-grege);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.rb-menu a:hover { color: var(--rb-blanc-casse); border-bottom-color: var(--rb-laiton); }

/* Bouton du menu mobile : masque sur grand ecran. */
.rb-burger {
  display: none;
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  color: var(--rb-blanc-casse);
}
.rb-burger span {
  display: block;
  width: 24px; height: 1px;
  background: currentColor;
  margin: 6px 0;
  transition: transform 0.35s var(--rb-courbe), opacity 0.25s ease;
}
body.rb-menu-ouvert .rb-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.rb-menu-ouvert .rb-burger span:nth-child(2) { opacity: 0; }
body.rb-menu-ouvert .rb-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Pied de page --- */
.rb-pied {
  border-top: 1px solid var(--rb-filet);
  padding: var(--rb-esp-4) var(--rb-esp-3) var(--rb-esp-3);
}
.rb-pied__colonnes {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--rb-esp-3);
}
.rb-pied__titre {
  font-size: var(--rb-t-xs);
  letter-spacing: 0.16em;
  color: var(--rb-sourdine);
  margin: 0 0 1rem;
}
.rb-pied ul { list-style: none; margin: 0; padding: 0; }
.rb-pied li { margin-bottom: 0.6rem; }
.rb-pied li a { font-size: var(--rb-t-sm); color: var(--rb-grege); }
.rb-pied li a:hover { color: var(--rb-blanc-casse); }
.rb-pied__bas {
  margin-top: var(--rb-esp-3);
  padding-top: var(--rb-esp-2);
  border-top: 1px solid var(--rb-filet);
}

/* ==========================================================================
   3 bis. Modules de page
   ========================================================================== */

/* En-tete de section : titre a gauche, filtres ou lien a droite. */
.rb-titre-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--rb-esp-3);
}
/* Variante sans titre : les filtres se calent a droite. */
.rb-titre-section--droite { justify-content: flex-end; }

/* --- Liste des prestations --- */
.rb-prestations { border-top: 1px solid var(--rb-filet); margin-top: var(--rb-esp-3); }

.rb-prestation {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rb-esp-2);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rb-filet);
  transition: padding-left 0.45s var(--rb-courbe), color 0.35s ease;
}
.rb-prestation:hover { padding-left: 0.9rem; }
.rb-prestation__nom { font-family: var(--rb-serif); font-size: var(--rb-t-md); }
.rb-prestation__note { font-size: var(--rb-t-sm); color: var(--rb-grege); text-align: right; }

/* --- Apercu : six images qui pavent un rectangle plein largeur.
       Deux cellules hautes pour les cadrages verticaux, quatre carrees.
       Aucun decalage vertical : les bords restent nets des quatre cotes. --- */
.rb-apercu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 26vw;
  grid-auto-flow: row dense;
  gap: 2px;
}
/* Cellules hautes pour les cadrages verticaux. La classe est posee par
   rublens-galerie.js sur les images reellement visibles, et non par
   nth-child : apres un filtrage, le rythme repart proprement du debut. */
.rb-apercu > .rb-haut { grid-row: span 2; }

/* Section sans marge laterale, pour les blocs qui touchent les bords. */
.rb-pleine-largeur { padding-left: 0; padding-right: 0; }

/* --- Photo d'en-tete des pages interieures.
       Meme principe que la banniere d'accueil, sans voile sombre : il s'agit
       d'eclairer la page, pas d'y poser du texte. --- */
.rb-page-entete { position: relative; overflow: hidden; }
.rb-page-entete > * { position: relative; z-index: 1; }

.rb-page-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  z-index: 0;
  background-image: var(--rb-page-image);
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 72%);
  mask-image: linear-gradient(to right, transparent 0%, #000 72%);
}
body.rb-clair .rb-page-photo { opacity: 0.55; mix-blend-mode: multiply; }

/* --- En-tete des pages interieures.
       Ces pages n'ont pas de banniere : il faut donc degager la hauteur
       de l'en-tete fixe, sinon le titre passe dessous. --- */
.rb-page-entete {
  padding: calc(var(--rb-esp-5) + 2.5rem) var(--rb-esp-3) var(--rb-esp-3);
}
.rb-page-entete p { margin-top: 1.2rem; }

/* --- Grille en colonnes libres.
       Chaque photo garde son cadrage d'origine, les colonnes s'empilent
       a leur propre rythme. Le bas n'est pas aligne, c'est voulu. --- */
.rb-colonnes {
  columns: 3;
  column-gap: 4px;
}
.rb-colonnes .rb-vignette {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 4px;
  break-inside: avoid;
}
.rb-colonnes .rb-vignette img {
  height: auto;
  object-fit: fill;
}

/* --- Page A propos --- */

/* --- Bascule sombre / clair --- */
.rb-bascule {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--rb-laiton);
  transition: color 0.5s ease;
}
body.rb-clair .rb-bascule { color: #1A1713; }

.rb-bascule svg {
  position: absolute;
  width: 19px;
  height: 19px;
  transition: opacity 0.4s ease, transform 0.5s var(--rb-courbe);
}
/* En mode sombre on propose la lune, en mode clair le soleil.
   L'icone sortante pivote et s'efface pendant que l'autre arrive. */
.rb-bascule__soleil { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.rb-bascule__lune   { opacity: 1; transform: rotate(0) scale(1); }
body.rb-clair .rb-bascule__soleil { opacity: 1; transform: rotate(0) scale(1); }
body.rb-clair .rb-bascule__lune   { opacity: 0; transform: rotate(90deg) scale(0.6); }

.rb-pied__mentions p { margin: 0 0 0.3rem; }

.rb-pied__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-esp-2);
  flex-wrap: wrap;
}

/* --- Double page : texte d'un côté, image de l'autre, en alternance.
       Le texte precede toujours l'image dans le code, pour la lecture
       vocale ; c'est l'ordre d'affichage qui bascule, pas le contenu. --- */
.rb-double {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--rb-esp-4);
  align-items: center;
}
.rb-double--haut { align-items: start; }
.rb-double--media-gauche .rb-double__media { order: -1; }

.rb-double__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Emplacement reserve au portrait, tant que la photo n'est pas fournie.
   Remplacer tout le bloc par une balise img le moment venu. */
.rb-portrait-vide {
  aspect-ratio: 3 / 4;
  background: var(--rb-surface);
  border: 1px dashed var(--rb-sourdine);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--rb-t-xs);
  letter-spacing: 0.1em;
  color: var(--rb-sourdine);
}

/* Marqueur des passages a ecrire. A supprimer avant la mise en ligne :
   une recherche du mot rb-a-remplir dans les fichiers les retrouve tous. */
.rb-a-remplir {
  color: var(--rb-laiton);
  border-bottom: 1px dashed var(--rb-sourdine);
  padding-bottom: 1px;
}

/* Deroule en etapes numerotees. */
.rb-etapes { border-top: 1px solid var(--rb-filet); margin-top: var(--rb-esp-3); }
.rb-etape {
  display: flex;
  gap: var(--rb-esp-2);
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rb-filet);
}
.rb-etape__num {
  font-family: var(--rb-serif);
  font-size: var(--rb-t-md);
  color: var(--rb-sourdine);
  min-width: 3rem;
  line-height: 1.2;
}
.rb-etape__titre { font-size: var(--rb-t-base); }
.rb-etape__texte { font-size: var(--rb-t-sm); color: var(--rb-grege); margin: 0.4rem 0 0; }

/* --- Page contact.
       Une seule adresse, au centre d'un ecran, entouree d'images. --- */
.rb-contact {
  position: relative;
  overflow: hidden;
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--rb-esp-5) + 2rem) var(--rb-esp-3) var(--rb-esp-5);
  text-align: center;
}
.rb-contact__contenu { position: relative; z-index: 3; isolation: isolate; }

/* Fond : une vingtaine de photos posees par rublens.js, inclinees au
   hasard, qui derivent tres lentement. Le centre est laisse libre. */
.rb-contact__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.rb-contact__photo {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  opacity: 0;
  transform: rotate(var(--r));
  transition: opacity 1.4s ease;
  /* Proprietes separees et non raccourci : dans la forme raccourcie,
     certaines versions de navigateur n'interpretent pas les variables
     CSS et l'animation ne demarre jamais. */
  animation-name: rb-flotte;
  animation-duration: var(--d);
  animation-delay: var(--retard);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.rb-contact__photo.rb-visible { opacity: var(--o); }

@keyframes rb-flotte {
  from { transform: rotate(var(--r)) translate(0, 0); }
  to   { transform: rotate(var(--r2)) translate(var(--dx), var(--dy)); }
}

/* Halo resserre derriere le seul bloc de texte. Le voile plein ecran est
   supprime : les photos doivent rester lumineuses et colorees, seule
   l'adresse a besoin d'un fond calme pour rester lisible. */
.rb-contact__contenu::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 165%;
  height: 230%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(20, 18, 15, 0.95) 26%, rgba(20, 18, 15, 0.72) 56%, rgba(20, 18, 15, 0) 80%);
}
body.rb-clair .rb-contact__contenu::before {
  background: radial-gradient(ellipse at center,
    rgba(239, 233, 222, 0.96) 26%, rgba(239, 233, 222, 0.76) 56%, rgba(239, 233, 222, 0) 80%);
}

.rb-contact__mail {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--rb-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.5vw, 3.6rem);
  letter-spacing: 0.01em;
  color: var(--rb-blanc-casse);
  border-bottom: 1px solid var(--rb-filet);
  padding-bottom: 0.2rem;
  transition: border-color 0.4s ease;
}
.rb-contact__mail:hover { border-bottom-color: var(--rb-laiton); }

/* Sur un fond de photos, le gris secondaire ne se lit pas : ces textes
   prennent la couleur du texte principal, qui s'inverse avec le mode. */
.rb-contact__note {
  font-size: var(--rb-t-sm);
  color: var(--rb-blanc-casse);
  margin: 1.6rem auto 0;
  max-width: 46ch;
}
.rb-contact .rb-chapeau { color: var(--rb-blanc-casse); }

/* --- Bandes de collection.
       Fenetres pleine largeur empilees, dont le fond reste fixe pendant que
       la page defile. Le titre est centre, en blanc casse, sur un voile
       sombre permanent. --- */
.rb-bandes { display: block; }

.rb-bande {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44vh;
  padding: var(--rb-esp-3);
  overflow: hidden;
  background-image: var(--rb-bande-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #EFE9DE;
  text-align: center;
}
.rb-bande + .rb-bande { border-top: 2px solid var(--rb-encre); }

.rb-bande::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 13, 0.58);
  transition: background-color 0.6s ease;
}
.rb-bande:hover::after,
.rb-bande:focus-visible::after { background: rgba(18, 16, 13, 0.42); }

.rb-bande__contenu { position: relative; z-index: 1; }

body.rb-site .rb-bande h1,
body.rb-site .rb-bande h2 {
  color: #EFE9DE;
  font-size: clamp(2rem, 5vw, 3.4rem);
  transition: letter-spacing 0.6s var(--rb-courbe);
}
.rb-bande:hover h2,
.rb-bande:focus-visible h2 { letter-spacing: 0.04em; }
.rb-bande--entete h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }

.rb-bande__note {
  font-size: var(--rb-t-sm);
  color: #CFC6B8;
  margin: 0.8rem 0 0;
  max-width: none;
}

/* Variante d'en-tete, en tete de page de collection : plus basse, et sans
   fond fixe, un parallaxe en haut de page n'apportant rien. */
.rb-bande--entete {
  min-height: 34vh;
  background-attachment: scroll;
  padding-top: calc(var(--rb-esp-4) + 2.5rem);
}
.rb-bande--entete:hover::after { background: rgba(18, 16, 13, 0.58); }
.rb-bande--entete:hover h2 { letter-spacing: normal; }

/* --- Cartes de prestation.
       Seuls blocs clairs du site : le contraste inverse en fait des zones
       d'action evidentes au milieu du fond sombre. --- */
.rb-cartes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.rb-carte {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  /* Couleur fixe et non liee aux jetons : la carte est toujours posee sur
     un voile sombre, son texte ne doit pas suivre le mode clair. */
  color: #EFE9DE;
  background-color: var(--rb-surface);
  background-image: var(--rb-carte-image);
  background-size: cover;
  background-position: center;
  transition: transform 0.45s var(--rb-courbe);
}

/* Seconde image du meme shooting, revelee au survol par-dessus la premiere.
   Les deux sont en fond CSS et non en balise img : elles n'apparaissent pas
   au clic droit et ne peuvent pas etre enregistrees directement. */
.rb-carte::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--rb-carte-image-survol);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* Voile sombre permanent : sans lui le blanc casse ne tient sur aucune photo. */
.rb-carte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 13, 0.60);
  transition: background-color 0.5s ease;
}

.rb-carte:hover,
.rb-carte:focus-visible { transform: translateY(-6px); }
.rb-carte:hover::before,
.rb-carte:focus-visible::before { opacity: 1; }
.rb-carte:hover::after,
.rb-carte:focus-visible::after { background: rgba(18, 16, 13, 0.68); }

/* Au repos le titre occupe le centre. Au survol il remonte dans le coin et
   le texte se deplie dessous. L'animation va de 50 % a 0 : interpoler un
   pourcentage vers une longueur en rem n'est pas fiable selon les moteurs,
   la marge interieure est donc portee par le bloc lui-meme. */
/* Le bloc ne gere que le deplacement vertical.
   Le centrage horizontal n'est PAS fait par text-align : cette propriete
   n'est pas animable, elle basculait donc d'un coup et le retour ne
   miroitait pas l'aller. Chaque element est centre par left: 50 % combine
   a un translateX de -50 % de sa propre largeur, deux valeurs qui
   s'animent, dans un sens comme dans l'autre. */
.rb-carte__contenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  padding: 1.6rem;
  transform: translateY(-50%);
  text-align: left;
  z-index: 1;
  transition: top 0.55s var(--rb-courbe), transform 0.55s var(--rb-courbe);
}
.rb-carte:hover .rb-carte__contenu,
.rb-carte:focus-visible .rb-carte__contenu {
  top: 0;
  transform: translateY(0);
}

body.rb-site .rb-carte h2,
body.rb-site .rb-carte h3 {
  position: relative;
  width: fit-content;
  left: 50%;
  color: #EFE9DE;
  font-size: 2.4rem;
  transform: translateX(-50%);
  transition: left 0.55s var(--rb-courbe), transform 0.55s var(--rb-courbe),
              font-size 0.55s var(--rb-courbe);
}
body.rb-site .rb-carte:hover h2,
body.rb-site .rb-carte:focus-visible h2 {
  left: 0;
  transform: translateX(0);
  font-size: 1.5rem;
}

.rb-carte__texte {
  position: relative;
  width: fit-content;
  left: 50%;
  font-size: var(--rb-t-sm);
  color: #CFC6B8;
  margin: 0.8rem 0 0;
  max-width: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition: left 0.55s var(--rb-courbe), transform 0.55s var(--rb-courbe),
              opacity 0.4s ease;
}
.rb-carte:hover .rb-carte__texte,
.rb-carte:focus-visible .rb-carte__texte {
  left: 0;
  opacity: 1;
  transform: translateX(0) translateY(0);
  transition-delay: 0s, 0s, 0.2s;
}

/* --- Niveaux d'offre, sur les pages de prestation --- */
.rb-niveaux {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: start;
}
.rb-niveau {
  border: 1px solid var(--rb-filet);
  border-radius: 10px;
  padding: 1.8rem 1.6rem;
  transition: border-color 0.4s ease;
}
.rb-niveau:hover { border-color: var(--rb-sourdine); }
.rb-niveau__nom { font-family: var(--rb-serif); font-size: var(--rb-t-md); margin: 0; }
.rb-niveau__resume { font-size: var(--rb-t-sm); color: var(--rb-grege); margin: 0.6rem 0 1.4rem; }
.rb-niveau ul { list-style: none; margin: 0; padding: 0; }
.rb-niveau li {
  font-size: var(--rb-t-sm);
  color: var(--rb-grege);
  padding: 0.65rem 0;
  border-top: 1px solid var(--rb-filet);
}

/* --- Filtres du portfolio --- */
.rb-filtres { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.rb-filtre {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 4px;
  font-family: var(--rb-sans);
  font-size: var(--rb-t-sm);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--rb-grege);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.rb-filtre:hover { color: var(--rb-blanc-casse); }
.rb-filtre[aria-pressed="true"] { color: var(--rb-blanc-casse); border-bottom-color: var(--rb-laiton); }

/* --- Grille de portfolio, rythme asymetrique --- */
.rb-vignette {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--rb-surface);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.rb-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rb-courbe), filter 0.6s ease; filter: brightness(0.82); }
.rb-vignette:hover img { transform: scale(1.04); filter: brightness(1); }

.rb-vignette__lieu {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  font-size: var(--rb-t-xs);
  letter-spacing: 0.08em;
  color: var(--rb-blanc-casse);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s var(--rb-courbe);
  pointer-events: none;
}
.rb-vignette:hover .rb-vignette__lieu,
.rb-vignette:focus-visible .rb-vignette__lieu { opacity: 1; transform: none; }

/* Vignette masquee par un filtre. */
.rb-vignette[hidden] { display: none; }

/* --- Visionneuse plein ecran --- */
.rb-visionneuse {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 9, 7, 0.97);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.rb-visionneuse[open], .rb-visionneuse.rb-ouverte { display: flex; }
.rb-visionneuse img { max-width: 92vw; max-height: 82vh; object-fit: contain; }
.rb-visionneuse__barre {
  position: absolute;
  left: 0; right: 0; bottom: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: var(--rb-t-xs);
  color: var(--rb-grege);
}
.rb-visionneuse__btn {
  background: none;
  border: 1px solid var(--rb-filet);
  color: var(--rb-grege);
  width: 42px; height: 42px;
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.rb-visionneuse__btn:hover { color: var(--rb-blanc-casse); border-color: var(--rb-sourdine); }
.rb-visionneuse__fermer { position: absolute; top: 1.6rem; right: 1.6rem; }

/* --- Bandeau de contact --- */
.rb-bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-esp-3);
  flex-wrap: wrap;
  padding: var(--rb-esp-4) var(--rb-esp-3);
  background: var(--rb-surface);
}

/* ==========================================================================
   4. Adaptation aux ecrans
   ========================================================================== */

/* Quatre cartes en ligne demandent de la largeur. En dessous, elles passent
   en deux par deux. Pour les figer en deux par deux quel que soit l'ecran,
   mettre repeat(2, 1fr) dans .rb-cartes plus haut et supprimer ce bloc. */
@media (max-width: 1100px) {
  .rb-cartes { grid-template-columns: repeat(2, 1fr); }
  .rb-niveaux { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --rb-esp-4: 3rem; --rb-esp-5: 4rem; }

  .rb-entete { padding: 1.1rem 1.4rem; }
  .rb-entete.rb-defile { padding: 0.7rem 1.4rem; }
  /* Au-dessus du panneau plein ecran : devenu une croix, il le referme. */
  .rb-burger { display: block; position: relative; z-index: 2; }

  /* Le menu devient un panneau plein ecran, ouvert par le burger. */
  .rb-menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: var(--rb-encre);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s;
  }
  body.rb-menu-ouvert .rb-menu { opacity: 1; visibility: visible; }
  .rb-menu a { font-family: var(--rb-serif); font-size: var(--rb-t-md); color: var(--rb-blanc-casse); }

  .rb-pied { padding-left: 1.4rem; padding-right: 1.4rem; }
  .rb-pied__colonnes { grid-template-columns: 1fr; gap: var(--rb-esp-2); }
  .rb-hero { min-height: 78vh; padding-left: 1.4rem; padding-right: 1.4rem; }
  /* Sur un ecran etroit, la photo passerait sous le texte : on la retire. */
  .rb-hero__photo { display: none; }
  .rb-carte__contenu { padding: 1.4rem; }
  .rb-section, .rb-section--serre { padding-left: 1.4rem; padding-right: 1.4rem; }
  .rb-hero__titre { max-width: 100%; }

  .rb-prestation { flex-direction: column; gap: 0.3rem; }
  .rb-prestation__note { text-align: left; }
  .rb-prestation:hover { padding-left: 0; }


  .rb-apercu { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 62vw; gap: 2px; }
  .rb-colonnes { columns: 2; }
  .rb-cartes { grid-template-columns: 1fr; gap: 0.8rem; }
  /* iOS ignore background-attachment: fixed et zoome l'image de facon
     imprevisible. Sur petit ecran, le fond defile donc avec la page. */
  .rb-bande { background-attachment: scroll; min-height: 34vh; }
  .rb-bande--entete { min-height: 30vh; }
  .rb-carte { aspect-ratio: 4 / 3; }
  .rb-double { grid-template-columns: 1fr; gap: var(--rb-esp-2); }
  .rb-double--media-gauche .rb-double__media { order: 0; }
  .rb-etape { gap: 1rem; }
  .rb-etape__num { min-width: 2.2rem; }
  .rb-page-entete { padding-left: 1.4rem; padding-right: 1.4rem; }
  .rb-apercu > * { grid-column: auto !important; grid-row: auto !important; }

  .rb-filtres { gap: 1rem; }
  .rb-visionneuse { padding: 1rem; }
  .rb-bandeau { padding-left: 1.4rem; padding-right: 1.4rem; }
}

/* ==========================================================================
   5. Mouvement reduit
   Respecte le reglage systeme des personnes sensibles au mouvement.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .rb-hero__lueur { transition: none; }
  .rb-carte, .rb-carte::before, .rb-carte::after { transition: none; }
  .rb-bande { background-attachment: scroll; }
  .rb-contact__photo { animation: none; }
  .rb-bascule svg { transition: opacity 0.2s ease; transform: none; }
  .rb-carte::before { transform: none; }
  .rb-ligne > span,
  .rb-fondu,
  .rb-apparait { transition: none; }
  .rb-ligne > span { transform: none; }
  .rb-fondu, .rb-apparait { opacity: 1; transform: none; }
}


/* ==========================================================================
   Polices hebergees sur le site
   Fichiers dans assets/fonts, licence SIL Open Font License 1.1 (fichiers
   OFL a cote). Remplacent Google Fonts : aucune adresse IP de visiteur
   n'est transmise a un service exterieur.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   Pages juridiques : CGV, mentions legales, confidentialite
   Une colonne de lecture etroite, sans effet : le texte d'abord.
   ========================================================================== */

.rb-juridique {
  max-width: calc(46rem + 2 * var(--rb-esp-3));
  margin: 0;
  padding: 0 var(--rb-esp-3) var(--rb-esp-5);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--rb-grege);
}
.rb-juridique p,
.rb-juridique ul { margin: 0 0 1rem; }
body.rb-site .rb-juridique p { max-width: none; }
.rb-juridique ul { padding-left: 1.2rem; }
.rb-juridique li { margin-bottom: 0.35rem; }
.rb-juridique strong { color: var(--rb-blanc-casse); font-weight: 500; }
.rb-juridique a { color: var(--rb-blanc-casse); text-decoration: underline; text-underline-offset: 3px; }
body.rb-site .rb-juridique h2 {
  font-size: var(--rb-t-md);
  margin: 3rem 0 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rb-filet);
}
.rb-juridique table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rb-t-sm);
  line-height: 1.55;
  margin: 1rem 0 1.5rem;
}
.rb-juridique th,
.rb-juridique td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.8rem 0.7rem 0;
  border-bottom: 1px solid var(--rb-filet);
}
.rb-juridique th { color: var(--rb-blanc-casse); font-weight: 500; }

.rb-bandeau-provisoire {
  border: 1px solid var(--rb-sourdine);
  background: var(--rb-surface);
  padding: 1rem 1.2rem;
  margin: 0 0 2rem;
  font-size: var(--rb-t-sm);
}
.rb-bandeau-provisoire p { margin: 0; }

.rb-mention a { color: inherit; }
.rb-mention a:hover { color: var(--rb-blanc-casse); }

@media (max-width: 767px) {
  .rb-juridique { padding-left: 1.4rem; padding-right: 1.4rem; }
  .rb-juridique table { display: block; overflow-x: auto; }
}