/* site des logiciels (tt-pulse.fr) : accueil, logiciels, fonctionnalités, téléchargements, tutoriels, à propos */
:root {
  --fond:#050c18; --carte:#0b1629; --carte2:#0d1b33; --bord:#1b2e50; --bord-vif:#2b4f8f;
  --texte:#eef3fb; --doux:#c3cfe2; --gris:#9fb0c8; --clair:#8fb4ff; --bleu:#2f7cf6;
  --pulse:#2f7cf6; --table:#e2393c; --manager:#2fbc2e; --stats:#7f9cc9; --or:#f5b82e;
  --cond:"Barlow Condensed", "Arial Narrow", sans-serif;
}
* { box-sizing:border-box; }
html { color-scheme:dark; scroll-behavior:smooth; }
body { margin:0; color:var(--texte); font:16px/1.55 Barlow, system-ui, sans-serif; background:var(--fond); }
img { display:block; max-width:100%; height:auto; }
a { color:var(--clair); }
b, strong { font-weight:600; }
:focus-visible { outline:3px solid var(--clair); outline-offset:3px; }
svg.i { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.page { max-width:1200px; margin:auto; padding:0 16px; }
.bleu { color:var(--bleu); }
h1 .bleu { white-space:nowrap; }
[hidden] { display:none !important; }
[id] { scroll-margin-top:90px; }

/* en-tête */
.entete { position:sticky; top:0; z-index:5; border-bottom:1px solid var(--bord); background:rgba(5,12,24,.88); backdrop-filter:blur(10px); }
.entete .page { display:flex; align-items:center; gap:16px; min-height:68px; }
.marque { margin-right:auto; }
.marque img { height:44px; width:auto; }
.menu > summary { display:none; }
.menu nav { display:flex; align-items:center; gap:2px; }
.menu nav a { padding:8px 12px; border-radius:6px; color:#dbe4f3; text-decoration:none; font-weight:500; font-size:15px; }
.menu nav a:hover { color:#fff; }
.menu nav a[aria-current] { color:#fff; box-shadow:inset 0 -2px var(--bleu); border-radius:0; }
.menu nav .bouton { margin-left:10px; padding:9px 16px; font-size:15px; }
.menu nav a:not(.bouton) > svg.i { display:none; }  /* icônes du menu : seulement sur téléphone */

/* boutons */
.boutons { display:flex; flex-wrap:wrap; gap:12px; }
.bouton { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 22px; border-radius:6px;
          border:1px solid transparent; text-decoration:none; font:600 16px/1.2 Barlow, system-ui, sans-serif; color:#fff;
          background:linear-gradient(90deg, #1450e0, #2b78f6); box-shadow:0 8px 26px rgba(30,100,240,.28); cursor:pointer; }
.bouton:hover { background:linear-gradient(90deg, #1d5cf0, #4a8ff8); }
.bouton.contour { background:rgba(11,22,41,.6); border-color:var(--bord-vif); box-shadow:none; color:#dbe4f3; }
.bouton.contour:hover { border-color:var(--clair); color:#fff; }
.bouton.petit { padding:8px 14px; font-size:14px; }
.bouton svg.i { width:20px; height:20px; }

/* titres de page : étiquette, titre, chapeau */
.etiquette { display:inline-block; margin-bottom:16px; padding:5px 10px; border:1px solid var(--bord-vif); border-radius:6px;
             background:rgba(47,124,246,.1); color:var(--clair); font:600 12.5px/1 Barlow, sans-serif; text-transform:uppercase; letter-spacing:.06em; }
h1 { margin:0 0 16px; font:600 clamp(36px, 5vw, 58px)/1.08 Barlow, system-ui, sans-serif; letter-spacing:-.015em; }
h2 { margin:0 0 14px; font:600 clamp(26px, 3vw, 34px)/1.15 Barlow, system-ui, sans-serif; letter-spacing:-.01em; }
h3 { margin:0 0 6px; font:600 18px/1.3 Barlow, system-ui, sans-serif; }
.chapo { margin:0 0 28px; max-width:36em; color:var(--doux); font-size:18px; }
.tete { padding:56px 0 8px; background:radial-gradient(900px 420px at 80% -80px, rgba(47,124,246,.26), transparent 70%); }
.bloc { padding:72px 0 0; }
.bloc > .page > .chapo { margin-bottom:32px; }

/* nom de logiciel écrit comme son logo : « TT » blanc, le reste dans sa couleur */
.wm { font:italic 700 30px/1 var(--cond); text-transform:uppercase; letter-spacing:.01em; }
.wm span { color:var(--c, var(--pulse)); }
.c-pulse { --c:var(--pulse); }
.c-table { --c:var(--table); }
.c-manager { --c:var(--manager); }
.c-stats { --c:var(--stats); }

/* pastilles : gratuit, version, bientôt */
.pastille { display:inline-flex; align-items:center; padding:3px 9px; border-radius:5px; font:600 13px/1.2 Barlow, sans-serif; white-space:nowrap; }
.pastille.gratuit { background:rgba(47,188,46,.16); color:#7be37a; border:1px solid rgba(47,188,46,.45); }
.pastille.version { color:var(--doux); border:1px solid var(--bord-vif); }
.pastille.bientot { background:rgba(47,124,246,.16); color:var(--clair); border:1px solid var(--bord-vif); }

/* listes cochées */
.coches { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.coches li { display:flex; gap:10px; align-items:flex-start; color:#dbe4f3; font-size:15px; }
.coches.en-ligne { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:24px; }
.coches li::before { content:"✓"; display:grid; place-items:center; width:18px; height:18px; margin-top:2px; flex:none; border-radius:50%;
                     background:var(--c, var(--bleu)); color:#fff; font-size:11px; font-weight:700; }

/* cartes */
.carte { border:1px solid var(--bord); border-radius:12px; background:var(--carte); }
.encadre { border:1px solid color-mix(in srgb, var(--c, var(--bleu)) 55%, transparent); border-radius:12px;
           background:linear-gradient(160deg, color-mix(in srgb, var(--c, var(--bleu)) 12%, transparent), transparent 55%), var(--carte);
           box-shadow:0 0 40px color-mix(in srgb, var(--c, var(--bleu)) 10%, transparent); }
.capture { border:1px solid #23406f; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.55); }
.telephone { filter:drop-shadow(0 20px 36px rgba(0,0,0,.6)); }
.icone { display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:10px; color:#fff;
         border:1px solid color-mix(in srgb, var(--c, var(--bleu)) 60%, transparent);
         background:color-mix(in srgb, var(--c, var(--bleu)) 18%, var(--carte)); }
.icone svg.i { width:24px; height:24px; }

/* accueil : les quatre logiciels */
.produits { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:44px; }
.produit { display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px 18px; text-align:center; }
.produit > img { width:150px; height:150px; border-radius:22px; }
.produit p { margin:0; color:var(--doux); font-size:15px; flex:1; }
.produit .pastille { position:absolute; top:12px; right:12px; }
.produit { position:relative; }

/* accueil : de SPIDD au public en 3 étapes */
.etapes3 { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:48px; align-items:center; }
.etapes3 ol { position:relative; list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; counter-reset:etape; }
.etapes3 ol::before { content:""; position:absolute; top:21px; left:22px; right:calc(33% - 22px); height:2px;
                      background:linear-gradient(90deg, var(--bleu), rgba(47,124,246,.25)); }
.etapes3 li { position:relative; counter-increment:etape; color:#dbe4f3; font-size:15px; }
.etapes3 li::before { content:counter(etape); display:grid; place-items:center; width:44px; height:44px; margin-bottom:14px; border-radius:50%;
                      background:var(--bleu); color:#fff; font:600 20px Barlow, sans-serif; box-shadow:0 0 0 6px var(--fond), 0 0 24px rgba(47,124,246,.6); }
.etapes3 li b { display:block; color:var(--texte); font-size:16px; }
.ecrans { position:relative; padding:0 9% 34px 0; }
.ecrans .pc { border:1px solid #23406f; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.ecrans .tel { position:absolute; right:0; bottom:0; width:28%; filter:drop-shadow(0 24px 40px rgba(0,0,0,.7)); }

/* accueil : types de compétitions, appel final */
.types { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:8px; }
.types div { display:flex; align-items:center; gap:14px; color:#dbe4f3; }
.appel { display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; margin-top:56px; padding:24px 28px; }
.appel svg.coupe { width:52px; height:52px; color:var(--or); stroke-width:1.6; }
.appel div { margin-right:auto; }
.appel h2 { margin:0 0 2px; font-size:24px; }
.appel p { margin:0; color:var(--gris); font-size:14.5px; }

/* logiciels : une ligne par logiciel, texte et capture */
.ligne { display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:32px; align-items:center; padding:26px; margin-bottom:20px; scroll-margin-top:90px; }
.ligne .haut { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:12px; }
.ligne .haut img { width:64px; height:64px; border-radius:14px; }
.ligne .haut .wm { font-size:36px; margin-right:4px; }
.ligne p { margin:0 0 16px; color:var(--doux); max-width:40em; }
.ligne .coches { margin-bottom:22px; }
.ligne .tuile { display:grid; place-items:center; aspect-ratio:16/10; border:1px dashed var(--bord-vif); border-radius:10px; color:var(--stats); }
.ligne .tuile img { width:96px; opacity:.85; }

/* fonctionnalités */
.filtres { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.filtres button { display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border:1px solid var(--bord-vif); border-radius:8px;
                  background:var(--carte); color:#dbe4f3; font:600 15px Barlow, sans-serif; cursor:pointer; }
.filtres button img { width:24px; height:24px; border-radius:6px; }
.filtres button[aria-pressed="true"] { background:var(--bleu); border-color:var(--bleu); color:#fff; }
.fonctions { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.fonction { display:flex; flex-direction:column; gap:12px; padding:20px; }
.fonction p { margin:0; color:var(--doux); font-size:15px; }
.fonction .qui { margin-top:auto; color:var(--c); font-size:13px; font-weight:600; }
.appareils { display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:32px; align-items:center; margin-top:40px; padding:30px; }
.appareils ul { list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.appareils li { color:var(--doux); font-size:14.5px; }
.appareils li svg.i { width:30px; height:30px; color:var(--clair); margin-bottom:8px; }
.appareils li b { display:block; color:var(--texte); }
.appareils .visuel { display:flex; align-items:flex-end; gap:14px; justify-content:center; }
.appareils .visuel img:first-child { width:72%; }
.appareils .visuel img:last-child { width:26%; }

/* téléchargements */
.dl { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:20px; }
.dl-principal { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; padding:28px; }
.dl-principal > img { width:150px; height:150px; border-radius:22px; }
.dl-infos { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:4px; color:var(--doux); font-size:15px; }
.dl-infos b { color:var(--texte); }
.dl-principal .bouton { width:100%; font-size:18px; padding:15px 22px; }
.dl-principal .sous-bouton { margin:10px 0 0; text-align:center; font-size:14px; }
.dl-inclus { padding:26px; }
.dl-inclus h2 { font-size:22px; }
.infos3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.infos3 a { display:flex; align-items:center; gap:14px; padding:16px 18px; color:inherit; text-decoration:none; }
.infos3 a:hover { border-color:var(--bord-vif); }
.infos3 a span:not(.icone) { display:block; color:var(--clair); font-size:14px; }
.autres { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.autres a { display:flex; align-items:center; gap:14px; padding:16px; color:inherit; text-decoration:none; }
.autres a:hover { border-color:var(--bord-vif); }
.autres img { width:52px; height:52px; border-radius:12px; }
.autres span:not(.icone) { display:block; color:var(--gris); font-size:14px; }
.note { display:flex; gap:14px; align-items:center; margin-top:16px; padding:12px 18px; border-radius:8px;
        border:1px solid var(--bord-vif); background:rgba(47,124,246,.06); color:#c9dbff; font-size:15px; }
.note svg.i { color:var(--clair); width:26px; height:26px; }
.pas { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; counter-reset:pas; }
.pas li { padding:18px; counter-increment:pas; color:var(--doux); font-size:15px; }
.pas li::before { content:counter(pas); display:grid; place-items:center; width:34px; height:34px; margin-bottom:12px; border-radius:8px;
                  background:var(--bleu); color:#fff; font:600 18px Barlow, sans-serif; }
.pas b { display:block; color:var(--texte); }

/* questions dépliables (antivirus, tutoriel, questions fréquentes) */
.depli { margin-bottom:10px; }
.depli > summary { display:flex; align-items:center; gap:14px; padding:15px 18px; cursor:pointer; list-style:none; }
.depli > summary::-webkit-details-marker { display:none; }
.depli > summary::after { content:"+"; margin-left:auto; padding-left:12px; color:var(--clair); font-size:24px; line-height:1; }
.depli[open] > summary::after { content:"−"; }
.depli[open] { border-color:var(--bord-vif); }
.depli > summary b { display:block; font-size:16.5px; }
.depli > summary span:not(.num) { color:var(--gris); font-size:14.5px; }
.depli .contenu { padding:0 18px 18px 18px; color:#dbe4f3; }
.depli .contenu > :first-child { margin-top:0; }
.depli .contenu ol, .depli .contenu ul { padding-left:22px; }
.depli .contenu li { margin-bottom:6px; }
.depli .contenu p { margin:0 0 10px; }
.depli .contenu .capture { margin:14px 0 4px; }
.depli .contenu .telephone { width:240px; margin:14px 0 4px; }
.num { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; border:1px solid var(--bord-vif);
       background:var(--carte2); color:var(--clair); font:600 16px Barlow, sans-serif; }
.attention { margin:10px 0; padding:10px 14px; border-left:3px solid var(--or); background:rgba(245,184,46,.07); color:#f0dfb4; font-size:15px; }
code, kbd { padding:1px 6px; border-radius:5px; background:#0f1f3a; color:#dbe4f3; font:14px/1.4 Consolas, monospace; word-break:break-word; }

/* tutoriels : sommaire à gauche */
.tuto { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:32px; align-items:start; }
.sommaire { position:sticky; top:90px; display:grid; gap:4px; padding:10px; }
.sommaire a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; color:#dbe4f3; text-decoration:none; font-weight:500; }
.sommaire a:hover { background:rgba(47,124,246,.12); color:#fff; }
.sommaire svg.i { width:20px; height:20px; color:var(--clair); }
.tuto section { scroll-margin-top:90px; margin-bottom:44px; }
.tuto section > h2 { display:flex; align-items:center; gap:12px; }
.tuto section > p { color:var(--doux); max-width:44em; }

/* à propos */
.apropos { display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:40px; align-items:start; }
.apropos .texte p { color:var(--doux); font-size:17px; max-width:36em; }
.valeurs { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.valeurs > div { display:flex; gap:14px; padding:18px; }
.valeurs p { margin:0; color:var(--doux); font-size:14.5px; }
.contact { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:20px; margin-top:20px; }
.contact > div { padding:24px; }
.contact p { color:var(--doux); }
.liens { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.liens a { color:#dbe4f3; text-decoration:none; }
.liens a:hover { color:var(--clair); }

/* pied de page */
.pied { margin-top:80px; border-top:1px solid var(--bord); }
.pied .page { display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding:22px 16px 30px; font-size:14px; }
.pied .marque img { height:34px; }
.pied a:not(.marque) { color:#dbe4f3; text-decoration:none; }
.pied a:not(.marque):hover { color:var(--clair); }
.pied .independant { flex-basis:100%; margin:4px 0 0; color:var(--gris); font-size:13px; }

/* accueil : une seule entrée au chargement, titre ligne par ligne, tracé du pouls (le battement du logo), puis les logiciels */
@keyframes arrivee { from { opacity:0; transform:translateY(16px); } }
@keyframes trace { to { stroke-dashoffset:0; } }
.arrive { animation:arrivee .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d, 0s); }
h1 .arrive { display:inline-block; }
.pouls-titre { display:block; width:min(360px, 78%); height:36px; margin:-4px 0 18px; overflow:visible; }
.pouls-titre path { fill:none; stroke:var(--bleu); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
                    stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 6px rgba(47,124,246,.8));
                    animation:trace 1.1s .6s cubic-bezier(.5,0,.3,1) forwards; }

/* intro de l'accueil (une fois par visite, voir intro.js ; un clic la passe) : le logo apparaît et bat deux fois pendant que
   le pouls se trace, puis l'écran s'efface et l'entrée de l'accueil enchaîne */
@keyframes intro-logo { from { opacity:0; transform:scale(.82); filter:blur(8px); } }
@keyframes battement { 0%, 100% { transform:scale(1); } 15% { transform:scale(1.08); } 30% { transform:scale(1); } 45% { transform:scale(1.05); } }
@keyframes intro-sortie { to { opacity:0; visibility:hidden; } }
.intro { position:fixed; inset:0; z-index:50; display:grid; place-items:center; cursor:pointer;
         background:radial-gradient(600px 400px at 50% 45%, rgba(47,124,246,.25), transparent 70%), var(--fond);
         animation:intro-sortie .45s 1.25s ease-in forwards; }
.intro > div { display:grid; justify-items:center; gap:6px; }
.intro img { width:min(300px, 64vw); animation:intro-logo .6s cubic-bezier(.2,.7,.2,1) both, battement .7s .65s ease-in-out; }
.intro svg { width:min(320px, 70vw); height:36px; overflow:visible; }
.intro path { fill:none; stroke:var(--bleu); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1;
              filter:drop-shadow(0 0 6px rgba(47,124,246,.9)); animation:trace .8s .3s cubic-bezier(.5,0,.3,1) forwards; }
.intro-vue .intro { display:none; }
/* pendant l'intro, l'entrée de l'accueil attend qu'elle s'efface */
html:not(.intro-vue) .tete .arrive { animation-delay:calc(var(--d, 0s) + 1.35s); }
html:not(.intro-vue) .pouls-titre path { animation-delay:1.95s; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .arrive { animation:none; }
  .pouls-titre path { animation:none; stroke-dashoffset:0; }
  .intro { display:none; }
  .menu nav a { animation:none; }
}

@media (max-width:1020px) {
  /* menu : panneau plein écran sous l'en-tête, grandes cartes faciles à toucher, ☰ devient ✕ ; la page derrière ne défile plus */
  .menu > summary { display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--bord); border-radius:10px;
                    background:var(--carte); cursor:pointer; list-style:none; }
  .menu > summary::-webkit-details-marker { display:none; }
  .menu[open] > summary { border-color:var(--bord-vif); background:rgba(47,124,246,.16); }
  .menu[open] > summary .ouvrir, .menu:not([open]) > summary .fermer { display:none; }
  .menu nav { position:fixed; inset:69px 0 0; z-index:4; flex-direction:column; align-items:stretch; gap:10px; overflow-y:auto;
              padding:20px 16px calc(24px + env(safe-area-inset-bottom)); border-top:1px solid var(--bord);
              background:radial-gradient(520px 320px at 100% 0, rgba(47,124,246,.2), transparent 70%), rgba(5,12,24,.97);
              backdrop-filter:blur(14px); }
  .menu nav a { display:flex; align-items:center; gap:14px; padding:15px 16px; border:1px solid var(--bord); border-radius:12px;
                background:var(--carte); color:var(--texte); font-size:18px; font-weight:600;
                animation:arrivee .45s cubic-bezier(.2,.7,.2,1) both; }
  .menu nav a:not(.bouton) > svg.i { display:block; width:22px; height:22px; color:var(--clair); }
  .menu nav a:not(.bouton)::after { content:"›"; margin-left:auto; color:var(--gris); font-size:24px; line-height:1; }
  .menu nav a[aria-current] { box-shadow:none; border-color:var(--bleu); background:linear-gradient(90deg, rgba(47,124,246,.28), rgba(47,124,246,.06)); }
  .menu nav a[aria-current] > svg.i, .menu nav a[aria-current]::after { color:#fff; }
  .menu nav a:nth-child(2) { animation-delay:.04s; } .menu nav a:nth-child(3) { animation-delay:.08s; }
  .menu nav a:nth-child(4) { animation-delay:.12s; } .menu nav a:nth-child(5) { animation-delay:.16s; }
  .menu nav a:nth-child(6) { animation-delay:.2s; } .menu nav a:nth-child(7) { animation-delay:.26s; }
  .menu nav .bouton { justify-content:center; margin:8px 0 0; padding:16px; border-color:transparent; font-size:18px;
                      background:linear-gradient(90deg, #1450e0, #2b78f6); }
  body:has(.menu[open]) { overflow:hidden; }
  /* le flou de l'en-tête ferait du panneau « fixe » un enfant coupé à la hauteur de l'en-tête : retiré menu ouvert */
  .entete:has(.menu[open]) { backdrop-filter:none; background:var(--fond); }
  .produits { grid-template-columns:1fr 1fr; }
  .etapes3, .ligne, .appareils, .dl, .apropos { grid-template-columns:1fr; }
  .fonctions { grid-template-columns:1fr 1fr; }
  .types, .pas { grid-template-columns:1fr 1fr; }
  .tuto { grid-template-columns:1fr; }
  .sommaire { position:static; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width:640px) {
  .tete { padding-top:32px; }
  .chapo { font-size:16.5px; }
  .bloc { padding-top:52px; }
  .boutons .bouton { flex:1 1 100%; }
  .produits, .fonctions, .types, .pas, .infos3, .autres, .valeurs, .contact { grid-template-columns:1fr; }
  .produit > img { width:120px; height:120px; }
  .etapes3 ol { grid-template-columns:1fr; gap:14px; }
  .etapes3 ol::before { top:22px; bottom:22px; left:21px; right:auto; width:2px; height:auto; background:linear-gradient(var(--bleu), rgba(47,124,246,.25)); }
  .etapes3 li { display:grid; grid-template-columns:44px 1fr; gap:0 16px; align-items:center; }
  .etapes3 li::before { margin:0; grid-row:span 2; }
  .ligne { padding:18px; }
  .ligne .haut .wm { font-size:30px; }
  .appareils { padding:20px; }
  .appareils ul { grid-template-columns:1fr; }
  .dl-principal { grid-template-columns:1fr; justify-items:center; padding:20px; }
  .dl-principal > img { width:110px; height:110px; }
  .appel { padding:20px; }
  .appel .bouton { flex:1 1 100%; }
  .depli .contenu .telephone { width:200px; }
  .pied .page { justify-content:center; text-align:center; }
}