/* =====================================================================
   FROST STUDIO — section (04) « Tarifs » (tarifs.css)
   Un seul objet : un très grand écran, de la même famille que les écrans
   du mur (verre obsidienne, liseré chrome orienté vers la lumière, reflet).
   Il entre en scène (montée, bascule 3D, lumière qui fait le tour du
   cadre, reflet qui glisse), attend éteint sur son écran d'accueil (empreinte
   qui tourne, « Découvrir les tarifs. », balayage de lumière), puis s'allume
   depuis le point du doigt et compose les offres.
   Desktop : l'interface est dessinée à taille fixe (1500 × 890) et mise à
   l'échelle de l'écran (`--k`, tarifs.js) — elle tient donc toujours,
   quelle que soit la fenêtre. Mobile : mise en page fluide.
   `--a` angle du liseré ; `--gx/--gy` dérive du reflet ; `--tx/--ty` doigt.
   ===================================================================== */
@property --sweep { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

.tarifs { position: relative; min-height: 100vh; min-height: 100svh; background: var(--ob-0); color: var(--bone); --a: 135deg; --gx: 0%; --gy: 0%; --tx: 50%; --ty: 50%; --k: 1; --sweep: 0deg; padding: 8vh var(--gutter) 10vh; display: grid; align-content: center; justify-items: center; row-gap: clamp(1rem, 2.4vh, 2rem); overflow: hidden; perspective: 1600px; perspective-origin: 50% 30%; }
.tarifs__label { margin: 0; width: min(94vw, 1600px, calc(86svh * 1.6842)); font-size: .64rem; color: var(--bone-soft); opacity: 0; transform: translateY(10px); }
.tarifs.is-in .tarifs__label { transition: opacity .9s .5s, transform .9s .5s var(--ease-out); opacity: 1; transform: none; }

/* ---------- L'écran : largeur bornée par la fenêtre ET par la hauteur, le ratio ne bouge jamais ---------- */
.tarifs__screen {
  position: relative; width: min(94vw, 1600px, calc(86svh * 1.6842)); aspect-ratio: 16 / 9.5; border-radius: clamp(14px, 1.4vw, 22px); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at var(--tx) var(--ty), #0f1116 0%, #090a0e 36%, #050507 100%);
  box-shadow: 0 0 0 1px rgba(233,228,220,.2), 0 0 0 5px #08090c, 0 0 0 6px rgba(233,228,220,.09), 0 80px 160px -60px rgba(0,0,0,1), 0 0 160px -30px rgba(185,198,214,.2);
  opacity: 0; transform: translateY(14vh) rotateX(14deg) scale(.88); transform-origin: 50% 60%; will-change: transform, opacity;
}
.tarifs.is-in .tarifs__screen { animation: tarifs-enter 1.4s var(--ease-out) forwards; }
@keyframes tarifs-enter { 60% { opacity: 1; } to { opacity: 1; transform: none; } }
/* liseré chrome : anneau conique orienté vers la lumière, masqué sur 1 px ; à l'entrée, la lumière fait le tour du cadre */
.tarifs__screen::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 6; opacity: 0;
  background: conic-gradient(from calc(var(--a) + var(--sweep)) at 50% 50%, rgba(233,228,220,.95), rgba(233,228,220,.07) 20%, rgba(185,198,214,.5) 50%, rgba(233,228,220,.07) 80%, rgba(233,228,220,.95));
  -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, linear-gradient(#000 0 0); mask-composite: exclude;
}
.tarifs.is-in .tarifs__screen::before { animation: tarifs-sweep 1.7s .3s var(--ease-out) forwards; }
@keyframes tarifs-sweep { from { --sweep: -320deg; opacity: 0; } 35% { opacity: 1; } to { --sweep: 0deg; opacity: 1; } }
/* reflet de verre : glisse à l'entrée, puis dérive avec le curseur */
.tarifs__glare { position: absolute; inset: -20%; pointer-events: none; z-index: 5; background: linear-gradient(112deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.03) 28%, rgba(255,255,255,0) 46%); mix-blend-mode: screen; opacity: 0; transform: translate(-45%, 0); transition: transform .9s var(--ease-out); }
.tarifs.is-in .tarifs__glare { animation: tarifs-glare 1.6s .55s var(--ease-out) forwards; }
@keyframes tarifs-glare { to { opacity: 1; transform: translate(var(--gx), var(--gy)); } }
.tarifs__screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 30px 80px -60px rgba(255,255,255,.07); }

