/* ===================================================================== Maya Numérologie — feuille de style unique Deux thèmes. Les jetons décrivent un RÔLE (fond, carte, accent), jamais une teinte : « --or-vif » est l'accent le plus contrasté du moment, donc un or sombre en thème clair et un or pâle en thème sombre. C'est ce qui permet d'inverser la palette sans toucher une seule règle. Le thème CLAIR est le défaut. Le sombre s'active par [data-theme="dark"] sur , posé avant le premier rendu par le script de l'en-tête et mémorisé dans le navigateur. ===================================================================== */ :root{ color-scheme:light; /* ---- surfaces ---- */ --fond:#fbf8f3; --fond-2:#f3eee4; --carte:#ffffff; --carte-2:#fdfaf4; --entete:rgba(251,248,243,.88); --pied-fond:#f3eee4; --saisie:#ffffff; --voile:rgba(45,35,70,.035); --bande:rgba(45,35,70,.032); --rideau:rgba(45,35,70,.55); /* ---- traits ---- */ --bord:rgba(45,35,70,.11); --bord-fort:rgba(143,108,52,.42); --bord-fin:rgba(45,35,70,.07); --survol:rgba(45,35,70,.05); --survol-fin:rgba(45,35,70,.025); --ombre:0 16px 42px -22px rgba(45,35,70,.30); /* ---- halos du fond de page ---- */ --halo-1:rgba(139,99,201,.10); --halo-2:rgba(201,164,94,.18); /* ---- texte ---- */ --texte:#241d33; --doux:#574e6d; --doux-2:#736a89; /* ---- accent doré ---- */ --or:#8f6c34; --or-vif:#5e4419; --or-doux:#c2a068; --btn-or:linear-gradient(160deg,#e6c68a,#c9a45e 55%,#a8834a); --sur-or:#2a1e08; --btn-or-ombre:0 8px 22px -10px rgba(168,131,74,.55); --bulle-moi:linear-gradient(160deg,#e6c68a,#c9a45e); --bulle-moi-txt:#2a1e08; --bulle-lui:#f3eee4; /* ---- états ---- */ --vert:#1c7d59; --ambre:#a4670f; --rouge:#b7402b; /* ---- invariants ---- */ --r:14px; --r-s:9px; --serif:"Cormorant Garamond",Georgia,serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --max:1180px; } [data-theme="dark"]{ color-scheme:dark; --fond:#0c0917; --fond-2:#120d23; --carte:#191231; --carte-2:#1f1740; --entete:rgba(12,9,23,.82); --pied-fond:rgba(8,6,17,.55); --saisie:rgba(8,6,17,.62); --voile:rgba(8,6,17,.45); --bande:rgba(8,6,17,.6); --rideau:rgba(6,4,14,.82); --bord:rgba(217,178,106,.16); --bord-fort:rgba(217,178,106,.34); --bord-fin:rgba(255,255,255,.045); --survol:rgba(255,255,255,.045); --survol-fin:rgba(255,255,255,.022); --ombre:0 18px 50px -18px rgba(0,0,0,.75); --halo-1:rgba(120,80,190,.20); --halo-2:rgba(217,178,106,.09); --texte:#ece7f7; --doux:#a49bc2; --doux-2:#918ab3; --or:#d9b26a; --or-vif:#f2ddb2; --or-doux:#a8834a; --btn-or:linear-gradient(160deg,#f2ddb2,#d9b26a 55%,#a8834a); --sur-or:#1a1206; --btn-or-ombre:0 8px 26px -10px rgba(217,178,106,.75); --bulle-moi:linear-gradient(160deg,#a8834a,#7d6038); --bulle-moi-txt:#fff8ea; --bulle-lui:#1f1740; --vert:#54cfa1; --ambre:#e6a75c; --rouge:#e07a6a; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background: radial-gradient(1100px 620px at 78% -8%, var(--halo-1), transparent 62%), radial-gradient(760px 480px at 6% 4%, var(--halo-2), transparent 58%), var(--fond); background-attachment:fixed; color:var(--texte); font:400 16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:var(--or);text-decoration:none} a:hover{color:var(--or-vif)} h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0 0 .5em;letter-spacing:.2px} h1{font-size:clamp(2.1rem,5vw,3.5rem)} h2{font-size:clamp(1.7rem,3.6vw,2.5rem)} h3{font-size:1.25rem} p{margin:0 0 1em} .conteneur{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px} /* ------------------------------------------------------------ en-tête */ .entete{ position:sticky;top:0;z-index:60; background:var(--entete); backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--bord); } .entete__in{display:flex;align-items:center;gap:22px;height:72px} .logo{display:flex;align-items:center;gap:11px;color:var(--or);flex:0 0 auto} .logo__glyphe{width:34px;height:34px} .logo__txt{font-family:var(--serif);font-size:1.32rem;color:var(--texte);letter-spacing:.4px;white-space:nowrap} .logo__txt em{font-style:normal;color:var(--or);margin-left:.28em} .logo--pied .logo__txt{font-size:1.2rem} .nav{margin-left:auto;display:flex;align-items:center;gap:8px} .nav a{ color:var(--doux);font-size:.93rem;padding:9px 12px;border-radius:var(--r-s); transition:color .15s,background .15s; } .nav a:hover{color:var(--texte);background:var(--survol)} .nav__solde{ color:var(--or)!important;border:1px solid var(--bord-fort); font-variant-numeric:tabular-nums;font-weight:600; } /* bascule de thème */ .bascule{ display:flex;align-items:center;justify-content:center; width:38px;height:38px;flex:0 0 auto;padding:0; background:transparent;border:1px solid var(--bord);border-radius:50%; color:var(--or);cursor:pointer;transition:background .15s,border-color .15s,color .15s; } .bascule:hover{background:var(--survol);border-color:var(--bord-fort)} .bascule svg{width:18px;height:18px} .bascule .lune{display:none} [data-theme="dark"] .bascule .lune{display:block} [data-theme="dark"] .bascule .soleil{display:none} .burger,.burger__case{display:none} /* ------------------------------------------------------------ boutons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:12px 22px;border-radius:999px;border:1px solid transparent; font:600 .93rem/1 var(--sans);cursor:pointer;white-space:nowrap; transition:transform .12s,box-shadow .18s,background .18s,border-color .18s; } .btn:active{transform:translateY(1px)} .btn--or{background:var(--btn-or);color:var(--sur-or);box-shadow:var(--btn-or-ombre)} .btn--or:hover{color:var(--sur-or);filter:brightness(1.04)} .btn--fin{border-color:var(--bord-fort);color:var(--or);background:transparent} .btn--fin:hover{background:var(--survol);color:var(--or-vif)} .btn--plein{background:var(--carte-2);color:var(--texte);border-color:var(--bord)} .btn--plein:hover{background:var(--survol);color:var(--texte);border-color:var(--bord-fort)} .btn--danger{background:transparent;border-color:var(--rouge);color:var(--rouge)} .btn--danger:hover{background:var(--survol);color:var(--rouge)} .btn--large{width:100%;padding:15px 22px;font-size:1rem} .btn[disabled],.btn--off{opacity:.42;pointer-events:none} /* -------------------------------------------------------------- héros */ .heros{padding:74px 0 56px;position:relative;overflow:hidden} .heros__grille{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .heros h1{margin-bottom:.35em} .heros h1 em{font-style:italic;color:var(--or)} .heros__accroche{font-size:1.12rem;color:var(--doux);max-width:46ch;margin-bottom:28px} .heros__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px} .heros__preuves{display:flex;flex-wrap:wrap;gap:22px;color:var(--doux-2);font-size:.87rem} .heros__preuves b{color:var(--or);font-weight:600} .surtitre{ display:inline-flex;align-items:center;gap:9px;margin-bottom:20px; font-size:.74rem;letter-spacing:.19em;text-transform:uppercase;color:var(--or); border:1px solid var(--bord-fort);border-radius:999px;padding:7px 15px; } .surtitre::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--or)} /* --------------------------------------------------------- calculette */ .calculette{ background:linear-gradient(170deg,var(--carte-2),var(--carte)); border:1px solid var(--bord-fort);border-radius:20px;padding:30px; box-shadow:var(--ombre);position:relative; } .calculette::after{ content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none; background:radial-gradient(420px 220px at 82% -12%,var(--halo-2),transparent 68%); } .calculette h2{font-size:1.55rem;margin-bottom:.2em} .calculette__sous{color:var(--doux);font-size:.92rem;margin-bottom:22px} /* --------------------------------------------------------- formulaire */ .champ{margin-bottom:16px} .champ label{display:block;font-size:.82rem;color:var(--doux);margin-bottom:7px;letter-spacing:.02em} .champ input,.champ select,.champ textarea{ width:100%;padding:13px 15px;border-radius:var(--r-s); background:var(--saisie);border:1px solid var(--bord); color:var(--texte);font:400 1rem var(--sans); transition:border-color .16s,box-shadow .16s; } .champ input:focus,.champ select:focus,.champ textarea:focus{ outline:none;border-color:var(--or);box-shadow:0 0 0 3px var(--bord-fort); } .champ input::placeholder{color:var(--doux-2)} .champ input:disabled{background:var(--voile);color:var(--doux-2)} .champ--duo{display:grid;grid-template-columns:1fr 1fr;gap:14px} .champ__aide{font-size:.79rem;color:var(--doux-2);margin-top:6px} .champ--case{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--doux)} .champ--case input{width:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--or)} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--doux) 50%),linear-gradient(135deg,var(--doux) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} /* ----------------------------------------------------------- sections */ .section{padding:64px 0} .section--sombre{background:linear-gradient(180deg,transparent,var(--bande) 22%,var(--bande) 78%,transparent)} .section__tete{max-width:640px;margin:0 auto 42px;text-align:center} .section__tete p{color:var(--doux)} /* ------------------------------------------------------ consultants */ .grille-consultants{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:22px} .consultant{ background:linear-gradient(170deg,var(--carte-2),var(--carte)); border:1px solid var(--bord);border-radius:var(--r);padding:24px; display:flex;flex-direction:column;position:relative; transition:border-color .2s,transform .2s,box-shadow .2s; } .consultant:hover{border-color:var(--bord-fort);transform:translateY(-3px);box-shadow:var(--ombre)} .consultant__tete{display:flex;gap:15px;align-items:center;margin-bottom:15px} .avatar{ width:64px;height:64px;border-radius:50%;flex:0 0 auto; background:linear-gradient(145deg,var(--carte-2),var(--carte)); border:2px solid var(--bord-fort);object-fit:cover; display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-size:1.6rem;color:var(--or); } .avatar--s{width:40px;height:40px;font-size:1.05rem;border-width:1px} .avatar--l{width:104px;height:104px;font-size:2.6rem} .consultant__nom{font-family:var(--serif);font-size:1.4rem;margin:0;line-height:1.1} .consultant__titre{font-size:.82rem;color:var(--or);margin:3px 0 0} .consultant__bio{color:var(--doux);font-size:.9rem;flex:1;margin-bottom:16px} .consultant__pied{display:flex;align-items:center;justify-content:space-between;gap:12px; border-top:1px solid var(--bord);padding-top:15px;margin-top:auto} .tarif{font-family:var(--serif);font-size:1.35rem;color:var(--or-vif)} .tarif small{font-family:var(--sans);font-size:.72rem;color:var(--doux-2);margin-left:2px} .badge{ display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:500; padding:5px 11px;border-radius:999px;border:1px solid var(--bord);color:var(--doux); background:var(--voile); } .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--doux-2)} .badge--dispo{color:var(--vert);border-color:var(--vert)} .badge--dispo::before{background:var(--vert);box-shadow:0 0 0 0 var(--vert);animation:pulse 2s infinite} .badge--occupe{color:var(--ambre);border-color:var(--ambre)} .badge--occupe::before{background:var(--ambre)} .badge--pause{color:var(--doux)} @keyframes pulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} .etoiles{color:var(--or);letter-spacing:2px;font-size:.92rem} .etoiles small{color:var(--doux-2);letter-spacing:0;margin-left:6px;font-size:.78rem} .puces{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0} .puce{font-size:.74rem;color:var(--doux);border:1px solid var(--bord);border-radius:999px;padding:4px 10px} /* -------------------------------------------------------------- cartes */ .carte{ background:linear-gradient(170deg,var(--carte-2),var(--carte)); border:1px solid var(--bord);border-radius:var(--r);padding:26px; } .carte--or{border-color:var(--bord-fort)} .grille-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px} .grille-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} .etape{text-align:center} .etape__n{ width:46px;height:46px;border-radius:50%;margin:0 auto 16px; display:flex;align-items:center;justify-content:center; border:1px solid var(--bord-fort);color:var(--or); font-family:var(--serif);font-size:1.3rem; } .etape h3{font-size:1.1rem} .etape p{color:var(--doux);font-size:.91rem;margin:0} /* --------------------------------------------------------------- packs */ .pack{ background:linear-gradient(170deg,var(--carte-2),var(--carte)); border:1px solid var(--bord);border-radius:var(--r);padding:26px; display:flex;flex-direction:column;position:relative; } .pack--star{border-color:var(--or);box-shadow:var(--ombre)} .pack__ruban{ position:absolute;top:-12px;left:50%;transform:translateX(-50%); background:var(--btn-or);color:var(--sur-or); font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase; padding:5px 14px;border-radius:999px;white-space:nowrap; } .pack__prix{font-family:var(--serif);font-size:2.6rem;color:var(--or-vif);line-height:1;margin:10px 0 4px} .pack__credit{color:var(--vert);font-size:.88rem;margin-bottom:18px} .pack__detail{list-style:none;padding:0;margin:0 0 22px;color:var(--doux);font-size:.89rem} .pack__detail li{padding:7px 0 7px 22px;position:relative;border-bottom:1px solid var(--bord-fin)} .pack__detail li::before{content:"✦";position:absolute;left:0;color:var(--or);font-size:.8rem} /* ------------------------------------------------------- résultats num */ .nombres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:26px 0} .nombre{ text-align:center;padding:22px 14px;border-radius:var(--r); border:1px solid var(--bord);background:var(--voile); } .nombre--vedette{border-color:var(--or);background:linear-gradient(170deg,var(--halo-2),var(--voile))} .nombre__val{font-family:var(--serif);font-size:3.1rem;color:var(--or-vif);line-height:1} .nombre__lib{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--doux-2);margin-top:8px} .nombre__nom{font-size:.86rem;color:var(--or);margin-top:5px} /* ---------------------------------------------------------------- chat */ .chat{display:grid;grid-template-columns:1fr 290px;gap:22px;align-items:start} .chat__boite{ background:var(--carte);border:1px solid var(--bord);border-radius:var(--r); display:flex;flex-direction:column;height:min(70vh,640px);overflow:hidden; } .chat__tete{ display:flex;align-items:center;gap:13px;padding:14px 18px; border-bottom:1px solid var(--bord);background:var(--voile); } .chat__tete h2{margin:0;font-size:1.12rem} .chat__fil{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px} .bulle{max-width:76%;padding:11px 15px;border-radius:15px;font-size:.94rem;line-height:1.55;white-space:pre-wrap;word-wrap:break-word} .bulle--moi{align-self:flex-end;background:var(--bulle-moi);color:var(--bulle-moi-txt);border-bottom-right-radius:4px} .bulle--lui{align-self:flex-start;background:var(--bulle-lui);border:1px solid var(--bord);border-bottom-left-radius:4px} .bulle--sys{align-self:center;background:transparent;border:1px dashed var(--bord);color:var(--doux-2);font-size:.8rem;max-width:90%;text-align:center} .bulle__h{display:block;font-size:.68rem;opacity:.6;margin-top:5px;text-align:right} .chat__saisie{display:flex;gap:10px;padding:14px;border-top:1px solid var(--bord);background:var(--voile)} .chat__saisie textarea{ flex:1;resize:none;min-height:46px;max-height:130px;padding:12px 14px; border-radius:var(--r-s);background:var(--saisie);border:1px solid var(--bord); color:var(--texte);font:400 .95rem var(--sans); } .chat__saisie textarea:focus{outline:none;border-color:var(--or)} .compteur{text-align:center;padding:20px;border-radius:var(--r);border:1px solid var(--bord-fort);background:var(--carte)} .compteur__t{font-family:var(--serif);font-size:2.7rem;color:var(--or-vif);line-height:1;font-variant-numeric:tabular-nums} .compteur__l{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--doux-2);margin-top:6px} .compteur__ligne{display:flex;justify-content:space-between;font-size:.88rem;padding:9px 0;border-top:1px solid var(--bord);color:var(--doux)} .compteur__ligne b{color:var(--texte);font-variant-numeric:tabular-nums} .compteur--alerte{border-color:var(--rouge);animation:clignote 1.6s infinite} @keyframes clignote{50%{border-color:var(--bord)}} .rideau{position:fixed;inset:0;z-index:90;background:var(--rideau);backdrop-filter:blur(5px);align-items:center;justify-content:center;padding:22px} /* -------------------------------------------------------------- tables */ .tableau{width:100%;border-collapse:collapse;font-size:.9rem} .tableau th{ text-align:left;padding:11px 13px;color:var(--doux-2);font-weight:500; font-size:.75rem;letter-spacing:.09em;text-transform:uppercase; border-bottom:1px solid var(--bord); } .tableau td{padding:13px;border-bottom:1px solid var(--bord-fin);color:var(--texte)} .tableau tr:hover td{background:var(--survol-fin)} .tableau .num{text-align:right;font-variant-numeric:tabular-nums} .pos{color:var(--vert)} .neg{color:var(--rouge)} .defilant{overflow-x:auto;-webkit-overflow-scrolling:touch} /* -------------------------------------------------------------- divers */ .flash{ padding:13px 17px;border-radius:var(--r-s);margin:18px 0;font-size:.92rem; border:1px solid var(--bord);background:var(--carte); } .flash--ok{border-color:var(--vert);color:var(--vert)} .flash--err{border-color:var(--rouge);color:var(--rouge)} .flash--info{border-color:var(--bord-fort);color:var(--or)} .vide{text-align:center;padding:56px 20px;color:var(--doux-2)} .vide__g{font-size:2.4rem;color:var(--or);opacity:.55;margin-bottom:12px} .fil{font-size:.82rem;color:var(--doux-2);padding:22px 0 0} .fil a{color:var(--doux)} .boite-etroite{max-width:460px;margin:52px auto} .boite-moyenne{max-width:760px;margin:0 auto} .onglets{display:flex;gap:6px;border-bottom:1px solid var(--bord);margin-bottom:26px;overflow-x:auto} .onglets a{padding:12px 17px;color:var(--doux);font-size:.9rem;border-bottom:2px solid transparent;white-space:nowrap} .onglets a.on{color:var(--or);border-bottom-color:var(--or)} .avertissement{ border-left:2px solid var(--or-doux);padding:4px 0 4px 16px; color:var(--doux-2);font-size:.84rem;margin:22px 0; } .prose{max-width:72ch} .prose h2{margin-top:1.9em} .prose h3{margin-top:1.6em;color:var(--or-vif)} .prose p,.prose li{color:var(--doux)} .prose ul{padding-left:20px} .prose li{margin-bottom:.5em} /* ---------------------------------------------------------------- pied */ .pied{border-top:1px solid var(--bord);background:var(--pied-fond);padding:52px 0 26px;margin-top:70px} .pied__grille{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:38px} .pied h3{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:14px} .pied nav{display:flex;flex-direction:column;gap:9px} .pied nav a{color:var(--doux);font-size:.88rem} .pied nav a:hover{color:var(--or-vif)} .pied__note{color:var(--doux-2);font-size:.82rem;line-height:1.6} .pied__note strong{color:var(--doux)} .pied__bas{ display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; border-top:1px solid var(--bord);margin-top:38px;padding-top:20px; color:var(--doux-2);font-size:.8rem; } /* ----------------------------------------------------------- responsive */ @media(max-width:920px){ .heros__grille{grid-template-columns:1fr;gap:38px} .chat{grid-template-columns:1fr} .pied__grille{grid-template-columns:1fr 1fr;gap:30px} } @media(max-width:760px){ .burger{display:flex;flex-direction:column;gap:5px;margin-left:auto;padding:10px;cursor:pointer} .burger span{width:22px;height:2px;background:var(--or);border-radius:2px;transition:transform .2s,opacity .2s} .burger__case:checked ~ .nav{display:flex} .burger__case:checked + .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger__case:checked + .burger span:nth-child(2){opacity:0} .burger__case:checked + .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav{ display:none;position:absolute;top:72px;left:0;right:0; flex-direction:column;align-items:stretch;gap:2px;padding:14px 18px 20px; background:var(--fond-2);border-bottom:1px solid var(--bord); } .nav a{padding:12px 10px} .nav .btn{margin-top:8px;justify-content:center} .bascule{align-self:flex-start;margin-top:8px} .heros{padding:46px 0 34px} .section{padding:46px 0} .champ--duo{grid-template-columns:1fr} .pied__grille{grid-template-columns:1fr} .calculette{padding:22px} .bulle{max-width:88%} } @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ------------------------------------------------- choix du canal */ .canaux{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch} .canaux--compact{grid-template-columns:1fr;gap:14px} .canal{ background:linear-gradient(170deg,var(--carte-2),var(--carte)); border:1px solid var(--bord);border-radius:var(--r);padding:24px; display:flex;flex-direction:column; } .canal--enligne{border-color:var(--or)} .canal__tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px} .canal__tete h3{margin:0;font-size:1.3rem} .canal__marque{ font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; padding:4px 10px;border-radius:999px;white-space:nowrap; background:var(--btn-or);color:var(--sur-or); } .canal__marque--neutre{background:transparent;border:1px solid var(--bord-fort);color:var(--or)} .canal__prix{font-family:var(--serif);font-size:2.4rem;color:var(--or-vif);line-height:1;margin:8px 0 2px} .canal__prix small{font-family:var(--sans);font-size:.72rem;color:var(--doux-2);margin-left:2px} .canal__num{ font-family:var(--serif);font-size:1.65rem;color:var(--texte);letter-spacing:.06em; margin:10px 0 4px; } .canal__pts{list-style:none;padding:0;margin:16px 0 0;color:var(--doux);font-size:.89rem} .canal__pts li{padding:6px 0 6px 20px;position:relative} .canal__pts li::before{content:"✦";position:absolute;left:0;color:var(--or);font-size:.75rem} .canal__note{color:var(--doux-2);font-size:.79rem;margin:14px 0 18px} .canal .btn{margin-top:auto} @media(max-width:760px){.canaux{grid-template-columns:1fr}}