/* ============================================================================
   TDH Peinture — page « Nos réalisations »
   Styles propres a cette page uniquement (le reste vient de style.css et de
   prestations.css, partages avec les autres pages).
   ============================================================================ */

/* ============================================================
   BANDEAU D'EN-TETE « AVANT / APRES »

   Le fond ne decore pas : il montre. Une couture diagonale separe un mur
   fatigue — gris, terne, craquele — d'un mur fraichement repeint, chaud et
   eclaire. La section illustre donc son propre titre, ce qui evite un enieme
   degrade et donne au visiteur la promesse de la page avant meme les photos.

   Depuis le 5 aout 2026, ce bandeau REJOUE un chantier au lieu de le montrer
   fige. Le cycle, en 26 secondes :

     0 →  6 %   le mur nu : platre fatigue, fissures, aureoles
     6 → 26 %   la couleur balaie de gauche a droite, comme un rouleau
    26 → 58 %   le mur refait
    58 → 74 %   la peinture s'ecaille et s'envole vers le spectateur
    74 → 100 %  le mur nu — soit exactement l'image de depart

   La boucle se referme donc sur elle-meme : il n'y a aucun saut au
   rebouclage. Le retour du calque « apres » a son point de depart se fait
   pendant qu'il est a opacite zero, invisible.

   DEUX PHOTOS, pas une. Une seule image teintee des deux cotes ne pouvait pas
   marcher ici : les voiles sont translucides, le mur degrade continuait de
   transparaitre sous la couleur et le balayage ne recouvrait rien. Le fond
   porte donc la moitie GAUCHE de l'avant/apres fourni (mur degrade), et le
   calque qui balaie porte la moitie DROITE (mur refait, tasseaux, lumiere
   chaude). 6,5 et 8 ko en WebP, moitie moins en version etroite ; repli JPEG
   pour les navigateurs sans WebP.

   Rien n'est anime que « transform » et « opacity » : le compositeur s'en
   charge seul, sans repasser par la mise en page.
   ============================================================ */
.hero-ab{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* Position de la couture. Deux valeurs, car elle est diagonale :
     plus a droite en haut qu'en bas — un mur se peint rarement au cordeau.
     C'est cette diagonale qui donne au balayage son bord vivant : la couleur
     n'arrive pas au cordeau, elle arrive de biais. */
  --couture-haut:56%;
  --couture-bas:46%;
}

/* Le mur NU : c'est l'etat de repos du bandeau, celui qu'on voit au debut et
   a la fin de chaque cycle. */
.ab-fond{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
  background-image:url('img/realisations-avant.jpg');
  background-image:image-set(
    url('img/realisations-avant.webp') type('image/webp'),
    url('img/realisations-avant.jpg')  type('image/jpeg'));
  background-size:cover;
  background-position:center;
}

/* Matière peinte générale, limitée au seul bandeau du titre. */
.hero-ab.hero-fond-general .ab-fond{
  background-image:url('img/fond-general-peinture.png');
  background-size:cover;
  background-position:center;
}
.hero-ab.hero-fond-general .ab-fond > *{
  display:none;
}

/* --- Cote AVANT : voile froid sur toute la photo -------------------------- */
/* Le mur degrade est deja dans l'image ; ce qui reste a faire, c'est
   l'assombrir assez pour que le titre tienne dessus, et le refroidir pour que
   le contraste avec le cote repeint saute aux yeux. */
.ab-avant{
  position:absolute; inset:0;
  background:
    /* auréoles d'humidite, a peine appuyees sur celles de la photo */
    radial-gradient(ellipse 45% 55% at 18% 28%, rgba(150,158,148,0.07), transparent 62%),
    radial-gradient(ellipse 35% 40% at 32% 82%, rgba(120,126,118,0.05), transparent 66%),
    /* teinte de base : gris froid, legerement verdi — la couleur d'un mur
       qui n'a pas ete refait depuis longtemps. Translucide : la photo passe
       au travers, elle n'est pas recouverte. */
    linear-gradient(165deg,
      rgba(28,30,27,0.74) 0%, rgba(23,24,22,0.80) 55%, rgba(19,20,18,0.84) 100%);
}

