/* 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;
}
/* 22/10/2026, Axel : les cartes prennent les pastels des badges Bobby (bleu ciel, lilas, pêche, + vert et rose du liseré),
   et Bobby prend la couleur de sa carte (images v6 recolorées). --fond = carte, --teinte = nappe derrière Bobby, --encre = étiquette. */
.ag-carte[data-i="0"] { --fond: #dff2fa; --teinte: #a9def5; --encre: #12384a; --nuit: 159, 224, 247; }
.ag-carte[data-i="1"] { --fond: #f1e1fb; --teinte: #dfbff6; --encre: #4a1f63; --nuit: 220, 190, 250; }
.ag-carte[data-i="2"] { --fond: #fdeed6; --teinte: #fbd0a2; --encre: #5a3410; --nuit: 251, 205, 160; }
.ag-carte[data-i="3"] { --fond: #e4f4e2; --teinte: #bfe3ba; --encre: #1f4a24; --nuit: 180, 228, 176; }
.ag-carte[data-i="4"] { --fond: #fce4ee; --teinte: #f5bfd5; --encre: #5e1a3a; --nuit: 248, 190, 214; }
.ag-carte { --c1: var(--teinte); --c2: color-mix(in srgb, var(--teinte) 70%, #fff); --c3: var(--teinte);
  background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,0) 45%), var(--fond); border-color: rgba(0,0,0,.05); }
.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. */
/* 22/10/2026, Axel : trame de points du fond supprimée (« je trouve ça moche »). */
.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: var(--encre, #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: color-mix(in srgb, var(--encre, #5E574C) 72%, #6b6b66); }
.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: var(--encre, #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: linear-gradient(180deg, rgba(var(--nuit), .12), rgba(var(--nuit), .03) 60%), #1f1f1f; border-color: rgba(255,255,255,.08); }
html[data-theme="nuit"] .ag-carte__tag { background: rgb(var(--nuit)); color: #141414; }
html[data-theme="nuit"] .ag-carte__pastille i { background: rgb(var(--nuit)); }
html[data-theme="nuit"] .ag-carte__fond { opacity: .32; }
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; }
}