/* ---------- Éteint : écran d'accueil (empreinte, invitation), révélé après l'entrée ---------- */
.tarifs__wake { position: absolute; inset: 0; z-index: 4; appearance: none; border: 0; margin: 0; padding: 0; background: transparent; color: var(--bone); cursor: pointer; overflow: hidden; opacity: 0; }
.tarifs.is-in .tarifs__wake { animation: tarifs-fade 1s 1.1s var(--ease-out) forwards; }
@keyframes tarifs-fade { to { opacity: 1; } }
.tarifs__wake:focus-visible { outline: 1px solid rgba(233,228,220,.5); outline-offset: -8px; }
/* balayage de lumière : un reflet lent traverse le verre endormi, comme une vitrine la nuit */
.tarifs__wake::before { content: ""; position: absolute; top: -30%; bottom: -30%; left: -30%; width: 34%; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(233,228,220,.045) 45%, rgba(185,198,214,.06) 52%, rgba(255,255,255,0) 100%); transform: skewX(-14deg) translateX(-120%); animation: tarifs-sleep 9s 2.2s ease-in-out infinite; }
@keyframes tarifs-sleep { 0% { transform: skewX(-14deg) translateX(-120%); } 55% { transform: skewX(-14deg) translateX(520%); } 100% { transform: skewX(-14deg) translateX(520%); } }
.tarifs__welcome { position: absolute; left: 0; top: 0; display: grid; place-content: center; justify-items: center; }
.tarifs__status { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; color: var(--bone-faint); }
/* l'empreinte : quatre arcs interrompus qui tournent chacun à leur rythme, le point au centre */
.tarifs__touch { overflow: visible; }
.tarifs__arc { fill: none; stroke: rgba(233,228,220,.5); stroke-width: 1; stroke-linecap: round; transform-origin: 48px 48px; transition: stroke .5s; }
.tarifs__arc:nth-child(1) { stroke-dasharray: 58 6 22 14; animation: tarifs-spin 26s linear infinite; }
.tarifs__arc:nth-child(2) { stroke-dasharray: 30 12 38 20; animation: tarifs-spin 34s linear infinite reverse; }
.tarifs__arc:nth-child(3) { stroke-dasharray: 52 16 22 10; animation: tarifs-spin 20s linear infinite; }
.tarifs__arc:nth-child(4) { stroke-dasharray: 66 34; animation: tarifs-spin 16s linear infinite reverse; }
.tarifs__core { fill: var(--bone); filter: drop-shadow(0 0 6px rgba(233,228,220,.9)); animation: tarifs-core 2.8s ease-in-out infinite; }
@keyframes tarifs-spin { to { transform: rotate(360deg); } }
/* Hors de portée d'écran (classe posée par tarifs.js), l'empreinte et le reflet sont en pause : une rotation SVG animée force
   une mise en page du document à chaque image, même invisible cinq écrans plus bas — le mur en payait le prix. */
.tarifs:not(.is-near) .tarifs__arc, .tarifs:not(.is-near) .tarifs__core, .tarifs:not(.is-near) .tarifs__wake::before { animation-play-state: paused; }
@keyframes tarifs-core { 50% { opacity: .55; } }
.tarifs__wake:hover .tarifs__arc { stroke: rgba(185,198,214,.9); }
.tarifs__invite { font-family: var(--font-serif); font-style: italic; line-height: 1; letter-spacing: -.01em; color: rgba(233,228,220,.94); }
.tarifs__hint { position: relative; letter-spacing: .26em; color: var(--bone-soft); }
.tarifs__hint::before { content: ""; position: absolute; left: 50%; top: -1.4em; width: 1px; height: 1em; background: rgba(233,228,220,.28); }
.tarifs__mark { position: absolute; left: 50%; bottom: 3.2%; width: 1rem; height: 1rem; margin-left: -.5rem; color: rgba(233,228,220,.28); pointer-events: none; z-index: 4; transition: opacity .4s; }
.tarifs[data-on] .tarifs__mark { opacity: 0; }

/* ---------- Allumage : sans flash. Une onde fine sur le verre depuis le doigt, l'accueil se dissout,
   l'interface se révèle par un voile doux qui s'ouvre depuis le point d'appui, le liseré fait un quart de tour ---------- */
