/* ═══════════════════════════════════════════════════════════════
   PAGES D'EXPERTISE — /savoir-faire/<slug> (gabarit ExpertisePage.astro).
   La « plaquette » du canevas Claude Design retenue le 22 oct. 2026, sans
   les références : page de niveau 3 sans couverture, en un écran collé
   depuis le 24 oct. (l'écran collé lui-même est dans expertise-defilement.css).
   · en-tête des pages de niveau 3 : même retrait du haut, fil d'Ariane,
     même écart, même titre ;
   · dessous, la présentation (texte, tuiles de clientèle), puis les
     expertises (domaines, texte du domaine choisi, cases) ;
   · sous-titres en capitales, au gabarit des intitulés de section des
     simulateurs (.sim-eyebrow : barre accent de 2 × 15 px, 12 px, crème) :
     « Clientèle » au-dessus des tuiles, « Nos expertises » au-dessus des
     cases (hors de l'alignement : le texte et la liste partent du haut des
     tuiles et des cases) ;
   · tuiles de clientèle = tuiles de /clients ;
   · titres des cases = .ref-title de l'accueil ; textes des expertises =
     texte des profils (.prof-text, 17 px), ramené sous l'écran collé au
     corps des cartes de l'accueil (expertise-defilement.css).
   À toute largeur, le contenu part des marges du site (celles du logo et du
   menu) : rien ne se centre sur grand écran. Puis
   « Échangeons » et le pied de page, comme sur les autres pages.
   Ni filets, ni traits devant les titres.
   ═══════════════════════════════════════════════════════════════ */

.xp3{position:relative;background:var(--navy-3);color:var(--cream)}

/* ═══ EN-TÊTE ═══ */
/* fil d'Ariane (publications.css : capitales espacées à
   .22em, page en bleu accent, entrée en fondu montant après .3 s), à son
   écart du titre */
.xp3 .prof-crumb{letter-spacing:.22em;color:var(--accent);margin:0 0 clamp(44px,6.4vh,80px);
  opacity:0;transform:translateY(22px);animation:xp3Fil .8s var(--ease) .3s forwards}
@keyframes xp3Fil{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.xp3 .prof-crumb{opacity:1;transform:none;animation:none}}
.xp3 .prof-crumb a{color:rgba(247,245,243,.4)}
.xp3 .prof-crumb a:hover{color:var(--accent)}
.xp3 .prof-crumb .sep{color:rgba(247,245,243,.4)}
.xp3 .prof-crumb .cur{color:var(--accent)}
/* titre, la fin en bleu */
.xp3-h1{margin:0;font-family:var(--ep);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(27px,3.2vw,46px);line-height:1.12;color:var(--cream);
  text-wrap:balance}   /* au téléphone, « Professionnels / de l’immobilier », jamais « de » en bout de ligne */
.xp3-h1 em{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--blue)}
/* arrivée sur la page : le fil d'Ariane et le titre (en cascade, posée par
   ExpertisePage.astro) d'abord, puis le contenu, juste après le dernier mot
   du titre, en fondu montant à la grammaire des révélations du site (rvUp de
   global.css) ; il s'affichait avant le titre, d'un coup, et ses photos
   l'une après l'autre (24 oct. 2026) */
.xp3d-scene{animation:rvUp var(--rv-dur) var(--rv-e) .55s backwards}
@media(prefers-reduced-motion:reduce){.xp3d-scene{animation:none}}

/* ═══ LA PRÉSENTATION ═══ */
/* texte à gauche, clientèle à droite : à 1440 px, 601 px et 580 px (trois
   tuiles de 185 px : celles de 165 px étaient trop petites, celles de 206 px
   trop grandes), écart de la page profil. Plus large, les tuiles gardent
   leurs 185 px, calées sur la marge de droite. */
.xp3-pratique-grille{display:grid;grid-template-columns:minmax(0,601fr) minmax(0,580fr);
  column-gap:clamp(44px,6vw,110px);align-items:start}
@media (min-width:921px){
  /* « Clientèle » au-dessus des tuiles, hors de l'alignement (place gardée
     en haut de la grille : 11 px de capitales + 16 px) ; le haut des tuiles
     sur le haut des lettres de la première ligne du texte (Mulish, interligne
     1,75 : demi-interligne .245em + .305em au-dessus des capitales) */
  .xp3-pratique-grille{padding-top:30px}
  .xp3-clientele{position:relative;justify-self:end;width:100%;max-width:580px;
    margin-top:calc(var(--chapo-taille) * .55)}
  .xp3-clientele>.prof-sec-title{position:absolute;left:0;bottom:100%;margin:0 0 16px}
}
/* le chapô prend sa colonne, jusqu'à 62 signes (46 ailleurs sur le site) :
   moins de vide entre le texte et les tuiles */