/* --- Cote APRES : le mur refait, decoupe en diagonale --------------------- */
/* C'est LUI qui balaie. Il deborde de 5 % de chaque cote pour qu'aucun bord ne
   se decouvre en bout de course, et il porte sa propre photo — le mur refait —
   sous les voiles chauds. */
.ab-apres{
  position:absolute; top:0; bottom:0;
  left:-5%; right:-5%;
  background:
    /* lumiere chaude, comme une piece qui vient d'etre rouverte */
    radial-gradient(ellipse 60% 70% at 78% 30%, rgba(232,162,61,0.22), transparent 64%),
    radial-gradient(ellipse 45% 50% at 62% 88%, rgba(214,136,94,0.12), transparent 68%),
    /* voile satine du rouleau, encore frais */
    linear-gradient(112deg, transparent 42%, rgba(255,255,255,0.04) 50%, transparent 58%),
    /* Moins dense que le cote avant, et plus chaud : la photo y est plus
       claire, c'est elle qui doit porter la difference. */
    linear-gradient(155deg,
      rgba(42,30,21,0.62) 0%, rgba(36,26,18,0.68) 60%, rgba(31,22,16,0.72) 100%),
    url('img/realisations-apres.jpg');
  background-image:
    radial-gradient(ellipse 60% 70% at 78% 30%, rgba(232,162,61,0.22), transparent 64%),
    radial-gradient(ellipse 45% 50% at 62% 88%, rgba(214,136,94,0.12), transparent 68%),
    linear-gradient(112deg, transparent 42%, rgba(255,255,255,0.04) 50%, transparent 58%),
    linear-gradient(155deg,
      rgba(42,30,21,0.62) 0%, rgba(36,26,18,0.68) 60%, rgba(31,22,16,0.72) 100%),
    image-set(
      url('img/realisations-apres.webp') type('image/webp'),
      url('img/realisations-apres.jpg')  type('image/jpeg'));
  background-size:cover;
  background-position:center;
  clip-path:polygon(
    var(--couture-haut) 0,
    100% 0,
    100% 100%,
    var(--couture-bas) 100%
  );
  /* Arete de peinture fraiche : le liseré suit automatiquement la decoupe,
     drop-shadow s'appliquant a la forme et non a la boite. C'est ce liseré
     qui, pendant le balayage, se lit comme le bord humide du rouleau. */
  filter:
    drop-shadow(-1px 0 0 rgba(232,162,61,0.55))
    drop-shadow(-7px 0 20px rgba(232,162,61,0.20));
  /* Etat de repos, hors animation : la couture a sa place, comme avant. */
  transform:translateX(0);
}

/* --- Etiquettes : discretes, elles nomment ce que l'oeil comprend deja ---- */
.ab-etiquette{
  position:absolute; bottom:1.6rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.62rem; letter-spacing:0.32em; text-transform:uppercase;
  opacity:0.42;
}
.ab-etiquette-avant{ left:6vw;  color:#9AA096; }
.ab-etiquette-apres{ right:6vw; color:var(--ocre); opacity:0.5; }

/* --- Voile central : garantit la lisibilite du titre par-dessus la couture - */
.hero-ab::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Un peu plus dense depuis que le fond est une photo : le titre se pose sur
     un mur clair, il lui faut de quoi s'en detacher. */
  background:radial-gradient(ellipse 68% 62% at 50% 52%, rgba(15,13,11,0.66), transparent 72%);
}

/* Le contenu repasse au-dessus du fond et du voile. */
.hero-ab > *:not(.ab-fond){ position:relative; z-index:2; }

/* --- Les ecailles de peinture -------------------------------------------- */
/* Elles ne servent qu'a la phase d'ecaillage : hors de cette fenetre elles
   sont a opacite zero, donc absentes de l'image.
   « transform-box: fill-box » n'est pas un detail : sans lui, l'origine des
   transformations d'un element SVG est le coin (0,0) du dessin, et chaque
   ecaille partirait en tournant autour de ce point au lieu de pivoter sur
   elle-meme. */
.ab-ecailles{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
}
.ab-ecaille{
  fill:#C9BCA6;
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
}

