/* ===== Rubrique Applications (pages /applications…, section de l'accueil, liens de la barre) =====
   Feuille à part : site.css et son CSS critique ne changent pas. Mêmes couleurs, rayons et typographie que le site. */

/* barre de navigation : lien discret « Se connecter » (texte comme les autres liens, entouré d'un filet) */
.links a.conn{border:1px solid var(--line);border-radius:980px;padding:4px 11px;color:var(--ink);white-space:nowrap;transition:background .2s,border-color .2s}
/* place (avec « Applications » en plus) : dès 1180 px, la barre s'élargit un peu (le contenu des pages, lui, reste à 1040 px)
   et affiche « Se connecter » ; de 1001 à 1179 px, liens un peu resserrés et « Se connecter » dans le menu ☰ */
@media (max-width:1179px){nav .links > a.conn{display:none}}
@media (min-width:1001px) and (max-width:1179px){nav .links{gap:20px}}
@media (min-width:1180px){nav .wrap{max-width:1160px}}
.links a.conn:hover{background:var(--mist);border-color:var(--mist)}
.side .foot a.conn{display:block;text-align:center;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:980px;padding:11px 18px;font-size:15px;font-weight:500}

/* calque des pages (même principe que les articles : .apage) */
.ap .bar .w{gap:12px}
.ap .bar button{display:flex;align-items:center;gap:8px;padding:8px 0;color:var(--ink)}
.ap-bar-actions{display:flex;align-items:center;gap:14px}
.ap-bar-actions .ap-lien{font-size:14px;color:var(--text2);text-decoration:none;white-space:nowrap}
.ap-bar-actions .ap-lien:hover{color:var(--ink)}
.ap-bar-actions .btn{padding:8px 16px;font-size:14px;white-space:nowrap}
@media (max-width:420px){.ap-bar-actions .ap-lien{display:none}}
.ap section{padding:96px 0}
.ap h1{font-size:clamp(42px,6.4vw,76px);font-weight:700;letter-spacing:-.045em;line-height:1.02;margin:0 0 20px;text-wrap:balance}
.ap h2{text-wrap:balance}
.ap .lead{max-width:40ch}
.ap-kick{font-size:15px;font-weight:600;color:var(--text2);margin:0 0 14px;letter-spacing:-.01em}
.ap-centre{text-align:center}
.ap-centre .lead{margin-left:auto;margin-right:auto}
.ap-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ap-centre .ap-actions{justify-content:center}
.btn.ap-second{background:var(--mist);color:var(--ink)!important}
.btn.ap-second:hover{opacity:1;background:#ECECEF}
.ap-pied{border-top:.5px solid var(--line);padding:28px 0 calc(40px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--grey)}
.ap-pied .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.ap-pied a{color:inherit;text-decoration:none}
.ap-pied a:hover{color:var(--ink)}

/* icônes d'applications (écran d'accueil d'iPhone) */
.ap-icone{width:88px;height:88px;border-radius:22.5%;display:grid;place-items:center;background:linear-gradient(160deg,#3A3A3E 0%,#1D1D1F 70%);box-shadow:0 10px 24px rgba(29,29,31,.18),inset 0 1px 0 rgba(255,255,255,.12)}
.ap-icone svg{width:50%;height:50%;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ap-icone.complete{background:none;overflow:hidden}
.ap-icone.complete svg{width:100%;height:100%;stroke:none;fill:none}
.ap-icone.bientot{background:linear-gradient(160deg,#C7C7CC 0%,#A1A1A6 80%);box-shadow:0 8px 18px rgba(29,29,31,.08)}
.ap-icone.grand{width:104px;height:104px;margin:0 auto 26px}
.ap-ecran{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:44px 24px;max-width:640px;margin:0 auto;padding:44px 28px;border-radius:32px;background:var(--mist)}
.ap-app{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--ink);text-align:center}
.ap-app b{font-size:15px;font-weight:600;letter-spacing:-.01em}
a.ap-app .ap-icone{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
a.ap-app:hover .ap-icone{transform:translateY(-3px) scale(1.03)}
a.ap-app:active .ap-icone{transform:scale(.96)}
div.ap-app{cursor:default}
.ap-statut{font-size:12px;font-weight:600;border-radius:980px;padding:3px 10px;background:#E8F5EC;color:#1E7A3D}
.ap-statut.bientot{background:#ECECEF;color:var(--text2)}
.ap-carte-app{text-align:left;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;max-width:640px;margin:28px auto 0;padding:22px 24px;border-radius:24px;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .2s,background .2s}
.ap-carte-app:hover{border-color:var(--grey)}
.ap-carte-app .ap-icone{width:56px;height:56px}
.ap-carte-app b{display:block;font-size:19px;letter-spacing:-.015em}
.ap-carte-app span{color:var(--text2);font-size:15px}
.ap-carte-app em{font-style:normal;font-weight:500;font-size:15px;white-space:nowrap}
@media (max-width:560px){.ap-carte-app{grid-template-columns:auto minmax(0,1fr)}.ap-carte-app em{grid-column:2}}
.ap-note{font-size:15px;color:var(--text2);margin-top:28px}
.ap-note a{color:var(--ink)}

/* cadres d'appareils : ordinateur = fenêtre de navigateur, iPhone = téléphone (captures dans src/assets/apps/crm/) */
.ap-scene{position:relative;max-width:900px;margin:64px auto 0;padding-bottom:5%}
.ap-fenetre{position:relative;width:88%;border-radius:14px;background:#fff;border:1px solid #D2D2D7;overflow:hidden;box-shadow:0 30px 60px rgba(29,29,31,.14)}
.ap-fenetre-barre{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#F5F5F7;border-bottom:1px solid #E3E3E8}
.ap-fenetre-barre i{width:11px;height:11px;border-radius:50%;background:#D2D2D7;flex:none}
.ap-fenetre-barre i:nth-child(1){background:#FF5F57}.ap-fenetre-barre i:nth-child(2){background:#FEBC2E}.ap-fenetre-barre i:nth-child(3){background:#28C840}
.ap-fenetre-barre span{flex:0 1 260px;margin:0 auto;transform:translateX(-24px);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:12px;color:var(--grey);background:#fff;border-radius:7px;padding:3px 10px}
.ap-fenetre .ap-vue{aspect-ratio:16/10}
/* iPhone 15 Pro / 16 Pro (Telephone.astro) : tout en cqw (largeur du téléphone) ; titane 1,3 + noir 2,5 → écran 92,4 de large,
   coins concentriques (écran 13, noir 15,5, titane 16,8) */
.ap-tel{position:absolute;right:0;bottom:0;width:23%;container-type:inline-size}
.ap-tel-corps{position:relative;padding:1.3cqw;border-radius:16.8cqw;background:linear-gradient(140deg,#dcd8d2 0%,#c9c5bf 14%,#a9a59f 36%,#8e8a85 52%,#b1ada7 70%,#c9c5bf 84%,#8e8a85 100%);box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.55),inset 0 0 0 .55cqw rgba(0,0,0,.12),0 2cqw 5cqw rgba(29,29,31,.08),0 14cqw 32cqw -6cqw rgba(29,29,31,.22)}
.ap-tel-noir{padding:2.5cqw;border-radius:15.5cqw;background:#0b0b0c;box-shadow:0 0 0 .15cqw rgba(0,0,0,.35)}
.ap-tel .ap-vue{aspect-ratio:9/19.5;border-radius:13cqw;background:#F5F5F7;transform:translateZ(0)}
.ap-tel .ap-vue::after{content:"";position:absolute;z-index:1;top:2.6cqw;left:50%;width:29.5cqw;height:8.6cqw;transform:translateX(-50%);border-radius:5cqw;background:#000}
.ap-tel-btn{position:absolute;width:1.1cqw;border-radius:.6cqw;background:linear-gradient(90deg,#7e7a75,#c9c5bf 45%,#9a968f);box-shadow:0 .2cqw .5cqw rgba(0,0,0,.18)}
.ap-tel-btn.action,.ap-tel-btn.vol-haut,.ap-tel-btn.vol-bas{left:-.75cqw}
.ap-tel-btn.alim{right:-.75cqw}
.ap-tel-btn.action{top:38cqw;height:7cqw}
.ap-tel-btn.vol-haut{top:54cqw;height:13cqw}
.ap-tel-btn.vol-bas{top:70cqw;height:13cqw}
.ap-tel-btn.alim{top:60cqw;height:20cqw}
.ap-deux-tel .ap-fenetre{margin-left:6%}
.ap-tel-gauche{right:auto;left:0}
.ap-deux-tel .ap-tel{width:20%}
.ap-captures{display:grid;gap:28px}
.ap-galerie-large{margin-top:56px}
.ap-galerie-large .ap-scene{margin:0}
.ap-fonction.sans-capture{grid-template-columns:minmax(0,1fr)}
.ap-fonction.sans-capture > div{max-width:640px}
.ap-seul{padding-bottom:0}
.ap-seul .ap-fenetre{width:100%}
.ap-tel-seul{padding-bottom:0;max-width:300px}
.ap-tel-seul .ap-tel{position:relative;width:100%}
.ap-duo + .ap-scene{max-width:760px}
.ap-galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px;align-items:end}
.ap-galerie .ap-scene{margin:0;max-width:none}
@media (max-width:860px){.ap-galerie{grid-template-columns:minmax(0,1fr);gap:36px}}
.ap-vue{position:relative;overflow:hidden;background:linear-gradient(180deg,#F5F5F7,#EBEBEF);display:grid;place-items:center}
.ap-vue picture,.ap-vue img{position:absolute;inset:0;width:100%;height:100%}
.ap-vue img{object-fit:cover;object-position:top}
.ap-vide{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;text-align:center;color:var(--grey);font-size:13px;line-height:1.3}
.ap-vide b{font-weight:600;color:var(--text2)}
.ap-tel .ap-vide{font-size:10px;z-index:2}
@media (max-width:560px){.ap-fenetre-barre{height:24px;gap:5px;padding:0 9px}.ap-fenetre-barre i{width:7px;height:7px}.ap-fenetre-barre span{font-size:9px;padding:1px 6px;transform:none}.ap-fenetre{border-radius:9px}}

/* problèmes réglés */
.ap-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ap-carte{background:#fff;border-radius:24px;padding:28px 26px}
.ap-carte b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;line-height:1.25}
.ap-carte span{color:var(--text2);font-size:16px}
.ap-conclusion{margin:44px 0 0;font-size:21px;font-weight:600;letter-spacing:-.02em}
@media (max-width:720px){.ap-grille{grid-template-columns:minmax(0,1fr)}}

/* fonctionnalités */
.ap-fonction{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center;padding:56px 0;border-top:.5px solid var(--line)}
.ap-fonction:first-of-type{border-top:0}
.ap-fonction.inverse > :first-child{order:2}
.ap-fonction h3{font-size:clamp(26px,3vw,34px);letter-spacing:-.03em;line-height:1.12;margin:0 0 12px}
.ap-fonction .ap-theme{font-size:14px;font-weight:600;color:var(--text2);margin:0 0 10px}
.ap-fonction p{color:var(--text2);margin:0 0 18px}
.ap-points{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ap-points li{position:relative;padding-left:26px;font-size:16px}
.ap-points li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.ap-fonction .ap-scene{margin:0;padding-bottom:0}
.ap-fonction .ap-tel-seul,.ap-galerie .ap-tel-seul{margin-inline:auto;width:min(100%,280px)}
@media (max-width:560px){.ap-tel-seul{max-width:240px}}
@media (max-width:860px){.ap-fonction{grid-template-columns:minmax(0,1fr);gap:32px}.ap-fonction.inverse > :first-child{order:0}}

/* métiers */
.ap-metiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ap-metier{background:#fff;border-radius:24px;padding:26px 22px}
.ap-metier b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px;line-height:1.25}
.ap-metier span{color:var(--text2);font-size:15px}
@media (max-width:980px){.ap-metiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ap-metiers{grid-template-columns:minmax(0,1fr)}}

/* démarrage, confiance */
.ap-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ap-duo .ap-carte,.ap-trio .ap-carte{background:var(--mist)}
.ap-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ap-confiance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.ap-confiance b{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.ap-confiance span{font-size:15px;color:var(--text2)}
@media (max-width:860px){.ap-duo,.ap-trio{grid-template-columns:minmax(0,1fr)}.ap-confiance{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ap-confiance{grid-template-columns:minmax(0,1fr)}}

/* lien avec l'agence */
.ap-agence{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:36px 38px;border-radius:28px;background:var(--ink);color:var(--on-ink)}
.ap-agence b{display:block;font-size:24px;letter-spacing:-.025em;margin-bottom:4px}
.ap-agence span{color:#C7C7CC}
.ap-agence .btn{background:#fff;color:var(--ink)!important}

/* tarifs */
.ap-bascule{display:inline-flex;gap:4px;padding:4px;margin:6px 0 30px;border-radius:999px;background:var(--mist)}
.ap-bascule button{border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--text2);padding:9px 20px;border-radius:999px;cursor:pointer;
  transition:background-color .25s,color .25s,box-shadow .25s}
.ap-bascule button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.ap-tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px 20px;align-items:stretch;padding-top:12px}
.ap-tarif{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;padding:28px 26px;background:#fff}
.ap-tarif.recommande{border:2px solid var(--ink);padding:27px 25px}
.ap-recommande{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap;margin:0;padding:5px 14px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-size:12.5px;font-weight:600;line-height:1.3}
.ap-tarif b{display:block;font-size:20px;letter-spacing:-.02em}
.ap-tarif .ap-prix{display:flex;align-items:baseline;gap:6px;margin:10px 0 2px}
.ap-tarif .ap-prix span{font-size:32px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ap-tarif small{color:var(--text2);font-size:15px}
.ap-offert{margin:0;color:var(--text2);font-size:14px}
.ap-tarif ul{margin:16px 0 22px;flex:1;align-content:start}
.ap-tarif .btn{align-self:stretch;text-align:center}
.ap-tarifs[data-periode=mensuel] .ap-annuel,.ap-tarifs[data-periode=annuel] .ap-mensuel{display:none}
.ap-notes-tarifs{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:6px;color:var(--text2);font-size:15px}
.ap-notes-tarifs li::before{content:"✓";margin-right:9px;color:var(--ink);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .ap-tarifs .ap-prix span{animation:ap-prix .35s ease both}
  @keyframes ap-prix{from{opacity:0;transform:translateY(4px)}}
}
.ap-demo-prix{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:30px 32px;border-radius:24px;background:var(--mist)}
.ap-demo-prix b{font-size:21px;letter-spacing:-.02em}

/* à compléter par le propriétaire (visible seulement tant que l'information manque) */
.ap-todo{margin:14px 0 0;padding:10px 14px;border:1.5px dashed #D97706;border-radius:12px;background:#FFF8EB;color:#8A4B00;font-size:13.5px;line-height:1.45}
.ap-todo::before{content:"TODO · ";font-weight:700}
.ap-todo a{color:inherit}

/* section de l'accueil : texte à gauche, « écran d'accueil » des applications à droite */
.ap-maison .ap-deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.ap-maison .lead{margin-bottom:32px}
.ap-maison .ap-points{margin:0 0 32px}
.ap-maison-lien{margin:22px 0 0}
@media (max-width:860px){.ap-maison .ap-deux{grid-template-columns:minmax(0,1fr);gap:36px}}

/* apparitions (même effet que l'accueil, .rv / .in) : sans JavaScript ou « réduire les animations », tout est visible */
@media (prefers-reduced-motion:reduce){.ap .rv{opacity:1;transform:none;transition:none}}
/* textes des applications (conditions, confidentialité) */
.ap-legal{margin-top:28px;font-size:16px;line-height:1.65;color:var(--ink)}
.ap-legal h2{font-size:22px;letter-spacing:-.02em;margin:40px 0 10px;line-height:1.25}
.ap-legal p{margin:0 0 14px}
.ap-legal ul,.ap-legal ol{margin:0 0 16px;padding-left:22px}
.ap-legal li{margin:6px 0}
.ap-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.ap-legal em{color:var(--text2)}