.xp3-pratique-texte .hb-lead{margin-top:0;max-width:62ch;text-wrap:pretty}
.xp3-pratique-texte .xp3-suite{margin-top:16px}   /* même chapô que le premier paragraphe : une couleur, une largeur */

/* intitulés « Clientèle » et « Nos expertises » : ceux des sections des
   simulateurs (simulateur.css, .sim-eyebrow), barre accent de 2 × 15 px
   devant (Alix, 24 oct. 2026) */
.xp3 .prof-sec-title{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-family:var(--mu);
  font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.xp3 .prof-sec-title::before{content:'';flex:none;width:2px;height:15px;background:var(--accent)}

/* tuiles de clientèle : celles de /clients (monochrome au repos, couleur au survol) */
.xp3-clients{--xp3-ecart:12px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--xp3-ecart)}
/* bloc constant (Alix, 24 oct. 2026) : quel que soit le nombre de clients
   (data-n), le bloc des tuiles a la taille de celui de six, deux rangées de
   trois carrés ; moins nombreuses, les tuiles s'allongent (une rangée) ou
   s'élargissent (deux rangées), sans case vide. Le côté du carré est tiré de
   la largeur du bloc (unités de conteneur) ; sans elles, des carrés. */
@supports (width:1cqw){
  .xp3-clientele{container-type:inline-size}
  .xp3-clients{--xp3-tuile:calc((100cqw - 2 * var(--xp3-ecart)) / 3);grid-auto-rows:var(--xp3-tuile)}
  .xp3-clients .xp3-client{aspect-ratio:auto}
  .xp3-clients[data-n="1"],.xp3-clients[data-n="2"],.xp3-clients[data-n="3"]{grid-auto-rows:calc(2 * var(--xp3-tuile) + var(--xp3-ecart))}
  .xp3-clients[data-n="1"]{grid-template-columns:minmax(0,1fr)}
  .xp3-clients[data-n="2"],.xp3-clients[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xp3-clients[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  .xp3-clients[data-n="5"]>.xp3-client{grid-column:span 2}
  .xp3-clients[data-n="5"]>.xp3-client:nth-child(n+4){grid-column:span 3}
}
/* pas de fond sous la photo, rognage forcé (clip-path : Safari laisse sinon
   dépasser la photo zoomée, calque à part), photo et voile débordant d'un
   pixel sous le bord : plus de liseré gris au bord d'une tuile après un
   survol ou un clic (Alix, 24 oct. 2026) */
.xp3-client{position:relative;aspect-ratio:1/1;overflow:hidden;clip-path:inset(0);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  transition:transform .5s var(--ease)}
.xp3-client img{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;
  filter:grayscale(1) brightness(.62) contrast(1.03);transform:scale(1.001);backface-visibility:hidden;-webkit-user-drag:none;
  transition:filter .6s var(--ease),transform .7s var(--ease)}
.xp3-client-voile{position:absolute;inset:-1px;pointer-events:none}
/* fondu du voile = zoom de la photo (.7s), sinon Safari fait clignoter la tuile en sortie de survol (cf. clients.css) */
.xp3-client-voile::before,.xp3-client-voile::after{content:'';position:absolute;inset:0;transition:opacity .7s var(--ease)}
.xp3-client-voile::before{mix-blend-mode:multiply;background:linear-gradient(to top,rgba(32,42,62,.921) 0%,rgba(32,42,62,.311) 38%,rgba(32,42,62,.056) 100%)}
.xp3-client-voile::after{background:linear-gradient(to top,rgba(32,42,62,.807) 0%,rgba(32,42,62,.326) 38%,rgba(32,42,62,.077) 100%)}
.xp3-client-t{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:clamp(12px,1.4vw,20px);
  font-family:var(--ep);font-weight:400;font-size:clamp(13px,1.15vw,17px);line-height:1.25;
  color:rgba(247,245,243,.82);text-shadow:0 1px 16px rgba(10,15,26,.85),0 1px 4px rgba(10,15,26,.7);
  text-wrap:balance;transition:color .4s var(--ease)}   /* « Marchands / de biens », jamais « de » en bout de ligne */
@media(hover:hover){
  .xp3-client:hover{transform:translateY(-4px)}
  .xp3-client:hover img{filter:none;transform:scale(1.05)}
  .xp3-client:hover .xp3-client-voile::before,.xp3-client:hover .xp3-client-voile::after{opacity:.55}
  .xp3-client:hover .xp3-client-t{color:var(--cream)}
}

/* ═══ LES EXPERTISES ═══ */
/* grille de la page profil : colonne de 340 px, écart de 86 px à 1440 px */
.xp3-int-grille{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  column-gap:clamp(44px,6vw,110px);align-items:start}

/* les domaines : rangées à vignette, la rangée choisie teintée */
.xp3-domaines{display:flex;flex-direction:column;gap:8px}
.xp3-dom{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;column-gap:18px;align-items:center;
  margin:0;padding:12px 18px 12px 12px;border:0;border-radius:0;background:transparent;cursor:pointer;
  text-align:left;color:inherit;font:inherit;transition:background-color .35s var(--ease)}
.xp3-dom[aria-selected="true"]{background:rgba(54,70,99,.5)}
.xp3-dom-img{display:block;width:52px;height:52px;overflow:hidden}
.xp3-dom-img img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.62) contrast(1.03);transition:filter .6s var(--ease)}
.xp3-dom[aria-selected="true"] .xp3-dom-img img{filter:none}
.xp3-dom-t{font-family:var(--ep);font-weight:400;font-size:clamp(13px,1.15vw,17px);line-height:1.25;
  color:rgba(247,245,243,.6);text-wrap:balance;transition:color .35s var(--ease)}