/* --- Le cycle ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  .ab-apres    { animation:ab-balayage 26s ease-in-out infinite; }
  .ab-ecaille-g1{ animation:ab-ecaille-1 26s ease-out infinite; }
  .ab-ecaille-g2{ animation:ab-ecaille-2 26s ease-out infinite; }
  .ab-ecaille-g3{ animation:ab-ecaille-3 26s ease-out infinite; }
  .ab-etiquette-avant{ animation:ab-libelle-avant 26s ease-in-out infinite; }
  .ab-etiquette-apres{ animation:ab-libelle-apres 26s ease-in-out infinite; }
}

/* Le calque « apres » entre par la droite, couvre, puis s'efface.
   Il revient a son point de depart a 74,01 % — pendant qu'il est invisible.
   C'est ce qui permet a la boucle de se refermer sans le moindre saut. */
@keyframes ab-balayage{
  0%, 6%     { transform:translateX(50%);  opacity:1; }
  26%, 58%   { transform:translateX(-55%); opacity:1; }
  74%        { transform:translateX(-55%); opacity:0; }
  74.01%     { transform:translateX(50%);  opacity:0; }
  80%, 100%  { transform:translateX(50%);  opacity:1; }
}

/* Trois groupes, decales de trois points de cycle : les ecailles ne se
   detachent pas toutes au meme instant. Chacune porte sa propre trajectoire
   (--dx, --dy), sa rotation et son grossissement — elles viennent vers le
   spectateur, donc elles grossissent en s'eloignant du mur. */
