/* =========================================================
   STACKS — AI Act page
   Source artboards: Adobe XD 1440×5678 and 390×6303.
   Desktop content remains 1440px at wide viewports; only section backgrounds
   extend through the side rails. Mobile is authored at 390px.
   ========================================================= */

.ai-act-page{background:var(--dark)}
.ai-page{overflow:visible}
.ai-page section{overflow:hidden}
.ai-bg-lime{background:var(--lime)}
.ai-bg-dark{background:var(--dark);color:var(--cream)}
.ai-bg-cream{background:var(--cream)}
.ai-bg-white{background:#fff}
.ai-bg-lavender{background:var(--lavender)}
.ai-kicker{padding:0;display:flex;align-items:center;justify-content:center;line-height:1;text-align:center;transform-origin:0 0}
.ai-kicker .kicker__text{display:block;width:100%;transform:translateY(2px)}
.ai-act-page button{font-family:inherit}

/* ---------- 1440 source ---------- */
@media (min-width:601px){
  .ai-page,.ai-footer{width:1440px;max-width:none;margin-left:auto;margin-right:auto;zoom:var(--stacks-page-scale)}

  .ai-hero{height:810px}
  .ai-hero .brand{left:101px;top:56.2px;width:171px}
  .ai-hero .site-nav{left:985.5px;top:65.49px;width:354.5px;height:38px;gap:30px}
  .ai-hero .button--header{width:232.5px;height:38px;font-size:14px}
  .ai-hero__title{position:absolute;left:100px;top:175px;width:604px;font-size:135px;line-height:110px}
  .ai-hero__visual{position:absolute;left:695px;top:107px;width:667px;height:667px;object-fit:cover}
  .ai-hero__lead{position:absolute;left:100px;top:530px;width:621px;font-size:20px;line-height:26px;font-weight:700}
  .ai-hero__actions .button{position:absolute;top:669px;height:49px;font-size:18px}
  .ai-hero__primary{left:100px;width:250px}
  .ai-hero__secondary{left:370px;width:242px;border:0}

  .ai-cases{height:852px}
  .ai-cases__kicker{left:643.3px;top:74.28px;width:150px;height:47px;font-size:35px;transform:rotate(-4deg)}
  .ai-cases__title{position:absolute;left:397.5px;top:125.82px;width:645.04px;text-align:center;font-size:105px;line-height:90px}
  .ai-cases__intro{position:absolute;left:421.5px;top:320.82px;width:597px;font-size:18px;line-height:24px;font-weight:700;text-align:center}
  .ai-case-grid{position:absolute;left:100px;top:432.72px;width:1240px;height:329px;display:grid;grid-template-columns:604px 604px;grid-template-rows:145px 145px;gap:39px 32px}
  .ai-case-card{position:relative;width:604px;height:145px;border:0;background:var(--lime);color:var(--ink);padding:0;margin:0;overflow:hidden;cursor:pointer;text-align:left;transition:background-color 260ms cubic-bezier(.22,1,.36,1),transform 260ms cubic-bezier(.22,1,.36,1)}
  .ai-case-card__icon{position:absolute;left:0;top:0;height:145px;width:auto;pointer-events:none;transition:transform 300ms cubic-bezier(.22,1,.36,1)}
  .ai-case-card[data-case="image"] .ai-case-card__icon{left:11px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__icon{left:24px}
  .ai-case-card[data-case="public"] .ai-case-card__icon{left:13px}
  .ai-case-card__title{position:absolute;left:192px;top:25px;width:390px;font-family:"Eger",Impact,sans-serif;font-size:80px;line-height:78px;text-transform:uppercase;letter-spacing:.005em;transition:font-size 260ms cubic-bezier(.22,1,.36,1),top 260ms cubic-bezier(.22,1,.36,1)}
  .ai-case-card:not([data-case="chatbot"]) .ai-case-card__title{left:172px}
  .ai-case-card[data-case="public"] .ai-case-card__title{left:170px;font-size:72px}
  .ai-case-card__body{position:absolute;left:193px;top:79px;width:367px;font-size:12px;line-height:15px;font-weight:300;opacity:0;transform:translateY(6px);transition:opacity 220ms ease,transform 260ms cubic-bezier(.22,1,.36,1);pointer-events:none}
  .ai-case-card.is-active{background:var(--cream)}
  .ai-case-card.is-active .ai-case-card__title{font-size:70px;top:20px}
  .ai-case-card.is-active .ai-case-card__body{opacity:1;transform:none}
  .ai-case-card.is-active .ai-case-card__icon{transform:translateX(-1px) scale(1.01)}

  .ai-roles{height:745px}
  .ai-roles__kicker{left:102.05px;top:51.89px;width:292px;height:48px;font-size:35px;transform:rotate(2deg)}
  .ai-roles__title{position:absolute;left:100px;top:108.34px;width:645.04px;font-size:105px;line-height:90px}
  .ai-roles__visual{position:absolute;left:656px;top:0;width:737px;height:737px;object-fit:cover}
  .ai-roles__copy{position:absolute;left:100px;top:298.27px;width:494px;font-size:18px;line-height:24px;font-weight:400}
  .ai-roles__supplier{position:absolute;left:100px;top:461.27px;width:498px;min-height:217px;border:1.5px solid var(--ink);padding:20px 35px 18px;font-size:18px;line-height:24px;font-weight:400;background:rgba(249,247,239,.72)}
  .ai-roles__supplier strong{font-weight:700}

  .ai-questions{height:calc(740px + var(--ai-question-extra,0px));transition:height 320ms cubic-bezier(.22,1,.36,1)}
  .ai-questions__kicker{left:100.83px;top:56.31px;width:178px;height:48px;font-size:35px;transform:rotate(-4deg)}
  .ai-questions__title{position:absolute;left:100px;top:108.07px;width:645.04px;font-size:105px;line-height:90px}
  .ai-questions__intro{position:absolute;left:100px;top:303px;width:498px;font-size:18px;line-height:24px;font-weight:400}
  .ai-questions__save{position:absolute;left:100px;top:418px;width:302px;height:49px;font-size:18px;border:0}
  .ai-question-list{position:absolute;left:736px;top:95px;width:604px}
  .ai-question-item{border-bottom:1.5px solid var(--ink)}
  .ai-question-toggle{width:100%;min-height:120px;border:0;background:transparent;color:var(--ink);display:grid;grid-template-columns:74px 1fr 38px;align-items:center;padding:0;text-align:left;cursor:pointer}
  .ai-question-num{font-family:"Eger",Impact,sans-serif;font-size:105px;line-height:87px;color:var(--lavender);align-self:center}
  .ai-question-label{font-size:28px;line-height:30px;font-weight:700;text-transform:uppercase;padding-left:0}
  .ai-question-arrow{font-size:31px;line-height:1;justify-self:end;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
  .ai-question-toggle[aria-expanded="true"] .ai-question-arrow{transform:rotate(90deg)}
  .ai-question-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms cubic-bezier(.22,1,.36,1)}
  .ai-question-answer>div{overflow:hidden}
  .ai-question-answer p{padding:0 64px 24px 74px;font-size:16px;line-height:22px;font-weight:400}
  .ai-question-toggle[aria-expanded="true"] + .ai-question-answer{grid-template-rows:1fr}

  .ai-guidelines{height:640px}
  .ai-guidelines__kicker{left:735.81px;top:48.18px;width:224px;height:48px;font-size:35px;transform:rotate(-3deg)}
  .ai-guidelines__visual{position:absolute;left:25px;top:61px;width:721px;height:538px;object-fit:cover}
  .ai-guidelines__title{position:absolute;left:736px;top:98.34px;width:645.04px;font-size:105px;line-height:90px}
  .ai-guidelines__copy{position:absolute;left:736px;width:498px;font-size:18px;line-height:24px}
  .ai-guidelines__copy--strong{top:293px;font-weight:700}
  .ai-guidelines__copy--regular{top:432px;font-weight:400}

  .ai-conversion{height:823px}
  .ai-conversion__kicker{left:611.29px;top:74.28px;width:214px;height:47px;font-size:35px;transform:rotate(-4deg)}
  .ai-conversion__title{position:absolute;left:397.5px;top:125.82px;width:645.04px;text-align:center;font-size:105px;line-height:90px}
  .ai-conversion__visual{position:absolute;left:703.27px;top:298.54px;width:563.53px;height:420.77px;object-fit:cover}
  .ai-conversion__copy{position:absolute;left:206px;width:498px;font-size:18px;line-height:24px}
  .ai-conversion__copy--strong{top:321px;font-weight:700}
  .ai-conversion__copy--regular{top:460px;font-weight:400}
  .ai-conversion__actions .button{position:absolute;top:623px;height:38px;font-size:14px}
  .ai-conversion__actions .button:first-child{left:206px;width:180px}
  .ai-conversion__actions .button:last-child{left:401px;width:206px}

  .ai-faq{height:calc(693px + var(--ai-faq-extra,0px));transition:height 320ms cubic-bezier(.22,1,.36,1)}
  .ai-faq__kicker{left:615.29px;top:61.24px;width:206px;height:47px;font-size:35px;transform:rotate(-4deg)}
  .ai-faq__title{position:absolute;left:418px;top:111.53px;width:604px;font-size:105px;line-height:90px;text-align:center}
  .ai-faq__list{position:absolute;left:418px;top:309.98px;width:604px}
  .ai-faq-item{border-bottom:1px solid var(--ink)}
  .ai-faq-toggle{width:100%;min-height:53.94px;border:0;background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0;text-align:left;font-size:16px;line-height:22px;font-weight:500;cursor:pointer}
  .ai-faq-arrow{font-size:22px;line-height:1;flex:0 0 auto;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
  .ai-faq-toggle[aria-expanded="true"] .ai-faq-arrow{transform:rotate(90deg)}
  .ai-faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms cubic-bezier(.22,1,.36,1)}
  .ai-faq-answer>div{overflow:hidden}
  .ai-faq-answer p{padding:2px 36px 19px 0;font-size:14px;line-height:19px;font-weight:400}
  .ai-faq-toggle[aria-expanded="true"] + .ai-faq-answer{grid-template-rows:1fr}

  .ai-footer{height:375px;background:var(--dark);color:var(--cream);position:relative;overflow:hidden}
  .ai-footer__logo{position:absolute;left:628.5px;top:45.5px;width:183px;height:auto}
  .ai-footer__links{position:absolute;left:50%;top:122.5px;transform:translateX(-50%);display:flex;gap:30px;color:var(--lime);font-size:14px;line-height:28px;font-weight:300;text-transform:uppercase;white-space:nowrap}
  .ai-footer__links a,.ai-act-page .site-nav__link{position:relative}
  .ai-footer__links a::after,.ai-act-page .site-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
  .ai-footer__legal{position:absolute;left:238px;top:181.3px;width:965px;text-align:center;font-size:12px;line-height:16px;font-weight:300}
  .ai-footer__sources{position:absolute;left:206px;top:266.5px;width:1028px;color:var(--lime);font-size:9px;line-height:14px;font-weight:400;text-align:left}
  .ai-footer__sources p+p{margin-top:8px}.ai-footer__sources a{text-decoration:underline;text-underline-offset:2px}
}

@media (hover:hover) and (pointer:fine) and (min-width:601px){
  .ai-case-card:hover{background:var(--cream);transform:translateY(-2px)}
  .ai-case-card:hover .ai-case-card__title{font-size:70px;top:20px}
  .ai-case-card:hover .ai-case-card__body{opacity:1;transform:none}
  .ai-case-card:hover .ai-case-card__icon{transform:scale(1.01)}
  .ai-footer__links a:hover::after,.ai-act-page .site-nav__link:hover::after{transform:scaleX(1)}
}

/* ---------- 390 source ---------- */
@media (max-width:600px){
  .ai-page,.ai-footer{width:390px;max-width:none;margin:0;zoom:var(--stacks-mobile-scale)}
  .desktop-copy{display:none!important}.mobile-copy{display:inline}

  .ai-hero{height:986px}
  .ai-hero .brand{left:35px;top:40.18px;width:129px}
  .ai-hero .site-nav{right:35px;top:48px}
  .ai-hero__title{position:absolute;left:35px;top:114.21px;width:320px;font-size:70px;line-height:55px}
  .ai-hero__visual{position:absolute;left:15px;top:274px;width:357px;height:357px;object-fit:cover}
  .ai-hero__lead{position:absolute;left:35px;top:636.21px;width:320px;font-size:18px;line-height:23px;font-weight:700}
  .ai-hero__actions .button{position:absolute;height:38px;font-size:14px}
  .ai-hero__primary{left:102px;top:840.21px;width:186px}
  .ai-hero__secondary{left:105px;top:893.21px;width:180px;border:0}

  .ai-cases{height:980px}
  .ai-cases__kicker{left:119.75px;top:49.18px;width:148px;height:47px;font-size:35px;transform:rotate(-4deg)}
  .ai-cases__title{position:absolute;left:15px;top:100.71px;width:361.71px;text-align:center;font-size:75px;line-height:65px}
  .ai-cases__intro{position:absolute;left:35px;top:305.71px;width:320px;font-size:16px;line-height:21px;font-weight:700;text-align:left}
  .ai-case-grid{position:absolute;left:35px;top:453.72px;width:320px;display:flex;flex-direction:column;gap:35px}
  .ai-case-card{position:relative;width:320px;height:71px;min-height:71px;border:0;background:var(--lime);color:var(--ink);padding:0;overflow:hidden;text-align:left;transition:height 300ms cubic-bezier(.22,1,.36,1),background-color 260ms ease}
  .ai-case-card.is-active{height:148px;background:var(--cream)}
  .ai-case-card__icon{position:absolute;left:-13px;top:0;width:auto;height:100%;max-height:148px;pointer-events:none;transition:transform 260ms ease}
  .ai-case-card:not(.is-active) .ai-case-card__icon{height:92px;top:-10px;left:-5px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__icon{left:-9px}
  .ai-case-card[data-case="public"] .ai-case-card__icon{left:-6px}
  .ai-case-card__title{position:absolute;left:84px;top:18px;width:218px;font-family:"Eger",Impact,sans-serif;font-size:45px;line-height:35px;text-transform:uppercase;letter-spacing:.005em}
  .ai-case-card[data-case="public"] .ai-case-card__title{font-size:40px;line-height:34px;top:15px}
  .ai-case-card__body{position:absolute;left:18.5px;top:66px;width:283px;font-size:12px;line-height:15px;font-weight:300;opacity:0;transition:opacity 220ms ease}
  .ai-case-card.is-active .ai-case-card__body{opacity:1}
  .ai-case-card.is-active .ai-case-card__icon{transform:translateX(-1px)}

  .ai-roles{height:1181px;background:linear-gradient(to bottom,#fff 0 20px,var(--cream) 20px 100%)}
  .ai-roles__kicker{left:34.58px;top:67.21px;width:284px;height:47px;font-size:35px;transform:rotate(-4deg)}
  .ai-roles__title{position:absolute;left:36.9px;top:122.34px;width:318.1px;font-size:75px;line-height:65px}
  .ai-roles__visual{position:absolute;left:0;top:278px;width:387px;height:387px;object-fit:cover}
  .ai-roles__copy{position:absolute;left:35px;top:649px;width:320px;font-size:16px;line-height:21px;font-weight:400}
  .ai-roles__supplier{position:absolute;left:34px;top:858px;width:321px;min-height:263px;border:1.5px solid var(--ink);padding:20px 23px 18px;font-size:16px;line-height:24px;font-weight:400;background:rgba(249,247,239,.72)}
  .ai-roles__supplier strong{font-weight:700}

  .ai-questions{height:calc(1083px + var(--ai-question-extra,0px));transition:height 320ms cubic-bezier(.22,1,.36,1)}
  .ai-questions__kicker{left:34.79px;top:47.08px;width:178px;height:48px;font-size:35px;transform:rotate(-4deg)}
  .ai-questions__title{position:absolute;left:36.9px;top:97.34px;width:318.1px;font-size:75px;line-height:65px}
  .ai-question-list{position:absolute;left:35px;top:298px;width:320px}
  .ai-question-toggle{width:100%;min-height:103px;border:0;background:transparent;color:var(--ink);display:grid;grid-template-columns:51px 209px 38px;align-items:center;padding:0;text-align:left}
  .ai-question-num{font-family:"Eger",Impact,sans-serif;font-size:75px;line-height:87px;color:var(--lavender)}
  .ai-question-label{font-size:20px;line-height:22px;font-weight:700;text-transform:uppercase}
  .ai-question-arrow{font-size:24px;justify-self:end;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
  .ai-question-toggle[aria-expanded="true"] .ai-question-arrow{transform:rotate(90deg)}
  .ai-question-item{border-bottom:1.5px solid var(--ink)}
  .ai-question-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms cubic-bezier(.22,1,.36,1)}
  .ai-question-answer>div{overflow:hidden}
  .ai-question-answer p{padding:0 28px 18px 51px;font-size:12px;line-height:19px;font-weight:400}
  .ai-question-toggle[aria-expanded="true"] + .ai-question-answer{grid-template-rows:1fr}
  .ai-questions__intro{position:absolute;left:35px;top:860px;width:320px;font-size:16px;line-height:21px;font-weight:400;transform:translateY(var(--ai-question-extra,0px))}
  .ai-questions__save{position:absolute;left:35px;top:985px;width:226px;height:38px;font-size:14px;border:0;transform:translateY(var(--ai-question-extra,0px))}

  .ai-guidelines{display:block;height:1115px}
  .ai-guidelines__kicker{left:57px;top:49px;width:276px;height:47px;font-size:35px;transform:rotate(-3deg)}
  .ai-guidelines__title{position:absolute;left:35px;top:111px;width:320px;font-size:75px;line-height:65px}
  .ai-guidelines__visual{position:absolute;left:0;top:376px;width:390px;height:291px;object-fit:cover}
  .ai-guidelines__copy{position:absolute;left:35px;width:320px;font-size:16px;line-height:21px}
  .ai-guidelines__copy--strong{top:690px;font-weight:700}
  .ai-guidelines__copy--regular{top:864px;font-weight:400}

  .ai-conversion{height:1161px}
  .ai-conversion__kicker{left:86.75px;top:52.18px;width:212px;height:47px;font-size:35px;transform:rotate(-4deg)}
  .ai-conversion__title{position:absolute;left:14px;top:113.71px;width:361.71px;text-align:center;font-size:75px;line-height:65px}
  .ai-conversion__visual{position:absolute;left:.06px;top:311.02px;width:389.94px;height:291.15px;object-fit:cover}
  .ai-conversion__copy{position:absolute;left:35px;width:320px;font-size:16px;line-height:21px}
  .ai-conversion__copy--strong{top:613.48px;font-weight:700}
  .ai-conversion__copy--regular{top:791.48px;font-weight:400}
  .ai-conversion__actions .button{position:absolute;height:38px;font-size:14px}
  .ai-conversion__actions .button:first-child{left:105px;top:1010.51px;width:180px}
  .ai-conversion__actions .button:last-child{left:92px;top:1063.51px;width:206px}

  .ai-faq{height:calc(523px + var(--ai-faq-extra,0px));transition:height 320ms cubic-bezier(.22,1,.36,1)}
  .ai-faq__kicker{left:29.68px;top:37.18px;width:178px;height:42px;font-size:30px;transform:rotate(-4deg)}
  .ai-faq__title{position:absolute;left:35px;top:83.71px;width:320px;font-size:65px;line-height:55px}
  .ai-faq__list{position:absolute;left:35px;top:210.71px;width:320px}
  .ai-faq-toggle{width:100%;min-height:46px;border:0;background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0;text-align:left;font-size:12px;line-height:15px;font-weight:500}
  .ai-faq-toggle>span:first-child{max-width:275px}
  .ai-faq-arrow{font-size:18px;line-height:1;flex:0 0 auto;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
  .ai-faq-toggle[aria-expanded="true"] .ai-faq-arrow{transform:rotate(90deg)}
  .ai-faq-item{border-bottom:1px solid var(--ink)}
  .ai-faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms cubic-bezier(.22,1,.36,1)}
  .ai-faq-answer>div{overflow:hidden}
  .ai-faq-answer p{padding:2px 22px 14px 0;font-size:12px;line-height:19px;font-weight:400}
  .ai-faq-toggle[aria-expanded="true"] + .ai-faq-answer{grid-template-rows:1fr}

  .ai-footer{height:389px;background:var(--dark);color:var(--cream);position:relative;overflow:hidden}
  .ai-footer__logo{position:absolute;left:131.74px;top:40px;width:126.5px;height:auto}
  .ai-footer__links{position:absolute;left:35px;top:98.67px;width:320px;display:flex;justify-content:space-between;color:var(--lime);font-size:12px;line-height:28px;font-weight:300;text-transform:uppercase;white-space:nowrap}
  .ai-footer__legal{position:absolute;left:35px;top:136.67px;width:320px;font-size:9px;line-height:13px;font-weight:300}
  .ai-footer__sources{position:absolute;left:35px;top:220.67px;width:320px;color:var(--lime);font-size:7px;line-height:10px;font-weight:400}
  .ai-footer__sources p+p{margin-top:7px}.ai-footer__sources a{text-decoration:underline;text-underline-offset:1px}
}

/* Wide desktop: keep the validated 1440 composition at 1:1 and only extend
   each section background into the side rails. */
@media (min-width:1441px){
  .ai-page{overflow:visible}
  .ai-page > .ai-fullbleed{
    box-sizing:content-box;
    margin-left:calc(-1 * var(--stacks-desktop-gutter-layout,0px));
    border-left:var(--stacks-desktop-gutter-layout,0px) solid transparent;
    border-right:var(--stacks-desktop-gutter-layout,0px) solid transparent;
  }
  .ai-page > .ai-bg-lime{border-color:var(--lime)}
  .ai-page > .ai-bg-dark{border-color:var(--dark)}
  .ai-page > .ai-bg-cream{border-color:var(--cream)}
  .ai-page > .ai-bg-white{border-color:#fff}
  .ai-page > .ai-bg-lavender{border-color:var(--lavender)}
  .ai-footer{box-sizing:content-box;border-left:var(--stacks-desktop-gutter-layout,0px) solid var(--dark);border-right:var(--stacks-desktop-gutter-layout,0px) solid var(--dark)}
  .ai-act-page .scroll-header .brand{left:calc((100vw - 1440px)/2 + 100px)}
  .ai-act-page .scroll-header .site-nav{right:calc((100vw - 1440px)/2 + 100px)}
}

/* Hero image receives the same restrained motion language as the landing. */
.ai-hero__visual{animation:aiHeroBreathe 7s ease-in-out infinite;transform-origin:center}
@keyframes aiHeroBreathe{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,-3px,0) rotate(-.12deg)}}

@media (prefers-reduced-motion:reduce){
  .ai-hero__visual{animation:none}
  .ai-case-card,.ai-question-answer,.ai-faq-answer,.ai-question-arrow,.ai-faq-arrow,.ai-questions,.ai-faq{transition:none}
}

/* =========================================================
   V39 — fidelity pass against AI Act XD artboards
   ========================================================= */
.ai-act-page .ai-case-card{
  appearance:none;
  -webkit-appearance:none;
  border-radius:47px;
}
.ai-act-page .ai-case-card__icon{object-fit:contain}
.ai-act-page .ai-roles__supplier{
  background:transparent;
  border-style:dashed;
  border-color:var(--ink);
  border-radius:47px;
}
.ai-act-page .ai-question-arrow{display:flex;align-items:center;justify-content:center}
.ai-act-page .ai-question-arrow img{display:block;width:38px;height:38px;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
.ai-act-page .ai-question-toggle[aria-expanded="true"] .ai-question-arrow{transform:none}
.ai-act-page .ai-question-toggle[aria-expanded="true"] .ai-question-arrow img{transform:rotate(45deg)}
.ai-act-page .ai-faq__mascot{position:absolute;pointer-events:none}

@media (min-width:601px){
  /* Exact card state geometry from XD: 604×145, 47px radii. */
  .ai-case-card{border-radius:47px}
  .ai-case-card__icon{height:145px;width:auto;max-height:none;top:-19px}
  .ai-case-card[data-case="chatbot"] .ai-case-card__icon{left:1px;top:-19.7px}
  .ai-case-card[data-case="image"] .ai-case-card__icon{left:11.1px;top:-17.7px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__icon{left:24px;top:-18.3px}
  .ai-case-card[data-case="public"] .ai-case-card__icon{left:13.1px;top:-18.3px}

  .ai-case-card__title{top:38.5px;font-size:80px;line-height:78px}
  .ai-case-card[data-case="chatbot"] .ai-case-card__title{left:192px}
  .ai-case-card[data-case="image"] .ai-case-card__title{left:172px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__title{left:202px}
  .ai-case-card[data-case="public"] .ai-case-card__title{left:170px;font-size:80px;line-height:78px}
  .ai-case-card.is-active .ai-case-card__title,
  .ai-case-card:hover .ai-case-card__title{font-size:70px;line-height:78px;top:20px}
  .ai-case-card.is-active .ai-case-card__body,
  .ai-case-card:hover .ai-case-card__body{opacity:1;transform:none}
  .ai-case-card.is-active .ai-case-card__icon,
  .ai-case-card:hover .ai-case-card__icon{transform:none}
  .ai-case-card:hover{transform:none}

  /* The supplier note is a dashed rounded note in the source XD. */
  .ai-roles__supplier{
    border-width:3px;
    border-radius:47px;
    padding:25px 36px 18px;
  }

  /* FAQ mascot exported from the XD, not approximated with CSS. */
  .ai-faq__mascot{left:932.414px;top:150.034px;width:140.739px;height:130.76px}
}

@media (max-width:600px){
  .ai-case-card{border-radius:25px}
  .ai-case-card.is-active{border-radius:25px}
  .ai-case-card__icon{height:145px;width:auto;max-height:none}
  .ai-case-card[data-case="chatbot"] .ai-case-card__icon{left:-13px;top:-14px}
  .ai-case-card[data-case="image"] .ai-case-card__icon{left:-5px;top:-13.4px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__icon{left:-9px;top:-14px}
  .ai-case-card[data-case="public"] .ai-case-card__icon{left:-5px;top:-11.8px}
  .ai-case-card:not(.is-active) .ai-case-card__icon{height:145px;top:inherit}
  .ai-case-card__title{left:84px;top:18px;width:217.5px;font-size:45px;line-height:35px}
  .ai-case-card[data-case="public"] .ai-case-card__title{left:84px;top:18px;font-size:45px;line-height:35px}
  .ai-case-card.is-active .ai-case-card__title{left:84px;top:24px;font-size:45px;line-height:35px}
  .ai-case-card__body{left:18.5px;top:65px;width:283px;font-size:12px;line-height:15px}

  .ai-roles__supplier{
    border-width:2px;
    border-radius:25px;
    padding:25px 24px 18px;
  }

  .ai-question-arrow img{width:26px;height:26px}
  .ai-faq__mascot{left:220px;top:34.435px;width:106.107px;height:98.584px}
}

/* Exact artwork proportions. Never crop the supplied art. */
.ai-hero__visual,.ai-roles__visual,.ai-guidelines__visual,.ai-conversion__visual{object-fit:contain}
@media (max-width:600px){
  /* Keep each supplied SVG at the exact XD crop instead of resizing it to the collapsed row. */
  .ai-case-card:not(.is-active) .ai-case-card__icon{height:145px;max-height:none}
  .ai-case-card[data-case="chatbot"] .ai-case-card__icon{top:-14px}
  .ai-case-card[data-case="image"] .ai-case-card__icon{top:-13.4px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__icon{top:-14px}
  .ai-case-card[data-case="public"] .ai-case-card__icon{top:-11.8px}
}

/* =========================================================
   V40 — fidelity pass: shared STACKS header, labels, XD cards,
   questions / conversion details, footer and section artwork motion
   ========================================================= */

/* Header: use exactly the geometry validated on the main STACKS landing. */
@media (min-width:601px){
  .ai-hero .brand{left:99.4px;top:54.6px;width:173px}
  .ai-hero .site-nav{left:919px;top:65.49px;width:421px;height:38px;gap:30px}
  .ai-hero .button--header{width:262.49px;height:38px;font-size:14px;border:0}
}
@media (max-width:600px){
  .ai-hero .brand{left:33.8px;top:39px;width:133px}
  .ai-hero .site-nav{left:auto;right:35px;top:48px;width:auto;height:37px;gap:10px}
}
@media (min-width:1441px){
  .ai-act-page .scroll-header .brand{left:calc(100px + max(0px, (100vw - 1440px) * .16))}
  .ai-act-page .scroll-header .site-nav{right:calc(100px + max(0px, (100vw - 1440px) * .16))}
}
@media (max-width:600px){
  .ai-act-page .scroll-header .brand{left:35px;top:20px;width:112px}
  .ai-act-page .scroll-header .site-nav{right:35px;top:20px;height:37px;gap:10px}
}

/* Labels: same fixed-box + optical baseline system as the validated landing.
   Width/height/rotation stay sourced from the AI Act XD artboards. */
.ai-kicker{
  box-sizing:border-box;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  line-height:1;
}
.ai-kicker .kicker__text{
  display:block;
  width:100%;
  text-align:center;
  transform:translateY(2.5px);
}
@media (max-width:600px){
  .ai-kicker .kicker__text{transform:translateY(2.5px)}
  .ai-faq__kicker .kicker__text{transform:translateY(2px)}
}

/* TOUT CE QUI SORT — exact XD geometry and type metrics.
   The first card is the cream active state; the other three are lime. */
@media (min-width:601px){
  .ai-case-grid{left:100px;top:432.72px;width:1240px;height:329px;grid-template-columns:604px 604px;grid-template-rows:145px 145px;column-gap:32px;row-gap:38.9px}
  .ai-case-card{width:604px;height:145px;border-radius:47px;background:var(--lime);box-shadow:none}
  .ai-case-card.is-active{background:var(--cream)}
  .ai-case-card__title{font-size:80px;line-height:118px;letter-spacing:.005em;top:38.5px}
  .ai-case-card[data-case="chatbot"] .ai-case-card__title{left:192px}
  .ai-case-card[data-case="image"] .ai-case-card__title{left:172px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__title{left:202px}
  .ai-case-card[data-case="public"] .ai-case-card__title{left:170px;font-size:80px;line-height:118px}
  .ai-case-card.is-active .ai-case-card__title,
  .ai-case-card:hover .ai-case-card__title{font-size:70px;line-height:118px;top:20px}
  .ai-case-card__body{left:193px;top:79px;width:367px;font-size:12px;line-height:15px;font-weight:300}
  .ai-case-card[data-case="chatbot"] .ai-case-card__icon{left:1px;top:-19.7px;width:182.701px;height:145.097px}
  .ai-case-card[data-case="image"] .ai-case-card__icon{left:11.1px;top:-17.7px;width:151.666px;height:143.291px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__icon{left:24px;top:-18.3px;width:166.061px;height:143.284px}
  .ai-case-card[data-case="public"] .ai-case-card__icon{left:13.1px;top:-18.3px;width:148.499px;height:143.288px}
}
@media (max-width:600px){
  .ai-case-grid{left:35px;top:453.72px;width:320px;gap:35px}
  .ai-case-card{width:320px;min-height:71px;height:71px;border-radius:25px}
  .ai-case-card.is-active{height:148px;border-radius:25px;background:var(--cream)}
  .ai-case-card__title{left:84px;top:18px;width:217.5px;font-size:45px;line-height:35px}
  .ai-case-card[data-case="public"] .ai-case-card__title{left:84px;top:18px;font-size:45px;line-height:35px}
  .ai-case-card.is-active .ai-case-card__title{left:84px;top:24px;font-size:45px;line-height:35px}
  .ai-case-card__body{left:18.5px;top:65px;width:283px;font-size:12px;line-height:15px}
}

/* CINQ QUESTIONS — left column from XD: outline CTA, exact text block rhythm. */
.ai-questions__save{
  background:transparent!important;
  color:var(--ink)!important;
  border:2px solid var(--ink)!important;
}
@media (min-width:601px){
  .ai-questions__intro{left:100px;top:303px;width:498px;font-size:18px;line-height:24px}
  .ai-questions__save{left:100px;top:418px;width:302px;height:49px;font-size:18px}
}
@media (max-width:600px){
  .ai-questions__intro{left:35px;top:860px;width:320px;font-size:16px;line-height:21px}
  .ai-questions__save{left:35px;top:985px;width:226px;height:38px;font-size:14px}
}

/* APRÈS LA RÈGLE — preserve the exact XD composition. The second CTA is
   outline lime, not a second filled button. */
.ai-button--lime-outline{
  background:transparent;
  color:var(--lime);
  border:2px solid var(--lime);
}
@media (min-width:601px){
  .ai-conversion__kicker{left:611.29px;top:74.28px;width:214px;height:47px}
  .ai-conversion__title{left:397.5px;top:125.82px;width:645.04px;text-align:center}
  .ai-conversion__visual{left:703.27px;top:298.54px;width:563.53px;height:420.77px;object-fit:contain}
  .ai-conversion__copy{left:206px;width:498px}
  .ai-conversion__copy--strong{top:321px}
  .ai-conversion__copy--regular{top:460px}
  .ai-conversion__actions .button{top:623px;height:38px;font-size:14px}
  .ai-conversion__actions .button:first-child{left:206px;width:180px}
  .ai-conversion__actions .button:last-child{left:401px;width:206px}
}
@media (max-width:600px){
  .ai-conversion__kicker{left:86.75px;top:52.18px;width:212px;height:47px}
  .ai-conversion__title{left:14px;top:113.71px;width:361.71px;text-align:center}
  .ai-conversion__visual{left:.06px;top:311.02px;width:389.94px;height:291.15px;object-fit:contain}
}

/* Complete footer block from XD. */
@media (min-width:601px){
  .ai-footer{height:375px}
  .ai-footer__sources{left:206px;top:266.5px;width:1028px;font-size:9px;line-height:14px}
  .ai-footer__disclaimer{margin:0 0 8px}
  .ai-footer__source-list{margin:0}
}
@media (max-width:600px){
  .ai-footer__sources{left:35px;top:220.67px;width:320px;font-size:7px;line-height:10px}
  .ai-footer__disclaimer{margin:0 0 7px}
  .ai-footer__source-list{margin:0}
}

/* Large section artworks: same restrained reveal + float language as the
   main landing's SOUS L'ŒIL visual. Re-armed by JS on each new visit. */
.ai-section-art{
  transform-origin:51% 52%;
  will-change:transform,opacity;
}
.ai-section-art.is-ai-art-ready{
  opacity:0;
  transform:translate3d(0,12px,0) scale(.978) rotate(.2deg);
}
.ai-section-art.is-ai-art-ready.is-ai-art-active{
  animation:aiSectionArtIntro 900ms cubic-bezier(.22,1,.36,1) 60ms both,
            aiSectionArtFloat 6.8s ease-in-out 1s infinite;
}
@keyframes aiSectionArtIntro{
  from{opacity:0;transform:translate3d(0,12px,0) scale(.978) rotate(.2deg)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0deg)}
}
@keyframes aiSectionArtFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,-3.5px,0) rotate(.12deg)}
}
@media (prefers-reduced-motion:reduce){
  .ai-section-art,.ai-section-art.is-ai-art-ready,.ai-section-art.is-ai-art-ready.is-ai-art-active{opacity:1;transform:none;animation:none}
}

/* =========================================================
   V41 — 1440 fidelity pass after user review
   ========================================================= */

/* Keep the AI Act header visually identical to the validated STACKS landing. */
@media (min-width:601px){
  .ai-hero .brand{left:99.4px;top:54.6px;width:173px}
  .ai-hero .site-nav{left:919px;top:65.49px;width:421px;height:38px;gap:30px}
  .ai-hero .site-nav__link{font-size:14px;line-height:18px;font-weight:600}
  .ai-hero .button--header{width:262.49px;height:38px;padding:0;font-size:14px;border:0}
}
@media (max-width:600px){
  .ai-hero .brand{left:33.8px;top:39px;width:133px}
  .ai-hero .site-nav{display:flex;left:auto;right:35px;top:48px;width:auto;height:37px;gap:10px;align-items:center}
  .ai-hero .site-nav__link{display:inline-flex;align-items:center;height:37px;font-size:8px;line-height:10px;font-weight:600}
  .ai-hero .site-nav .button--header{display:none!important}
  .ai-hero .mobile-rdv-button{display:block;width:37px;height:37px;flex:0 0 37px}
  .ai-hero .mobile-rdv-button img{width:37px;height:37px}
}

/* Same label box/baseline logic as the landing; accents may overflow safely. */
.ai-kicker{overflow:visible;box-sizing:border-box;padding:0 10px;display:flex;align-items:center;justify-content:center;text-align:center}
.ai-kicker .kicker__text{width:100%;text-align:center;transform:translateY(2.5px);overflow:visible}

/* On the 1440 composition the labels need a touch more air before H2s. */
@media (min-width:601px){
  .ai-cases__title{top:131px}
  .ai-roles__title{top:109px}
  .ai-questions__title{top:113px}
  .ai-guidelines__title{top:105px}
  .ai-conversion__title{top:130px}
  .ai-faq__title{top:117px}
}

/* HERO — same ~15px text-to-CTA rhythm as the main STACKS hero. */
@media (min-width:601px){
  .ai-hero__actions .button{top:649px}
}

/* TOUT CE QUI SORT — the mascot sits above the rounded tile. The tile itself
   is a pseudo-element so the artwork is never clipped inside the card. */
.ai-case-card{background:transparent!important;overflow:visible!important;isolation:isolate}
.ai-case-card::before{content:"";position:absolute;inset:0;z-index:0;background:var(--lime);border-radius:inherit;transition:background-color 240ms cubic-bezier(.22,1,.36,1)}
.ai-case-card__icon{z-index:3;pointer-events:none}
.ai-case-card__title,.ai-case-card__body{z-index:2}
.ai-case-card.is-active::before{background:var(--cream)}

@media (min-width:601px){
  .ai-case-grid{overflow:visible}
  .ai-case-card{border-radius:47px}
  .ai-case-card__title{top:38.5px;font-size:80px;line-height:78px}
  .ai-case-card[data-case="chatbot"] .ai-case-card__title{left:192px}
  .ai-case-card[data-case="image"] .ai-case-card__title{left:172px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__title{left:202px}
  .ai-case-card[data-case="public"] .ai-case-card__title{left:170px;font-size:80px;line-height:78px}
  .ai-case-card[data-case="chatbot"] .ai-case-card__icon{left:1px;top:-19.72px;width:182.701px;height:145.097px}
  .ai-case-card[data-case="image"] .ai-case-card__icon{left:11.09px;top:-17.72px;width:151.666px;height:143.291px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__icon{left:24px;top:-18.39px;width:166.061px;height:143.284px}
  .ai-case-card[data-case="public"] .ai-case-card__icon{left:13.09px;top:-18.39px;width:148.499px;height:143.288px}
  .ai-case-card__body{left:193px;top:79px;width:367px;font-size:12px;line-height:15px}
  .ai-case-card:hover::before{background:var(--cream)}
  .ai-case-card:hover .ai-case-card__title{top:20px;font-size:70px;line-height:78px}
  .ai-case-card:hover .ai-case-card__body{opacity:1;transform:none}
  .ai-case-card:hover .ai-case-card__icon{transform:none}
}

/* Mobile keeps tap-to-open, with no sticky hover state. */
@media (max-width:600px){
  .ai-case-card::before{border-radius:25px}
  .ai-case-card.is-active::before{background:var(--cream)}
}

/* VOTRE ENTREPRISE — animated dashed frame around the supplier note. */
.ai-roles__supplier{border:0!important;position:absolute;color:var(--ink);overflow:visible}
.ai-supplier-border{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none;color:var(--ink)}
.ai-roles__supplier > :not(.ai-supplier-border){position:relative;z-index:1}
.ai-supplier-mask-path{stroke-dashoffset:1}
.ai-roles__supplier.is-supplier-border-ready.is-supplier-border-active .ai-supplier-mask-path{animation:aiSupplierDraw 1150ms cubic-bezier(.4,0,.2,1) 80ms forwards}
@keyframes aiSupplierDraw{to{stroke-dashoffset:0}}

/* CINQ QUESTIONS — lavender label and a number that remains vertically
   centred in the complete expanded row, not only in the question button. */
.ai-questions__kicker{background:var(--lavender)!important;color:var(--ink)!important}
.ai-questions__save{--button-hover-color:var(--lavender)}
@media (min-width:601px){
  .ai-question-item{position:relative;min-height:120px}
  .ai-question-toggle{position:static;grid-template-columns:1fr 38px;padding-left:74px}
  .ai-question-num{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;align-self:auto}
  .ai-question-answer{margin-top:0;transition:grid-template-rows 320ms cubic-bezier(.22,1,.36,1),margin-top 320ms cubic-bezier(.22,1,.36,1)}
  .ai-question-toggle[aria-expanded="true"] + .ai-question-answer{margin-top:-15px}
  .ai-question-answer p{padding:0 64px 20px 74px}
}

/* APRÈS LA RÈGLE — lighter hover and 30px less dead space at section end. */
@media (min-width:601px){
  .ai-conversion{height:793px}
  .ai-conversion__actions .button{--button-hover-fill:var(--cream);--button-hover-color:var(--ink);transition:border-color .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1),color .28s cubic-bezier(.22,1,.36,1)}
  .ai-conversion__actions .button:hover{border-color:var(--cream)!important;color:var(--ink)!important}
}

/* Footer disclaimer + sources sit below the copyright in STACKS lime. */
.ai-footer__sources{color:var(--lime);font-weight:300}
.ai-footer__sources a{color:inherit;text-decoration:none}
@media (min-width:601px){
  .ai-footer__sources{font-size:8px;line-height:11px;top:240px}
  .ai-footer__disclaimer{margin-bottom:7px}
}

/* The supplied section SVGs are single embedded-image SVGs, so the motion is
   applied to the complete artwork: subtle, restrained, replayable. */
.ai-section-art.is-ai-art-ready.is-ai-art-active{
  animation:aiSectionArtIntro 820ms cubic-bezier(.22,1,.36,1) 50ms both,
            aiSectionArtFloat 7.2s ease-in-out 950ms infinite;
}
@keyframes aiSectionArtFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(0,-4px,0) scale(1.004) rotate(.13deg)}
}

/* FAQ mascot: the character floats slightly while the thought/question
   elements appear in sequence each time the section is revisited. */
.ai-faq__mascot svg{display:block;width:100%;height:100%;overflow:visible}
.ai-faq__mascot{transform-origin:50% 70%;will-change:transform}
.ai-faq__mascot.is-faq-thought-ready #Tracé_1392,
.ai-faq__mascot.is-faq-thought-ready #Tracé_1394,
.ai-faq__mascot.is-faq-thought-ready #Tracé_1395,
.ai-faq__mascot.is-faq-thought-ready #Tracé_1397,
.ai-faq__mascot.is-faq-thought-ready #Tracé_1398{opacity:0}
.ai-faq__mascot.is-faq-thought-active{animation:aiFaqMascotFloat 4.8s ease-in-out .9s infinite}
.ai-faq__mascot.is-faq-thought-active #Tracé_1395{animation:aiThoughtFade 300ms ease 80ms forwards}
.ai-faq__mascot.is-faq-thought-active #Tracé_1394{animation:aiThoughtFade 330ms ease 210ms forwards}
.ai-faq__mascot.is-faq-thought-active #Tracé_1392{animation:aiThoughtFade 400ms ease 360ms forwards}
.ai-faq__mascot.is-faq-thought-active #Tracé_1397,
.ai-faq__mascot.is-faq-thought-active #Tracé_1398{animation:aiThoughtFade 300ms ease 590ms forwards}
@keyframes aiThoughtFade{from{opacity:0}to{opacity:1}}
@keyframes aiFaqMascotFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(.5deg)}}

@media (prefers-reduced-motion:reduce){
  .ai-supplier-mask-path{stroke-dashoffset:0!important;animation:none!important}
  .ai-faq__mascot{animation:none!important;opacity:1!important;transform:none!important}
  .ai-faq__mascot *{animation:none!important;opacity:1!important}
}


/* =========================================================
   V42 — Desktop 1440 review corrections
   Scope intentionally limited to the six user-reviewed AI Act areas.
   ========================================================= */

@media (min-width:601px){
  /* HERO — tighten only the H1-to-lead gap by 17px. */
  .ai-hero__lead{top:513px}

  /* TOUT CE QUI SORT — reveal copy shares the exact title axis per card. */
  .ai-case-card[data-case="chatbot"] .ai-case-card__body{left:192px;width:390px}
  .ai-case-card[data-case="image"] .ai-case-card__body{left:172px;width:390px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__body{left:202px;width:390px}
  .ai-case-card[data-case="public"] .ai-case-card__body{left:170px;width:390px}

  /* VOTRE ENTREPRISE — lift the label substantially and give the section
     matching extra vertical breathing room without moving validated content. */
  .ai-roles{height:778px}
  .ai-roles__kicker{top:18.89px}

  /* CINQ QUESTIONS — centre the number with a flex box instead of the old
     line-height/50%-of-expanded-item method. Answers are slightly tighter. */
  .ai-question-item{position:relative;min-height:120px}
  .ai-question-toggle{position:relative;grid-template-columns:74px 1fr 38px;padding-left:0}
  .ai-question-num{
    position:relative;
    left:auto;
    top:auto;
    width:74px;
    height:120px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    align-self:center;
    line-height:1;
    transform:translateY(-3px);
  }
  .ai-question-toggle[aria-expanded="true"] + .ai-question-answer{margin-top:-21px}
  .ai-question-answer p{padding:0 64px 14px 74px;line-height:21px}

  /* FOOTER — global .site-footer p positioning used to pull both source
     paragraphs out of normal flow, effectively stacking/hiding the block. */
  .ai-footer__sources p{
    position:static;
    left:auto;
    top:auto;
    width:auto;
    text-align:left;
    font-size:inherit;
    line-height:inherit;
    font-weight:inherit;
    color:inherit;
  }
}

/* CTA hover: override the V41 !important base color explicitly. */
@media (min-width:601px) and (hover:hover) and (pointer:fine){
  .ai-questions__save:hover{color:var(--lavender)!important}
  .ai-footer__sources a:hover{text-decoration:underline;text-underline-offset:2px}
}

.ai-footer__sources a:visited{color:inherit}

/* =========================================================
   V43 — Desktop 1440 review corrections
   Scope: case copy/mascots, roles label, question number centering, footer.
   ========================================================= */

/* TOUT CE QUI SORT — one inline SVG per mascot. The ivory shapes now animate
   their fill directly, so there is no two-image opacity crossfade / color bump. */
.ai-case-card__icon--inline [fill="#f9f7ef"]{
  transition:fill 240ms cubic-bezier(.22,1,.36,1);
}

@media (min-width:601px) and (hover:hover) and (pointer:fine){
  .ai-case-card:hover .ai-case-card__icon--inline [fill="#f9f7ef"]{fill:var(--lime)}
  .ai-case-card[data-case="chatbot"]:hover .ai-case-card__icon--inline{transform:rotate(2.5deg)}
  .ai-case-card[data-case="image"]:hover .ai-case-card__icon--inline{transform:rotate(-2deg)}
  .ai-case-card[data-case="deepfake"]:hover .ai-case-card__icon--inline{transform:rotate(2deg)}
  .ai-case-card[data-case="public"]:hover .ai-case-card__icon--inline{transform:rotate(-2.5deg)}
}

@media (min-width:601px){
  /* VOTRE ENTREPRISE — +18px compared with V42. */
  .ai-roles__kicker{top:36.89px}

  /* CINQ QUESTIONS — numbers are SVGs (no line-height). Number and +/× are
     both positioned against the complete item height, including its answer. */
  .ai-question-item{position:relative;min-height:120px}
  .ai-question-toggle{
    position:static;
    display:grid;
    grid-template-columns:1fr;
    min-height:120px;
    padding:0 56px 0 74px;
    align-items:center;
  }
  .ai-question-num{
    position:absolute;
    left:0;
    top:50%;
    width:74px;
    height:100px;
    margin:0;
    transform:translateY(-50%);
    display:block;
    line-height:0;
    pointer-events:none;
  }
  .ai-question-num__svg{display:block;width:100%;height:100%;overflow:visible}
  .ai-question-num__glyph{
    font-family:"Eger",Impact,sans-serif;
    font-size:105px;
    font-weight:400;
    letter-spacing:.005em;
    fill:var(--lavender);
  }
  .ai-question-arrow{
    position:absolute;
    right:0;
    top:50%;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    transform:translateY(-50%);
    pointer-events:none;
  }
  .ai-act-page .ai-question-toggle[aria-expanded="true"] .ai-question-arrow{transform:translateY(-50%)}
  .ai-question-toggle[aria-expanded="true"] .ai-question-arrow img{transform:rotate(45deg)}
  .ai-question-answer p{padding:0 56px 14px 74px;line-height:21px}

  /* FOOTER — centered source copy and 13px less bottom space. */
  .ai-footer{height:362px}
  .ai-footer__sources{text-align:center}
  .ai-footer__sources p{text-align:center}
}

/* =========================================================
   V44 — Desktop 1440 micro-adjustments
   Scope: roles label, optical SVG number centering, footer bottom space.
   Case-copy line breaks intentionally unchanged pending user-approved cuts.
   ========================================================= */
@media (min-width:601px){
  /* VOTRE ENTREPRISE — lower 7px from V43 and shift 3px left. */
  .ai-roles__kicker{left:99.05px;top:43.89px}

  /* CINQ QUESTIONS — the SVG viewport itself is centred on the row axis.
     JS then centres the visible glyph bbox (the actual 0 height) inside it. */
  .ai-question-num{
    top:50%;
    height:100px;
    transform:translateY(-50%);
  }
  .ai-question-num__svg{display:block;width:74px;height:100px;overflow:visible}
  .ai-question-num__glyph{dominant-baseline:auto}

  /* FOOTER — another 10px less bottom space. */
  .ai-footer{height:342px}
}


/* =========================================================
   V46 — Desktop 1440 micro-adjustments only
   ========================================================= */
@media (min-width:601px){
  /* TOUT CE QUI SORT — +4px breathing room between title and reveal copy. */
  .ai-case-card__body{top:83px}
}


/* =========================================================
   V47 — Desktop 1440 micro-adjustments only
   Scope: case content vertical position + open-question bottom breathing room.
   ========================================================= */
@media (min-width:601px){
  /* TOUT CE QUI SORT — move the complete title/copy composition up 3px. */
  .ai-case-card__title{top:35.5px}
  .ai-case-card.is-active .ai-case-card__title,
  .ai-case-card:hover .ai-case-card__title{top:17px}
  .ai-case-card__body{top:80px}

  /* CINQ QUESTIONS — restore bottom breathing room under open answers.
     Number and +/× remain positioned at 50% of the complete item height. */
  .ai-question-answer p{padding-bottom:24px}
}


/* =========================================================
   V49 — Mobile 390 only (V48 rules repaired). Desktop/1440 intentionally untouched.
   Re-aligned to the XD mobile artboard.
   ========================================================= */
.ai-question-label__mobile{display:none}
@media (max-width:600px){
  /* TOUT CE QUI SORT — XD mobile geometry: 1000px section, 320px cards, R25.
     The previous 20px white hand-off is removed: black meets cream directly. */
  .ai-cases{height:1000px}
  .ai-case-grid{left:35px;top:453.72px;width:320px;gap:35px}
  .ai-case-card,
  .ai-case-card::before,
  .ai-case-card.is-active,
  .ai-case-card.is-active::before{border-radius:25px}
  .ai-case-card{width:320px;min-height:71px;height:71px}
  .ai-case-card.is-active{height:148px}
  .ai-case-card__title{left:84px;top:18px;width:217.5px;font-size:45px;line-height:35px}
  .ai-case-card[data-case="public"] .ai-case-card__title{left:84px;top:18px;font-size:45px;line-height:35px}
  .ai-case-card.is-active .ai-case-card__title{left:84px;top:24px;font-size:45px;line-height:35px}
  .ai-case-card__body{left:18.5px;top:65px;width:283px;font-size:12px;line-height:15px}

  /* VOTRE ENTREPRISE — section now starts exactly where the XD starts it.
     Shift all content up by the removed 20px strip. The supplier note uses
     a genuine dashed CSS rounded border instead of a stretched SVG frame. */
  .ai-roles{height:1161px;background:var(--cream)}
  .ai-roles__kicker{top:47.21px}
  .ai-roles__title{top:102.34px}
  .ai-roles__visual{top:258px}
  .ai-roles__copy{top:629px}
  .ai-roles__supplier{
    left:34px;top:838px;width:321px;min-height:263px;
    border:1.5px dashed var(--ink)!important;
    border-radius:25px!important;
    padding:20px 23px 18px;
    background:rgba(249,247,239,.72);
    overflow:hidden;
  }
  .ai-roles__supplier .ai-supplier-border{display:none!important}

  /* CINQ QUESTIONS — same structural principle as desktop: the visible SVG
     number and +/× sit on the full item centre. Mobile question copy is
     explicitly three lines, without changing desktop wording/layout. */
  .ai-question-label__desktop{display:none}
  .ai-question-label__mobile{display:inline}
  .ai-question-item{position:relative;min-height:103px}
  .ai-question-toggle{
    position:static;display:grid;grid-template-columns:1fr;
    min-height:103px;padding:0 38px 0 51px;align-items:center;
  }
  .ai-question-num{
    position:absolute;left:0;top:50%;width:51px;height:88px;margin:0;
    transform:translateY(-50%);display:block;line-height:0;pointer-events:none;
  }
  .ai-question-num__svg{display:block;width:51px;height:88px;overflow:visible}
  .ai-question-num__glyph{
    font-family:"Eger",Impact,sans-serif;font-size:75px;font-weight:400;
    letter-spacing:.005em;fill:var(--lavender);dominant-baseline:auto;
  }
  .ai-question-label{font-size:20px;line-height:22px;font-weight:700;text-transform:uppercase}
  .ai-question-arrow{
    position:absolute;right:0;top:50%;width:38px;height:38px;
    display:flex;align-items:center;justify-content:flex-end;
    transform:translateY(-50%);pointer-events:none;
  }
  .ai-act-page .ai-question-toggle[aria-expanded="true"] .ai-question-arrow{transform:translateY(-50%)}
  .ai-question-toggle[aria-expanded="true"] .ai-question-arrow img{transform:rotate(45deg)}
  .ai-question-answer p{padding:0 28px 18px 51px;font-size:12px;line-height:19px}

  /* VOTRE CHARTE — smaller label and tighter section tail. Internal spacing
     follows the next section's compact vertical rhythm. */
  .ai-guidelines{height:1040px}
  .ai-guidelines__kicker{left:80px;top:52px;width:230px;height:42px;font-size:29px;transform:rotate(-3deg)}
  .ai-guidelines__title{top:111px}
  .ai-guidelines__visual{top:376px}
  .ai-guidelines__copy--strong{top:690px}
  .ai-guidelines__copy--regular{top:864px}

  /* FOOTER — XD specifies 7/10 centred in a 320px column. Reset inherited
     paragraph positioning so the whole green source block truly centres. */
  .ai-footer__sources{left:35px;top:220.67px;width:320px;font-size:7px;line-height:10px;text-align:center}
  .ai-footer__sources p{
    position:static!important;left:auto!important;top:auto!important;width:auto!important;
    margin-left:0;margin-right:0;text-align:center!important;
    font-size:7px!important;line-height:10px!important;font-weight:300;
  }
}


/* =========================================================
   V50 — Mobile 390 refinements only. Desktop/1440 untouched.
   Reference: user-supplied 390px JPEG (guide lines are reference only).
   ========================================================= */
@media (max-width:600px){
  /* TOUT CE QUI SORT — reduce mascots to the proportions of the mobile comp,
     then realign the condensed titles beside them. Interactions stay intact. */
  .ai-case-card__icon,
  .ai-case-card:not(.is-active) .ai-case-card__icon{
    width:auto;
    height:94px;
    max-height:94px;
  }
  .ai-case-card[data-case="chatbot"] .ai-case-card__icon{left:-3px;top:-9px}
  .ai-case-card[data-case="image"] .ai-case-card__icon{left:0;top:-8px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__icon{left:-1px;top:-9px}
  .ai-case-card[data-case="public"] .ai-case-card__icon{left:1px;top:-7px}
  .ai-case-card__title,
  .ai-case-card[data-case="public"] .ai-case-card__title{
    left:88px;
    width:214px;
  }
  .ai-case-card.is-active .ai-case-card__title{left:88px}

  /* CINQ QUESTIONS — larger numerals, slightly smaller/left-shifted question
     copy and a tighter question-to-answer hand-off. Number/+ remain centred
     on the complete item through their existing 50% positioning. */
  .ai-question-item{min-height:86px}
  .ai-question-toggle{
    min-height:86px;
    padding:0 36px 0 45px;
  }
  .ai-question-num{
    left:-2px;
    width:60px;
    height:100px;
  }
  .ai-question-num__svg{width:60px;height:100px}
  .ai-question-num__glyph{font-size:90px}
  .ai-question-label{
    font-size:17px;
    line-height:18px;
  }
  .ai-question-arrow{right:0;width:32px;height:32px}
  .ai-question-arrow img{width:26px;height:26px}
  .ai-question-toggle[aria-expanded="true"] + .ai-question-answer{margin-top:-8px}
  .ai-question-answer p{
    padding:0 24px 18px 45px;
    font-size:12px;
    line-height:18px;
  }

  /* VOTRE CHARTE — label hugs its text and shares the title's left axis.
     Tighten title→image and image→copy spacing. The final paragraph keeps
     roughly the same 60px tail as the RDV button in the following section. */
  .ai-guidelines{height:1040px}
  .ai-guidelines__kicker{
    left:35px;
    top:52px;
    width:auto;
    height:auto;
    min-width:0;
    padding:8px 10px 5px;
    font-size:29px;
    transform:rotate(-3deg);
  }
  .ai-guidelines__title{top:108px}
  .ai-guidelines__visual{top:369px}
  .ai-guidelines__copy--strong{top:669px}
  .ai-guidelines__copy--regular{top:830px}

  /* FAQ — final question line-break is provided in mobile-only markup. */
  .ai-faq-toggle .mobile-copy{display:inline}
}


/* =========================================================
   V51 — Mobile 390 adaptive sections only. Desktop/1440 untouched.
   ========================================================= */
@media (max-width:600px){
  /* TOUT CE QUI SORT — section height follows the real grid height.
     Mascots are smaller and their visual box bottoms align with the title
     baseline area in both closed and open states. */
  .ai-cases{
    height:calc(453.72px + var(--ai-cases-grid-height,389px));
    transition:height 300ms cubic-bezier(.22,1,.36,1);
  }
  .ai-case-card__icon,
  .ai-case-card:not(.is-active) .ai-case-card__icon{
    width:auto;
    height:80px;
    max-height:80px;
  }
  .ai-case-card[data-case="chatbot"] .ai-case-card__icon{left:2px;top:-27px}
  .ai-case-card[data-case="image"] .ai-case-card__icon{left:4px;top:-27px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__icon{left:3px;top:-27px}
  .ai-case-card[data-case="public"] .ai-case-card__icon{left:5px;top:-27px}
  .ai-case-card.is-active[data-case="chatbot"] .ai-case-card__icon{top:-21px}
  .ai-case-card.is-active[data-case="image"] .ai-case-card__icon{top:-21px}
  .ai-case-card.is-active[data-case="deepfake"] .ai-case-card__icon{top:-21px}
  .ai-case-card.is-active[data-case="public"] .ai-case-card__icon{top:-21px}

  /* CINQ QUESTIONS — list height, intro and CTA now drive the section height.
     This removes the blank mobile gap created by the old fixed 1083px base. */
  .ai-questions{
    height:calc(
      298px + var(--ai-question-list-height,430px) + 46px +
      var(--ai-question-intro-height,105px) + 24px + 38px + 60px
    );
    transition:height 320ms cubic-bezier(.22,1,.36,1);
  }
  .ai-questions__intro{
    top:calc(298px + var(--ai-question-list-height,430px) + 46px);
    transform:none;
  }
  .ai-questions__save{
    top:calc(
      298px + var(--ai-question-list-height,430px) + 46px +
      var(--ai-question-intro-height,105px) + 24px
    );
    transform:none;
  }

  /* VOTRE CHARTE — three approved title lines. Following content moves up by
     one former line so the already-approved vertical gaps remain unchanged. */
  .ai-guidelines{height:975px}
  .ai-guidelines__visual{top:304px}
  .ai-guidelines__copy--strong{top:604px}
  .ai-guidelines__copy--regular{top:765px}
}

/* =========================================================
   V52 — Mobile 390 micro-adjustments only. Desktop/1440 untouched.
   ========================================================= */
@media (max-width:600px){
  /* TOUT CE QUI SORT — keep the already-approved vertical alignment between
     mascot bottom and title bottom, but move the mascots left so they protrude
     outside the card and never cover the title. Keep one grid-gap of black
     breathing room below the fourth card. */
  .ai-case-card[data-case="chatbot"] .ai-case-card__icon{left:-20px}
  .ai-case-card[data-case="image"] .ai-case-card__icon{left:-18px}
  .ai-case-card[data-case="deepfake"] .ai-case-card__icon{left:-18px}
  .ai-case-card[data-case="public"] .ai-case-card__icon{left:-16px}
  .ai-cases{
    height:calc(453.72px + var(--ai-cases-grid-height,389px) + 35px);
  }

  /* CINQ QUESTIONS — give every answer a protected right gutter so its copy
     never approaches the centred + / × control, regardless of answer length. */
  .ai-question-answer p{
    padding-right:52px;
  }

  /* VOTRE CHARTE — bring the label 6px closer to the title while preserving
     a visible gap even with the rotated label. */
  .ai-guidelines__kicker{top:58px}
}

/* =========================================================
   V53 — Mobile 390 refinements only. Desktop/1440 untouched.
   Scope: case cards + FAQ spacing.
   ========================================================= */
@media (max-width:600px){
  /* TOUT CE QUI SORT — slightly more black breathing room below card 4. */
  .ai-cases{
    height:calc(453.72px + var(--ai-cases-grid-height,389px) + 53px);
  }

  /* Titles move a touch left. Closed/green cards centre the title vertically
     in the 71px pill; open/cream cards keep the established reveal layout. */
  .ai-case-card__title,
  .ai-case-card[data-case="public"] .ai-case-card__title,
  .ai-case-card.is-active .ai-case-card__title{
    left:82px;
  }
  .ai-case-card:not(.is-active) .ai-case-card__title,
  .ai-case-card:not(.is-active)[data-case="public"] .ai-case-card__title{
    top:50%;
    transform:translateY(-50%);
  }
  .ai-case-card.is-active .ai-case-card__title{
    top:24px;
    transform:none;
  }

  /* Same mascot behaviour as desktop hover, but driven by the mobile active
     state: ivory becomes STACKS lime and the mascot pivots very slightly. */
  .ai-case-card__icon--inline{
    transform-origin:50% 70%;
  }
  .ai-case-card.is-active .ai-case-card__icon--inline [fill="#f9f7ef"]{
    fill:var(--lime);
  }
  .ai-case-card.is-active[data-case="chatbot"] .ai-case-card__icon--inline{transform:rotate(2.5deg)}
  .ai-case-card.is-active[data-case="image"] .ai-case-card__icon--inline{transform:rotate(-2deg)}
  .ai-case-card.is-active[data-case="deepfake"] .ai-case-card__icon--inline{transform:rotate(2deg)}
  .ai-case-card.is-active[data-case="public"] .ai-case-card__icon--inline{transform:rotate(-2.5deg)}

  /* FAQ — add equal extra breathing room above the label and below the list,
     while preserving the accordion's adaptive extra height. */
  .ai-faq{
    height:calc(559px + var(--ai-faq-extra,0px));
  }
  .ai-faq__kicker{top:55.18px}
  .ai-faq__title{top:101.71px}
  .ai-faq__mascot{top:52.435px}
  .ai-faq__list{top:228.71px}
}

/* =========================================================
   V54 — Optical centering of CLOSED case-card titles only.
   Desktop 1440 + mobile 390. Open/hover layouts stay unchanged.
   ========================================================= */
@media (min-width:601px){
  /* Closed desktop cards: +3px optical correction. */
  .ai-case-card:not(.is-active):not(:hover) .ai-case-card__title,
  .ai-case-card:not(.is-active):not(:hover)[data-case="public"] .ai-case-card__title{
    top:38.5px;
  }
}

@media (max-width:600px){
  /* Closed mobile cards remain geometrically centred, with a +3px optical
     correction for the Eger glyphs. Active/open cards keep V53 positions. */
  .ai-case-card:not(.is-active) .ai-case-card__title,
  .ai-case-card:not(.is-active)[data-case="public"] .ai-case-card__title{
    top:calc(50% + 3px);
    transform:translateY(-50%);
  }
}


/* V55 — user review 20/09: shared menu, cards, roles heading */
/* Header must visually match the landing exactly. */
@media (min-width:601px){
  .ai-hero .brand{left:99.4px;top:54.6px;width:173px}
  .ai-hero .site-nav{left:919px;top:65.49px;width:421px;height:38px;gap:30px}
  .ai-hero .site-nav__link{font-size:14px;line-height:18px;font-weight:600}
  .ai-hero .button--header{width:auto;height:38px;padding-left:28px;padding-right:28px;font-size:14px;border:0}
}
@media (max-width:600px){
  .ai-hero .brand{left:33.8px;top:39px;width:133px}
  .ai-hero .site-nav{display:flex;left:auto;right:35px;top:48px;width:auto;height:37px;gap:10px;align-items:center;justify-content:flex-end}
  .ai-hero .site-nav__link{display:inline-flex;align-items:center;height:37px;font-size:8px;line-height:10px;font-weight:600}
  .ai-hero .site-nav .button--header{display:none!important}
  .ai-hero .mobile-rdv-button{display:block;width:37px;height:37px;flex:0 0 37px}
  .ai-hero .mobile-rdv-button img{width:37px;height:37px}
}
/* Desktop: smaller hover title, title+copy moved up together, 3 copy lines. */
@media (min-width:601px){
  .ai-case-card.is-active .ai-case-card__title,
  .ai-case-card:hover .ai-case-card__title{top:12px;font-size:62px;line-height:70px}
  .ai-case-card__body{top:67px}
  .ai-roles__title{font-size:105px;line-height:90px}
}
/* Mobile: 3-line roles title and roomier open cards. */
@media (max-width:600px){
  .ai-case-card.is-active{height:160px}
  .ai-roles__title{font-size:74px;line-height:65px}
}


/* =========================================================
   V56 — user review 20/09 evening: card rhythm + roles + FAQ wrapping
   ========================================================= */
@media (min-width:601px){
  /* Copy is authored as three intentional lines. Prevent a fourth line. */
  .ai-case-card__body{width:392px;line-height:15px}
  .ai-case-card__body .desktop-copy{display:block}
  .ai-case-line{display:block;white-space:nowrap}

  /* CHATBOT: centre the complete title+copy group optically in the cream box. */
  .ai-case-card[data-case="chatbot"].is-active .ai-case-card__title,
  .ai-case-card[data-case="chatbot"]:hover .ai-case-card__title{top:20px;line-height:60px}
  .ai-case-card[data-case="chatbot"].is-active .ai-case-card__body,
  .ai-case-card[data-case="chatbot"]:hover .ai-case-card__body{top:76px}
}

@media (max-width:600px){
  /* Open cards do not need identical heights: Chatbot + Deepfake are shorter. */
  .ai-case-card.is-active[data-case="chatbot"],
  .ai-case-card.is-active[data-case="deepfake"]{height:136px}
  .ai-case-card.is-active[data-case="image"],
  .ai-case-card.is-active[data-case="public"]{height:160px}

  /* Keep the short-card copy comfortably clear of the bottom edge. */
  .ai-case-card.is-active[data-case="chatbot"] .ai-case-card__title,
  .ai-case-card.is-active[data-case="deepfake"] .ai-case-card__title{top:20px}
  .ai-case-card.is-active[data-case="chatbot"] .ai-case-card__body,
  .ai-case-card.is-active[data-case="deepfake"] .ai-case-card__body{top:61px}

  /* Exact 3-line role title requested. */
  .ai-roles__title{font-size:72px;line-height:63px}

  /* Never leave a final French question mark alone on a new line. */
  .ai-faq-toggle>span:first-child{max-width:282px}
}

/* =========================================================
   V57 — 20/09 final card rhythm correction
   All four desktop cards use CHATBOT's validated internal rhythm.
   Mobile IMAGE + PUBLIC are shortened now that their copy is tighter.
   ========================================================= */
@media (min-width:601px){
  .ai-case-card.is-active .ai-case-card__title,
  .ai-case-card:hover .ai-case-card__title{
    top:20px;
    font-size:62px;
    line-height:60px;
  }
  .ai-case-card.is-active .ai-case-card__body,
  .ai-case-card:hover .ai-case-card__body{
    top:76px;
  }
}

@media (max-width:600px){
  .ai-case-card.is-active[data-case="image"],
  .ai-case-card.is-active[data-case="public"]{
    height:148px;
  }
}