/* LA PAGE « NOS EXPERTISES » — sa mise en page, et rien d'autre.

   Ces règles vivaient dans expertises-pages.css, la feuille commune que
   QUINZE pages chargent. Elles ne décrivent pourtant qu'une seule page : le
   héros, les six cartes de métier et leurs photos. Les quatorze autres pages
   téléchargeaient une mise en page qu'elles n'affichent jamais.

   Vérifié sur le DOM servi des quatorze routes : aucune autre page ne porte
   ces classes. */

.expert-hero{min-height:760px;padding:175px 5.3% 90px;position:relative;display:flex;align-items:center}
.hero-title{position:relative;z-index:2;width:78%}
.hero-title h1{font-size:clamp(46px,6vw,88px)}
.hero-bottom{display:flex;align-items:flex-end;gap:55px;margin-top:42px}
.hero-bottom p{max-width:530px;font-size:17px;text-align:justify;hyphens:auto}
.hero-bottom .button{flex-shrink:0}
/* Le « 6 » et sa tache collaient au bord droit : la tache débordait même de
   quelques pixels hors de l'écran. On les rentre à 6 %, soit un peu plus que
   la marge du texte, ce qui leur laisse de l'air sans les faire rencontrer le
   titre (qui s'arrête bien avant). */
.expert-signal{position:absolute;right:6%;top:185px;width:300px;height:400px}
.expert-signal>span{font-size:350px;line-height:1;font-weight:700;color:var(--petrol);letter-spacing:-.1em;position:absolute;right:30px}
.expert-signal svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--orange);mix-blend-mode:multiply;animation:signal 16s ease-in-out infinite}
.expert-signal small{position:absolute;bottom:0;right:0;font-size:10px;letter-spacing:.13em;transform:rotate(-90deg);transform-origin:100% 100%}
/* Coins droits : Jonas veut des sections carrées, sur mobile comme sur
   grand écran. L'arrondi de 90 ou 100px sur un seul coin est parti. */
.domains{padding:105px 5.3% 130px;position:relative}
.together{padding:120px 9%;display:grid;grid-template-columns:1fr 1.6fr;gap:70px;align-items:center}
.join-mark{font-size:280px;font-weight:700;letter-spacing:-.1em;color:var(--orange);animation:sway 12s ease-in-out infinite}
.together p:not(.eyebrow){max-width:640px;margin:30px 0;text-align:justify;hyphens:auto}
@media(max-width:900px){.hero-title{width:100%}.expert-hero{padding:140px 6% 75px;min-height:660px}.expert-signal{width:160px;top:320px;right:-40px;opacity:.13}.expert-signal>span{font-size:220px}.hero-bottom{display:block}.hero-bottom .button{margin-top:25px}.together{gap:30px;padding:70px 6%}.join-mark{font-size:150px}}
.expert-signal small{bottom:25px;right:20px}
.domain-decor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#a2c8ca;stroke-width:.8;opacity:.12}
.domain-decor circle{stroke:var(--orange);stroke-width:2}
.domain-photo{display:block;border:0;padding:0;width:100%;height:300px;border-radius:12px;position:relative;isolation:isolate;overflow:hidden;color:var(--ivory);text-align:left;background:#173d45}
.photo-art{position:absolute;inset:0 0 auto;width:100%;aspect-ratio:1.22;background-image:var(--image,url(assets/expertises-reference.webp));background-size:var(--image-size);background-position:var(--image-pos);background-repeat:no-repeat;transition:transform 1s}
.photo-shade{position:absolute;inset:0;background:linear-gradient(transparent 50%,#07131799)}
.photo-liquid{position:absolute;left:var(--lx,50%);top:var(--ly,50%);width:var(--diameter,1400px);height:var(--diameter,1400px);margin-left:calc(var(--diameter,1400px)/-2);margin-top:calc(var(--diameter,1400px)/-2);border-radius:43% 57% 54% 46% / 55% 44% 56% 45%;transform:scale(0) rotate(-18deg);background:radial-gradient(ellipse at 30% 25%,#387787df,#125469ed 55%,#093a48f5);box-shadow:inset 1px 2px 2px #87dbe166;transition:transform .78s cubic-bezier(.2,.65,.2,1),border-radius 1.1s;pointer-events:none}
.warm .photo-liquid{background:radial-gradient(ellipse at 32% 28%,#ff9836e0,#ff711fe5 53%,#f95b19ed)}
.domain-photo.active .photo-liquid{transform:scale(1) rotate(8deg);border-radius:52% 48% 46% 54% / 44% 56% 44% 56%}
.domain-photo.active .photo-art{transform:scale(1.035)}
.photo-caption{position:absolute;left:30px;right:30px;bottom:30px;display:flex;align-items:center;gap:22px;pointer-events:none}
.photo-caption svg{width:35px;height:38px;stroke:currentColor;stroke-width:1.5;fill:none;flex-shrink:0}
.photo-caption>span{max-width:360px;font-size:19px;line-height:1.4;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .45s}
.active .photo-caption>span{opacity:1;transform:none;transition-delay:.15s}
.warm.active .photo-caption{color:#13262b}
@media(max-width:900px){.domain-photo{height:240px}.photo-art{height:100%;aspect-ratio:auto}.photo-caption{left:20px;right:20px;bottom:20px;gap:15px}.photo-caption>span{font-size:16px}}
@media(prefers-reduced-motion:reduce){.photo-liquid,.photo-art,.photo-caption>span{transition:none}}
.métier-photo .photo-art{min-height:100%;transition:transform 1s}
.brand-composition:hover .métier-photo .photo-art{transform:scale(1.035)}
.métier-photo .photo-art{width:125%;left:-12.5%;min-height:0;aspect-ratio:1.22}
@media(max-width:650px){.métier-photo .photo-art{width:150%;left:-25%}}
.domain-card .text-link::after{content:'';position:absolute;inset:0;z-index:2}
.domain-copy{padding:30px 5px 0}
.domain-copy .eyebrow{color:#ffa56c;margin-bottom:16px}
.domain-copy h3{font-size:36px}
.domain-copy>p:not(.eyebrow){margin-top:23px;max-width:550px;color:#bdc6c6;text-align:justify;hyphens:auto;font-size:15px}
.domain-copy ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}
.domain-copy li{border:1px solid #425054;border-radius:25px;padding:8px 12px;font-size:11px}
.domains .section-head,.domain-grid{position:relative;z-index:1}
@media(max-width:900px){.domain-grid{gap:45px 22px}.domain-copy h3{font-size:30px}}