/*
 * Carte encartee, bloc editorial en deux colonnes, bande d'action en pilule
 * claire. Aucun fond de voile par defaut : la famille `background` l'ecrit
 * seule. Le pourquoi vit dans PASSATION.md et dans cta-panoramique.spec.ts.
 */
.ivy-cta--panoramique { position: relative; display: grid; min-height: var( --ivy-section-min-height, 70svh ); margin-inline: clamp( 12px, 2.2vw, 32px ); overflow: hidden; border-radius: var( --ivy-radius-surface, 24px ); isolation: isolate; color: var( --ivy-on-deep, rgb( 255 255 255 ) ); }
.ivy-cta--panoramique .ivy-cta__media, .ivy-cta--panoramique .ivy-cta__overlay { position: absolute; inset: 0; }
.ivy-cta--panoramique .ivy-cta__media { z-index: -2; }
.ivy-cta--panoramique .ivy-cta__media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ivy-cta--panoramique .ivy-cta__overlay { z-index: -1; }
.ivy-cta--panoramique .ivy-cta__inner { display: grid; width: min( 100%, 1360px ); min-height: inherit; align-content: space-between; gap: clamp( 48px, 9vh, 120px ); margin-inline: auto; padding: clamp( 18px, 2.4vw, 32px ); }

/* `1 / span 2` tient les deux cas : l'oeilleton est facultatif, donc une zone
   nommee casserait des qu'il manque. */
.ivy-cta--panoramique .ivy-cta__copy { display: grid; grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 1fr ); align-items: start; column-gap: clamp( 24px, 4vw, 72px ); }
.ivy-cta--panoramique .ivy-cta__eyebrow { grid-column: 1; grid-row: 1; display: block; margin-bottom: 16px; color: var( --ivy-eyebrow-color, rgb( 255 255 255 / 78% ) ); font-size: var( --ivy-font-label ); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ivy-cta--panoramique .ivy-cta__title { grid-column: 1; margin: 0; color: var( --ivy-title-color, var( --ivy-on-deep, rgb( 255 255 255 ) ) ); line-height: 1; }
.ivy-cta--panoramique .ivy-cta__text { grid-column: 2; grid-row: 1 / span 2; max-width: 46ch; margin-top: 0; color: var( --ivy-text-color, var( --ivy-on-deep-muted, rgb( 255 255 255 / 82% ) ) ); line-height: 1.6; }
.ivy-cta--panoramique .ivy-cta__text > :first-child { margin-top: 0; } .ivy-cta--panoramique .ivy-cta__text > :last-child { margin-bottom: 0; }

/* Fond clair, donc encre sombre : le blanc herite de la section n'y servirait
   rien. Couleur PLATE en repli, donc le panneau l'ecrase proprement. */
.ivy-cta--panoramique .ivy-cta__action-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 10px 10px clamp( 16px, 2vw, 28px ); border-radius: var( --ivy-radius-surface, 18px ); background: var( --ivy-surface, rgb( 255 255 255 ) ); color: var( --ivy-ink, rgb( 17 17 17 ) ); }
/* Le filet lit `--ivy-prompt-color` : la famille `color` ne pose que cette
   propriete, et une feuille qui ne la lit pas rend le controle muet. */
.ivy-cta--panoramique .ivy-cta__prompt { width: clamp( 48px, 8vw, 112px ); height: 1px; background: var( --ivy-prompt-color, currentcolor ); opacity: .55; }

/* Des qu'il porte un libelle, le repere cesse d'etre un filet : il reprend une
   hauteur, perd le fond qui dessinait le trait — sans quoi il masquerait le
   texte — et laisse la famille `background` peindre la sienne. */
.ivy-cta--panoramique .ivy-cta__prompt--labelled { width: auto; height: auto; background: none; opacity: 1; color: var( --ivy-prompt-color, currentcolor ); font-size: var( --ivy-font-label ); line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.ivy-cta--panoramique .ivy-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ivy-cta--panoramique .ivy-cta__cta { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .6em 1.5em; border: 1px solid transparent; border-radius: var( --ivy-radius-action, 999px ); background: var( --ivy-accent, rgb( 17 17 17 ) ); color: var( --ivy-cta-color, var( --ivy-surface, rgb( 255 255 255 ) ) ); font-weight: 700; text-decoration: none; }
.ivy-cta--panoramique .ivy-cta__cta--secondary { border-color: var( --ivy-cta_secondary-border-color, rgb( 17 17 17 / 22% ) ); background: transparent; color: var( --ivy-cta_secondary-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); }
.ivy-cta--panoramique .ivy-cta__cta:focus-visible { outline: 3px solid currentcolor; outline-offset: 4px; }
@media ( max-width: 860px ) { .ivy-cta--panoramique .ivy-cta__copy { grid-template-columns: minmax( 0, 1fr ); row-gap: 20px; } .ivy-cta--panoramique .ivy-cta__text { grid-column: 1; grid-row: auto; max-width: none; } }
@media ( max-width: 640px ) { .ivy-cta--panoramique .ivy-cta__action-band { align-items: stretch; flex-direction: column; padding: clamp( 16px, 4vw, 22px ); } .ivy-cta--panoramique .ivy-cta__prompt { width: 64px; } .ivy-cta--panoramique .ivy-cta__prompt--labelled { width: auto; } .ivy-cta--panoramique .ivy-cta__actions, .ivy-cta--panoramique .ivy-cta__cta { width: 100%; } .ivy-cta--panoramique .ivy-cta__cta { justify-content: center; } }