@property --r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.tarifs__light { position: absolute; left: var(--tx); top: var(--ty); width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(185,198,214,.6); opacity: 0; pointer-events: none; z-index: 3; }
.tarifs__light::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(233,228,220,.4); opacity: 0; }
.tarifs[data-on] .tarifs__light { animation: tarifs-ring 1.3s var(--ease-out) forwards; }
.tarifs[data-on] .tarifs__light::after { animation: tarifs-ring 1.3s .2s var(--ease-out) forwards; }
@keyframes tarifs-ring { 0% { width: 24px; height: 24px; opacity: .55; } 100% { width: 720px; height: 720px; opacity: 0; } }
.tarifs[data-on] .tarifs__wake { animation: none; opacity: 0; pointer-events: none; transition: opacity .7s .2s; }
.tarifs[data-on] .tarifs__touch { transform: scale(.6); opacity: 0; transition: transform .8s var(--ease-out), opacity .5s .1s; }
.tarifs[data-on] .tarifs__arc { stroke-dashoffset: 70; transition: stroke-dashoffset .8s var(--ease-out); }
.tarifs[data-on] .tarifs__invite, .tarifs[data-on] .tarifs__hint { transform: translateY(-10px); opacity: 0; transition: transform .7s var(--ease-out), opacity .45s; }
.tarifs[data-on] .tarifs__screen::before { animation: tarifs-quarter 1.5s .1s var(--ease-out) forwards; }
@keyframes tarifs-quarter { from { --sweep: -80deg; opacity: 1; } to { --sweep: 0deg; opacity: 1; } }

