/* Accueil, section « Agence IA » (#agence-ia). 21/10/2026, Axel : se placer sur « agence IA », puis « améliore drastiquement
   le design et l'expérience » d'après sa vidéo de référence : éventail de cartes qui défile seul, dans la DA du site.
   Cartes = fond blanc + nappes de couleur du liseré (dégradé en CSS, sans image) + Bobby en pâte à modeler. Aucune ombre portée (règle d'Axel) : la profondeur vient
   d'un voile couleur du fond posé sur les cartes éloignées. Positions calculées par agence-ia.js (variables --x --y --r --s --v). */
.sec.agence-ia { background: var(--paper); padding: 120px 0 112px; overflow: hidden; }
.agence-ia__tete { max-width: 860px; margin: 0 auto; text-align: center; }
/* En-tête modernisé (21/10 soir, Axel : « plus moderne, surtout en haut ») : badge pilule, grand titre serré,
   définition courte, les 4 gestes de l'agence en étapes reliées (couleurs du liseré), localisation en petite ligne. Texte intégral conservé. */
.agence-ia__badge { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 13.5px; }
.agence-ia__badge i { width: 7px; height: 7px; border-radius: 50%; background: #FB4D17; animation: ag-pouls 2.4s ease-in-out infinite; }
.agence-ia__tete .h { margin-top: 22px; font-size: clamp(32px, 3.9vw, 54px); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.agence-ia__tete .p { max-width: 640px; margin: 22px auto 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.ag-etapes { position: relative; display: flex; justify-content: center; gap: 10px; margin: 30px auto 0; padding: 0; list-style: none; }
.ag-etapes li { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.ag-etapes li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #1A1813; font-size: 12px; font-weight: 600; }
.ag-etapes li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 10px; height: 1px; background: var(--line-2); }
.agence-ia__ou { display: inline-flex; align-items: flex-start; gap: 8px; max-width: 620px; margin: 22px auto 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-align: left; }
.agence-ia__ou svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: #FB4D17; }

.ag-scene { --ag-w: 320px; position: relative; margin-top: 56px; outline: none; isolation: isolate; }   /* 21/10, Axel : les cartes passent sous le menu (contexte d'empilement propre, sinon la carte active à z-index 100 recouvrait le menu) */
.ag-scene:focus-visible .ag-carte.is-active { outline: 2px solid var(--accent); outline-offset: 6px; }
.ag-pile { position: relative; height: calc(var(--ag-w) * 1.3 + 110px); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.ag-pile.is-drag { cursor: grabbing; }

.ag-carte {
  --x: 0px; --y: 0px; --r: 0deg; --s: 1; --v: 0;
  position: absolute; left: 50%; top: 0; width: var(--ag-w); height: calc(var(--ag-w) * 1.3);
  margin-left: calc(var(--ag-w) / -2); border-radius: 28px; overflow: hidden; isolation: isolate;
  background: #fff; border: 1px solid rgba(26,24,19,.09);
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(var(--s));
  transform-origin: 50% 85%;
  transition: transform 1s cubic-bezier(.45,0,.2,1);
  will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* Fond épuré façon SaaS (21/10 soir, remplace les peintures ; rétabli le 21/10 au soir, Axel préfère ces pastels en fondu à la v5) : trois nappes de couleur prises dans le liseré du site
   (bleu, lilas, rose, pêche, vert), un duo différent par carte, qui monte du bas et laisse le haut blanc pour le texte. */
.ag-carte[data-i="0"] { --c1: #9fc1f3; --c2: #d8c4f4; --c3: #ffd3b9; }
.ag-carte[data-i="1"] { --c1: #d4b9f3; --c2: #f7c0d7; --c3: #abc8f4; }
.ag-carte[data-i="2"] { --c1: #ffc8a2; --c2: #f7bed4; --c3: #dac7f6; }
.ag-carte[data-i="3"] { --c1: #b3dbb0; --c2: #a9caf3; --c3: #e3cff6; }
.ag-carte[data-i="4"] { --c1: #a7c5f3; --c2: #ffd0af; --c3: #c0e1bc; }
.ag-pile.is-drag .ag-carte, .ag-scene.is-instant .ag-carte { transition: none; }
.ag-carte::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--paper); opacity: var(--v); pointer-events: none; transition: opacity 1s cubic-bezier(.45,0,.2,1); }
.ag-pile.is-drag .ag-carte::after { transition: none; }
.ag-carte__fond {
  position: absolute; inset: -18%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 38% at 26% 78%, var(--c1), transparent 72%),
    radial-gradient(40% 36% at 76% 70%, var(--c2), transparent 72%),
    radial-gradient(46% 30% at 52% 96%, var(--c3), transparent 74%);
  -webkit-mask-image: linear-gradient(180deg, transparent 26%, #000 60%); mask-image: linear-gradient(180deg, transparent 26%, #000 60%);
}
/* 21/10 soir, Axel : « le plus smooth possible », Bobby immobile. Plus aucune animation propre à la carte active (fond, Bobby) :
   elle repartait de zéro à chaque changement et donnait un petit saut. Seul le mouvement des cartes reste. */
/* Trame de points très légère, qui s'efface vers le haut */
.ag-carte::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(rgba(26,24,19,.11) 1px, transparent 1.3px) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 100%); mask-image: linear-gradient(180deg, transparent 40%, #000 100%); }
.ag-carte__haut { position: relative; z-index: 2; padding: 26px 26px 0; color: #1A1813; }
.ag-carte__tag { display: inline-block; padding: 5px 11px; border-radius: 999px; background: #FB4D17; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.ag-carte h3 { margin-top: 14px; font-size: 25px; font-weight: 600; letter-spacing: -.03em; line-height: 1.12; color: #1A1813; }
.ag-carte__haut p { margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: #5E574C; }
.ag-carte__bobby { position: absolute; z-index: 2; left: 50%; bottom: 56px; height: calc(var(--ag-w) * var(--k, .515)); width: auto; transform: translateX(-50%); pointer-events: none; }
/* Pastille d'interface sous Bobby : le fait clé de la carte, en une ligne */
.ag-carte__pastille { position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 13px 7px 11px; border-radius: 999px; background: rgba(255,255,255,.86); border: 1px solid rgba(26,24,19,.1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 600; color: #1A1813; }
.ag-carte__pastille i { width: 7px; height: 7px; border-radius: 50%; background: #FB4D17; }
.ag-carte.is-active .ag-carte__pastille i { animation: ag-pouls 2.4s ease-in-out infinite; }
@keyframes ag-pouls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Mode nuit */
html[data-theme="nuit"] .ag-carte { background: #1b1b1b; border-color: rgba(255,255,255,.1); }
html[data-theme="nuit"] .ag-carte__fond { opacity: .62; }
html[data-theme="nuit"] .ag-carte::before { background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.3px); }
html[data-theme="nuit"] .ag-carte__haut, html[data-theme="nuit"] .ag-carte h3 { color: #fff; }
html[data-theme="nuit"] .ag-carte__haut p { color: #a3a3a0; }
html[data-theme="nuit"] .ag-carte__pastille { background: rgba(30,30,30,.82); border-color: rgba(255,255,255,.14); color: #fff; }

.ag-legendes { display: grid; max-width: 640px; margin: 0 auto; text-align: center; }
.ag-legende { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); visibility: hidden; transition: opacity .5s ease, transform .6s cubic-bezier(.22,.9,.24,1), visibility 0s linear .6s; }
.ag-legende.is-active { opacity: 1; transform: none; visibility: visible; transition: opacity .55s ease .15s, transform .7s cubic-bezier(.22,.9,.24,1) .15s, visibility 0s; }
.ag-legende p { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.ag-legende__lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.ag-legende__lien svg { flex-shrink: 0; width: 15px; height: 15px; transition: transform .25s ease; }
.ag-legende__lien:hover svg { transform: translateX(3px); }

.ag-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 32px; }
.ag-fleche { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.ag-fleche:hover { background: var(--card); border-color: var(--ink-3); }
.ag-fleche svg { width: 16px; height: 16px; }
.ag-points { display: flex; align-items: center; gap: 8px; }
.ag-point { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; overflow: hidden; transition: width .5s cubic-bezier(.22,.9,.24,1), background .3s ease; }
.ag-point.is-active { width: 34px; }
.ag-point i { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.ag-point.is-active i { transform: scaleX(1); }
.ag-scene.is-auto .ag-point.is-active i { animation: ag-progres var(--ag-duree, 6s) linear forwards; }
.ag-scene.is-pause .ag-point.is-active i { animation-play-state: paused; }
@keyframes ag-progres { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 720px) {
  .sec.agence-ia { padding: 76px 0 72px; }
  .agence-ia__tete { text-align: left; }
  .agence-ia__tete .h { font-size: 31px; line-height: 1.1; }
  .agence-ia__tete .p { margin-left: 0; font-size: 16px; }
  .ag-etapes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
  .ag-etapes li { font-size: 13.5px; padding-right: 12px; }
  .ag-etapes li + li::before { display: none; }
  .agence-ia__ou { margin-left: 0; font-size: 13.5px; }
  .ag-scene { --ag-w: 236px; margin-top: 40px; }
  .ag-pile { height: calc(var(--ag-w) * 1.3 + 70px); }
  .ag-carte { border-radius: 22px; }
  .ag-carte__haut { padding: 20px 18px 0; }
  .ag-carte h3 { font-size: 20px; margin-top: 11px; }
  .ag-carte__haut p { font-size: 13px; }
  .ag-carte__bobby { bottom: 44px; height: calc(var(--ag-w) * var(--k, .515) * .8); }
  .ag-carte__pastille { bottom: 14px; font-size: 11.5px; padding: 6px 11px 6px 9px; }
  .ag-legende p { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-carte, .ag-carte::after, .ag-legende, .ag-point { transition: none; }
  .ag-carte.is-active .ag-carte__pastille i, .agence-ia__badge i { animation: none; }
}