.xp3-entier{white-space:nowrap}   /* « plus-values » d'un tenant (ExpertisePage.astro) */
.xp3-dom[aria-selected="true"] .xp3-dom-t{color:var(--cream)}
.xp3-dom-chev{width:18px;height:18px;fill:none;stroke:rgba(247,245,243,.4);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s var(--ease),transform .35s var(--ease)}
.xp3-dom[aria-selected="true"] .xp3-dom-chev{stroke:var(--accent)}
@media(hover:hover){
  .xp3-dom[aria-selected="false"]:hover{background:rgba(54,70,99,.28)}
  .xp3-dom:hover .xp3-dom-chev{transform:translateX(3px)}
}
.xp3-dom:focus{outline:none}
.xp3-dom:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* texte du domaine choisi, sous la liste : les textes sont empilés dans la
   même case (hauteur du plus long), un seul visible ; corps du texte des
   profils (.prof-text) */
.xp3-dom-textes{display:grid;margin-top:24px}
.xp3-dom-texte{grid-area:1/1;margin:0;font-family:var(--mu);font-weight:300;
  font-size:clamp(15px,1.15vw,17px);line-height:1.8;color:rgba(247,245,243,.6);text-wrap:pretty;
  opacity:0;visibility:hidden;transition:opacity var(--fondu) var(--fondu-e),visibility 0s linear var(--fondu)}

/* principaux enjeux : quatre cases légères, deux par rang ; le texte suit
   son titre à écart fixe (les textes alignés d'une case à l'autre), toutes
   les cases ont la hauteur de la plus remplie, d'un domaine à l'autre */
.xp3-panneaux{display:grid}
/* ordinateur : les deux colonnes ont la même hauteur ; le texte du domaine
   choisi finit sur le bord bas des cases (ligne de base de sa dernière
   ligne), quelle que soit sa longueur. Si le plus long des textes descend
   plus bas que les cases, ce sont elles qui s'allongent. */
