/* Shared reading rhythm across the five approved compositions. */
:root{--section-title:clamp(31px,3.3vw,48px);--section-copy:15px;--section-gap:72px}
.hero .actions{width:max-content;max-width:100%;justify-self:end;align-items:stretch;gap:10px}
.hero .actions a,.hero .actions button{width:auto;min-height:44px;padding:0 12px;font-size:14px;gap:8px}
.hero .actions svg{width:19px;height:19px;margin-left:0}
.hero .actions .primary{justify-content:center}
@media(max-width:760px){.hero .actions{justify-self:start}}
main>section[id]{scroll-margin-top:32px}
#metiers{padding-bottom:64px}
#deployment,#pricing{padding-top:var(--section-gap);padding-bottom:32px}
.cinema-section h2{color:var(--white);font-weight:550;max-width:1050px;text-wrap:balance}
#metiers .section-heading{display:block;max-width:730px;margin-bottom:34px}
#metiers .section-heading h2{max-width:24ch}
#metiers .section-heading>p{margin:20px 0 0;max-width:64ch}
#deployment .section-opening{display:block;margin:0 0 24px}
#deployment .hosting-context{max-width:76ch;margin:28px 0 0;color:var(--muted);font-size:var(--section-copy);line-height:1.8}
#metiers .section-heading h2,#deployment .section-opening h2,#pricing .circle-heading h2{font-size:var(--section-title);line-height:1.16;color:var(--white);font-weight:600}
#pricing .circle-heading h2{max-width:28ch;margin-inline:auto}
#metiers .section-heading>p,#pricing .circle-heading>p{font-size:var(--section-copy);line-height:1.8}
#metiers .section-tail{justify-content:space-between}
#metiers .text-link{font-size:14px;min-height:44px;display:inline-flex;align-items:center}
#metiers .case-examples{color:var(--muted)}
#metiers .perspective-scene{padding-bottom:28px}
#metiers .perspective-reading>p,#metiers .perspective-prompt p{font-size:14px;line-height:1.75}
#metiers .reading-label,#metiers .perspective-prompt>span{font-size:12px}
#metiers .perspective-reading h3{min-height:4em}
#metiers .perspective-reading>p{min-height:7em}
#metiers .perspective-prompt p{min-height:5.25em}
#pricing .offer-audience,#pricing .offer-service,#pricing .enterprise-copy,#pricing .shared-benefit,#pricing .billing-note p{font-size:14px;line-height:1.75}
#pricing .offer-action,#pricing .billing-note>a,#pricing .enterprise-link{font-size:14px;min-height:44px}
#pricing .price-unit,#pricing .offer-limits dt,#pricing .shared-benefit>span{font-size:12px}
#pricing .billing-note h3{font-size:18px}
#pricing .circle-reading{min-height:540px}
.header .menu-toggle{min-width:44px;min-height:44px}
.header .nav-trigger{min-height:44px}
.header .start{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.cinema-section .source-link{font-size:12px;min-height:44px}
/* At tablet widths the professions sit above the lens, leaving room to read. */
@media(min-width:701px) and (max-width:1000px){
 #metiers .perspective-scene{grid-template-columns:1fr 1fr;gap:25px 10px;padding:24px 24px 64px}
 #metiers .perspective-cases{grid-column:1/-1;--row:0px;width:100%;height:106px;mask-image:linear-gradient(to right,transparent,#000 5px,#000 calc(100% - 5px),transparent)}
 #metiers .perspective-cases button{width:33.333%;height:102px;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:7px 4px;transform:translateX(calc(var(--slot)*100%));text-align:center}
 #metiers .perspective-cases button>span{font-size:13px}
 #metiers .perspective-cases small{font-size:12px}
 #metiers .perspective-lens{padding:13px;align-self:center}
 #metiers .lens-analysis{gap:7px}
 #metiers .perspective-reading{padding-left:14px}
 #metiers .perspective-reading h3{font-size:22px}
 #metiers .perspective-reading>p{min-height:8.75em}
 #metiers .perspective-prompt p{min-height:7em}
}
@media(max-width:960px){
 #metiers .section-heading>p{max-width:64ch}
 #metiers .section-heading{margin-bottom:30px}
}
@media(max-width:700px){
 :root{--section-title:32px;--section-copy:14px;--section-gap:56px}
 #metiers{padding-inline:5%;padding-bottom:48px}
 #deployment,#pricing{padding-top:var(--section-gap);padding-bottom:24px}
 #metiers .perspective-reading h3{font-size:24px;min-height:4.8em}
 #metiers .perspective-reading>p{min-height:7em}
 #metiers .perspective-prompt p{min-height:5.25em}
 #metiers .lens-analysis h3{font-size:22px}
 #metiers .perspective-cases button>span{font-size:12px}
 #metiers .perspective-cases small{font-size:11px}
 #metiers .perspective-cases{height:130px}
 #metiers .perspective-cases button{height:125px}
 #pricing .circle-reading{min-height:545px;padding-bottom:35px}
 #pricing .circle-picker button>span{font-size:13px}
 #pricing .circle-picker button>small{font-size:11px}
 #pricing .billing-note h3{font-size:17px}
 #deployment .section-opening{margin-bottom:12px}
 #pricing .circle-heading h2{margin-inline:0}
}
@media(max-width:370px){:root{--section-title:30px}#pricing .circle-picker button>span{font-size:12px}}

/* Text-only controls throughout the landing. No vacant icon columns. */
.header .menu-toggle{font-size:13px;width:auto;padding:0 8px}
#deployment .anchor-choices button{grid-template-columns:minmax(0,1fr)}
#deployment .anchor-choices button>span{grid-column:1}
#pricing .circle-picker button::before{display:none}
#pricing .circle-picker button{padding-left:12px}
#pricing .offer-action,.closing-invitation-actions a{justify-content:center}
/* Action buttons: text-only, sized by role. The main action of each screen
   comes right after its title; the header action stays below the hero's. */
.hero .actions a,.hero .actions button,.header .start,
#deployment .scene-action,#pricing .offer-action,.closing-invitation-actions a{
 display:inline-flex;align-items:center;justify-content:center;
 width:fit-content;max-width:100%;min-width:0;
 gap:0;line-height:20px;border-radius:6px;
}
.hero .actions a,.hero .actions button,.closing-invitation-actions a{min-height:48px;padding:0 24px;font-size:15px}
.hero .actions a,.hero .actions button{width:auto}
#pricing .offer-action{width:fit-content;min-height:46px;padding:0 24px;font-size:15px}
/* A coming-soon offer keeps "Bientôt" as its message: outlined action. */
#pricing .offer-action.soon{background:transparent;border-color:#696458;color:#eee7da}
#pricing .offer-action.soon:hover{background:#1b1a17}
#deployment .scene-action{min-height:44px;padding:0 20px;font-size:14px}
.header .start{min-height:40px;padding:0 16px;font-size:14px}
.closing-invitation-actions{gap:10px}
.citation-target{position:relative;display:inline-flex;align-self:flex-start}