/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  expressive.css
   Depend de : theme.css

   Les mises en page qui sortent de la grille sage. C'est le poste qui distingue
   une page faite par une agence d'une page faite par un gabarit.

   Regles tenues partout dans ce fichier :
   1. On ne casse la grille qu'apres l'avoir posee. Une asymetrie n'existe que
      par rapport a une regularite : sans grille de reference, c'est du desordre.
   2. Un seul geste fort par page. Deux debordements concurrents s'annulent.
   3. Tout revient a une colonne sous 700 px : l'expressivite est un luxe de
      grand ecran, jamais au prix de la lisibilite sur telephone.
   ========================================================================= */

/* ===========================================================================
   FAMILLE A  -  GRILLES ROMPUES
   ======================================================================== */

/* @v EXP-A1
@nom Grille asymetrique
@usage Douze colonnes, mais des blocs qui n'en occupent jamais le meme nombre. Le desequilibre est calcule : 7 / 5, puis 4 / 8, puis 6 / 6 decale.
@large
@html
<div class="ex-asym">
  <div class="ex-b" style="--c:7;--t:#2b3a55"><b>Etude thermique</b><span>7 colonnes</span></div>
  <div class="ex-b" style="--c:5;--t:#5a4a6b"><b>Devis</b><span>5</span></div>
  <div class="ex-b" style="--c:4;--t:#8a5a4a"><b>Aides</b><span>4</span></div>
  <div class="ex-b" style="--c:8;--t:#2f5a45"><b>Pose par nos equipes salariees</b><span>8 colonnes</span></div>
  <div class="ex-b ex-b--dec" style="--c:6;--t:#3f5a7a"><b>Mise en service</b><span>6, decale d'une colonne</span></div>
  <div class="ex-b" style="--c:5;--t:#6b4a2a"><b>Garantie</b><span>5</span></div>
</div>
@tw grid-cols-12 avec des col-span differents a chaque ligne
@end */
.ex-asym { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-3); }
.ex-b {
  grid-column: span var(--c);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 108px;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--t);
  color: #fff;
}
.ex-b--dec { grid-column: 2 / span var(--c); }   /* raccourci complet : sinon le span est perdu */
.ex-b b { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.15; }
.ex-b span { margin-top: 4px; font-size: var(--fs-xs); opacity: .68; }
@media (max-width: 700px) { .ex-asym > * { grid-column: span 12 !important; grid-column-start: auto !important; } }
/* @endv */

/* @v EXP-A2
@nom Debordement volontaire
@usage Un element sort de la colonne de texte et va jusqu'au bord de l'ecran. Utilise une fois dans un article, il marque un changement de registre mieux qu'un intertitre.
@large
@html
<div class="ex-deborde">
  <p>Le remplacement d'une chaudiere fioul par une pompe a chaleur reste l'operation la plus subventionnee du parc residentiel francais.</p>
  <figure class="ex-plein"><div class="ex-plein__img"></div><figcaption>Maison de 112 m2 a Neuilly-sur-Marne, chantier d'aout 2026</figcaption></figure>
  <p>Le montant de MaPrimeRenov depend du revenu fiscal de reference du foyer et de la zone climatique du logement, ce qui explique des ecarts importants d'un dossier a l'autre.</p>
</div>
@tw w-screen relative left-1/2 -translate-x-1/2 sur un enfant de conteneur etroit
@end */
.ex-deborde { max-width: 62ch; margin: 0 auto; overflow-x: clip; }
.ex-deborde p { margin: 0 0 var(--sp-5); font-size: var(--fs-lg); line-height: 1.7; color: var(--c-text-soft); }
.ex-plein {
  margin: 0 0 var(--sp-5);
  /* Sort de la colonne de texte sans dependre de la largeur de la fenetre :
     100cqw quand un conteneur est declare, sinon un debordement calcule. */
  width: calc(100% + var(--sp-12));
  margin-left: calc(var(--sp-12) / -2);
}
.ex-plein__img {
  aspect-ratio: 21 / 9;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, #3f5a7a, #8a6a4a 55%, #c9a06a);
}
.ex-plein figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; }
@media (max-width: 700px) { .ex-plein { width: 100%; margin-left: 0; } }
/* @endv */