@media (min-width:921px){
  .xp3-int-grille{align-items:stretch}
  .xp3-int-gauche,.xp3-int-droite{display:flex;flex-direction:column}
  /* « Nos expertises » n'est posé qu'au-dessus des cases : la liste part du
     haut des cases (15 px d'intitulé + 16 px), comme le texte de la
     présentation part du haut des tuiles */
  .xp3-int-gauche{padding-top:calc(15px + 16px)}
  .xp3-dom-textes{margin-top:auto;padding-top:24px}
  .xp3-dom-texte{align-self:end;position:relative;top:.52em}   /* Mulish, interligne 1,8 : demi-interligne (.27em) + jambage (.25em) */
  .xp3-panneaux{flex:1 1 auto}
  .xp3-panneau{display:grid}
  .xp3-enjeux{grid-auto-rows:1fr}
}
.xp3-panneau{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity var(--fondu) var(--fondu-e),visibility 0s linear var(--fondu)}
.xp3-dom-texte.is-on,.xp3-panneau.is-on{opacity:1;visibility:visible;transition-delay:0s}
.xp3-enjeux{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.xp3-enjeu{display:flex;flex-direction:column;box-sizing:border-box;min-height:var(--xp3-case,0px);
  padding:28px 28px 30px;background:rgba(54,70,99,.28)}
.xp3-enjeu-t{margin:0;font-family:var(--ep);font-weight:400;font-size:clamp(19px,1.7vw,26px);line-height:1.15;color:var(--cream);
  text-wrap:balance}
.xp3-enjeu-d{margin:14px 0 0;font-family:var(--mu);font-weight:300;
  font-size:clamp(15px,1.15vw,17px);line-height:1.8;color:rgba(247,245,243,.6);text-wrap:pretty}   /* .prof-text */

/* fenêtres d'ordinateur basses (1536 × 740, 1280 × 720 : portables Windows,
   petits Mac) : sous l'en-tête, les tuiles de la présentation
   reviennent à 165 px, comme Savoir-faire sur les écrans bas (expertises.css) */
@media (min-width:921px) and (max-height:780px){
  .xp3-clientele{max-width:520px}
}

/* ═══ ORDINATEUR — crantage ═══ */
/* toujours calé sur un cran de l'écran collé, jamais entre deux ; fin de
   page comme Savoir-faire et Équipe : « Échangeons » par son haut, le pied
   par son bas */
@media (min-width:921px){
  html:has(.xp3){scroll-snap-type:y mandatory}
  html:has(.xp3) .cta-prefooter{scroll-snap-align:start}
  html:has(.xp3) .footer{scroll-snap-align:end}
}

/* ═══ TABLETTE ET TÉLÉPHONE ═══ */
@media (max-width:920px){
  .xp3 .prof-crumb{flex-wrap:wrap;row-gap:4px}
  .xp3-pratique-grille,.xp3-int-grille{grid-template-columns:minmax(0,1fr);row-gap:36px}
  /* sur une colonne, « Nos expertises » repasse en tête, au-dessus de la liste */
  .xp3-int-droite{display:contents}
  .xp3-int-droite>.prof-sec-title{order:-1;margin-bottom:-20px}   /* 36 px de rangée − 20 = les 16 px de l'intitulé */
  .xp3-clientele{max-width:400px}   /* pas de tuiles géantes en pleine largeur (128 px au plus) */
  .xp3-clients{--xp3-ecart:8px}
  .xp3-dom{grid-template-columns:52px minmax(0,1fr) 18px;column-gap:14px;padding:10px 14px 10px 10px}
  .xp3-dom-img{width:52px;height:52px}
  .xp3-dom-textes{margin-top:22px}
  .xp3-enjeu{min-height:0}
}

@media (max-width:600px){
  /* peu de texte : la présentation garde son chapô */
  .xp3-suite{display:none}
  .xp3-client-t{font-size:12.5px;padding:10px}
  /* domaines : rangées serrées ; leur paragraphe cède la place (une section =
     un écran), le détail passe par les enjeux */
  .xp3-domaines{gap:6px}
  .xp3-dom-textes{display:none}
  .xp3-dom{grid-template-columns:44px minmax(0,1fr) 16px;padding:8px 12px 8px 8px}
  .xp3-dom-img{width:44px;height:44px}
  .xp3-dom-t{font-size:15px}
  /* enjeux : le titre seul, le texte derrière un toucher (fiche du bas, mobile.css) */
  .xp3-enjeux{grid-template-columns:minmax(0,1fr);gap:8px}
  .xp3-enjeu{position:relative;flex-direction:row;align-items:center;min-height:64px;padding:16px 58px 16px 18px;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .xp3-enjeu-t{font-size:clamp(17px,5vw,19px);line-height:1.2}
  .xp3-enjeu-d{display:none}
  .xp3-enjeu::after{content:'';position:absolute;top:50%;right:16px;width:28px;height:28px;margin-top:-14px;box-sizing:border-box;
    border-radius:50%;border:1px solid rgba(247,245,243,.55);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F5F3' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat}
  .xp3-enjeu:focus{outline:none}
  .xp3-enjeu:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .m-fiche-n:empty{display:none}
}