/* Interactions communes aux deux thèmes. */
@media (prefers-reduced-motion: no-preference) {
  :is(.button,.bouton) .action-label {
    background-image: linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor);
    background-position: left bottom, right bottom;
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: 0 1px, 0 1px;
    transition: background-size .35s ease;
  }
  :is(.button,.bouton):is(:hover,:focus-visible) .action-label {
    background-size: 50% 1px, 50% 1px;
    text-decoration: none;
  }
  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    :is(.faq details,.cabinet-faq details,.mobile-contents) { interpolate-size: allow-keywords; }
    :is(.faq details,.cabinet-faq details,.mobile-contents)::details-content {
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition: block-size .4s cubic-bezier(.4,0,.2,1), opacity .4s ease, content-visibility .4s allow-discrete;
    }
    :is(.faq details,.cabinet-faq details,.mobile-contents)[open]::details-content { block-size: auto; opacity: 1; }
  }
  .network-grid.motion-enter .network-photo { animation: entree-photo .9s cubic-bezier(.22,.61,.36,1) backwards; }
  .network-grid.motion-enter .eyebrow, .conviction-grid.motion-enter .eyebrow { animation: entree-fondu .6s .1s ease-out backwards; }
  .network-grid.motion-enter h2, .conviction-grid.motion-enter h2 { animation: entree-titre .7s .22s ease-out backwards; }
  .network-grid.motion-enter p:not(.eyebrow), .conviction-grid.motion-enter > div { animation: entree-texte .8s .34s ease-out backwards; }
}
@keyframes entree-fondu { from { opacity: 0; } }
@keyframes entree-photo { from { opacity: 0; transform: translate(-15px,-5px); } }
@keyframes entree-titre { from { opacity: 0; transform: translateY(35px); } }
@keyframes entree-texte { from { opacity: 0; transform: translateY(70px); } }

@media (min-width: 993px) and (prefers-reduced-motion: no-preference) {
  .home .hero { animation: ouverture-accueil 3.15s .15s ease-out backwards; }
  .home .hero-visual { animation: apparition-portrait 3.15s .15s ease-out backwards; }
  .home .hero-visual .pixel-one { animation: apparition-symbole 3.15s .15s ease-out backwards; }
  .home .hero:is(:focus-within,.motion-complete), .home .hero:is(:focus-within,.motion-complete) :is(.hero-visual,.pixel-one) { animation: none; }
  .steps.motion-stack > .step {
    position: sticky;
    top: var(--ancrage);
    transform-origin: center top;
    scale: var(--echelle-etape,1);
    opacity: var(--opacite-etape,1);
  }
}
/* Le masque s'ouvre en largeur, marque une pause, puis rejoint les bords. */
@keyframes ouverture-accueil {
  0% { clip-path: inset(20% 50% 4.5% 50% round 40px); }
  40%,54% { clip-path: inset(20% 6.51% 1.1% 6.25% round 64px 0 0 0); }
  100% { clip-path: inset(0 round 0); }
}
@keyframes apparition-portrait {
  0%,38% { opacity: 0; transform: translateY(16px) scale(.96); }
  54%,100% { opacity: 1; transform: none; }
}
@keyframes apparition-symbole { 0%,54% { transform: scale(0); } 100% { transform: none; } }
html.entree-ancree { scroll-behavior: auto; }

/* Les bannières des pages et des agences ont deux chorégraphies différentes. */
@media (min-width: 1281px) and (prefers-reduced-motion: no-preference) {
  .banner-arrival .inner-lead h1, .directory-banner.banner-arrival .directory-title {
    --depart-y: -67px;
    animation: arrivee-bandeau .9s ease-out backwards;
  }
  .banner-arrival .inner-lead > div:first-child > p, .directory-banner.banner-arrival p:last-child {
    --depart-y: -59px;
    animation: arrivee-bandeau .9s ease-out backwards;
  }
  .cabinet-hero.banner-arrival .cabinet-copy > h1 { --depart-y: -5px; }
  .cabinet-hero.banner-arrival .cabinet-copy > p { --depart-y: 3px; }
  .cabinet-hero.banner-arrival .hero-actions {
    --depart-y: 11px;
    animation: arrivee-bandeau .9s ease-out backwards;
  }
  .banner-arrival .inner-lead > :is(.banner-photo,.offer-mount,img), .directory-banner.banner-arrival figure {
    transform-origin: right bottom;
    animation: arrivee-visuel .9s ease-out backwards;
  }
  .cabinet-hero.banner-arrival figure { container-type: inline-size; }
  .cabinet-hero.banner-arrival figure img { animation: cadre-cabinet .9s ease-out backwards; }
  .cabinet-hero.banner-arrival figure::after { animation: symbole-cabinet .9s ease-out backwards; }
  .edito-arrival > img { animation: cadre-edito .6s ease-out backwards; }
  .edito-arrival > div > :nth-child(-n+4) { animation: texte-edito .6s ease-out backwards; }
  .edito-arrival > div > :nth-child(2) { --depart-edito: -6px; }
  .edito-arrival > div > :nth-child(3) { --depart-edito: -12px; }
  .edito-arrival > div > :nth-child(4) { --depart-edito: -18px; }
}
@keyframes arrivee-bandeau { from { translate: -36px var(--depart-y); } }
@keyframes arrivee-visuel { from { scale: .8788; } }
@keyframes cadre-cabinet { from { clip-path: inset(0 0 0 12.4% round 30px 0 0 0); } to { clip-path: inset(0 round 30px 0 0 0); } }
@keyframes symbole-cabinet { from { translate: 12.4cqw 0; scale: .584; } }
@keyframes cadre-edito { from { clip-path: inset(0 12.3% 0 0); } to { clip-path: inset(0); } }
@keyframes texte-edito { from { translate: -13px var(--depart-edito,0px); } }
@keyframes montee-intro { from { opacity: 0; translate: 0 19.46px; } }

