.web-page { --agf2-orange:#ff4b1b; --web-black:#0b0b0b; --expertise-glow:255,75,27; background:#fff; color:#111; overflow:clip; }
.web-page--application { --expertise-glow:145,100,255; }
.web-page--referencement { --expertise-glow:42,190,145; }
.web-page--formation { --expertise-glow:240,175,65; }
.web-page .wrap { width:min(1280px,calc(100% - 40px)); }
.web-page .web-kicker { margin:0 0 22px; color:var(--agf2-orange); font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1.6; }
.web-page h2 { font:700 clamp(3rem,6vw,6.8rem)/.87 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:-.065em; text-transform:uppercase; margin:20px 0 40px; overflow-wrap:anywhere; }
h1#web-title span { color: transparent; -webkit-text-stroke: 2px var(--agf2-orange); }
.web-page h2 span, .web-page h1 span { color: transparent; -webkit-text-stroke: 2px var(--agf2-orange); }
@media screen and (max-width:667px){
h1#web-title span { color: transparent; -webkit-text-stroke: 1px var(--agf2-orange); }
.web-page h2 span, .web-page h1 span { color: transparent; -webkit-text-stroke: 1px var(--agf2-orange); }	
}
/* Safari / iPhone */
@supports(-webkit-touch-callout:none){h1#web-title span,.web-page h2 span,.web-page h1 span{-webkit-text-stroke:0;color:#000;text-shadow:-1px -1px 0 var(--agf2-orange),1px -1px 0 var(--agf2-orange),-1px 1px 0 var(--agf2-orange),1px 1px 0 var(--agf2-orange),0 -1px 0 var(--agf2-orange),0 1px 0 var(--agf2-orange),-1px 0 0 var(--agf2-orange),1px 0 0 var(--agf2-orange)}}
.web-page h3 { font-weight:700; }
.web-hero { position:relative; isolation:isolate; display:flex; color:#fff; background:var(--web-black); min-height:100vh; }
.web-hero::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 80% 30%,rgba(var(--expertise-glow),.2),transparent 60%); }
.web-hero__grid { display:grid; grid-template-columns:1.05fr 1fr; gap:55px; align-items:center; }
.web-hero h1 { margin:25px 0 30px; font:1000 clamp(4rem,7.6vw,8rem)/.82 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:-.075em; text-transform:uppercase; overflow-wrap:anywhere; }
.web-intro { max-width:510px; color:#c5c1ba; line-height:1.75; font-size:1.05rem; }
.web-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:30px; }
.web-btn { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; padding:17px 24px; min-height:50px; background:var(--agf2-orange); color:#0b0b0b; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--agf2-orange); border-radius:50px; transition:background .2s,transform .2s; }
.web-btn:hover { background:#fff; transform:translateY(-3px); }
.web-link { display:inline-flex; align-items:center; gap:12px; font-size:.76rem; font-weight:700; padding-block:12px; text-decoration:underline; text-underline-offset:6px; }
.web-link:hover { color:var(--agf2-orange); }
.web-hero__note{ display: none; }
.web-hero__note { color:#8d8982; font-size:.74rem; margin:23px 0 0; }
.web-preview { position:relative; padding:28px 0; min-width:0; }
.web-preview__halo { position:absolute; inset:8% -10%; background:radial-gradient(ellipse,rgba(var(--expertise-glow),.3),transparent 68%); filter:blur(30px); pointer-events:none; }
.web-browser { position:relative; background:#f2efe7; border:1px solid #ffffff38; border-radius:0; overflow:hidden; }
.web-browser__bar { display:flex; gap:5px; align-items:center; background:#222; color:#a6a6a6; padding:13px 15px; font:10px/1.2 ui-monospace,monospace; }
.web-browser__bar i { width:6px; height:6px; border-radius:50%; background:#777; }
.web-browser__bar span { text-align:center; flex:1; }
.web-browser__bar b { color:var(--agf2-orange); }
.web-browser__image { border-radius:0; display:block; width:100%; height:440px; object-fit:cover; object-position:top; }
.web-demo { color:#111; }
.web-demo__nav { padding:21px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:8px; }
.web-demo__nav strong { font-size:12px; letter-spacing:-.05em; }
.web-demo__nav strong span { color:var(--agf2-orange); }
.web-demo__image { padding:30px 24px; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(90deg,#0009,#0001),url('../images/packs-web-arena.png') center/cover; color:#fff; }
.web-demo__image small { font-size:8px; letter-spacing:.12em; margin-bottom:18px; }
.web-demo__image > strong { font:700 clamp(36px,3.7vw,58px)/.95 Georgia,serif; letter-spacing:-.05em; }
.web-demo__image > strong span { color:#ffba89; }
.web-demo__button { padding:10px 15px; background:#fff; color:#111; border-radius:30px; font-size:8px; margin-top:22px; align-self:start; }
.web-demo__bottom { display:flex; align-items:center; justify-content:space-between; padding:25px 24px; font-size:9px; gap:15px; }
.web-demo__bottom strong { font-size:16px; letter-spacing:-.04em; }
.web-preview__badge { display: none !important; }
.web-preview__badge { position:absolute; bottom:70px; right:-10px; display:flex; gap:15px; align-items:center; padding:17px 23px; background:var(--agf2-orange); color:#111; border-radius:4px; box-shadow:0 10px 35px #0005; font-size:11px; line-height:1.6; transform:rotate(3deg); }
.web-preview__badge > span { font-size:28px; }
.web-preview__caption{ display: none; }
.web-preview__caption { color:#8d8982; font-size:.62rem; text-align:center; margin:28px 0 0; }
.web-ribbon{ display: none; }
.web-ribbon { position:relative; overflow:hidden; background:var(--agf2-orange); color:#111; font-size:.9rem; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }
.web-ribbon__track { display:flex; width:max-content; animation:web-ribbon-right 28s linear infinite; }
.web-ribbon__group { display:flex; align-items:center; justify-content:space-around; flex:none; width:max(100vw,900px); gap:40px; padding:19px 50px; box-sizing:border-box; }
.web-ribbon__pause { position:absolute; right:8px; top:50%; transform:translateY(-50%); border:1px solid #1116; border-radius:50%; width:30px; height:30px; background:#ff4b1b; color:#111; cursor:pointer; }
.web-ribbon:hover .web-ribbon__track,.web-ribbon:focus-within .web-ribbon__track,.web-ribbon.is-paused .web-ribbon__track { animation-play-state:paused; }
@keyframes web-ribbon-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
.web-ribbon i { font-style:normal; }
.web-section { padding:clamp(80px,9vw,130px) 0; }
.web-section__head { display:flex; justify-content:space-between; gap:50px; align-items:end; margin-bottom:45px; }
.web-section__head > div { min-width:0; flex:1.5; }
.web-section__head > p { flex:.7; max-width:360px; margin:0 0 40px; color:#66615a; line-height:1.8; }
.web-offers__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.web-offer { display:flex; flex-direction:column; border:1px solid #1115; }
.web-offer__label { display:flex; justify-content:space-between; padding:16px 30px; background:var(--agf2-orange); color:#111; font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.web-offer__body { padding:36px; display:flex; flex:1; flex-direction:column; align-items:start; }
.web-offer h3 { margin:0 0 25px; font-size:clamp(2rem,3.4vw,3.5rem); line-height:.95; letter-spacing:-.06em; text-transform:uppercase; max-width:470px; }
.web-offer p:not(.web-kicker) { line-height:1.8; color:#66615a; font-size:.95rem; margin:0 0 24px; }
.web-offer ul { list-style:none; padding:0; margin:0 0 30px; width:100%; }
.web-offer li { padding:13px 0 13px 24px; border-bottom:1px solid #ddd8d0; font-size:.88rem; position:relative; }
.web-offer li::before { content:"↗"; position:absolute; left:0; color:var(--agf2-orange); }
.web-offer .web-btn { margin-top:auto; }
.web-offer .web-offer__price { color:#111; font-size:1.8rem; font-weight:700; }
.web-offer--custom { background:#111; color:#fff; border-color:#111; }
.web-offer--custom .web-offer__label { background:#242424; color:#ddd; }
.web-offer--custom p:not(.web-kicker) { color:#aaa69f; }
.web-offer--custom li { border-color:#333; }
.web-btn--light { background:#fff; border-color:#fff; }
.web-btn--light:hover { background:var(--agf2-orange); border-color:var(--agf2-orange); }
.web-value { background:#0b0b0b; color:#fff; }
.web-value__grid { display:grid; grid-template-columns:1.15fr 1fr; gap:8%; }
.web-value__grid > div > p:not(.web-kicker) { max-width:470px; color:#66615a; line-height:1.8; }
.web-value .web-value__grid > div > p:not(.web-kicker) { color:#bbb; }
.web-benefits article { display:flex; align-items:start; gap:24px; padding:27px 0; border-top:1px solid #ffffff30; }
.web-benefits article > span { color:var(--agf2-orange); font-size:.74rem; padding-top:5px; font-weight:800; }
.web-benefits h3 { font-size:1.5rem; letter-spacing:-.04em; margin:0 0 12px; }
.web-benefits p { color:#bbb; line-height:1.8; font-size:.93rem; margin:0; }
.web-page .agf2-latest { padding:clamp(80px,9vw,130px) 0; }
.web-page .agf2-latest h2 { color:#fff; font-weight:700; }
.web-page .agf2-kicker { color:var(--agf2-orange); font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.web-page .agf2-project-card h3 { font-weight:700; }
.web-steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px; }
.web-steps li { position:relative; min-width:0; }
.web-steps li:not(:last-child)::after { content:""; position:absolute; top:37px; left:76px; width:calc(100% - 46px); border-top:2px dashed #ddd; }
.web-steps__icon { position:relative; width:76px; height:76px; border-radius:50%; background:#111; color:var(--agf2-orange); display:grid; place-items:center; margin-bottom:25px; }
.web-steps__icon svg { width:30px; height:30px; }
.web-steps__icon span { position:absolute; bottom:-4px; right:-4px; background:var(--agf2-orange); color:#111; border:3px solid #fff; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.6rem; font-weight:900; }
.web-steps h3 { font-size:1.16rem; margin:0 0 15px; letter-spacing:-.035em; overflow-wrap:anywhere; }
.web-steps p { line-height:1.75; font-size:.87rem; color:#66615a; margin:0; }
.web-faq { background:var(--agf2-orange); color:#111; }
.web-faq h2 span{ color: transparent !important; -webkit-text-stroke: 2px #000; }
@media screen and (max-width:667px){.web-faq h2 span{ color: transparent; -webkit-text-stroke: 1px #000; }}
@supports(-webkit-touch-callout:none){.web-faq h2 span{ -webkit-text-stroke:0;color:var(--agf2-orange)!important;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 -1px 0 #000,0 1px 0 #000,-1px 0 0 #000,1px 0 0 #000}}
@supports(-webkit-touch-callout:none){.web-method h2 span, .web-offers h2 span{ -webkit-text-stroke:0;color:white!important;text-shadow:-1px -1px 0 var(--agf2-orange),1px -1px 0 var(--agf2-orange),-1px 1px 0 var(--agf2-orange),1px 1px 0 var(--agf2-orange),0 -1px 0 var(--agf2-orange),0 1px 0 var(--agf2-orange),-1px 0 0 var(--agf2-orange),1px 0 0 var(--agf2-orange)}}
.web-page .web-faq h2 span,.web-page .web-faq .web-kicker { color:#111; }
.web-faq details { border-top:1px solid #1115; }
.web-faq details:last-child { border-bottom:1px solid #1115; }
.web-faq summary { display:flex; gap:20px; justify-content:space-between; align-items:center; min-height:76px; padding:20px 16px; font-size:clamp(1.2rem,1.7vw,1.55rem); line-height:1.3; font-weight:700; list-style:none; cursor:pointer; transition:background-color .2s,color .2s; }
.web-faq summary::-webkit-details-marker { display:none; }
.web-faq summary span { color:#111; font-size:1.4rem; transition:transform .2s; }
.web-faq summary:hover,.web-faq summary:focus-visible { background:#0b0b0b; color:#fff; }
.web-faq summary:hover span,.web-faq summary:focus-visible span { color:var(--agf2-orange); }
.web-faq details[open] summary span { transform:rotate(45deg); }
.web-faq details p { color:#222; line-height:1.8; padding:0 24px 20px 0; font-size:.93rem; }
/* La page reste lisible sans JavaScript ; animation appliquée uniquement par JS. */
@media(max-width:1000px) {
  .web-hero__grid { grid-template-columns:1fr; gap:20px; }
  .web-hero h1 { font-size:clamp(4rem,12vw,7rem); }
  .web-preview { width:min(630px,90%); margin:auto; }
  .web-hero__copy { max-width:730px; }
  .web-steps { grid-template-columns:1fr; gap:0; }
  .web-steps li { display:grid; grid-template-columns:76px 1fr; column-gap:25px; padding-bottom:32px; }
  .web-steps__icon { grid-row:1/3; margin:0; }
  .web-steps li:not(:last-child)::after { top:76px; bottom:0; left:37px; width:0; border-top:0; border-left:2px dashed #ddd; }
  .web-steps p { grid-column:2; }
}
@media(max-width:760px) {
  .web-hero { padding-top:120px; }
  .web-hero { border-bottom: none !important; }
  .web-hero h1 { font-size:clamp(3.8rem,15vw,6rem); }
  .web-section__head { display:block; }
  .web-section__head > p { max-width:100%; margin-top:25px; }
  .web-offers__grid,.web-value__grid { grid-template-columns:1fr; gap:35px; }
  .web-offer__body { padding:28px; }
  .web-offer__label { padding-inline:28px; }
  .web-preview { width:94%; }
  .web-demo__image { min-height:230px; }
  .web-preview__badge { right:-3px; bottom:58px; padding:11px 15px; font-size:9px; }
  .web-demo__nav > span { display:none; }
  .web-ribbon { font-size:.7rem; }
  .web-btn { gap:16px; }
  .web-browser__image { height:300px; }
}
@media(prefers-reduced-motion:reduce) {
  .web-ribbon__track { animation:none; width:100%; }
  .web-ribbon__group { width:100%; flex-wrap:wrap; gap:16px; padding:19px 20px; }
  .web-ribbon__group[aria-hidden],.web-ribbon__pause { display:none; }
  .web-page *, .web-page *::after { transition:none!important; }
  .web-browser { transform:none; }
}
.expertise-visual { min-height:450px; color:#fff; background:radial-gradient(ellipse at 90% 30%,rgba(var(--expertise-glow),.3),transparent 70%),#141414; }
.expertise-visual small { display:block; font-size:9px; font-weight:700; letter-spacing:.09em; }
.expertise-visual strong { display:block; font-size:clamp(26px,3vw,44px); line-height:1.05; letter-spacing:-.045em; }
.expertise-visual--app { display:flex; gap:18px; align-items:center; padding:30px 24px; }
.expertise-visual__aside { flex:1; }
.expertise-visual__aside strong { margin:22px 0; }
.expertise-visual__aside > span { color:#bbb; font-size:12px; line-height:1.6; }
.expertise-phone { flex:0 0 47%; max-width:230px; padding:15px; border:5px solid #373737; border-radius:32px; background:#f8f5ef; color:#111; box-shadow:0 20px 35px #0007; transform:rotate(6deg); }
.expertise-phone__notch { width:58px; height:12px; background:#171717; border-radius:20px; margin:-9px auto 10px; }
.expertise-phone small { display:flex; justify-content:space-between; font-size:7px; }
.expertise-phone > p { font-size:9px; margin:18px 0 12px; }
.web-page .expertise-phone h3 { font-size:32px; line-height:.95; letter-spacing:-.06em; margin:0 0 15px; }
.expertise-phone__image { height:95px; border-radius:12px; background:url('../images/packs-web-arena.png') center/cover; }
.expertise-phone__row { display:grid; gap:5px; font-size:8px; margin:15px 0; }
.expertise-phone__button { padding:12px 8px; background:#ff4b1b; border-radius:20px; font-size:8px; font-weight:700; }
.expertise-phone__tabs { display:flex; justify-content:space-around; font-size:16px; padding-top:15px; }
.expertise-visual--seo { padding:40px 30px; }
.expertise-visual--seo > strong { margin:20px 0 25px; }
.expertise-search { display:flex; justify-content:space-between; gap:10px; border:1px solid #ffffff40; border-radius:28px; padding:16px; font-size:12px; background:#ffffff12; }
.expertise-result { background:#fff; color:#111; padding:24px; border-radius:12px; margin-top:18px; }
.expertise-result > span { font-size:11px; }
.expertise-result small { color:#666; margin:6px 0; font-size:9px; }
.web-page .expertise-result h3 { font-size:20px; line-height:1.2; letter-spacing:-.035em; margin:18px 0 10px; }
.expertise-result p { font-size:11px; color:#666; line-height:1.6; }
.expertise-result > div,.expertise-visual__note { font-size:10px; line-height:1.6; }
.expertise-visual__note { color:#bbb; margin:20px 0 0; }
.expertise-visual--formation { position:relative; }
.expertise-visual--formation > img { display:block; width:100%; height:260px; object-fit:cover; }
.expertise-workshop { padding:28px; }
.expertise-workshop > strong { margin:18px 0 25px; }
.expertise-workshop > div { display:flex; flex-wrap:wrap; gap:12px; font-size:10px; color:#ccc; }
@media(max-width:500px) {
 .expertise-visual--app { padding:25px 14px; gap:12px; min-height:390px; }
 .expertise-visual__aside strong { font-size:24px; }
 .expertise-visual__aside > span { font-size:10px; }
 .expertise-phone { padding:10px; border-width:4px; flex-basis:49%; }
 .web-page .expertise-phone h3 { font-size:27px; }
 .expertise-visual--seo { padding:30px 20px; }
 .expertise-search { font-size:10px; padding:12px; }
 .expertise-result { padding:18px; }
}

.web-hero{
	border-bottom: 1px solid rgba(17, 17, 17, 0.18823529411764706);
}

/* Pictogrammes des technologies : emplacements facultatifs autour du visuel. */
.web-preview:has(.expertise-tech) { padding-bottom:105px; }
.expertise-tech { position:absolute; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:110px; min-height:100px; padding:14px; box-sizing:border-box; border:1px solid #ffffff26; border-radius:18px; background:#161616; color:#fff; box-shadow:0 12px 32px #0003; transform:translate(var(--tech-offset-x,0px),var(--tech-offset-y,0px)); transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.expertise-tech__image { display:block; width:58px; height:58px; object-fit:contain; }
.expertise-tech span { max-width:100%; font-size:11px; line-height:1.3; text-align:center; overflow-wrap:anywhere; }
.expertise-tech--1 { top:5%; left:-16px; }
.expertise-tech--2 { top:45%; right:-16px; }
.expertise-tech--3 { bottom:8px; left:calc(50% - 50px); }
html[data-theme="light"] .expertise-tech { background:#fff; color:#111; border-color:#1112; }
@media(max-width:760px) {
 .web-preview:has(.expertise-tech) { padding-bottom:50px; }
 .expertise-tech { top:auto; bottom:8px; width:80px; min-height:86px; padding:10px; transform:none; }
 .expertise-tech__image { width:44px; height:44px; }
 .expertise-tech--1 { left:0; }
 .expertise-tech--2 { left:calc(50% - 40px); right:auto; }
 .expertise-tech--3 { left:auto; right:0; }
}

@media(prefers-reduced-motion:reduce) { .expertise-tech { transform:none; transition:none; } }