/* ═══════════════════════════════════════════════════════════════════ MDG — LES TARIFS DES SITES INTERNET ─────────────────────────────────────────────────────────────────── La page garde la coque et l'échelle de systeme.css. Ce qu'elle a en propre : un fond anthracite éclairé doucement, et cinq boîtes produit en 3D dont les tranches portent un dégradé irisé. UNE BOÎTE, C'EST QUATRE ÉTAGES, ET CHACUN PORTE UN SEUL TRANSFORM : .scene la perspective ; sur téléphone, sa place dans le rayon .flotte le flottement au repos (ici, en CSS) .incline la pose de biais, la souris, l'arrivée (boites.js) .boite le retournement (boites.js) Aucun de ces étages ne reçoit d'opacité, de filtre ni de masque : chacun de ces trois-là aplatirait la 3D de tout ce qu'il contient. L'opacité se pose sur .scene, qui n'est pas en 3D. LE TEXTE DES FACES EST EN UNITÉS DE CONTENEUR (cqw). La face est un objet imprimé : sa composition est la même à 310 px qu'à 400 px, les lignes se coupent aux mêmes mots, la liste du dos tient toujours. ═══════════════════════════════════════════════════════════════════ */ /* ═══ 1. LA PAGE ══════════════════════════════════════════════════ */ :root { /* Anthracite presque noir : le noir du site, remonté d'un cran pour que les boîtes aient un mur derrière elles. Le menu, le voile et l'en-tête suivent, puisqu'ils lisent --noir. */ --noir: #0f1012; --noir-2: #17181b; /* Les cinq lumières des tranches. */ --vert: #7af25c; --cyan: #23d9f2; --bleu: #4470ff; --violet: #8d49ff; --rose: #ff52c8; /* Le carton : gris foncé mat, plus clair en haut où tombe la lumière. */ --carton-haut: #313236; --carton-bas: #1c1d20; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* LE CORPS EST TRANSPARENT ICI, ET C'EST INDISPENSABLE. systeme.css lui donne le fond noir ; or a deja le sien, donc celui du corps ne remonte pas au canevas : il se peint PAR-DESSUS les calques en z-index negatif. Le fond ci-dessous et la lumiere du rayon seraient alors dessous, invisibles. */ body.ts { background: transparent; } /* Le fond : un grain fixe et une lumière douce venue d'en haut. Le grain casse les paliers qu'un dégradé sombre dessine sur un écran. */ .ts-fond { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--grain), radial-gradient(120% 70% at 50% -10%, #1d1f23 0%, rgba(29, 31, 35, 0) 70%), var(--noir); } .ts-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ts svg use { pointer-events: none; } .ts .formule svg, .ts-astuce svg, .reglement svg, .retourner svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ═══ 2. LA TÊTE ══════════════════════════════════════════════════ */ .ts-tete { padding-top: calc(var(--e-3) + 34px + var(--e-6)); padding-bottom: var(--e-5); } .ts-tete .section-tete { margin-bottom: 0; } .ts-tete .note { display: grid; gap: var(--e-3); } /* Le spectre des boîtes, une fois, sur la serif du titre. */ .ts-spectre { width: fit-content; padding-right: .12em; background: linear-gradient(90deg, var(--vert), var(--cyan) 28%, var(--bleu) 52%, var(--violet) 74%, var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ts-astuce { display: flex; align-items: center; gap: .6em; color: var(--creme); font-family: var(--f-display); font-weight: 500; font-size: .92rem; } .ts-astuce svg { flex: none; width: 18px; height: 18px; } /* ═══ 3. LE RAYON ═════════════════════════════════════════════════ */ .ts-rayon { position: relative; padding-bottom: var(--e-7); } /* La lumière du studio, derrière les boîtes. */ .ts-rayon::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -8%; width: min(1500px, 160vw); height: 110%; transform: translateX(-50%); background: radial-gradient(50% 46% at 50% 44%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 72%); pointer-events: none; } .rayon { position: relative; } /* ── Les couleurs d'une formule. Les pastilles du téléphone portent les mêmes classes : elles lisent les mêmes couleurs. ── */ .formule, .puces button { --c1: var(--vert); --c2: var(--cyan); --arc: var(--c1), var(--c2), var(--c1); --ligne: var(--c1), var(--c2); --b1: color-mix(in oklab, var(--c1) 70%, #fff); --b2: color-mix(in oklab, var(--c2) 70%, #fff); --bouton: linear-gradient(90deg, var(--b1), var(--b2)); } .formule--vitrine { --c1: var(--cyan); --c2: var(--bleu); } .formule--boutique { --c1: var(--bleu); --c2: var(--violet); } .formule--sur-mesure { --c1: var(--violet); --c2: var(--rose); } /* Premium : tout le spectre, et il tourne (voir plus bas). */ .formule--premium { --c1: var(--cyan); --c2: var(--violet); --arc: var(--vert), var(--cyan), var(--bleu), var(--violet), var(--rose), var(--vert); --ligne: var(--vert), var(--cyan), var(--bleu), var(--violet), var(--rose); --bouton: linear-gradient(90deg, color-mix(in oklab, var(--vert) 68%, #fff), color-mix(in oklab, var(--cyan) 68%, #fff), color-mix(in oklab, var(--bleu) 68%, #fff), color-mix(in oklab, var(--violet) 68%, #fff), color-mix(in oklab, var(--rose) 68%, #fff)); } @supports not (color: color-mix(in oklab, red, blue)) { .formule, .puces button { --b1: var(--c1); --b2: var(--c2); } .formule--premium { --bouton: linear-gradient(90deg, var(--vert), var(--cyan), var(--bleu), var(--violet), var(--rose)); } } /* D'où part le dégradé autour de la boîte. La première couleur naît au coin bas-gauche, la seconde culmine en haut à droite : sur les deux tranches qu'on voit (droite et dessous), elle passe de l'une à l'autre. Premium le fait tourner. */ @property --tour { syntax: ''; inherits: true; initial-value: 225deg; } .formule { --tour: 225deg; /* Ce que boites.js règle à chaque image. */ --allume: 1; /* les tranches allumées (0 à l'arrivée) */ --eclat: 0; /* la souris, le retournement : elles brillent plus */ --fil: 1; /* le fil de MDG au nom, tracé à l'arrivée */ --lift: 0; /* la boîte soulevée, l'ombre s'efface */ --lx: 32%; /* le reflet de la face avant */ --ly: 22%; --decale: 0s; position: relative; container-type: inline-size; display: grid; justify-items: center; align-content: start; gap: var(--e-4); } .formule:nth-child(2) { --decale: -2.3s; } .formule:nth-child(3) { --decale: -4.6s; } .formule:nth-child(4) { --decale: -1.2s; } .formule:nth-child(5) { --decale: -5.7s; } .scene { --cote: min(400px, 90cqi); --prof: calc(var(--cote) * .15); --cote-x2: calc(var(--cote) * 2); position: relative; width: var(--cote); height: var(--cote); perspective: 1500px; -webkit-tap-highlight-color: transparent; } /* ═══ 4. LES FACES ════════════════════════════════════════════════ */ .face { container-type: inline-size; border-radius: 2px; color: #f3f3f4; overflow: hidden; } .face--avant { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; padding: 7.4cqw 7.4cqw 7cqw; background: var(--grain), linear-gradient(158deg, var(--carton-haut) 0%, #26272b 46%, var(--carton-bas) 100%); user-select: none; -webkit-user-select: none; } .face--dos { display: flex; flex-direction: column; padding: 24px; padding: 6.4cqw; background: var(--grain), linear-gradient(158deg, #2a2b2f 0%, #202124 50%, #18191b 100%); } /* Le liseré : l'arête de la face qui prend la couleur des tranches. */ .face::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: max(1px, .32cqw); background: conic-gradient(from var(--tour), var(--arc)); -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); opacity: calc((.45 + .45 * var(--eclat)) * var(--allume)); pointer-events: none; } /* Vu de dos, la face est retournée : le liseré aussi, sinon ses couleurs ne rejoindraient plus celles des tranches aux coins. */ .face--dos::before { transform: scaleX(-1); } /* Le reflet : une lumière large et douce, qui suit la souris. */ .face::after { content: ''; position: absolute; inset: 0; background: radial-gradient(75% 60% at var(--lx) var(--ly), rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 70%); pointer-events: none; } .face--dos::after { background: radial-gradient(80% 60% at 70% 12%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%); } /* ── La face avant ── */ .avant-haut { display: flex; align-items: center; gap: 3cqw; } .marque { font-family: var(--f-display); font-weight: 700; font-size: 21px; font-size: 5.6cqw; letter-spacing: -.035em; line-height: 1; } .fil { flex: 1; height: max(1px, .36cqw); border-radius: 1px; background: linear-gradient(90deg, var(--ligne)); box-shadow: 0 0 1.6cqw color-mix(in oklab, var(--c2) 55%, transparent); transform: scaleX(var(--fil)); transform-origin: left center; } .nom { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 16px; font-size: 4.3cqw; letter-spacing: .03em; line-height: 1; text-transform: uppercase; white-space: nowrap; } .avant-bas { display: grid; } .type { font-family: var(--f-display); font-weight: 700; font-size: 12px; font-size: 3.15cqw; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .92); } .prix { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.8cqw; margin-top: 2cqw; } .prix b { font-family: var(--f-display); font-weight: 700; font-size: 48px; font-size: 12.6cqw; letter-spacing: -.05em; line-height: .86; font-variant-numeric: tabular-nums; } .prix small { font-family: var(--f-display); font-weight: 500; font-size: 13px; font-size: 3.4cqw; letter-spacing: .1em; color: rgba(255, 255, 255, .6); } .prix .depuis { flex-basis: 100%; margin-bottom: 1.6cqw; font-size: 2.9cqw; letter-spacing: .14em; text-transform: uppercase; } .specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4cqw; margin-top: 6.4cqw; padding-top: 4.6cqw; border-top: max(1px, .26cqw) solid rgba(255, 255, 255, .09); } .specs li { display: grid; gap: 1.9cqw; align-content: start; } .specs svg { width: 6.2cqw; height: 6.2cqw; color: rgba(255, 255, 255, .9); } .specs span { font-family: var(--f-display); font-weight: 500; font-size: 11px; font-size: 2.95cqw; line-height: 1.22; color: rgba(255, 255, 255, .72); } /* ── Le dos ── */ .dos-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 11px; font-size: 2.9cqw; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .dos-titre span { color: #fff; font-weight: 700; } .dos-titre:focus { outline: none; } .inclus { display: grid; gap: 1.2cqw; margin-top: 4.4cqw; font-size: 13px; font-size: 3.45cqw; line-height: 1.32; color: rgba(255, 255, 255, .9); } .inclus li { position: relative; padding-left: 3.8cqw; } .inclus li::before { content: ''; position: absolute; left: .3cqw; top: .56em; width: 1.25cqw; height: 1.25cqw; transform: rotate(45deg); background: linear-gradient(135deg, var(--c1), var(--c2)); } .formule--premium .inclus li::before { background: linear-gradient(135deg, var(--vert), var(--bleu), var(--rose)); } .dos-pied { display: grid; gap: 2.6cqw; margin-top: auto; padding-top: 3.6cqw; } .dos-prix { font-family: var(--f-display); font-weight: 500; font-size: 11px; font-size: 2.95cqw; letter-spacing: .06em; color: rgba(255, 255, 255, .6); } .choisir { display: flex; align-items: center; justify-content: center; gap: 2cqw; min-height: 46px; min-height: 12.4cqw; padding: 0 5cqw; border-radius: 999px; background: var(--bouton); color: #0b0b0c; font-family: var(--f-display); font-weight: 600; font-size: 14px; font-size: 3.75cqw; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 1.6cqw 6cqw -1.6cqw color-mix(in oklab, var(--c2) 60%, transparent); transition: box-shadow var(--d-court) var(--ease); } .choisir i { font-style: normal; transition: transform var(--d-court) var(--ease); } .choisir:hover i { transform: translateX(.3em); } .choisir:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 2cqw 8cqw -1.6cqw color-mix(in oklab, var(--c2) 80%, transparent); } .choisir:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* ── Premium : un reflet passe lentement sur la face. ── */ .reflet { position: absolute; inset: -10% -70%; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .06) 48%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .06) 52%, rgba(255, 255, 255, 0) 58%); transform: translateX(-42%); pointer-events: none; } /* ═══ 5. EN 3D ════════════════════════════════════════════════════ boites.js pose .boites-3d sur quand le navigateur sait faire. Sans lui, la boîte reste une carte à plat, sa liste en dessous. */ .boites-3d .scene { cursor: pointer; } .boites-3d .flotte, .boites-3d .incline, .boites-3d .boite { position: absolute; inset: 0; transform-style: preserve-3d; } /* LA BOÎTE EST DESSINÉE DEUX FOIS PLUS GRANDE, PUIS RÉDUITE DE MOITIÉ. Chrome trame une face tournée en 3D à une finesse plafonnée, sans tenir compte de la densité de l'écran : sur un téléphone, le texte sortait en escalier. Deux fois plus de pixels à la source, et la réduction les rend nets. Les faces étant en cqw, leur contenu suit la taille sans rien réécrire ; la perspective ne voit aucune différence, la réduction fait partie de la chaîne 3D. */ .boites-3d .incline { inset: -50%; --cote: var(--cote-x2); --prof: calc(var(--cote-x2) * .15); transform: rotateX(11deg) rotateY(-20deg) scale(.5); } .boites-3d .face, .boites-3d .tranche { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .boites-3d .face { inset: 0; } .boites-3d .face--avant { transform: translateZ(calc(var(--prof) / 2)); } .boites-3d .face--dos { transform: rotateY(180deg) translateZ(calc(var(--prof) / 2)); } /* LES TRANCHES. Chacune peint le même dégradé conique que le liseré, centré là où serait le centre de la face avant si on dépliait la boîte : les couleurs se rejoignent aux arêtes. Un demi-pixel de plus à chaque bout ferme les jours qu'un arrondi de rendu ouvrirait. */ .tranche { overflow: hidden; } .tranche--d, .tranche--g { top: -.5px; bottom: -.5px; left: 50%; width: var(--prof); margin-left: calc(var(--prof) / -2); } .tranche--h, .tranche--b { left: -.5px; right: -.5px; top: 50%; height: var(--prof); margin-top: calc(var(--prof) / -2); } .tranche--d { transform: rotateY(90deg) translateZ(calc(var(--cote) / 2)); background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 3px), linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .34)), conic-gradient(from var(--tour) at calc(var(--cote) / -2) 50%, var(--arc)); } .tranche--g { transform: rotateY(-90deg) translateZ(calc(var(--cote) / 2)); background: linear-gradient(270deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 3px), linear-gradient(270deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .3)), conic-gradient(from var(--tour) at calc(var(--prof) + var(--cote) / 2) 50%, var(--arc)); } .tranche--h { transform: rotateX(90deg) translateZ(calc(var(--cote) / 2)); background: linear-gradient(0deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 3px), linear-gradient(0deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04)), conic-gradient(from var(--tour) at 50% calc(var(--prof) + var(--cote) / 2), var(--arc)); } .tranche--b { transform: rotateX(-90deg) translateZ(calc(var(--cote) / 2)); background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 3px), linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .42)), conic-gradient(from var(--tour) at 50% calc(var(--cote) / -2), var(--arc)); } /* La lumière des tranches : éteinte avant l'arrivée, plus vive sous la souris. Deux voiles plutôt qu'un filtre : un filtre sur une face en 3D est exactement ce que Safari rend mal. */ .tranche::before, .tranche::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .tranche::before { background: #fff; opacity: calc(.14 * var(--eclat)); } .tranche::after { background: #060607; opacity: calc(.8 * (1 - var(--allume))); } /* Le halo : la lumière des tranches sur le mur, derrière la boîte. */ .halo { position: absolute; inset: -22%; border-radius: 50%; background: conic-gradient(from var(--tour), var(--arc)); -webkit-mask: radial-gradient(closest-side, #000 38%, rgba(0, 0, 0, .35) 62%, transparent 100%); mask: radial-gradient(closest-side, #000 38%, rgba(0, 0, 0, .35) 62%, transparent 100%); opacity: calc((.16 + .18 * var(--eclat)) * var(--allume)); pointer-events: none; } html:not(.boites-3d) .halo { display: none; } /* L'ombre au sol : elle se resserre quand la boîte monte. */ .ombre { position: absolute; left: 14%; right: 14%; bottom: -15%; height: 11%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); opacity: calc((.9 - .45 * var(--lift)) * var(--allume)); pointer-events: none; } html:not(.boites-3d) .ombre { display: none; } /* ── Le flottement : très léger, et chaque boîte à son temps. ── */ .boites-3d .flotte { animation: flotte 7.2s ease-in-out var(--decale) infinite; } .boites-3d .ombre { animation: ombre 7.2s ease-in-out var(--decale) infinite; } @keyframes flotte { 0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg); } 50% { transform: translate3d(0, -2.1%, 0) rotateZ(-.5deg); } } @keyframes ombre { 0%, 100% { transform: scale(1); } 50% { transform: scale(.87); } } /* ── Premium : le spectre fait le tour de la boîte, un reflet passe. ── */ .formule.formule--premium { animation: spectre 18s linear infinite; } @keyframes spectre { to { --tour: 585deg; } } .boites-3d .reflet { animation: reflet 7.5s cubic-bezier(.45, 0, .25, 1) 1.5s infinite; } @keyframes reflet { 0%, 35% { transform: translateX(-42%); } 80%, 100% { transform: translateX(42%); } } /* Hors de l'écran, rien ne tourne pour rien. */ .boites-3d .formule:not(.est-visible), .boites-3d .formule:not(.est-visible) .flotte, .boites-3d .formule:not(.est-visible) .ombre, .boites-3d .formule:not(.est-visible) .reflet { animation-play-state: paused; } /* Retournée, la boîte passe devant ses voisines. */ .formule.est-ouverte { z-index: 4; } /* ── Le bouton sous la boîte : le chemin du clavier vers le dos. ── */ .retourner { display: inline-flex; align-items: center; gap: .55em; min-height: 2.75rem; padding: .5em 1.15em; border-radius: 999px; font-family: var(--f-display); font-weight: 500; font-size: .9rem; color: var(--gris); box-shadow: inset 0 0 0 1px var(--trait); transition: color var(--d-court), box-shadow var(--d-court); } .retourner:hover { color: var(--creme); box-shadow: inset 0 0 0 1px var(--trait-fort); } .retourner svg { width: 17px; height: 17px; transition: transform var(--d-long) var(--ease); } .retourner[aria-expanded="true"] { color: var(--creme); box-shadow: inset 0 0 0 1px var(--trait-fort); } .retourner[aria-expanded="true"] svg { transform: rotate(-180deg); } html:not(.boites-3d) .retourner { display: none; } /* ── Sans 3D : la carte à plat, et sa liste dessous. ── */ html:not(.boites-3d) .scene { width: min(100%, 420px); height: auto; display: grid; gap: var(--gout); perspective: none; } html:not(.boites-3d) .face { position: relative; } html:not(.boites-3d) .face--avant { aspect-ratio: 1; } html:not(.boites-3d) .face--dos .dos-pied { margin-top: 6cqw; } html:not(.boites-3d) .tranche { display: none; } /* ═══ 6. LE RAYON, SELON L'ÉCRAN ══════════════════════════════════ */ .puces { display: none; } /* Téléphone et tablette : une boîte à la fois, qu'on fait glisser. Les voisines restent en bord d'écran, tournées vers le centre. */ @media (max-width: 899px) { .rayon { --case: 84vw; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--marge)); padding: 9vw calc(50vw - var(--case) / 2) 5vw; } .rayon::-webkit-scrollbar { display: none; } .formule { flex: none; width: var(--case); scroll-snap-align: center; scroll-snap-stop: always; } .scene { --cote: min(440px, 104cqi); } .boites-3d .puces { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: var(--e-3); } .puces button { min-height: 2.25rem; padding: .4em .9em; border-radius: 999px; font-family: var(--f-display); font-weight: 500; font-size: .8rem; color: var(--gris); box-shadow: inset 0 0 0 1px var(--trait); transition: color var(--d-court), background var(--d-court), box-shadow var(--d-court); } .puces button[aria-current="true"] { color: #0b0b0c; background: var(--bouton); box-shadow: none; } } @media (max-width: 599px) { /* Cinq pastilles ne tiennent pas sur une ligne : trois, puis deux. */ .boites-3d .puces { max-width: 18.5rem; margin-inline: auto; } .ts-rayon { padding-bottom: var(--e-5); } } @media (min-width: 600px) and (max-width: 899px) { .rayon { --case: 62vw; } } /* Écran large : trois puis deux, ou deux, deux et une. */ @media (min-width: 900px) { .rayon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gout); row-gap: var(--e-6); padding-top: var(--e-4); } .formule { grid-column: span 2; } .formule:nth-child(5) { grid-column: 2 / span 2; } } @media (min-width: 1280px) { .rayon { grid-template-columns: repeat(6, minmax(0, 1fr)); } .formule:nth-child(4) { grid-column: 2 / span 2; } .formule:nth-child(5) { grid-column: 4 / span 2; } } /* ═══ 7. MAINTENANCE ET PAIEMENT ══════════════════════════════════ */ .ts-conditions { padding-top: var(--e-5); } .entretiens { --l: 12; display: grid; gap: var(--gout); align-content: start; } .entretien { position: relative; display: grid; gap: var(--e-3); align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--rayon-g); background: var(--noir-2); box-shadow: inset 0 0 0 1px var(--trait); overflow: hidden; } /* Un fil de lumière en tête de carte, comme sur les boîtes. */ .entretien::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(35, 217, 242, 0), var(--cyan) 30%, var(--bleu) 55%, rgba(68, 112, 255, 0)); opacity: .7; } .entretien--complet::before { background: linear-gradient(90deg, rgba(141, 73, 255, 0), var(--violet) 30%, var(--rose) 55%, rgba(255, 82, 200, 0)); } .entretien-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em .5em; font-family: var(--f-display); font-weight: 500; } .entretien-prix b { font-weight: 700; font-size: clamp(2.2rem, 3.6vw, 3rem); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; } .entretien-prix small { color: var(--gris); font-size: .9rem; font-weight: 400; font-family: var(--f-texte); } .entretien-liste { display: grid; gap: .45em; padding-top: var(--e-3); border-top: 1px solid var(--trait); } .entretien-liste li { position: relative; padding-left: 1.3em; } .entretien-liste li::before { content: ''; position: absolute; left: .1em; top: .62em; width: .42em; height: .42em; transform: rotate(45deg); background: linear-gradient(135deg, var(--cyan), var(--bleu)); } .entretien--complet .entretien-liste li::before { background: linear-gradient(135deg, var(--violet), var(--rose)); } .reglement { --l: 12; display: grid; gap: var(--e-4); align-content: start; } .reglement-titre { font-weight: 700; } .reglement-liste { display: grid; gap: var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--trait); } .reglement-liste li { display: grid; grid-template-columns: 22px 1fr; gap: var(--e-3); align-items: start; } .reglement-liste svg { width: 22px; height: 22px; color: var(--gris); margin-top: .05em; } @media (min-width: 700px) { .entretiens { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .entretiens { --l: 7; } .reglement { --c: 9; --l: 4; } } /* ═══ 8. LA QUESTION ══════════════════════════════════════════════ */ .ts-question { padding-bottom: var(--e-7); } .ts-question .apprendre-txt .t-2 { margin-top: var(--e-1); } /* ═══ 9. MOINS D'ANIMATIONS ═══════════════════════════════════════ Demandé par le système : rien ne flotte, rien ne tourne tout seul, les textes sont là sans monter. boites.js coupe le reste (arrivée, souris, rayon) et retourne les boîtes sans animation. */ @media (prefers-reduced-motion: reduce) { .boites-3d .flotte, .boites-3d .ombre, .boites-3d .reflet, .formule.formule--premium { animation: none; } .retourner svg, .choisir i, .puces button { transition: none; } .ts [data-arrive], .ts [data-arrive-groupe] > *, .ts .lignes .l > span { transition: none; } }