/* ---------- Interface allumée (règles communes) ---------- */
/* éteinte : invisible ET hors de portée du pointeur (une vue active rétablirait sinon sa propre visibilité et volerait le clic) */
.tarifs__ui { position: absolute; left: 0; top: 0; z-index: 4; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; opacity: 0; visibility: hidden; pointer-events: none; --r: 0%; -webkit-mask-image: radial-gradient(circle at var(--tx) var(--ty), #000 calc(var(--r) - 18%), transparent var(--r)); mask-image: radial-gradient(circle at var(--tx) var(--ty), #000 calc(var(--r) - 18%), transparent var(--r)); }
.tarifs:not([data-on]) .tarifs__ui * { visibility: hidden; }
.tarifs[data-on] .tarifs__ui { opacity: 1; visibility: visible; pointer-events: auto; animation: tarifs-reveal 1.5s .2s var(--ease-out) forwards; }
@keyframes tarifs-reveal { from { --r: 0%; } to { --r: 125%; } }
.tarifs__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(233,228,220,.1); }
.tarifs__brand { display: inline-flex; align-items: center; color: var(--bone-faint); }
.tarifs__brand svg { color: var(--bone-soft); }
.tarifs__title { margin: 0; text-align: center; }
.tarifs__line { display: inline; }
.tarifs__line--sans { font-weight: 700; font-variation-settings: "wdth" 78, "opsz" 96; letter-spacing: -.005em; text-transform: uppercase; }
.tarifs__line--serif { font-family: var(--font-serif); font-style: italic; line-height: 1; color: rgba(233,228,220,.9); }
.tarifs__seg { justify-self: end; display: inline-flex; border: 1px solid rgba(233,228,220,.13); border-radius: 999px; background: rgba(233,228,220,.025); }
.tarifs__seg button { appearance: none; border: 0; margin: 0; border-radius: 999px; background: transparent; color: var(--bone-faint); font-family: var(--font-mono); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: color .3s, background .3s; }
.tarifs__seg button[aria-pressed="true"] { background: var(--bone); color: #0a0a0d; }
.tarifs__seg button:not([aria-pressed="true"]):hover { color: var(--bone); }
/* min-width: 0 : le tableau ne doit pas élargir la cellule que les cartes partagent avec lui */
.tarifs__views { position: relative; min-height: 0; min-width: 0; display: grid; }
.tarifs__view { grid-area: 1 / 1; min-height: 0; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility 0s .45s; }
.tarifs__view[data-active] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* --- Offres : trois colonnes éditoriales, séparées par un filet, Signature lavée de froid --- */
.tarifs__cards { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.tarifs__card { position: relative; display: grid; align-content: start; min-width: 0; border-left: 1px solid rgba(233,228,220,.09); transform: translateY(14px); opacity: 0; }
.tarifs__card:first-child { border-left: 0; }
.tarifs[data-on] .tarifs__card { animation: tarifs-card .9s var(--ease-out) forwards; }
.tarifs[data-on] .tarifs__card:nth-child(1) { animation-delay: .45s; } .tarifs[data-on] .tarifs__card:nth-child(2) { animation-delay: .6s; } .tarifs[data-on] .tarifs__card:nth-child(3) { animation-delay: .75s; }
@keyframes tarifs-card { to { transform: none; opacity: 1; } }
.tarifs__card--signature { background: linear-gradient(180deg, rgba(185,198,214,.075), rgba(185,198,214,0) 72%); box-shadow: inset 0 1px 0 rgba(185,198,214,.55); }
.tarifs__tag { position: absolute; color: var(--cold); font-family: var(--font-mono); letter-spacing: .18em; text-transform: uppercase; }
.tarifs__tag::before { content: ""; display: inline-block; width: .38em; height: .38em; border-radius: 50%; background: var(--cold); margin-right: .7em; vertical-align: .1em; box-shadow: 0 0 10px rgba(185,198,214,.7); }
.tarifs__name { margin: 0; font-family: var(--font-mono); font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-soft); }
.tarifs__price { margin: 0; display: grid; }
.tarifs__price b { font-family: var(--font-serif); font-style: italic; font-weight: 400; line-height: 1; letter-spacing: -.012em; color: var(--bone); }
.tarifs__price small { font-family: var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-faint); }
.tarifs__desc { margin: 0; font-weight: 300; line-height: 1.5; color: rgba(233,228,220,.72); border-top: 1px solid rgba(233,228,220,.08); }
.tarifs__list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; font-weight: 400; line-height: 1.4; color: rgba(233,228,220,.8); }
.tarifs__list li { display: grid; grid-template-columns: 1em 1fr; align-items: start; }
.tarifs__list li::before { content: ""; width: .8em; height: .8em; margin-top: .3em; background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23b9c6d6' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.tarifs__cta { justify-self: start; display: inline-flex; align-items: center; gap: .8em; color: var(--bone); text-decoration: none; font-family: var(--font-mono); letter-spacing: .18em; text-transform: uppercase; padding-bottom: .5em; border-bottom: 1px solid rgba(233,228,220,.28); transition: border-color .3s; }
.tarifs__cta::after { content: "→"; font-family: var(--font-display); transition: transform .4s var(--ease-out); }
.tarifs__cta:hover { border-color: var(--bone); }
.tarifs__cta:hover::after { transform: translateX(4px); }
.tarifs__card--signature .tarifs__cta { border-color: rgba(185,198,214,.6); }

/* --- Comparatif --- */
.tarifs__tablewrap { height: 100%; overflow: auto; scrollbar-width: thin; }
.tarifs__table { width: 100%; border-collapse: collapse; font-weight: 300; }
.tarifs__table th, .tarifs__table td { text-align: left; border-bottom: 1px solid rgba(233,228,220,.08); vertical-align: middle; }
.tarifs__table thead th { font-family: var(--font-mono); font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-faint); border-bottom-color: rgba(233,228,220,.16); }
.tarifs__table thead th:not(:first-child), .tarifs__table td:not(:first-child) { text-align: center; width: 19%; }
.tarifs__table td:first-child { color: rgba(233,228,220,.8); }
.tarifs__table th.is-signature, .tarifs__table td.is-signature { background: rgba(185,198,214,.05); color: var(--bone); }
.tarifs__table thead th.is-signature { color: var(--cold); }
.tarifs__table .yes { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23e9e4dc' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.tarifs__table .no { color: var(--bone-faint); }
.tarifs__table .val { font-family: var(--font-serif); font-style: italic; font-size: 1.2em; line-height: 1; }
.tarifs__table tbody tr:hover td { background: rgba(233,228,220,.02); }
.tarifs__table tbody tr:hover td.is-signature { background: rgba(185,198,214,.08); }

/* --- Pied : cinq ans de tranquillité --- */
.tarifs__five { display: grid; grid-template-columns: auto 1fr; align-items: baseline; border-top: 1px solid rgba(233,228,220,.1); }
.tarifs__five b { font-family: var(--font-serif); font-style: italic; font-weight: 400; line-height: 1; color: var(--cold); white-space: nowrap; }
.tarifs__five p { margin: 0; font-weight: 300; line-height: 1.5; color: var(--bone-soft); }
.tarifs__five p span { color: var(--bone-faint); }

/* ---------- Desktop : interface dessinée à 1500 × 890, mise à l'échelle de l'écran ---------- */
@media (min-width: 768px) {
  .tarifs__ui { width: 1500px; height: 890px; transform: scale(var(--k)); transform-origin: 0 0; padding: 30px 46px 28px; }
  .tarifs__welcome { width: 1500px; height: 890px; transform: scale(var(--k)); transform-origin: 0 0; gap: 0; }
  .tarifs__status { padding: 34px 46px 0; font-size: 9.5px; letter-spacing: .2em; }
  .tarifs__touch { width: 92px; height: 92px; margin-bottom: 34px; }
  .tarifs__invite { font-size: 46px; }
  .tarifs__hint { margin-top: 30px; font-size: 9.5px; }
  .tarifs__bar { gap: 20px; padding-bottom: 22px; }
  .tarifs__brand { gap: 9px; font-size: 9.5px; letter-spacing: .18em; }
  .tarifs__brand svg { width: 15px; height: 15px; }
  .tarifs__line--sans { font-size: 17px; }
  .tarifs__line--serif { font-size: 20px; margin-left: 7px; }
  .tarifs__seg { padding: 3px; }
  .tarifs__seg button { padding: 7px 15px; font-size: 8.5px; }
  .tarifs__cards { padding-top: 30px; }
  /* contenu centré dans la hauteur de la colonne : l'air se répartit au-dessus et au-dessous */
  .tarifs__card { padding: 26px 36px 30px; gap: 18px; align-content: center; }
  .tarifs__card:first-child { padding-left: 4px; }
  .tarifs__tag { top: 26px; right: 36px; font-size: 8.5px; }
  .tarifs__name { font-size: 10px; }
  .tarifs__price { gap: 12px; margin-top: 8px; }
  .tarifs__price b { font-size: 66px; }
  .tarifs__price small { font-size: 8.5px; }
  .tarifs__desc { padding-top: 18px; margin-top: 4px; font-size: 15.5px; }
  .tarifs__list { gap: 11px; margin-top: 2px; font-size: 13.5px; }
  .tarifs__list li { gap: 12px; }
  .tarifs__cta { margin-top: 14px; font-size: 8.5px; }
  .tarifs__tablewrap { padding-top: 26px; }
  .tarifs__table { font-size: 13.5px; }
  .tarifs__table th, .tarifs__table td { padding: 11px 16px; }
  .tarifs__table thead th { font-size: 8.5px; }
  .tarifs__five { gap: 26px; padding-top: 20px; }
  .tarifs__five b { font-size: 19px; }
  .tarifs__five p { font-size: 11.5px; }
}

/* ---------- Mobile : conçu à part, mise en page fluide ---------- */
@media (max-width: 767px), (pointer: coarse) and (max-height: 520px) {
  .tarifs { padding: 10vh var(--gutter) 12vh; perspective: 1000px; }
  .tarifs__label { width: 100%; }
  .tarifs__screen { width: 100%; aspect-ratio: auto; min-height: 72svh; transform: translateY(8vh) rotateX(10deg) scale(.94); }
  .tarifs__wake { min-height: 72svh; }
  .tarifs__welcome { position: absolute; inset: 0; width: auto; height: auto; transform: none; }
  .tarifs__status { padding: 1rem 1rem 0; font-size: .6rem; letter-spacing: .16em; }
  .tarifs__touch { width: 4.4rem; height: 4.4rem; margin-bottom: 1.4rem; }
  .tarifs__invite { font-size: 2rem; text-align: center; }
  .tarifs__hint { margin-top: 1.3rem; font-size: .56rem; }
  .tarifs__ui { position: relative; inset: auto; width: auto; height: auto; transform: none; grid-template-rows: auto auto auto; padding: 1.1rem 1rem 1.2rem; }
  /* éteinte, l'interface ne doit pas non plus occuper de hauteur (sinon l'écran s'étire et l'anneau descend) */
  .tarifs:not([data-on]) .tarifs__ui { display: none; }
  .tarifs[data-on] .tarifs__wake { display: none; }
  .tarifs[data-on] .tarifs__screen { min-height: 0; }
  .tarifs__bar { grid-template-columns: 1fr; justify-items: start; gap: .8rem; padding-bottom: .9rem; }
  .tarifs__brand { gap: .5rem; font-size: .56rem; }
  .tarifs__brand svg { width: .9rem; height: .9rem; }
  .tarifs__title { text-align: left; }
  .tarifs__line--sans { font-size: 1.05rem; }
  .tarifs__line--serif { font-size: 1.15rem; margin-left: .4rem; }
  .tarifs__seg { justify-self: start; padding: 3px; }
  .tarifs__seg button { padding: .6rem .95rem; font-size: .58rem; }
  .tarifs__cards { grid-template-columns: 1fr; gap: 0; padding-top: .4rem; }
  .tarifs__card { padding: 1.2rem 0 1.4rem; gap: .9rem; border-left: 0; border-bottom: 1px solid rgba(233,228,220,.09); }
  .tarifs__card--signature { padding: 1.2rem .9rem 1.4rem; margin: 0 -.9rem; border-radius: 10px; }
  .tarifs__tag { top: 1.2rem; right: .9rem; font-size: .56rem; }
  .tarifs__name { font-size: .62rem; }
  .tarifs__price { gap: .5rem; margin-top: .2rem; }
  .tarifs__price b { font-size: 2.6rem; }
  .tarifs__price small { font-size: .6rem; }
  .tarifs__desc { padding-top: .9rem; font-size: .98rem; }
  .tarifs__list { gap: .6rem; font-size: .9rem; }
  .tarifs__list li { gap: .6rem; }
  .tarifs__cta { margin-top: .5rem; padding: .7rem 0; font-size: .6rem; }
  /* comparatif : tout tient dans la largeur du téléphone — chaque ligne = l'intitulé sur toute la largeur, puis les
     trois offres côte à côte (plus de défilement latéral, retour d'Axel) */
  .tarifs__tablewrap { height: auto; overflow: visible; padding-top: .4rem; }
  .tarifs__table, .tarifs__table thead, .tarifs__table tbody { display: block; min-width: 0; width: auto; }
  .tarifs__table { font-size: .8rem; }
  .tarifs__table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .35rem; align-items: center; padding: .5rem 0 .55rem; border-bottom: 1px solid rgba(233,228,220,.08); }
  .tarifs__table th, .tarifs__table td { display: block; padding: .15rem .2rem; border: 0; text-align: center; line-height: 1.3; }
  .tarifs__table thead th:not(:first-child), .tarifs__table td:not(:first-child) { width: auto; }
  /* la vue inactive (offres ou comparatif) ne réserve plus de hauteur : l'écran se règle sur la vue affichée */
  .tarifs__view:not([data-active]) { height: 0; min-height: 0; overflow: hidden; }
  .tarifs__table td:first-child { grid-column: 1 / -1; padding: 0 0 .3rem; text-align: left; font-size: .74rem; color: rgba(233,228,220,.62); }
  .tarifs__table thead th:first-child { display: none; }
  .tarifs__table thead tr { padding: .2rem 0 .5rem; border-bottom-color: rgba(233,228,220,.16); }
  .tarifs__table thead th { font-size: .56rem; letter-spacing: .14em; }
  .tarifs__table th.is-signature, .tarifs__table td.is-signature { border-radius: 6px; background: rgba(185,198,214,.08); }
  .tarifs__table .val { font-size: 1.05em; }
  .tarifs__table tbody tr:hover td { background: transparent; }
  .tarifs__table tbody tr:hover td.is-signature { background: rgba(185,198,214,.08); }
  .tarifs__five { grid-template-columns: 1fr; gap: .4rem; padding-top: .9rem; margin-top: .6rem; }
  .tarifs__five b { font-size: 1.1rem; white-space: normal; }
  .tarifs__five p { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tarifs__screen, .tarifs.is-in .tarifs__screen { animation: none; opacity: 1; transform: none; }
  .tarifs__screen::before, .tarifs.is-in .tarifs__screen::before { animation: none; opacity: 1; }
  .tarifs__glare, .tarifs.is-in .tarifs__glare { animation: none; opacity: 1; transform: translate(var(--gx), var(--gy)); transition: none; }
  .tarifs__wake, .tarifs.is-in .tarifs__wake { animation: none; opacity: 1; }
  .tarifs__label, .tarifs.is-in .tarifs__label { opacity: 1; transform: none; transition: none; }
  .tarifs__arc, .tarifs__core, .tarifs__wake::before { animation: none; }
  .tarifs[data-on] .tarifs__light, .tarifs[data-on] .tarifs__light::after, .tarifs[data-on] .tarifs__screen::before { animation: none; }
  .tarifs__ui { -webkit-mask-image: none; mask-image: none; }
  .tarifs[data-on] .tarifs__ui { animation: none; }
  .tarifs[data-on] .tarifs__card { animation: none; transform: none; opacity: 1; }
  .tarifs__view { transition: none; }
}