/* Sections sous le haut de page : approche et savoir-faire (grille façon
   framer.com), logos des projets, démarrer un projet (discussion avec l'IA), contact,
   pied de page. Thème sombre, accents bleu-violet. */

/* un seul rythme vertical : 88 px au-dessus et au-dessous de chaque section, les réalisations et le pied de page compris */
.sec { position: relative; padding: 88px 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.kicker { font-size: 13px; font-weight: 500; color: #8f9bff; letter-spacing: .02em; margin-bottom: 18px; }
.sec h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
.sec h2 span { color: rgba(255,255,255,.42); }
.lead { margin-top: 22px; max-width: 560px; font-size: 18px; line-height: 1.55; color: #a3a8b4; }

/* apparition douce au défilement */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- approche */
/* trois temps côte à côte (Define, Build, Launch & grow), et dans chacun la
   liste de ce qu'on fait : du texte, des traits fins, pas de schémas */
.steps { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps > li { position: relative; border-radius: 26px; padding: 34px 32px 14px; overflow: hidden; }
.steps header { padding-bottom: 26px; }
.steps header b { font-size: 13px; font-weight: 600; color: #8f9bff; }
.steps h3 { margin-top: 22px; font-size: 26px; font-weight: 600; letter-spacing: -.035em; }
.steps header p { margin-top: 10px; max-width: 300px; min-height: 3em; font-size: 15px; line-height: 1.5; color: #9aa0ad; }
.steps ul { list-style: none; padding: 0; margin: 0; }
.steps ul li { position: relative; padding: 18px 0 19px; }
.steps ul li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.09); }
.steps h4 { font-size: 17px; font-weight: 500; letter-spacing: -.015em; transition: color .3s; }
.steps ul p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: #868c98; }
.steps ul li:hover h4 { color: #b8c4ff; }

/* ---------------------------------------------------------------- réalisations (« Shipped by Aria Studio ») */
.ship { position: relative; padding: 88px 0; overflow: clip; }
.ship .hd { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto 40px; padding: 0 32px; }
.ship .hd h4 { font-size: 36px; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.ship .rows { display: flex; flex-direction: column; gap: 10px; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
/* chaque rangée défile dans un cadre aux marges de la page, aux coins arrondis
   comme les blocs : les aperçus ne vont pas jusqu'au bord de l'écran */
.ship .lane { border-radius: 15px; overflow: hidden; clip-path: inset(0 round 15px); }
/* défilement continu, à vitesse constante, sans pause */
.ship .row { display: flex; width: max-content; gap: 10px; animation: marq var(--dur, 110s) linear infinite; will-change: transform; }
.ship .row.rev { animation-direction: reverse; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5px)); } }
/* blocs : tous de la même hauteur, rayon 15 px ; la largeur suit les
   proportions de l'image (aspect-ratio posé sur chaque bloc) */
.ship { --tile-h: 340px; }
.ship .tl { position: relative; flex: none; height: var(--tile-h); width: auto; margin: 0; border-radius: 15px; overflow: hidden; background: #0d0e12; }
/* pendant le chargement, rien ne s'affiche (pas de texte de remplacement) : juste le fond du bloc */
.ship .tl img, .ship .tl video { display: block; width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }
.ship .tl::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }

/* ---------------------------------------------------------------- logos */
/* logos seuls, quatre cartes, deux par rangée ; au survol, une photo de ce qu'est le
   projet apparaît en fond, assombrie pour que le logo reste lisible */
.logos { margin-top: 56px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.lo { grid-column: span 3; border-radius: 22px; height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; }
/* chaque tuile sert de repère : les logos rapetissent quand la tuile est étroite (mobile) */
.lo { container-type: inline-size; }
.lo::before { content: ''; position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity .6s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
              background: radial-gradient(75% 80% at 50% 50%, rgba(0,0,0,.3), rgba(0,0,0,.72)), var(--bg) var(--bp, center) / cover no-repeat; }
/* survol à la souris ; sur téléphone, le même effet au toucher (classe .on, posée par sections.js) */
@media (hover: hover) { .lo:hover::before { opacity: 1; transform: none; } .lo:hover .mk, .lo:hover .wm, .pjs .brand .mk, .pjs .brand .wm { opacity: 1; } }
.lo.on::before { opacity: 1; transform: none; }
.lo > * { position: relative; z-index: 1; }
:is(.lo, .pjs .brand) .mk { display: block; width: min(var(--w), 70cqw); height: var(--h); max-height: 30cqw; background: #fff; opacity: .82; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: opacity .3s; }
.lo.on .mk, .lo.on .wm { opacity: 1; }
.lo { -webkit-tap-highlight-color: transparent; cursor: pointer; color: inherit; text-decoration: none; }
.lo:focus-visible { outline: 2px solid #8f9bff; outline-offset: 3px; }
:is(.lo, .pjs .brand) .wm { font-size: min(30px, 12cqw); white-space: nowrap; color: #fff; opacity: .82; transition: opacity .3s; }
:is(.lo, .pjs .brand) .wm.civ { font-weight: 700; letter-spacing: -.02em; font-size: min(26px, 11cqw); }
:is(.lo, .pjs .brand) .wm.script { font-family: 'Great Vibes', cursive; font-size: min(40px, 15cqw); }
/* Secunary : sa police, Hello Bride Script */
:is(.lo, .pjs .brand) .wm.hb { font-family: 'Hello Bride', cursive; font-size: min(52px, 13cqw); line-height: 1; }
/* écritures manuscrites : leurs boucles dépassent du mot (le S de Secunary à gauche) ;
   Safari les coupait. De la place de chaque côté, sans décaler le mot */
:is(.lo, .pjs .brand) .wm.hb, :is(.lo, .pjs .brand) .wm.script { padding: .15em .4em; margin: -.15em -.4em; }
/* Belle Branche : Anton, tout en majuscules */
:is(.lo, .pjs .brand) .wm.bb { font-family: 'Anton', 'Inter Tight', sans-serif; font-weight: 400; text-transform: uppercase; font-size: min(34px, 11cqw); letter-spacing: .01em; }


/* ---------------------------------------------------------------- façons de travailler ensemble */
/* trois formules côte à côte, en verre comme les trois temps : abonnement
   (avec option de rachat), partenariat (part du chiffre), projet au forfait ;
   pas de prix, peu de mots. La ligne sur la propriété ressort dans chacune */
.plans { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plans > li { position: relative; display: flex; flex-direction: column; border-radius: 26px; padding: 32px 30px 26px; overflow: hidden; }
.plans header b { font-size: 13px; font-weight: 600; color: #8f9bff; }
.plans h3 { margin-top: 18px; font-size: 28px; font-weight: 600; letter-spacing: -.035em; }
.plans .tg { margin-top: 6px; font-size: 16px; font-weight: 500; color: #cfd3ff; letter-spacing: -.01em; }
.plans ul { list-style: none; padding: 0; margin: 24px 0 26px; border-top: 1px solid rgba(255,255,255,.09); }
.plans ul li { position: relative; padding: 13px 0 13px 28px; font-size: 14.5px; line-height: 1.45; color: #c4c8d2; border-bottom: 1px solid rgba(255,255,255,.06); }
/* petite coche, de la couleur de la section ; celle de la propriété en dégradé */
.plans ul li::before { content: ''; position: absolute; left: 0; top: 15px; width: 16px; height: 16px; background: hsl(var(--h) 80% 76% / .75);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8 6.1-6.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8 6.1-6.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.plans ul li.hl { color: #fff; font-weight: 500; }
.plans ul li.hl::before { background: linear-gradient(135deg, #8aa2ff, #c4a8ff); }
/* bouton en bas de chaque carte (toujours aligné) : ouvre la réservation d'un appel (Cal.com) */
.plans .go { position: relative; isolation: isolate; overflow: hidden; margin-top: auto; display: flex; justify-content: space-between; align-items: center;
             padding: 13px 16px; border-radius: 13px; color: #0a0b10; text-decoration: none; font-size: 14px; font-weight: 600; background: #fff;
             box-shadow: 0 10px 30px -14px rgba(255,255,255,.3); transition: background .45s ease, color .45s ease, box-shadow .45s ease; }
.plans .go em { font-style: normal; color: rgba(10,11,16,.5); transition: color .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
.plans .go:hover, .plans .go:focus-visible { outline: none; }
.plans .go:active { transform: scale(.985); }
/* au survol, le blanc devient du verre liquide, comme les cartes : fond
   translucide et flouté, liseré qui accroche la lumière, texte blanc, un reflet
   le traverse et la flèche avance */
.plans .go::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translateX(-110%);
                     background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); }
.plans .go:hover, .plans .go:focus-visible { color: #fff; background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.4), 0 16px 38px -16px rgba(138,162,255,.6); }
.plans .go:hover::before, .plans .go:focus-visible::before { transform: translateX(110%); transition: transform .9s cubic-bezier(.2,.7,.2,1) .05s; }
.plans .go:hover em, .plans .go:focus-visible em { color: #fff; transform: translateX(4px); }
/* et le bord de verre de la carte s'allume */
.plans > li::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .45s ease;
                     background: linear-gradient(150deg, #8aa2ff, rgba(165,139,255,.45) 35%, rgba(255,255,255,.04) 60%, rgba(236,230,255,.7));
                     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
                     mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.plans > li:has(.go:hover)::after, .plans > li:has(.go:focus-visible)::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .plans .go::before { transition: none !important; } }
.deals .fine { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.4); text-align: right; }


/* ---------------------------------------------------------------- contact */
.ct { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; padding-top: 100px; }
.cards { display: grid; gap: 12px; }
.cc { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 24px 26px; border-radius: 20px; color: #fff; text-decoration: none; overflow: hidden; }
.cc span { grid-column: 1; font-size: 13px; color: rgba(255,255,255,.45); }
.cc b { grid-column: 1; font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin-top: 4px; }
.cc em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 20px; color: rgba(255,255,255,.5); transition: color .3s; }
.cc:hover em { color: #fff; }
/* contact : à gauche le mot et les deux liens, à droite la carte pour écrire */
.contact .ct { align-items: center; }
.ct-l .cards { margin-top: 36px; max-width: 460px; }
.ct-l .cc { padding: 18px 22px; border-radius: 18px; } .ct-l .cc b { font-size: 18px; }
/* le formulaire : une seule surface de verre, des champs sans boîte, séparés par un filet */
.cf { display: block; cursor: default; padding: 34px 34px 28px; border-radius: 26px; }
.cf-t { display: block; font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 14px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.cf label { display: block; padding: 18px 0 10px; border-bottom: 1px solid rgba(255,255,255,.14); transition: border-color .25s; }
.cf label:focus-within { border-bottom-color: #a58bff; }
.cf label span { display: block; font-size: 13px; color: rgba(255,255,255,.5); transition: color .25s; }
.cf label:focus-within span { color: #c9b8ff; }
.cf input, .cf textarea { display: block; width: 100%; font: inherit; font-size: 18px; letter-spacing: -.01em; color: #fff; background: none; border: 0; outline: 0; padding: 8px 0 0; }
.cf textarea { resize: none; min-height: 104px; line-height: 1.45; }
.cf .cf-h { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.cf-note { font-size: 14px; color: rgba(255,255,255,.6); min-height: 1.4em; }
.cf-note.ok { color: #9fe3c0; } .cf-note.ko { color: #f6b1b1; }
.cf button { flex: none; display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 16px; font-weight: 500; color: #000; background: #fff; border: 0; border-radius: 999px; padding: 14px 24px; cursor: pointer; transition: transform .2s, opacity .2s; }
.cf button i { font-style: normal; transition: transform .25s; } .cf button:hover i { transform: translateX(3px); }
.cf button:hover { transform: translateY(-1px); } .cf button[disabled] { opacity: .55; cursor: progress; transform: none; }

/* ---------------------------------------------------------------- marketing : cartes qui s'ouvrent */
.marketing .steps > li { cursor: pointer; }
.marketing .steps > li .open { display: block; width: 100%; text-align: left; padding: 18px 0 20px; font: inherit; font-size: 14px; font-weight: 500; color: #8f9bff; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.09); cursor: pointer; }
.marketing .steps > li .open:focus-visible { outline: 2px solid #8f9bff; outline-offset: 2px; border-radius: 6px; }
.marketing .steps > li:hover .open { color: #fff; }
/* la feuille de détail : une colonne, un titre, un texte, la liste, les exemples */
.pjs-panel.mk { grid-template-columns: 1fr; width: min(820px, 100%); }
.pjs-panel.mk .pjs-txt { display: block; min-height: 0; padding: 40px 44px 36px; }
.pjs-panel.mk .pjs-vis { display: none; }
.pjs-panel.mk .pjs-txt h3 { margin-top: 0; font-size: 30px; }
.pjs-panel.mk .pjs-line { max-width: 640px; font-size: 17px; margin-top: 12px; }
.pjs-panel.mk .mk-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255,255,255,.09); }
.pjs-panel.mk .mk-list li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 15px; line-height: 1.45; color: #c4c8d2; }
.pjs-panel.mk .mk-list b { color: #fff; font-weight: 600; }
.pjs-panel.mk .mk-ex { margin-top: 26px; }
.pjs-panel.mk .mk-ex small { display: block; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: #8f9bff; margin-bottom: 12px; }
.pjs-panel.mk .mk-ex .row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.pjs-panel.mk .mk-ex .row::-webkit-scrollbar { display: none; }
.pjs-panel.mk .mk-ex .row > * { flex: 0 0 auto; height: 168px; width: auto; border-radius: 12px; display: block; background: #0d0e12; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); object-fit: cover; }
.pjs-panel.mk .mk-ex p { font-size: 14px; color: #a3a8b4; }
.pjs-panel.mk .tags { margin-top: 28px; padding-top: 0; display: block; }
.pjs-panel.mk .pjs-by { margin-top: 24px; }

/* ---------------------------------------------------------------- questions fréquentes */
/* cinq questions repliées, une ligne chacune ; le chevron tourne à l'ouverture */
.faq .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.faq .lead { margin-top: 18px; font-size: 16px; }
.faq .lead a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); } .faq .lead a:hover { border-color: #fff; }
.qa { border-top: 1px solid rgba(255,255,255,.09); }
.qa details { border-bottom: 1px solid rgba(255,255,255,.09); }
.qa summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; font-size: 19px; font-weight: 500; letter-spacing: -.02em; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid rgba(255,255,255,.6); border-bottom: 1.5px solid rgba(255,255,255,.6); transform: translateY(-70%) rotate(45deg); transition: transform .3s; }
.qa details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.qa details p { padding: 0 0 22px; max-width: 680px; font-size: 16px; line-height: 1.55; color: #a3a8b4; }

/* ---------------------------------------------------------------- cookies (mesure d'audience) */
/* bandeau en bas de l'écran, en verre sombre ; refuser est aussi simple qu'accepter */
.consent { position: fixed; left: 50%; bottom: 18px; z-index: 60; width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: 18px;
           padding: 16px 16px 16px 20px; border-radius: 18px; color: #fff; font: 400 14px/1.45 'Inter Tight', system-ui, sans-serif;
           background: rgba(14,15,22,.82); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
           box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.16), 0 24px 60px rgba(0,0,0,.5);
           opacity: 0; transform: translate(-50%, 16px); visibility: hidden; transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1), visibility .4s; }
.consent.on { opacity: 1; transform: translate(-50%, 0); visibility: visible; }
.consent p { flex: 1; color: rgba(255,255,255,.75); }
.consent p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.consent .b { display: flex; gap: 8px; flex: none; }
.consent button { padding: 10px 16px; border-radius: 11px; border: 0; cursor: pointer; color: #fff; font: 600 13.5px 'Inter Tight', system-ui, sans-serif;
                  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); transition: background .2s; }
.consent button:hover, .consent button:focus-visible { background: rgba(255,255,255,.16); outline: none; }
@media (max-width: 620px) { .consent { flex-direction: column; align-items: stretch; gap: 12px; } .consent .b button { flex: 1; } }

/* ---------------------------------------------------------------- pied de page */
.foot { padding: 88px 0 0; overflow: hidden; }
.fc { padding-bottom: 28px; margin-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.1); }
/* mentions légales, confidentialité, cookies, crédits : sur une seule ligne, au centre */
.fc .legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; }
.fc .legal a { color: rgba(255,255,255,.6); text-decoration: none; font-size: 14px; padding: 5px 0; transition: color .2s; }
.fc .legal a:hover { color: #fff; }
.big { font-size: clamp(80px, 16vw, 250px); font-weight: 600; letter-spacing: -.025em; line-height: .8; text-align: center; margin-bottom: -.12em;
       background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.big span { display: inline-block; }
/* lettres découpées (motion.js) : chacune remonte du bord, l'une après l'autre ;
   le dégradé passe sur chaque lettre (le bloc n'en porte plus) */
.big.split { background: none; }
.big .ch { display: inline-block; font-style: normal; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 85%);
           -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(60%); }
.big.play .ch { animation: chUp 1.4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--k) * 60ms + .25s); }
@keyframes chUp { from { opacity: 0; transform: translateY(60%); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .big .ch { opacity: 1; transform: none; } .big.play .ch { animation: none; } }

/* ---------------------------------------------------------------- petits écrans */
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .logos { grid-template-columns: 1fr 1fr; }
  .lo { grid-column: span 1; height: 140px; }
  .faq .wrap { grid-template-columns: 1fr; gap: 28px; }
  .logos { gap: 10px; }
  .ct { grid-template-columns: 1fr; }
  .cf-row { grid-template-columns: 1fr; } .cf { padding: 26px 22px 22px; } .ct-l .cards { max-width: none; }
}
@media (max-width: 620px) {
  /* « Aria Studio » sur deux lignes sur mobile (début et fin de page) */
  .big { white-space: normal; font-size: 30vw; line-height: .84; }
  .big span { display: block; }
  /* sur deux lignes, seule la ligne du bas se fond vers le bas ; celle du haut reste pleine */
  .big span:first-child .ch { background: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)); -webkit-background-clip: text; background-clip: text; }
  .sec { padding: 64px 0; }
  .ship { padding: 64px 0; }
  .foot { padding-top: 64px; }
  .wrap { padding: 0 16px; }
  .steps > li { padding: 28px 22px 10px; }
  .plans > li { padding: 28px 22px 22px; }
  .ship { --tile-h: 240px; }
  .ship .rows { padding: 0 16px; }
}


/* ---------------------------------------------------------------- fiche d'un projet */
/* ouverte depuis une carte des clients : un voile sombre, un panneau en verre
   comme les formules ; texte à gauche, visuels à droite ; sur téléphone, une
   feuille qui monte du bas, texte puis visuels */
body.sheet-open { overflow: hidden; }
/* fermée, la fiche n'existe pas : display: grid ci-dessous l'emporterait sur l'attribut hidden */
.pjs[hidden] { display: none; }
.pjs { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.pjs-veil { position: absolute; inset: 0; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
            opacity: 0; transition: opacity .32s ease; }
.pjs-panel { position: relative; display: grid; grid-template-columns: 5fr 7fr; width: min(1100px, 100%); max-height: calc(100vh - 48px); border-radius: 26px; overflow: hidden;
             background: rgba(14,15,22,.82); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
             box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 100px rgba(0,0,0,.6);
             opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .32s ease, transform .42s cubic-bezier(.2,.7,.2,1); }
.pjs.in .pjs-veil { opacity: 1; }
.pjs.in .pjs-panel { opacity: 1; transform: none; }
.pjs-x { position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
         color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background .25s; }
.pjs-x:hover, .pjs-x:focus-visible { background: rgba(255,255,255,.2); outline: none; }
.pjs-txt { padding: 40px 36px 34px; display: flex; flex-direction: column; min-height: 440px; }
.pjs-txt .brand { display: flex; align-items: center; gap: 12px; height: 48px; container-type: inline-size; }
.pjs-txt h3 { margin-top: 26px; font-size: 28px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.pjs-line { margin-top: 14px; font-size: 16px; line-height: 1.5; color: #a3a8b4; max-width: 380px; }
.pjs-txt .tags { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.pjs-txt .tags span { font-size: 13px; font-weight: 500; color: #cfd3ff; padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(143,155,255,.35); }
.pjs-by { margin-top: 18px; font-size: 14px; font-weight: 500; }
.pjs-by a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); } .pjs-by a:hover { border-color: #fff; }
.pjs-vis { position: relative; overflow: hidden; background: #0d0e12; }
.pjs-vis img { position: absolute; display: block; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1); }
.pjs-vis .desk { width: 86%; left: 10%; top: 44px; }
.pjs-vis .phone { width: 27%; left: 6%; bottom: -8%; border-radius: 22px; }
.pjs-vis .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
/* l'iPhone 3D par-dessus la scène ; le téléphone plat s'efface dès qu'il est rendu */
.pjs-vis canvas { position: absolute; left: -14%; bottom: -18%; width: 62%; height: 124%; pointer-events: none; opacity: 0; transition: opacity .8s; }
.pjs-vis canvas.on { opacity: 1; }
.pjs-vis:has(canvas.on) .phone { opacity: 0; }
.pjs-vis .phone { transition: opacity .4s; }
@media (max-width: 760px) {
  .pjs { padding: 0; align-items: end; }
  .pjs-panel { grid-template-columns: 1fr; width: 100%; max-height: 92vh; overflow-y: auto; border-radius: 26px 26px 0 0; transform: translateY(40px); }
  .pjs-txt { padding: 28px 24px 24px; min-height: 0; }
  .pjs-txt h3 { font-size: 24px; margin-top: 20px; }
  .pjs-vis { height: 300px; flex: none; }
  .pjs-vis .desk { width: 92%; left: 12%; top: 26px; }
  .pjs-vis .phone { width: 32%; left: 4%; bottom: -12%; }
  .pjs-vis canvas { left: -10%; bottom: -10%; width: 62%; height: 112%; }
}