/* ==========================================================================
   Page Tarifs : effets au scroll (GSAP + ScrollTrigger, voir tarifs.js).
   - un étage par service : carte 3D (blanc / bleu électrique / blanc) qui
     tourne sur elle-même au rythme du scroll, carrousel sur téléphone
   - Pack Lancement : panneau qui arrive incliné et se redresse
   - « Inclus dans tous les abonnements » en bleu électrique
   Chargé après services.css, uniquement sur tarifs.html.
   ========================================================================== */

/* ============ Hero : choisir directement son service ============ */
.pr-pick{position:relative;z-index:1;margin-top:34px}
.pr-pick-k{margin:0 0 14px;font:800 clamp(18px,1.8vw,22px)/1.2 'Archivo',sans-serif;letter-spacing:-.02em;color:color-mix(in srgb,#07080d calc(var(--hv,0)*100%),#fff)}
.pr-pick-row{display:flex;flex-wrap:wrap;gap:12px}
.pr-pick a{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:15px 24px;font:700 16px 'Figtree',sans-serif;transition:transform .2s,box-shadow .2s,background .2s,color .2s;
  background:color-mix(in srgb,#1F36E0 calc(var(--hv,0)*100%),#fff);color:color-mix(in srgb,#fff calc(var(--hv,0)*100%),#1F36E0);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.pr-pick a:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.26)}
/* Paragraphe du hero : blanc pur sur le bleu, puis gris foncé quand le fond s'éclaircit */
.sv-hero .sv-lead{font-size:clamp(17px,1.7vw,20px);font-weight:500;color:color-mix(in srgb,rgba(7,8,13,.85) calc(var(--hv,0)*100%),#fff)}
.sv-hero .sv-actions{margin-top:22px}
.sv-hero .sv-actions .btn-blue{padding:16px 30px;font-size:16px}

/* ============ Un étage par service : carte 3D ============ */
.pr-flip-sec{padding:0}
.pr-flip-head{max-width:1180px;margin:0 auto;padding:clamp(50px,6vw,80px) 0 0;text-align:center}
.pr-flip-head .eyebrow{justify-content:center}
.pr-flip-head h2.pr-svc-name{margin:0 auto;max-width:none;font:400 clamp(34px,4.6vw,60px)/.95 'Anton',sans-serif;letter-spacing:.01em;text-transform:uppercase;color:var(--blue)}
.pr-tagline{margin:10px auto 0;max-width:30ch;font:800 clamp(18px,1.9vw,24px)/1.2 'Archivo',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.pr-flip-head .sec-sub{margin:12px auto 0;font-size:18px;line-height:1.6;color:rgba(7,8,13,.84)}
.pr-stage{position:relative;height:100svh;min-height:680px;display:grid;place-items:center}
.pr-card3d-wrap{position:relative;z-index:1;perspective:1500px}
.pr-card3d{--cw:min(560px,84vw);position:relative;width:var(--cw);aspect-ratio:9/13.2;transform-style:preserve-3d;will-change:transform}
.pr-face{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;border-radius:34px;padding:36px 34px 32px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(9px);box-shadow:0 40px 100px rgba(35,64,240,.18)}
.pr-face.back{transform:rotateY(180deg) translateZ(9px)}
.pr-domain{margin:0 0 14px;font:600 14px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.pr-face.f-blue .pr-domain{color:rgba(255,255,255,.92)}
.pr-face h3{margin:0;font:800 28px/1.15 'Archivo',sans-serif;letter-spacing:-.02em}
.pr-face .pr-tag{margin-bottom:14px}
.pr-face .pr-price{margin-top:16px}
.pr-face .pr-price b{font-size:42px}
.pr-face .pr-list{margin:16px 0 18px;gap:8px}
.pr-face .pr-list li{font-size:17px;color:rgba(7,8,13,.86)}
.pr-face .pr-desc{font-size:17px;color:rgba(7,8,13,.78)}
.pr-face .btn{flex:none}
.pr-face .btn{margin-top:auto;justify-content:center;padding:14px 20px}
/* face blanche */
.pr-face.f-light{background:#fff;color:var(--ink);border:1px solid rgba(7,8,13,.07)}
/* face bleu électrique (même dégradé que les cartes mises en avant du site) */
.pr-face.f-blue{background:linear-gradient(145deg,#2139E8 0%,#1F36E0 45%,#1a2fd6 100%);color:#fff;box-shadow:0 40px 100px rgba(35,64,240,.35)}
.pr-face.f-blue::after{content:"";position:absolute;right:-120px;bottom:-160px;width:380px;height:380px;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,rgba(255,255,255,0) 0 30px,rgba(255,255,255,.12) 30px 31px)}
.pr-face.f-blue > *{position:relative;z-index:1}
.pr-face.f-blue h3,.pr-face.f-blue .pr-price,.pr-face.f-blue .pr-month b{color:#fff}
.pr-face.f-blue .pr-desc,.pr-face.f-blue .pr-month,.pr-face.f-blue .pr-list li{color:#fff}
.pr-face.f-blue .pr-ht,.pr-face.f-blue .pr-price small{color:rgba(255,255,255,.9)}
.pr-face.f-blue .pr-tag{background:#fff;color:var(--blue)}
.pr-face.f-blue .pr-list li::before{background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.pr-face.f-blue .btn-blue{background:#fff;color:var(--blue);box-shadow:none}
.pr-face.f-blue .btn-blue:hover{background:#e9ecff}
/* trois points de progression sous la carte */
.pr-steps{position:absolute;left:50%;bottom:30px;z-index:2;display:flex;gap:8px;transform:translateX(-50%)}
.pr-steps i{width:8px;height:8px;border-radius:50%;background:rgba(7,8,13,.18);transition:background .3s,transform .3s}
.pr-steps i.on{background:var(--blue);transform:scale(1.35)}
.pr-flip-note{max-width:760px;margin:0 auto;padding:clamp(20px,3vw,36px) 0 clamp(40px,5vw,60px);text-align:center;font:400 16.5px/1.55 'Figtree',sans-serif;color:rgba(7,8,13,.8)}
/* Sur téléphone ou en mouvement réduit : carrousel horizontal à la place de la carte 3D */
.pr-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pr-carousel::-webkit-scrollbar{display:none}
.pr-carousel .pr-face{position:relative;flex:0 0 min(330px,84vw);inset:auto;min-height:520px;scroll-snap-align:center;transform:none;box-shadow:0 20px 50px rgba(35,64,240,.12)}
/* Les trois packs en cartes classiques, sous la carte 3D */
.pr-after{padding-bottom:clamp(40px,5vw,70px)}
.pr-after .pr-grid{margin-top:clamp(10px,2vw,24px)}
.pr-fx .pr-card{will-change:transform}
/* Textes plus lisibles : lignes des packs et note sous les cartes */
.pr-fx .pr-card .pr-list li{font-size:16.5px;color:rgba(7,8,13,.86)}
.pr-fx .pr-card.hi .pr-list li{color:#fff}
.pr-fx .pr-card .pr-desc{font-size:16px;color:rgba(7,8,13,.78)}
.pr-fx .pr-card.hi .pr-desc{color:#fff}
.pr-fx .pr-note{font-size:16.5px;color:rgba(7,8,13,.8)}

/* ============ Pack Lancement : panneau incliné qui se redresse ============ */
/* Textes en blanc pur et plus grands */
.pr-launch p{font-size:18px;line-height:1.55;color:#fff}
.pr-launch .pr-list li{font-size:17px;line-height:1.5;color:#fff}
.pr-launch .pr-list li::before{top:.3em}
.pr-launch-note{font-size:15px;color:rgba(255,255,255,.92)}
.pr-fx .sv-launch{perspective:1400px}
.pr-fx .pr-launch{transform-origin:50% 50%;will-change:transform}
.pr-launch .sv-actions{margin-top:18px}
.pr-launch .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)}
.pr-launch .btn-ghost:hover{background:#fff;color:var(--blue);border-color:#fff}
.pr-launch-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:6px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.pr-trust{display:inline-flex;align-items:center;gap:12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:9px 16px;font:600 14.5px 'Figtree',sans-serif;color:#fff}
.pr-trust .av{display:flex}
.pr-trust .av i{width:26px;height:26px;border-radius:50%;border:2px solid #1F36E0;margin-left:-8px;background:radial-gradient(circle at 35% 30%,#fff 0%,#c9d2ff 25%,#5C74FF 70%,#1F36E0 100%)}
.pr-trust .av i:first-child{margin-left:0}
.pr-trust .av i:nth-child(2){background:radial-gradient(circle at 35% 30%,#fff 0%,#9fb0ff 40%,#1F36E0 100%)}
.pr-trust .av i:nth-child(3){background:#fff}
.pr-trust .av i:nth-child(4){background:radial-gradient(circle at 35% 30%,#9fb0ff 0%,#1F36E0 60%,#0b1440 100%)}
.pr-launch-note{margin:0;max-width:440px;font:400 14.5px/1.5 'Figtree',sans-serif;color:rgba(255,255,255,.9);text-align:right}

/* ============ Prix : « En une fois », puis « Par mois » en dessous, sans case ============ */
.pr-prices{display:flex;flex-direction:column;margin-top:18px}
.pr-cell{display:flex;flex-direction:column;gap:3px;min-width:0}
.pr-prices.two .pr-cell + .pr-cell{margin-top:12px;padding-top:12px;border-top:1px solid rgba(7,8,13,.14)}
.pr-cell-k{font:700 14px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.pr-prices .pr-price{margin:0}
.pr-prices.two .pr-price b{font-size:clamp(28px,2.4vw,34px)}
.pr-prices.two .pr-price small{font-size:14px}
.pr-prices .pr-unit{font-size:15px}
.pr-cell-d{font:500 14.5px/1.35 'Figtree',sans-serif;color:rgba(7,8,13,.76)}
.pr-face .pr-prices{margin-top:14px}
.pr-face .pr-prices.two .pr-price b{font-size:32px}
.pr-face .pr-prices.two .pr-cell + .pr-cell{margin-top:10px;padding-top:10px}
/* sur fond bleu (pack mis en avant, face bleue, Pack Lancement) */
.pr-card.hi .pr-cell + .pr-cell,.pr-face.f-blue .pr-cell + .pr-cell,.pr-launch .pr-cell + .pr-cell{border-top-color:rgba(255,255,255,.3)}
.pr-card.hi .pr-cell-k,.pr-face.f-blue .pr-cell-k,.pr-launch .pr-cell-k{color:rgba(255,255,255,.9)}
.pr-card.hi .pr-cell-d,.pr-face.f-blue .pr-cell-d,.pr-launch .pr-cell-d{color:rgba(255,255,255,.9)}
.pr-launch-price .pr-prices{margin:0;width:100%;text-align:left}
.pr-launch-price .pr-prices.two .pr-price b{font-size:clamp(34px,3.2vw,44px)}
.pr-launch-price .pr-price{justify-content:flex-start}
/* Toutes les cartes de la page à la même hauteur (posée par tarifs.js sur grand écran) */
.pr-fx .pr-card{box-sizing:border-box}

/* ============ Inclus dans tous les abonnements : pleine largeur, bleu électrique ============ */
.sv-abo{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#2139E8 0%,#1F36E0 45%,#1a2fd6 100%);padding:clamp(70px,9vw,130px) 24px}
.sv-abo::after{content:"";position:absolute;right:-180px;bottom:-260px;width:720px;height:720px;border-radius:50%;pointer-events:none;background:repeating-radial-gradient(circle,rgba(255,255,255,0) 0 34px,rgba(255,255,255,.12) 34px 35px)}
.sv-abo .sec-in{position:relative;z-index:1}
.abo-card{background:none;box-shadow:none;border-radius:0;padding:0;overflow:visible}
.abo-card::after{display:none}
.abo-card h2{font-size:clamp(30px,4.4vw,58px)}
.abo-p{font-size:18px;max-width:66ch}
.abo-list{grid-template-columns:1fr 1fr 1fr;gap:14px 28px}
.abo-list li{font-size:17px;line-height:1.5}
.abo-list li::before{top:.3em}
.abo-after{font-size:17px}

/* ============ Applications sur mesure : pleine largeur, blanc ============ */
.sv-custom{background:#fff;padding:clamp(70px,9vw,130px) 24px}
.pr-custom{background:none;border:0;box-shadow:none;border-radius:0;padding:0}
.pr-custom h2{font-size:clamp(30px,4.4vw,58px)}
.pr-custom p{font-size:18px}
.pr-custom .pr-list li{font-size:17px;line-height:1.5}
.pr-custom .pr-list li::before{top:.3em}
.abo-card .eyebrow,.abo-card .eyebrow.mono{color:#dfe4ff}
.abo-card h2 .dot{color:#c3ccff}
.abo-p{color:rgba(255,255,255,.9)}
.abo-list li{color:#fff}
.abo-list li::before{background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.abo-after{border-top-color:rgba(255,255,255,.22);color:rgba(255,255,255,.9)}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .pr-flip-sec{scroll-margin-top:96px}
  .abo-list{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .abo-list{grid-template-columns:1fr}
}
@media(max-width:860px){
  /* Carte 3D épinglée sur téléphone : textes lisibles, marges resserrées.
     Si l'écran est trop bas, tarifs.js réduit la carte d'un cran. */
  .pr-stage{min-height:0;height:100svh}
  .pr-card3d{--cw:min(400px,96vw)}
  .pr-face{padding:24px 22px 22px;border-radius:26px}
  .pr-face h3{font-size:23px}
  .pr-face .pr-desc{font-size:15.5px;margin-top:6px}
  .pr-face .pr-prices{margin-top:12px}
  .pr-face .pr-prices.two .pr-price b{font-size:26px}
  .pr-face .pr-prices.two .pr-cell + .pr-cell{margin-top:8px;padding-top:8px}
  .pr-face .pr-cell-d{font-size:14.5px}
  .pr-face .pr-list{margin:12px 0 14px;gap:7px}
  .pr-face .pr-list li{font-size:15.5px;line-height:1.45}
  .pr-face .btn{padding:13px 18px;font-size:15px}
  .pr-steps{bottom:12px}
  .pr-after{padding-bottom:clamp(20px,5vw,40px)}
  .pr-after:empty{display:none}
  .pr-launch-note{text-align:left}
  /* Boutons de service du hero sur téléphone : grille de 2 colonnes, boutons
     de même largeur, puis le bouton de devis sur toute la largeur */
  .pr-pick{margin-top:26px}
  .pr-pick-k{font-size:17px;margin-bottom:12px}
  .pr-pick-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pr-pick a{justify-content:center;padding:13px 14px;font-size:14.5px;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.14)}
  .sv-hero .sv-actions{margin-top:14px}
  .sv-hero .sv-actions .btn{width:100%;justify-content:center}
}

/* ============ Prix par mois en évidence, prix en une fois en petit (2026-10-20) ============ */
.pr-card .pr-month{margin-top:6px;font-size:15px}
.pr-once{margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(7,8,13,.1);font:400 15px/1.45 'Figtree',sans-serif;color:rgba(7,8,13,.76)}
.pr-once b{font-weight:800;color:var(--ink)}
.pr-card.hi .pr-once,.pr-launch .pr-once{border-top-color:rgba(255,255,255,.28);color:rgba(255,255,255,.9)}
.pr-card.hi .pr-once b,.pr-launch .pr-once b{color:#fff}
.pr-launch-price .pr-once{text-align:center}

/* ============ Étiquettes courtes : « Voir la suite » ouvre les lignes masquées ============ */
.pr-card .pr-list{margin-bottom:8px}
.pr-list li.pr-more[hidden]{display:none}
.pr-more-btn{align-self:flex-start;min-height:44px;margin:0 0 16px;padding:0;background:none;border:0;cursor:pointer;
  font:700 15px 'Figtree',sans-serif;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.pr-more-btn:hover{color:#0b1a8c}
.pr-card.hi .pr-more-btn{color:#fff}
.pr-card:not(:has(.pr-more-btn)) .pr-list{margin-bottom:24px}

/* ============ Séparation des services : feuilles empilées (choix de Sylvia, 2026-10-21) ============
   Chaque service est une grande feuille pleine largeur aux coins arrondis, qui se pose
   sur la précédente avec une ombre légère, en alternant fond crème et fond blanc.
   Sur les feuilles blanches, les cartes non mises en avant passent en crème. */
.pr-svc{position:relative;margin:0 calc(50% - 50vw) !important;padding-left:calc(50vw - 50%) !important;padding-right:calc(50vw - 50%) !important;
  padding-bottom:clamp(50px,6vw,80px) !important;border-radius:56px 56px 0 0;border-top:0 !important}
.pr-svc:nth-child(odd){background:#F5F4EF}
.pr-svc:nth-child(even){background:#fff}
.pr-svc + .pr-svc{margin-top:-36px !important;box-shadow:0 -24px 60px rgba(31,54,224,.10)}
.pr-svc:nth-child(even) .pr-card:not(.hi){background:#F5F4EF;border-color:rgba(7,8,13,.06)}
@media(max-width:860px){
  .pr-svc{border-radius:32px 32px 0 0}
  .pr-svc + .pr-svc{margin-top:-24px !important;box-shadow:0 -16px 40px rgba(31,54,224,.10)}
}

/* ============ Choix du service sur téléphone : étiquettes légères (2026-10-21) ============
   Un seul vrai bouton (« Demander un devis ») ; les services deviennent de petites
   étiquettes à contour blanc qui se suivent, au lieu de cinq gros boutons blancs. */
@media(max-width:860px){
  .pr-pick-row{display:flex;flex-wrap:wrap;gap:8px}
  .pr-pick a{min-height:44px;padding:0 16px;border-radius:999px;font:600 15px 'Figtree',sans-serif;
    background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.6);box-shadow:none}
  .pr-pick a:hover,.pr-pick a:active{background:#fff;color:#1F36E0;transform:none}
  .sv-hero .sv-actions{margin-top:20px}
}

/* ============ Téléphone : un seul bouton en haut de page (2026-10-21) ============
   Les services s'enchaînent juste en dessous : sur téléphone on retire le choix du
   service et on garde « Demander un devis » + un petit lien « Voir les packs ↓ ». */
.pr-jump{display:none}
@media(max-width:860px){
  .pr-pick{display:none}
  .sv-hero .sv-actions{flex-direction:column;align-items:center;gap:6px;margin-top:28px}
  .pr-jump{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;
    font:600 16px 'Figtree',sans-serif;color:#fff;text-decoration:underline;text-underline-offset:4px}
}

/* ============ Illustration sous le nom de chaque service (2026-10-21) ============ */
.pr-ill{width:clamp(100px,10vw,132px);margin:16px auto 10px}
.pr-ill svg{display:block;width:100%;height:auto}
@media(max-width:860px){ .pr-ill{width:96px;margin:12px auto 8px} }