@keyframes ab-ecaille-1{
  0%, 57%   { opacity:0; transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  60%       { opacity:0.9; transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  76%, 100% { opacity:0; transform:translate3d(var(--dx),var(--dy),0) scale(var(--ech)) rotate(var(--rot)); }
}
@keyframes ab-ecaille-2{
  0%, 60%   { opacity:0; transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  63%       { opacity:0.9; transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  79%, 100% { opacity:0; transform:translate3d(var(--dx),var(--dy),0) scale(var(--ech)) rotate(var(--rot)); }
}
@keyframes ab-ecaille-3{
  0%, 63%   { opacity:0; transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  66%       { opacity:0.9; transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  82%, 100% { opacity:0; transform:translate3d(var(--dx),var(--dy),0) scale(var(--ech)) rotate(var(--rot)); }
}

/* Les deux libelles suivent la phase au lieu de nommer deux moities : le
   bandeau ne montre plus un avant ET un apres cote a cote, il montre l'un
   PUIS l'autre. Les laisser allumes tous les deux aurait annonce, la moitie
   du temps, l'inverse de ce qu'on voit. */
@keyframes ab-libelle-avant{
  0%, 8%    { opacity:0.42; }
  20%, 66%  { opacity:0; }
  80%, 100% { opacity:0.42; }
}
@keyframes ab-libelle-apres{
  0%, 20%   { opacity:0; }
  32%, 58%  { opacity:0.5; }
  70%, 100% { opacity:0; }
}

/* --- Ecrans etroits ------------------------------------------------------- */
/* La diagonale se redresse : sur un telephone, une pente trop marquee ferait
   passer la couture derriere le titre au lieu de le longer. */
@media (max-width:760px){
  .hero-ab{
    --couture-haut:62%;
    --couture-bas:56%;
  }
  /* Versions etroites des deux photos : 3 ko chacune au lieu de 6,5 et 8,
     pour un cadre ou la pleine largeur ne se verrait de toute facon pas. */
  .ab-fond{
    background-image:url('img/realisations-avant-660.jpg');
    background-image:image-set(
      url('img/realisations-avant-660.webp') type('image/webp'),
      url('img/realisations-avant-660.jpg')  type('image/jpeg'));
  }
  .ab-apres{
    background-image:
      radial-gradient(ellipse 60% 70% at 78% 30%, rgba(232,162,61,0.22), transparent 64%),
      radial-gradient(ellipse 45% 50% at 62% 88%, rgba(214,136,94,0.12), transparent 68%),
      linear-gradient(112deg, transparent 42%, rgba(255,255,255,0.04) 50%, transparent 58%),
      linear-gradient(155deg,
        rgba(42,30,21,0.62) 0%, rgba(36,26,18,0.68) 60%, rgba(31,22,16,0.72) 100%),
      image-set(
        url('img/realisations-apres-660.webp') type('image/webp'),
        url('img/realisations-apres-660.jpg')  type('image/jpeg'));
  }
  /* Les ecailles tombent : dix-huit formes animees pour des details de vingt
     pixels sur un ecran de telephone, c'est une couche de composition
     permanente que personne ne regarde. Le balayage, lui, reste — c'est lui
     qui raconte le chantier. */
  .ab-ecailles{ display:none; }
  .ab-apres{ animation-duration:34s; }
  .ab-etiquette-avant,
  .ab-etiquette-apres{ animation-duration:34s; }
  .ab-etiquette{ bottom:1.1rem; font-size:0.56rem; letter-spacing:0.24em; }
  .ab-etiquette-avant{ left:5vw; }
  .ab-etiquette-apres{ right:5vw; }
}

/* --- Mouvement refuse -----------------------------------------------------
   On revient a l'image FIXE d'avant : le mur refait occupe sa moitie droite,
   le mur nu sa moitie gauche, et les deux libelles nomment chacun son cote.
   C'est le meme bandeau, simplement arrete sur une composition qui se tient
   toute seule — plutot qu'un mur nu sans explication. */
@media (prefers-reduced-motion: reduce){
  .ab-apres{
    animation:none;
    transform:translateX(0);
    opacity:1;
  }
  .ab-ecailles{ display:none; }
  .ab-etiquette-avant{ animation:none; opacity:0.42; }
  .ab-etiquette-apres{ animation:none; opacity:0.5; }
}

/* ===========================================================================
   Filtres, recherche et pagination — version 10, §7.1
   ===========================================================================
   Les filtres sont des LIENS, pas des boutons : chaque combinaison est une URL
   partageable, et la page fonctionne sans JavaScript. C'est ce qui a fait
   remplacer les anciens boutons .filter, qui masquaient des cartes deja
   presentes et ne pouvaient etre ni partages, ni pagines.
   =========================================================================== */

.rl-recherche { max-width: 720px; margin: 0 auto 2rem; }
.rl-recherche label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.rl-recherche-champ { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rl-recherche input[type='search'] {
  flex: 1 1 260px;
  min-width: 0;
  padding: 0.85rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}
.rl-recherche input[type='search']:focus-visible {
  outline: 2px solid var(--ocre);
  outline-offset: 1px;
  border-color: var(--ocre);
}

.rl-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.5rem;
  justify-content: center;
  margin: 0 auto 2.5rem;
  max-width: 1000px;
}
.rl-groupe { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rl-groupe legend {
  float: left;
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0;
  margin-bottom: 0.6rem;
}
.rl-filtre {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.86rem;
  transition: border-color 0.2s, color 0.2s;
}
.rl-filtre:hover, .rl-filtre:focus-visible { color: var(--ink); border-color: var(--ocre); }
.rl-filtre.is-actif { color: #1a1410; background: var(--ocre); border-color: var(--ocre); font-weight: 600; }
.rl-compte { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; opacity: 0.7; }

.rl-resume {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 1.8rem;
}

/* .ba-decouvrir a DEMENAGE dans assets/style.css.
   La carte de chantier est produite par inc/render.php et reutilisee sur les
   pages prestations, conseils, inspirations et en bas des fiches — or ces
   pages-la ne chargent pas cette feuille-ci. Le lien « Decouvrir le chantier »
   y ressortait donc dans le bleu par defaut du navigateur, et en violet une
   fois visite. Les styles d'un composant partage doivent vivre dans la seule
   feuille que toutes les pages chargent. */

.rl-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 3rem;
}
.rl-page {
  min-width: 2.6rem;
  padding: 0.55rem 0.9rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
}
.rl-page:hover, .rl-page:focus-visible { color: var(--ink); border-color: var(--ocre); }
.rl-page.is-actif { color: #1a1410; background: var(--ocre); border-color: var(--ocre); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .rl-filtre { transition: none; }
}