/* @v EXP-A3
@nom Superposition
@usage Deux blocs qui se chevauchent au lieu de se suivre. Le recouvrement cree une profondeur qu'aucune ombre ne remplace, et economise de la hauteur.
@large
@html
<div class="ex-superpose">
  <div class="ex-superpose__img"></div>
  <div class="ex-superpose__carte">
    <b>1 240 installations</b>
    <p>depuis 2009 en Ile-de-France, par nos propres equipes, avec une note moyenne de 4,8 sur 312 avis.</p>
    <button class="btn btn--plein">Voir nos realisations</button>
  </div>
</div>
@tw grid-areas superposees, la carte demarre avant la fin de l'image
@end */
.ex-superpose { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.ex-superpose__img {
  grid-area: 1 / 1 / 2 / 2;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, #2b3a55, #5a4a6b 55%, #8a5a4a);
}
.ex-superpose__carte {
  grid-area: 1 / 1 / 2 / 3;
  justify-self: end;
  width: 62%;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-4);
  z-index: 1;
}
.ex-superpose__carte b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.ex-superpose__carte p { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-md); line-height: 1.6; color: var(--c-text-soft); }
@media (max-width: 700px) {
  .ex-superpose { grid-template-columns: 1fr; }
  .ex-superpose__img { grid-area: auto; }
  .ex-superpose__carte { grid-area: auto; width: 90%; justify-self: center; margin-top: -40px; }
}
/* @endv */

/* @v EXP-A4
@nom Bento
@usage Une grille de tuiles de tailles inegales. Le piege est d'en faire un damier : il faut une tuile nettement dominante, sinon toutes se valent et aucune ne porte le message.
@large
@html
<div class="ex-bento">
  <div class="ex-t ex-t--maitre" style="--t:#1f3350"><b>Pompe a chaleur</b><span>Air/eau, air/air, de 6 a 16 kW</span></div>
  <div class="ex-t" style="--t:#2f5a45"><b>Isolation</b><span>Combles, murs</span></div>
  <div class="ex-t" style="--t:#6b4a2a"><b>Chauffe-eau</b><span>Thermodynamique</span></div>
  <div class="ex-t ex-t--large" style="--t:#4a3560"><b>Entretien annuel</b><span>Contrat avec rappel automatique et rapport apres visite</span></div>
  <div class="ex-t" style="--t:#7a3f4a"><b>Depannage</b><span>Sous 2 h</span></div>
</div>
@tw grid-cols-4 grid-rows-2 avec une tuile en col-span-2 row-span-2
@end */
.ex-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 118px; gap: var(--sp-3); }
.ex-t {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--t);
  color: #fff;
  overflow: hidden;
}
.ex-t--maitre { grid-column: span 2; grid-row: span 2; }
.ex-t--large  { grid-column: span 2; }
.ex-t b { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.15; }
.ex-t--maitre b { font-size: 26px; letter-spacing: -.02em; }
.ex-t span { margin-top: 4px; font-size: var(--fs-xs); opacity: .72; line-height: 1.4; }
@media (max-width: 700px) {
  .ex-bento { grid-template-columns: repeat(2, 1fr); }
  .ex-t--maitre { grid-column: span 2; grid-row: span 1; min-height: 150px; }
}
/* @endv */