.cabinet-directory .directory-card.map-selected {
  background-color: color-mix(in srgb, var(--accent) 10%, var(--surface,white));
  box-shadow: inset 0 0 0 2px var(--accent);
}
/* La teinte se fond sous les coordonnées, y compris au toucher. */
.cabinet-tiles > :is(a,div:has(a)) { position: relative; isolation: isolate; }
.cabinet-tiles > :is(a,div:has(a))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(125deg, color-mix(in srgb,var(--blue) 22%,transparent), color-mix(in srgb,var(--accent) 8%,transparent));
  opacity: 0;
}
.cabinet-tiles > :is(:focus-within,:active)::before { opacity: 1; }
.cabinet-member:focus-within { filter: drop-shadow(0 4px 9px rgb(0 0 0 / 9%)); }
@media (hover: hover) {
  .cabinet-tiles > :hover::before { opacity: 1; }
  .cabinet-member:hover { filter: drop-shadow(0 4px 9px rgb(0 0 0 / 9%)); }
}
@media (prefers-reduced-motion: no-preference) {
  .intro-arrival:not(:target), .intro-arrival + p { animation: montee-intro .6s cubic-bezier(0,0,.58,1) backwards; }
  .intro-arrival + p { animation-delay: .09s; }
  .directory-card { transition: background-color .3s ease, box-shadow .3s ease; }
  .directory-search { transition: background-color .35s ease; }
  .directory-link span { transition: translate .25s ease; }
  .directory-link:is(:hover,:focus-visible,:active) span { translate: 4px 0; }
  .sector-pin span { transition: scale .2s ease; }
  .sector-pin:is(:hover,:focus-visible,:active) span { scale: 1.25; }
  .cabinet-member { transition: filter .6s ease-out; }
  .cabinet-tiles > ::before { transition: opacity .3s ease; }
}
/* Le bouton des actualités se déplie au survol ou au clavier. Sur écran tactile,
   sa forme finale est déjà en place, avec la version ronde sur petit téléphone. */
.news-list .entry .news-action {
  align-self: center;
  display: grid;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  background-position: right 17.5px center;
}
@media (min-width: 566px) {
  body.news-list .entry .news-action {
    width: var(--news-width,47.58px);
    border-radius: var(--news-radius,50%);
    font: 800 var(--news-size,0px)/1 var(--heading);
    text-transform: uppercase;
    padding-right: var(--news-padding,0px);
    color: white;
  }
  .news-list .entry:is(:focus-visible,:hover) {
    --news-width: 210.85px; --news-radius: 26px 37px 37px 0; --news-size: 14.93px; --news-padding: 28px;
  }
}
@media (min-width: 566px) and (max-width: 1280px), (min-width: 566px) and (hover: none) {
  .news-list .entry { --news-width: 210.85px; --news-radius: 26px 37px 37px 0; --news-size: 14.93px; --news-padding: 28px; }
}
@media (min-width: 1281px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .news-list .entry .news-action { transition: width .35s ease, border-radius .35s ease, font-size .35s ease, padding .35s ease; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root body :is(.button,.bouton), .nav nav a::after { transition: none; }
}
@media print {
  .home .hero, .home .hero-visual, .home .pixel-one, .motion-enter *, .banner-arrival *, .banner-arrival ::after, .edito-arrival *, .intro-arrival, .intro-arrival + p { animation: none !important; }
  .steps.motion-stack > .step { position: relative; top: auto; scale: none; opacity: 1; }
}