/* @v EXP-A5
@nom Ecran partage
@usage Deux moities autonomes, chacune avec son fond. Sert d'ouverture quand deux publics coexistent : le particulier et le professionnel, l'achat et la location.
@large
@html
<div class="ex-partage">
  <div class="ex-partage__c" style="--t:#1f3350">
    <b>Particuliers</b>
    <p>Remplacement de chaudiere, pompe a chaleur, isolation. Aides deduites du devis.</p>
    <span class="btn btn--lg-verre">Demander un devis</span>
  </div>
  <div class="ex-partage__c" style="--t:#6b4a2a">
    <b>Professionnels</b>
    <p>Contrats d'entretien de parc, interventions programmees, facturation mensuelle.</p>
    <span class="btn btn--lg-verre">Nous contacter</span>
  </div>
</div>
@tw grid grid-cols-2 min-h-[420px] max-md:grid-cols-1
@end */
.ex-partage { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); overflow: hidden; }
.ex-partage__c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  align-items: flex-start;
  min-height: 240px;
  padding: var(--sp-8);
  background: var(--t);
  color: #fff;
  transition: flex var(--t-slow);
}
.ex-partage__c b { font-size: clamp(22px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.ex-partage__c p { margin: 0; font-size: var(--fs-md); line-height: 1.6; opacity: .82; max-width: 34ch; }
@media (max-width: 700px) { .ex-partage { grid-template-columns: 1fr; } }
/* @endv */

/* ===========================================================================
   FAMILLE B  -  MISE EN SCENE
   ======================================================================== */

/* @v EXP-B1
@nom Cartes empilees au defilement
@usage Les cartes se collent les unes sur les autres en descendant. Chacune reste partiellement visible, ce qui donne le compte sans barre de progression.
@large
@html
<div class="mv-scene mv-scene--haute" data-mv-scene>
  <p class="mv-indice">Faites defiler</p>
  <div class="mv-piste">
    <div class="ex-pile">
      <div style="--i:0;--t:#1f3350"><b>01</b><strong>Visite technique</strong></div>
      <div style="--i:1;--t:#2f5a45"><b>02</b><strong>Devis et aides</strong></div>
      <div style="--i:2;--t:#6b4a2a"><b>03</b><strong>Pose</strong></div>
      <div style="--i:3;--t:#4a3560"><b>04</b><strong>Mise en service</strong></div>
    </div>
  </div>
</div>
@tw sticky top-[calc(var(--i)*14px)] avec un decalage croissant
@end */
.ex-pile > div {
  position: sticky;
  top: calc(var(--i) * 16px);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 120px;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--t);
  color: #fff;
  box-shadow: 0 -6px 24px rgba(0,0,0,.2);
}
.ex-pile > div + div { margin-top: var(--sp-4); }
.ex-pile b { font-family: var(--font-mono); font-size: var(--fs-sm); opacity: .55; }
.ex-pile strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
/* @endv */

/* @v EXP-B2
@nom Comparateur avant / apres
@usage Le curseur revele l'une ou l'autre image. Plus convaincant que deux vignettes cote a cote, parce que le regard reste au meme endroit.
@large
@html
<div class="ex-compare" data-ex-compare>
  <div class="ex-compare__apres"><span>Apres</span></div>
  <div class="ex-compare__avant" style="--x:52%"><span>Avant</span></div>
  <div class="ex-compare__poignee" style="--x:52%"><i></i></div>
  <input type="range" min="0" max="100" value="52" aria-label="Comparer avant et apres">
</div>
@tw clip-path: inset(0 calc(100% - var(--x)) 0 0) pilote par un input range
@end */
.ex-compare { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; }
.ex-compare__apres, .ex-compare__avant { position: absolute; inset: 0; display: grid; place-items: end start; padding: var(--sp-4); }
.ex-compare__apres { background: linear-gradient(140deg, #2f5a45, #7aa88a 60%, #c9ddc4); }
.ex-compare__avant {
  background: linear-gradient(140deg, #4a4038, #7a6a5a 60%, #b0a495);
  clip-path: inset(0 calc(100% - var(--x)) 0 0);
}
.ex-compare span {
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: rgba(10,12,18,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.ex-compare__apres span { justify-self: end; }
.ex-compare__poignee { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #fff; pointer-events: none; }
.ex-compare__poignee i {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.ex-compare__poignee i::before, .ex-compare__poignee i::after {
  content: "";
  position: absolute;
  top: 50%; margin-top: -4px;
  border: 4px solid transparent;
}
.ex-compare__poignee i::before { left: 7px; border-right-color: #333; }
.ex-compare__poignee i::after  { right: 7px; border-left-color: #333; }
.ex-compare input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
/* @endv */

/* @v EXP-B3
@nom Galerie en desordre controle
@usage Des vignettes legerement pivotees et decalees, comme des tirages poses sur une table. Le desordre est regle au degre pres, jamais aleatoire a l'affichage.
@large
@html
<div class="ex-desordre">
  <figure style="--r:-3deg;--y:8px"><div style="--t:linear-gradient(140deg,#4a6fa5,#c9d9e8)"></div><figcaption>Facade</figcaption></figure>
  <figure style="--r:2deg;--y:-10px"><div style="--t:linear-gradient(140deg,#a8643c,#f0d9b5)"></div><figcaption>Combles</figcaption></figure>
  <figure style="--r:-1.5deg;--y:14px"><div style="--t:linear-gradient(140deg,#3d6b4f,#c3ddc9)"></div><figcaption>Local technique</figcaption></figure>
  <figure style="--r:3.5deg;--y:-4px"><div style="--t:linear-gradient(140deg,#6b4a72,#ddc9dc)"></div><figcaption>Unite exterieure</figcaption></figure>
</div>
@tw rotate-[var(--r)] translate-y-[var(--y)] hover:rotate-0 hover:scale-105
@end */
.ex-desordre { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); padding: var(--sp-5) 0; }
.ex-desordre figure {
  margin: 0;
  width: 170px;
  padding: 9px 9px 0;
  background: var(--c-surface);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  transform: rotate(var(--r)) translateY(var(--y));
  transition: transform var(--t-spring), box-shadow var(--t-base);
}
.ex-desordre figure:hover { transform: rotate(0) translateY(-6px) scale(1.04); box-shadow: var(--sh-4); z-index: 2; }
.ex-desordre div { aspect-ratio: 1; border-radius: 2px; background: var(--t); }
.ex-desordre figcaption { padding: 9px 2px; font-size: var(--fs-xs); color: var(--c-text-soft); text-align: center; }
/* @endv */

/* @v EXP-B4
@nom Section en diagonale
@usage Une bande inclinee qui traverse la page. Le contenu, lui, reste droit : c'est le fond qui penche, jamais le texte.
@large
@html
<div class="ex-diag">
  <div class="ex-diag__fond" aria-hidden="true"></div>
  <div class="ex-diag__contenu">
    <b>Intervention sous 2 heures</b>
    <p>Depannage 7 jours sur 7 en Seine-Saint-Denis, Val-de-Marne et est parisien.</p>
  </div>
</div>
@tw le fond en skew-y-[-3deg] scale-110, le contenu remis droit
@end */
.ex-diag { position: relative; isolation: isolate; overflow: hidden; padding: var(--sp-10) var(--sp-6); border-radius: var(--r-lg); }
.ex-diag__fond {
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background: linear-gradient(110deg, #1f3350 0 46%, #2f5a45 46% 100%);
  transform: skewY(-4deg);
}
.ex-diag__contenu { color: #fff; text-align: center; }
.ex-diag__contenu b { display: block; font-size: clamp(22px, 3.6vw, 36px); font-weight: 800; letter-spacing: -.03em; }
.ex-diag__contenu p { margin: var(--sp-2) auto 0; max-width: 44ch; font-size: var(--fs-md); opacity: .82; }
/* @endv */

/* @v EXP-B5
@nom Fond fixe au defilement
@usage Le texte glisse par-dessus une image qui reste immobile. Effet ancien mais qui tient, a condition de ne l'employer qu'une fois et de garder le voile suffisant.
@large
@html
<div class="mv-scene mv-scene--haute" data-mv-scene>
  <p class="mv-indice">Faites defiler</p>
  <div class="mv-piste">
    <p class="mv-note">Le bloc suivant garde son fond immobile.</p>
    <div class="ex-fixe">
      <div class="ex-fixe__contenu"><b>Depuis 2009</b><p>1 240 installations en Ile-de-France</p></div>
    </div>
    <p class="mv-note">Et la page reprend son cours.</p>
  </div>
</div>
@tw bg-fixed avec un voile suffisant pour garder le texte lisible
@end */
.ex-fixe {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  background-image:
    linear-gradient(rgba(10,14,22,.62), rgba(10,14,22,.62)),
    radial-gradient(circle at 25% 30%, #4a6fa5 0 24%, transparent 58%),
    radial-gradient(circle at 78% 65%, #a8643c 0 22%, transparent 56%),
    linear-gradient(150deg, #223047, #4a5b73);
  background-attachment: fixed, fixed, fixed, fixed;
  background-size: cover;
}
/* Le fond fixe est ignore sur iOS : le repli defile normalement. */
@supports (-webkit-touch-callout: none) { .ex-fixe { background-attachment: scroll; } }
.ex-fixe__contenu { text-align: center; color: #fff; }
.ex-fixe__contenu b { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.035em; }
.ex-fixe__contenu p { margin: 6px 0 0; font-size: var(--fs-md); opacity: .82; }
/* @endv */