/* Skapelys v2 : styles communs du nouveau design, générés par outils/pousser-refonte.py depuis refonte/zone-*.html.
   Ne pas modifier ici : modifier les sources, relancer le script, puis outils/envoyer-socle.js. */
/* Geist (SIL OFL 1.1, Fontsource 5.2.9, latin, variable 100-900) : sur l'accueil en ligne, elle est déclarée dans le <head>
   par functions.php (skapelys_geist_accueil) pour être prête avant le premier affichage. Le brouillon privé n'est pas
   l'accueil : outils/pousser-refonte.py y met refonte/police-geist.css à la place du repère ci-dessous. */


/* ============================================================
   Skapelys — refonte façon Apple : partie haute (préfixe skx-)
   v2 du 2026-09-19 : une animation au défilement par section,
   pilotée par un seul moteur (voir le script en bas) qui pose
   --p (0 -> 1) sur chaque élément [data-sx].
   Sans JS ou en mouvement réduit : --p vaut 1, état final.
   Écrans verts laissés tels quels à la demande d'Adel : les
   fichiers se remplacent sans toucher à ce code.
   ============================================================ */

/* en-tête du thème : transparent, la pastille flottante porte le décor */
#masthead.site-header{ background:transparent !important; border-bottom:0; }
/* toute la page est sur fond blanc */
html body .wp-site-blocks,html body .content-container,html body .entry-content,html body .entry-content-wrap,html body.page{ background:#fff !important; }
#masthead .site-header-row-container-inner{ background:transparent !important; }
#masthead .header-button{ background:linear-gradient(140deg,#3a1070 0%,#7a24c4 52%,#c0269f 100%) !important; border-color:#7b26c9 !important; color:#fff !important; border-radius:999px !important; font-weight:600 !important; }
#masthead .header-button:hover{ background:linear-gradient(140deg,#4b1690 0%,#8c2bd9 52%,#d13db4 100%) !important; border-color:#8c31e0 !important; }
#masthead .main-navigation .primary-menu-container > ul > li > a{ color:#d2d2d7 !important; }
#masthead .main-navigation .primary-menu-container > ul > li > a:hover{ color:#fff !important; }

.skx{
  --bg:#fff; --fg:#0a2540; --txt:#3c4257; --muted:#6b7a90; --tile:#fff; --line:rgba(10,37,64,.12);
  --accent:#7b26c9; --accent-hi:#8c31e0; --accent-txt:#7b26c9; --link:#0a2540;
  /* le dégradé du bloc bleu, repris sur tous les boutons */
  --degrade:linear-gradient(140deg,#3a1070 0%,#7a24c4 52%,#c0269f 100%);
  /* une couleur par grande section : c'est ce qui donne le rythme */
  --bloc-violet:linear-gradient(168deg,#140429 0%,#3b0f73 44%,#8f2399 100%);
  --bloc-bleu:linear-gradient(168deg,#04152b 0%,#0b3b78 44%,#1a8fc9 100%);
  --bloc-teal:linear-gradient(168deg,#04201c 0%,#0a4f48 44%,#17a98f 100%);
  --bloc-orange:linear-gradient(168deg,#2a1205 0%,#7a3a10 44%,#e07a2f 100%);
  --bloc-rose:linear-gradient(168deg,#28061f 0%,#7a1152 44%,#e0558f 100%);
  --degrade-survol:linear-gradient(140deg,#4b1690 0%,#8c2bd9 52%,#d13db4 100%);
  --wrap:1180px; --gut:clamp(20px,4vw,28px);
  /* marge extérieure des blocs pleine largeur, et décalage qui aligne leur contenu
     exactement sur le bord gauche de .skx-wrap (au pixel près) */
  --marge-bloc:clamp(10px,1.6vw,24px);
  --align-page:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  --align:calc(var(--align-page) - var(--marge-bloc));
  /* même respiration sous tous les titres de section */
  --gap-titre:clamp(44px,5.5vw,84px);
  /* respiration sous un titre et son texte d'accroche : une seule valeur pour tout le site */
  --gap-sous-titre:clamp(26px,2.6vw,40px);
  --gap-sous-h3:clamp(13px,1.1vw,17px);
  /* quand le gros titre n'a pas de sous-titre, il lui faut nettement plus d'air en dessous :
     un H2 de 4,5rem pèse beaucoup plus lourd à l'oeil qu'un paragraphe. */
  --gap-titre-seul:clamp(64px,8vw,112px);  /* sur téléphone, voir la règle en bas */
  --ease:cubic-bezier(.16,1,.3,1);
  background:var(--bg); color:var(--fg);
  font-family:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:17px; line-height:1.47; letter-spacing:-.011em;
  /* clip et non hidden : overflow:hidden désactiverait position:sticky */
  overflow-x:clip;
}
.skx *,.skx *::before,.skx *::after{ box-sizing:border-box; }
.skx ::selection{ background:rgba(123,38,201,.5); color:#fff; }
.skx{ caret-color:var(--accent); }
.skx img{ max-width:100%; height:auto; display:block; }
.skx a{ color:var(--link); text-decoration:none; }
/* le thème enfant colore tous les liens en bleu (body a:not(...)) : on reprend la main, sauf sur les boutons */
html body .skx a:not(.skx-btn):not([class*="wpforms"]){ color:var(--link); }
html body .skx .skx-presentation .skx-texte a{ color:#635bff; }
.skx a:hover{ text-decoration:underline; text-underline-offset:.2em; }
.skx a:focus-visible,.skx button:focus-visible{ outline:2px solid var(--link); outline-offset:4px; border-radius:6px; }
.skx :where(p){ margin:0; }
.skx h1,.skx h2,.skx h3{ margin:0; color:var(--fg); font-weight:600; text-wrap:balance; }
.skx :is(h1,h2,h3,h4,p,a,button,li,span,b,small,figcaption,nav){ font-family:inherit; }

/* une seule règle d'alignement : tous les contenus partent de la même verticale,
   qu'ils soient dans un bloc pleine largeur ou directement sur la page. */
.skx-wrap{ max-width:none; margin-inline:0; padding-inline:var(--align-page); }
.skx-bloc > .skx-wrap,.skx-bloc .skp-proc-piste{ padding-inline:var(--align); }
.skx-sec{ padding-block:clamp(64px,8vw,116px); position:relative; }
.skx-h1{ font-size:clamp(2.6rem,1rem + 6.2vw,5.75rem); line-height:1.04; letter-spacing:-.03em; }
.skx-h2{ font-size:clamp(2.2rem,.9rem + 4.4vw,4.5rem); line-height:1.06; letter-spacing:-.028em; }
/* sur-titre de section (« — NOS TARIFS ») : le même partout, aligné comme le titre qu'il annonce */
.skx .skx-sur{ display:flex; align-items:center; gap:12px; margin:0 0 20px; font-size:12px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:#3c4257; }
.skx .skx-sur::before{ content:""; flex:0 0 auto; width:34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#0EA5E9,#635BFF 55%,#C0269F); }
/* la fin du titre en dégradé, comme « nos clients. » ou « ressemble. » */
.skx .skx-h2 em{ font-style:normal; background:linear-gradient(104deg,#0EA5E9 0%,#635BFF 48%,#C0269F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.skx-h3{ font-size:clamp(1.4rem,1rem + 1.1vw,1.85rem); line-height:1.12; letter-spacing:-.02em; }
.skx-lead{ font-size:clamp(1.1rem,1rem + .45vw,1.35rem); line-height:1.42; color:var(--txt); max-width:34ch; }
/* une accroche posée juste sous un titre respire toujours pareil, partout */
.skx :is(h1,h2) + :is(p,.skx-lead,.skx-say){ margin-top:var(--gap-sous-titre); }
.skx :is(h3,h4) + p{ margin-top:var(--gap-sous-h3); }
.skx-lead b{ color:var(--fg); font-weight:600; }

.skx-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 26px; }
.skx-btn{
  display:inline-flex; align-items:center; min-height:44px; padding:11px 22px; border-radius:999px;
  background:var(--degrade); color:#fff !important; font-size:17px; font-weight:600; letter-spacing:-.01em;
  box-shadow:0 10px 26px rgba(104,25,170,.35);
  transition:background .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.skx-btn:hover{ background:var(--degrade-survol); box-shadow:0 14px 32px rgba(104,25,170,.45); text-decoration:none !important; }
.skx-btn:active{ transform:scale(.97); }
/* second bouton du hero : même gabarit que le principal, en contour clair,
   pour qu'il ne lui vole pas la vedette. Il remplace l'ancien lien « Nous
   contacter », qui faisait doublon avec le bouton « Contactez-nous » du menu. */
.skx-btn--tel{ gap:9px; background:#fff; color:#0a2540 !important;
  border:1px solid rgba(10,37,64,.16); box-shadow:0 6px 18px rgba(10,37,64,.07); }
.skx-btn--tel svg{ width:18px; height:18px; flex:0 0 18px; color:#5B4BE0; }
.skx-btn--tel:hover{ background:#F6F8FC; border-color:rgba(10,37,64,.28);
  box-shadow:0 10px 24px rgba(10,37,64,.11); }
html body .skx a.skx-btn--tel{ color:#0a2540 !important; }
/* Le bouton « Contactez-nous » de l'en-tête est fixe et toujours visible sur
   ordinateur, donc le hero n'a pas besoin d'un second chemin vers le
   formulaire. Sous 1024 px ce bouton est masqué par le thème (menu burger) :
   on remet là un lien texte, sinon le premier accès au formulaire se trouve
   7 000 px plus bas. */
.skx-hero .skx-more--ecrire{ display:none; }   /* .skx-more{display:inline-flex} est declare plus bas : il faut un cran de specificite en plus */
@media (max-width:1024px){ .skx-hero .skx-more--ecrire{ display:inline-flex; } }
.skx-more{ display:inline-flex; align-items:center; gap:4px; font-size:17px; }
.skx-more svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.skx-more:hover svg{ transform:translateX(3px); }

/* ---------- sections posées en blocs sur un fond différent : on voit l'arrivée ---------- */
.skx-bloc{ position:relative; margin-inline:var(--marge-bloc); border-radius:clamp(26px,3vw,44px); overflow:hidden;
  background:var(--bloc-violet); }
.skx-bloc::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(70% 55% at 80% 0, rgba(226,96,210,.42), transparent 65%); }
.skx-bloc > *{ position:relative; z-index:1; }
.skx-bloc .skx-lead,.skx-bloc p{ color:rgba(255,255,255,.88); }

/* ---------- les sections arrivent par le bas, d'un seul bloc ---------- */
.skx-js .skx-sec{ opacity:0; transform:translateY(46px); }
/* une section qui contient des blocs collants ne doit pas porter de transformation */
.skx-js .skx-services{ opacity:1; transform:none; }
.skx-sec{ transition:opacity .85s var(--ease), transform .95s var(--ease); }
.skx-js .skx-sec.is-vue{ opacity:1; transform:none; }

/* ---------- moteur : --p posé par le script, 1 par défaut = état final ---------- */
[data-sx]{ --p:1; }

/* ============ 1. HERO : la lumière, le titre, les boutons ============ */
.skx-hero{ position:relative; min-height:100svh; display:grid; align-content:center; overflow:hidden;
  padding:clamp(130px,18vh,190px) 0 clamp(90px,13vh,150px); }

/* ---------- hero : texte à gauche, téléphone à droite ---------- */
.skx-hero-copy{ position:relative; z-index:2; }
.skx-hero .skx-wrap{ display:block; }
.skx-hero-texte{ max-width:min(58ch,86%); }
.skx-hero-texte{ text-align:center; max-width:none; margin-inline:auto; }
.skx-hero .skx-lead{ margin:clamp(30px,3.3vw,50px) auto 0; max-width:42ch; }
/* titre principal de la page, habillé comme le texte d'accroche (la règle .skx h1 le mettrait en gras foncé) */
.skx .skx-hero h1.skx-lead{ font-weight:400; color:var(--txt); letter-spacing:inherit; }
.skx .skx-hero h1.skx-lead b{ font-weight:600; color:var(--fg); }
.skx-hero h1.skx-lead.skx-in{ transition-delay:.7s; }
.skx-hero .skx-actions{ justify-content:center; }
.skx-hero-tel{ position:relative; justify-self:center; width:min(268px,88%); z-index:1; }
.skx-plat-tel{ width:min(268px,70%); }
.skx-hero-tel .skx-tel-cadre{ filter:drop-shadow(0 46px 80px rgba(0,0,0,.72)); }
.skx-hero-tel .skx-tel-cadre{ position:relative; z-index:2; width:100%; display:block; }
.skx-hero-tel .skx-ecran-tel{ position:absolute; left:5.92%; top:2.53%; width:88%; height:94.94%;
  overflow:hidden; border-radius:7%/3.3%; background:#07040f; display:grid; place-items:center; }
.skx-tel-fond{ position:absolute; inset:0; width:100%; height:100%; opacity:1; }

/* la lumière descend du haut de l'écran jusqu'en bas, puis repart du haut. */

/* le téléphone descend du haut */
/* le téléphone est légèrement tourné et incliné, et descend du haut à l'arrivée */
.skx-hero-tel{ --pose:none;
  transform-origin:50% 60%;
  transition:opacity 1.1s var(--ease), transform 1.2s cubic-bezier(.22,1.1,.36,1); transition-delay:.9s; }
.skx-js .skx-hero-tel{ opacity:0; transform:var(--pose) translateY(-70px) scale(.95); }
.skx-js .skx-hero-tel.is-la{ opacity:1; transform:var(--pose); }
/* Les deux téléphones arrivent par la droite, sont freinés en arrivant,
   puis basculent de moins en moins fort et de plus en plus vite — comme un
   objet posé un peu sèchement qui finit par se stabiliser.
   Les paliers se resserrent dans le temps : c'est ce qui donne la sensation
   d'accélération finale. */
@keyframes skx-tel-droite-a{
  0%    { opacity:0; transform:translate3d(260px,-34px,0) rotate(24deg); }
  14%   { opacity:1; }
  38%   { transform:translate3d(-18px,4px,0) rotate(-12deg); }
  51%   { transform:translate3d(8px,0,0) rotate(8.6deg); }
  61.5% { transform:rotate(-6.2deg); }
  70%   { transform:rotate(4.4deg); }
  77%   { transform:rotate(-3.1deg); }
  82.5% { transform:rotate(2.2deg); }
  87%   { transform:rotate(-1.5deg); }
  90.5% { transform:rotate(1.05deg); }
  93.4% { transform:rotate(-.7deg); }
  95.7% { transform:rotate(.45deg); }
  97.4% { transform:rotate(-.28deg); }
  98.7% { transform:rotate(.16deg); }
  99.6% { transform:rotate(-.08deg); }
  100%  { opacity:1; transform:none; }
}
/* Le second téléphone ne vient ni de la droite (c'est l'effet du premier),
   ni du plat de la table : on le TOURNE vers vous. Il arrive de profil, un peu
   en retrait, et pivote jusqu'à vous présenter son écran — le geste de la
   section, « Livré. Et il vous appartient. » Un seul dépassement d'une dizaine
   de degrés, puis il se pose. Les 51 positions sont calculées sur une courbe
   amortie et l'interpolation est linéaire : c'est la courbe qui porte le
   mouvement, pas une fonction CSS appliquée à chaque palier. */
@keyframes skx-tel-tourne-b{
    0.0% { opacity:0; transform:perspective(1200px) translate3d(-34.0px,0,-230.0px) rotateY(-74.00deg); }
    2.0% { opacity:1; transform:perspective(1200px) translate3d(-33.6px,0,-227.1px) rotateY(-66.22deg); }
    4.0% { transform:perspective(1200px) translate3d(-32.3px,0,-218.8px) rotateY(-57.78deg); }
    6.0% { transform:perspective(1200px) translate3d(-30.5px,0,-206.1px) rotateY(-49.04deg); }
    8.0% { transform:perspective(1200px) translate3d(-28.0px,0,-189.7px) rotateY(-40.35deg); }
   10.0% { transform:perspective(1200px) translate3d(-25.2px,0,-170.4px) rotateY(-31.95deg); }
   12.0% { transform:perspective(1200px) translate3d(-22.0px,0,-149.0px) rotateY(-24.07deg); }
   14.0% { transform:perspective(1200px) translate3d(-18.7px,0,-126.5px) rotateY(-16.84deg); }
   16.0% { transform:perspective(1200px) translate3d(-15.3px,0,-103.5px) rotateY(-10.39deg); }
   18.0% { transform:perspective(1200px) translate3d(-12.0px,0,-81.0px) rotateY(-4.76deg); }
   20.0% { transform:perspective(1200px) translate3d(-8.8px,0,-59.6px) rotateY(-0.00deg); }
   22.0% { transform:perspective(1200px) translate3d(-6.0px,0,-40.3px) rotateY(3.91deg); }
   24.0% { transform:perspective(1200px) translate3d(-3.5px,0,-23.9px) rotateY(7.00deg); }
   26.0% { transform:perspective(1200px) translate3d(-1.7px,0,-11.2px) rotateY(9.32deg); }
   28.0% { transform:perspective(1200px) translate3d(-0.4px,0,-2.9px) rotateY(10.93deg); }
   30.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(11.92deg); }
   32.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(12.35deg); }
   34.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(12.33deg); }
   36.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(11.92deg); }
   38.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(11.22deg); }
   40.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(10.29deg); }
   42.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(9.21deg); }
   44.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(8.03deg); }
   46.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(6.82deg); }
   48.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(5.61deg); }
   50.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(4.44deg); }
   52.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(3.35deg); }
   54.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(2.34deg); }
   56.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(1.44deg); }
   58.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(0.66deg); }
   60.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(0.00deg); }
   62.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-0.54deg); }
   64.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-0.97deg); }
   66.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-1.30deg); }
   68.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-1.52deg); }
   70.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-1.66deg); }
   72.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-1.72deg); }
   74.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-1.71deg); }
   76.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-1.66deg); }
   78.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-1.56deg); }
   80.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-1.43deg); }
   82.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-1.28deg); }
   84.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-1.12deg); }
   86.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-0.95deg); }
   88.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-0.78deg); }
   90.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-0.62deg); }
   92.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-0.47deg); }
   94.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-0.33deg); }
   96.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-0.20deg); }
   98.0% { transform:perspective(1200px) translate3d(0.0px,0,0.0px) rotateY(-0.09deg); }
  100% { opacity:1; transform:none; }
}
.skx-js .skx-presentation .skx-hero-tel{ transform-origin:50% 88%; }
/* il pivote sur un axe un peu à gauche du centre, comme une porte qu'on ouvre */
.skx-js :is(.skx-plat-tel,.skx-real-tel){ transform-origin:36% 50%; }
.skx-js .skx-presentation .skx-hero-tel.is-la{
  animation:skx-tel-droite-a 3.4s cubic-bezier(.16,.72,.3,1) .18s both;
  transition:none;
}
.skx-js :is(.skx-plat-tel,.skx-real-tel).is-la{
  animation:skx-tel-tourne-b 2.8s linear .14s both;
  transition:none;
}
@media (prefers-reduced-motion:reduce){
  .skx-js .skx-presentation .skx-hero-tel,
  .skx-js .skx-plat-tel,.skx-js .skx-real-tel{ animation:none; opacity:1; transform:none; }
}
/* ---------- téléphone : tout est centré et calé sur la largeur d'écran ---------- */
@media (max-width:767px){
  /* le titre du hero débordait : on le ramène à la largeur réelle */
  .skx-hero .skx-h1{ font-size:clamp(2rem,1rem + 7.4vw,2.9rem); line-height:1.08; }
  .skx-hero .skx-h1 br{ display:none; }
  .skx-hero{ min-height:auto; padding-block:clamp(96px,26vw,140px) clamp(56px,14vw,88px); }
  .skx-preuve{ justify-content:center; margin-inline:auto; }
  .skx-hero .skx-lead{ margin-top:clamp(20px,5vw,28px); }
  .skx-hero .skx-actions{ margin-top:clamp(24px,6vw,34px); }
  /* tous les titres de section centrés */
  .skx :is(.skx-h2,.skx-h1,.skx-lead,.skx-say){ text-align:center; }
  .skx .skx-sur{ justify-content:center; }
  .skx .skx-h2{ margin-inline:auto; }
  .skx .skx-lead{ margin-inline:auto; }
  .skx-presentation .skx-pres-txt{ text-align:center; }
  .skx-presentation .skx-texte{ text-align:center; }
}
@media (max-width:1024px){
  .skx-hero .skx-wrap{ grid-template-columns:1fr; gap:clamp(34px,6vw,56px); }
  .skx-hero-texte{ text-align:center; }
  .skx-hero .skx-lead{ margin-inline:auto; }
  .skx-hero .skx-actions{ justify-content:center; }
  .skx-hero-tel{ width:min(250px,64%); }
}

/* fond du hero : la vidéo occupe tout l'écran, assombrie pour que le texte reste lisible */
.skx-hero-fond{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.skx-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(70% 60% at 72% 46%, rgba(99,91,255,.16) 0%, transparent 62%),
             linear-gradient(to bottom, transparent 0%, transparent 72%, rgba(0,0,0,.6) 100%); }
.skx-hero .skx-h1,.skx-hero .skx-lead{ text-shadow:0 2px 28px rgba(0,0,0,.55); }
.skx-hero-copy{ position:relative; z-index:2; }
.skx-hero .skx-h1,.skx-hero .skx-lead{ text-shadow:0 2px 30px rgba(0,0,0,.7); }

.skx-hero .skx-actions{ margin-top:34px; }
/* bandeau de preuve sociale, au-dessus du titre du hero */
.skx-preuve{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:9px 13px;
  margin:0 0 clamp(20px,2.2vw,30px); padding:9px 17px; border-radius:999px;
  background:rgba(255,255,255,.84); border:1px solid rgba(10,37,64,.13);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:clamp(.82rem,.79rem + .14vw,.93rem); line-height:1.3; color:var(--txt); text-shadow:none; }
.skx-preuve b{ color:var(--fg); font-weight:700; font-variant-numeric:tabular-nums; }
.skx-preuve-etoiles{ display:inline-flex; gap:2px; }
.skx-preuve-etoiles svg{ width:14px; height:14px; fill:#E0940A; }
.skx-preuve-sep{ width:1px; height:14px; background:rgba(10,37,64,.18); }
@media (max-width:560px){ .skx-preuve-sep{ display:none; } }
/* entrée au chargement */
.skx-js .skx-hero .skx-in{ opacity:0; transform:translateY(22px); filter:blur(6px); }
.skx-hero .skx-in{ transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.skx-hero .skx-in:nth-of-type(1){ transition-delay:.55s; }
.skx-hero .skx-in:nth-of-type(2){ transition-delay:.7s; }
.skx-hero .skx-in:nth-of-type(3){ transition-delay:.82s; }
.skx-js .skx-hero.is-on .skx-in{ opacity:1; transform:none; filter:none; }

/* ============ le bandeau de navigation : une pastille flottante ============
   Appliqué uniquement sur cette page (le style vit dans le contenu de la page),
   donc le reste du site garde son en-tête actuel tant qu'on n'a pas basculé. */
body .site-header{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
  width:100% !important; z-index:900 !important; background:transparent !important;
  border:0 !important; box-shadow:none !important; }
/* la pastille flotte au-dessus du hero : le hero remonte tout en haut */
body .skx-hero{ margin-top:0; }
body .site-header .site-header-row-container,
body .site-header .site-header-row-container-inner,
body .site-header .site-main-header-wrap,
body .site-header .site-header-upper-wrap,
body .site-header .site-header-inner-wrap{ background:transparent !important; border:0 !important; box-shadow:none !important; }
body #main-header .site-container,
body #mobile-header .site-container{
  max-width:min(1180px, calc(100vw - 28px)); margin-inline:auto; margin-top:clamp(10px,1.2vw,16px);
  padding-inline:clamp(14px,1.6vw,22px) !important;
  border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(12,12,14,.62);
  -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
body #main-header .site-main-header-inner-wrap{ min-height:60px !important; }
body #main-header .site-branding img{ max-height:32px !important; width:auto !important; }
body #mobile-header .site-branding img{ max-height:28px !important; width:auto !important; }
body #mobile-header .site-main-header-inner-wrap,
body #mobile-header .site-mobile-header-inner-wrap{ min-height:54px !important; }
body .site-header .header-button-wrap .button{ border-radius:999px !important; }
body #mobile-header .site-container{ min-height:56px; }
/* un peu plus dense dès qu'on quitte le haut de page */
body.skx-defile #main-header .site-container,
body.skx-defile #mobile-header .site-container{ background:rgba(10,10,12,.82); border-color:rgba(255,255,255,.16); }
/* la page passe sous la pastille : c'est voulu, la vidéo du hero remonte derrière */
body .site-header + *, body #content, body .site{ scroll-margin-top:92px; }
/* chaque cible d'ancre se cale sous l'en-tête fixe au lieu de passer dessous */
#services,#realisations,#tarifs,#processus,#faq,#contact{ scroll-margin-top:clamp(84px,9vh,104px); }
@media (max-width:680px){
  body #main-header .site-container,body #mobile-header .site-container{
    max-width:calc(100vw - 16px); margin-top:8px; border-radius:28px; }
}
@media (prefers-reduced-motion:reduce){
  body #main-header .site-container,body #mobile-header .site-container{ transition:none; }
}

/* ============ section de présentation : fond blanc + ruban de couleur ============ */
.skx-presentation.skx-bloc{ background:#fff; border:1px solid rgba(10,37,64,.08); }
.skx-presentation.skx-bloc::before{ display:none; }
.skx-presentation .skx-h2{ color:#0a2540; }
.skx-presentation .skx-texte{ color:#3c4257; }
.skx-presentation .skx-texte a{ color:#5b4bff; text-decoration-color:rgba(91,75,255,.4); }
.skx-presentation .skx-texte a:hover{ text-decoration-color:#5b4bff; }
.skx-ruban{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:radial-gradient(165% 150% at 96% -16%, #000 0%, #000 56%, rgba(0,0,0,.78) 74%, rgba(0,0,0,.25) 92%, transparent 100%);
  mask-image:radial-gradient(165% 150% at 96% -16%, #000 0%, #000 56%, rgba(0,0,0,.78) 74%, rgba(0,0,0,.25) 92%, transparent 100%); }
.skx-presentation .skx-wrap{ position:relative; z-index:1; }


/* ============ tout le site sur fond blanc ============ */
html,html body[class],html body .site[class]{ background:#fff !important; }
html body header.site-header[class],
html body header.site-header[class] .site-header-row-container,
html body header.site-header[class] .site-header-row-container-inner,
html body header.site-header[class] .site-main-header-wrap,
html body header.site-header[class] .site-header-upper-wrap,
html body header.site-header[class] .site-header-inner-wrap{ background:transparent !important; }
.skx,.skx-light{ background:#fff; }
.skx-light .skx-white{ background:#fff; }
.skx-hero{ background:#fff; }
.skx-hero::after{ background:radial-gradient(66% 58% at 72% 46%, rgba(99,91,255,.10) 0%, transparent 64%); }
.skx-hero .skx-h1,.skx-hero .skx-lead,.skx-hero .skx-h2{ text-shadow:none; }
.skx-hero-tel{ filter:none; }
.skx-hero-tel .skx-tel-cadre{ filter:drop-shadow(0 40px 70px rgba(10,37,64,.3)); }
/* en-tête : pastille claire */
body #main-header .site-container,body #mobile-header .site-container{
  background:rgba(255,255,255,.74); border-color:rgba(10,37,64,.12);
  box-shadow:0 16px 40px rgba(10,37,64,.12), inset 0 1px 0 rgba(255,255,255,.9); }
body.skx-defile #main-header .site-container,body.skx-defile #mobile-header .site-container{
  background:rgba(255,255,255,.88); border-color:rgba(10,37,64,.16); }
body .site-header .site-branding img{ content:url("https://skapelys.fr/wp-content/uploads/2026/08/logo-couleur-web.webp"); }
html body header.site-header[class] nav a,html body header.site-header[class] nav a *,
html body header.site-header[class] .main-navigation ul li a,
html body header.site-header[class] .main-navigation ul li a span{ color:#0a2540 !important; }
html body .site-header .header-button-wrap a.button{ color:#fff !important; }
/* en-tête, menu mobile, pied et bouton du formulaire en Geist : l'accueil ne télécharge plus Montserrat (375 Ko) */
html body, html body :is(.site-header, #mobile-drawer, footer.site-footer) :is(a, span, p, li, div, button),
html body .wpforms-submit, html body .skx .skx-form button.wpforms-submit{ font-family:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important; }
body .site-header button svg{ color:#0a2540 !important; }
/* les tuiles du bento arrivent aussi par les côtés, en quinconce */
.skx-js .skx-why .skx-tile{ opacity:0; transform:translate3d(var(--dx,0),34px,0);
  transition:opacity .95s var(--ease), transform 1.05s cubic-bezier(.22,.92,.3,1); }
.skx-why .skx-tile:nth-child(odd){ --dx:-52px; }
.skx-why .skx-tile:nth-child(even){ --dx:52px; }
.skx-why .skx-tile:nth-child(2){ transition-delay:.16s; }
.skx-why .skx-tile:nth-child(3){ transition-delay:.32s; }
.skx-why .skx-tile:nth-child(4){ transition-delay:.48s; }
.skx-why .skx-tile:nth-child(5){ transition-delay:.64s; }
.skx-js .skx-why .skx-tile.is-la{ opacity:1; transform:translate3d(0,0,0); }
@media (prefers-reduced-motion:reduce){
  .skx-js .skx-why .skx-tile{ opacity:1 !important; transform:none !important; transition:none !important; }
}
.skx-tile{ background:#fff; border-color:rgba(10,37,64,.12);
  box-shadow:0 2px 5px rgba(10,37,64,.05), 0 14px 34px rgba(10,37,64,.07); }

.skx-plat .skx-vis{ border-color:rgba(10,37,64,.12);
  background:linear-gradient(152deg, rgba(99,91,255,.12), rgba(0,212,255,.07) 70%); }
.skx-plat .skx-inclus li{ color:#0a2540; border-top-color:rgba(10,37,64,.1); }
.skx-plat .skx-inclus i{ background:rgba(26,143,201,.18); border-color:rgba(26,143,201,.5); }
.skx-plat .skx-inclus i svg{ color:#1177a8; }


/* ---------- sur les blocs colorés, le texte repasse en blanc ---------- */
.skp-proc .skx-h2{ color:#fff; }
.skp-proc .skx-lead{ color:rgba(255,255,255,.92); }


/* ---------- textes qui doivent rester blancs sur les blocs colorés ---------- */
html body .skx .skx-col--star h3,html body .skx .skx-col--star b,html body .skx .skx-col--star li{ color:#fff !important; }
html body .skx .skx-form label,html body .skx .skx-form .wpforms-field-label,
html body .skx .skx-form .wpforms-field-label-inline,html body .skx .skx-form div{ color:#0a2540 !important; }
html body .skx .skx-form a{ color:#4F46E5 !important; }
html body .skx .skx-form .wpforms-field-sublabel,html body .skx .skx-form .wpforms-field-description{ color:#5F6C7E !important; }
html body .skx .skx-form button.wpforms-submit{ color:#fff !important; }
html body .skx .skx-form .wpforms-error-noscript{ color:#B42318 !important; }





/* ============ 2. Le texte qui s'allume mot par mot ============ */
.skx-presentation .skx-wrap{ display:block;
  gap:clamp(36px,5vw,76px); align-items:center; }
.skx-presentation .skx-pres-txt{ max-width:none; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,80px); align-items:start; }
/* bloc de fin de page, surtout pour le référencement : titre à gauche, texte à droite, sans visuel */
.skx-presentation .skx-pres-corps .skx-texte:first-child{ margin-top:0; }
.skx-presentation .skx-h2{ font-size:clamp(2rem,.9rem + 2.6vw,3.2rem); }
@media (max-width:900px){ .skx-presentation .skx-pres-txt{ grid-template-columns:1fr; } }
.skx-presentation .skx-h2{ max-width:18ch; }
.skx .skx-say{ font-size:clamp(1.5rem,1rem + 1.9vw,2.5rem); line-height:1.22; letter-spacing:-.028em; font-weight:600;
  max-width:26ch; margin:var(--gap-titre,clamp(44px,5.5vw,84px)) auto 0; text-align:center; color:var(--fg); text-wrap:balance; }
.skx-presentation .skx-say{ color:#0a2540; margin:clamp(18px,2.2vw,28px) 0 0; text-align:left; max-width:24ch;
  font-size:clamp(1.35rem,.95rem + 1.1vw,1.95rem); }
.skx-presentation .skx-texte{ max-width:52ch; margin:clamp(22px,2.6vw,32px) 0 0; font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  line-height:1.6; color:#3c4257; }
.skx-presentation .skx-texte + .skx-texte{ margin-top:14px; }
/* les noms de communes composés ne se coupent jamais au trait d'union */
.skx-insecable{ white-space:nowrap; }
.skx-presentation .skx-texte a{ color:#635bff; font-weight:500; text-decoration:none; }
.skx-presentation .skx-texte a:hover{ text-decoration:underline; text-underline-offset:.22em; text-decoration-color:rgba(99,91,255,.45); }
.skx-presentation .skx-say span{ opacity:1; }
.skx-say span{ opacity:calc(.16 + .84 * clamp(0, calc(var(--p) * var(--n) - var(--i)), 1)); }

/* ============ 3. carrousel de grandes cartes ============ */

/* ---------- toiles de houle (.skx-nuee) et dessins au trait (.skx-dessin) ---------- */
.skx-nuee{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none;
  opacity:0; transition:opacity 1.4s var(--ease); }
.skx-sec.is-vue .skx-nuee{ opacity:1; }
.skx-ecran-tel .skx-nuee{ opacity:1; }



/* l'écran du cadre est percé : la vidéo du site passe derrière */
/* version mobile de la démo : le téléphone en grand, écran percé + vidéo verticale */
.skx-demo-mob{ display:none; position:relative; width:min(68%,300px); margin-inline:auto; }
.skx-demo-mob .skx-ecran-tel{ position:absolute; left:5.92%; top:2.53%; width:88%; height:94.94%;
  overflow:hidden; border-radius:7%/3.3%; background:#100918; }
.skx-demo-mob .skx-ecran-tel video{ width:100%; height:100%; object-fit:cover; display:block; }
.skx-demo-mob > img{ position:relative; z-index:1; width:100%; }

/* ============ 6. La tablette entre par la droite et se remet droite ============ */



/* ============ 8. Livré : l'iPhone à plat sur son halo ============ */
.skx-plat .skx-wrap{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(32px,6vw,90px); }
.skx-plat .skx-h2{ font-size:clamp(2.2rem,.9rem + 3vw,3.6rem); }
.skx-plat .skx-lead{ margin-top:22px; max-width:42ch; }
.skx-plat .skx-vis{ margin-top:clamp(28px,3.4vw,40px); max-width:460px; }


/* ============ « Pourquoi Skapelys » : fond blanc, couleurs vives ============ */
.skx-why{ background:#fff; }
.skx-why .skx-h2{ color:#0a2540; }
.skx-why .skx-tile{ background:#fff; border:1px solid rgba(10,37,64,.1);
  box-shadow:0 2px 5px rgba(10,37,64,.05), 0 14px 34px rgba(10,37,64,.07); }
.skx-why .skx-tile .skx-h3{ color:#0a2540; }
.skx-why .skx-tile p{ color:#3c4257; }
.skx-why .skx-num{ color:#0a2540; }
.skx-why .skx-num small{ color:#6b7a90; }
.skx-tile .skx-num small{ color:#6b7a90; text-transform:uppercase; letter-spacing:.07em; font-size:.42em; }
/* une couleur vive par tuile, portée par le panneau du schéma */
.skx-why .skx-tile--local .skx-vis{ background:linear-gradient(152deg, rgba(99,91,255,.16), rgba(0,212,255,.1) 70%); border-color:rgba(99,91,255,.26); }
.skx-why .skx-tile--rep   .skx-vis{ background:#fff; border-color:rgba(10,37,64,.12); }
.skx-why .skx-tile--seo   .skx-vis{ background:linear-gradient(152deg, rgba(255,138,61,.20), rgba(255,196,120,.10) 70%); border-color:rgba(255,138,61,.34); }
.skx-why .skx-tile--delai .skx-vis{ background:linear-gradient(152deg, rgba(255,167,38,.2), rgba(255,89,150,.1) 70%); border-color:rgba(255,167,38,.34); }
.skx-why .skx-tile--contact .skx-vis{ background:linear-gradient(152deg, rgba(99,91,255,.16), rgba(255,89,150,.1) 70%); border-color:rgba(99,91,255,.26); }
/* le plan de quartier passe en clair */
.skx-why .skx-plan{ background:#f3f5fb; }
.skx-why .skx-plan{ background:#eef2f8; }
.skx-why .skx-chip{ background:rgba(255,255,255,.9); border-color:rgba(10,37,64,.12); color:#0a2540; }
.skx-why .skx-chip svg{ color:#635bff; }
/* la conversation */
.skx-why .skx-bulle--eux{ background:#E9E9EB; border-color:transparent; color:#1C1C1E; }
.skx-why .skx-bulle--nous{ background:linear-gradient(180deg,#2e9bff 0%,#0b84ff 100%); color:#fff; }
.skx-why .skx-tile--rep .skx-heure{ color:#667487 !important; }
.skx-why .skx-ecrit i{ background:#fff; }
/* la liste incluse */
.skx-why .skx-inclus li{ color:#0a2540; border-top-color:rgba(10,37,64,.1); }
.skx-why .skx-inclus i{ background:rgba(255,138,61,.20); border-color:rgba(255,138,61,.55); }
.skx-why .skx-inclus i svg{ color:#C2560A; }
/* les cinq jours */
.skx-why .skx-jours::before{ background:rgba(10,37,64,.14); }
.skx-why .skx-jour{ color:#0a2540; }
.skx-why .skx-jour b{ background:#fff; border-color:rgba(10,37,64,.22); }
.skx-why .skx-jour:last-child{ color:#0a2540; }

/* un seul interlocuteur */


/* le ruban du hero, repris en fond de trois tuiles */
.skx-ruban-tuile{ position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:1; pointer-events:none;
  -webkit-mask-image:radial-gradient(135% 125% at 112% 112%, #000 0%, #000 58%, rgba(0,0,0,.45) 76%, transparent 96%);
  mask-image:radial-gradient(135% 125% at 112% 112%, #000 0%, #000 58%, rgba(0,0,0,.45) 76%, transparent 96%); }
.skx-tile > *:not(.skx-ruban-tuile){ position:relative; z-index:1; }

/* ============ 9. Pourquoi Skapelys : bento de formes différentes ============ */
.skx-bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(16px,1.8vw,24px); margin-top:0; padding-top:var(--gap-titre-seul,clamp(64px,8vw,112px)); }
.skx-tile{ --pad-tuile:clamp(26px,3vw,38px);
  position:relative; overflow:hidden; border-radius:28px; background:var(--tile); border:1px solid var(--line);
  padding:var(--pad-tuile); min-height:300px; display:flex; flex-direction:column; gap:clamp(22px,2.6vw,32px); }
.skx-tile p{ color:var(--txt); }
.skx-tile .skx-h3{ max-width:16ch; }
.skx-tile .skx-h3 + p{ margin-top:var(--gap-sous-h3); max-width:32ch; }
.skx-num{ display:block; margin-top:var(--gap-sous-h3); font-size:clamp(3rem,2rem + 3vw,4.75rem); font-weight:600; letter-spacing:-.04em; line-height:1; color:var(--fg); font-variant-numeric:tabular-nums; }
.skx-num small{ font-size:.42em; font-weight:500; letter-spacing:-.01em; color:var(--txt); margin-left:.12em; }
.skx-tile--rep p,.skx-tile--delai p{ margin-top:var(--gap-sous-h3); max-width:26ch; }

/* le panneau qui porte le petit schéma explicatif */
.skx-vis{ position:relative; margin-top:auto; border-radius:20px; padding:clamp(14px,1.6vw,20px);
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(152deg, rgba(186,110,255,.16) 0%, rgba(186,110,255,.045) 48%, rgba(255,255,255,.02) 100%); }

/* 1. le plan de quartier */
.skx-tile--local{ grid-column:span 4; }
/* une couleur par tuile : c'est ce qui donne le rythme de la section */
.skx-tile--local{ background:var(--bloc-bleu); border-color:rgba(255,255,255,.14); }
.skx-tile--rep{ background:var(--bloc-rose); border-color:rgba(255,255,255,.14); }
.skx-tile--seo{ background:var(--bloc-teal); border-color:rgba(255,255,255,.14); }
.skx-tile--delai{ background:var(--bloc-orange); border-color:rgba(255,255,255,.14); }
.skx-tile--contact{ background:var(--bloc-violet); border-color:rgba(255,255,255,.14); }
.skx-tile--local p,.skx-tile--rep p,.skx-tile--seo p,.skx-tile--delai p,.skx-tile--contact p{ color:rgba(255,255,255,.88); }

.skx-tile .skx-heure{ color:rgba(255,255,255,.7); }

.skx-tile--local .skx-h3{ max-width:24ch; }
.skx-tile--local .skx-vis{ display:flex; }
.skx-tile--local .skx-vis > *{ flex:1; }
.skx-plan{ position:relative; height:100%; min-height:clamp(170px,18vw,230px); border-radius:14px; overflow:hidden; background:rgba(4,8,20,.5); }
.skx-plan svg{ position:absolute; inset:0; width:100%; height:100%; }
.skx .skx-plan img.skx-plan-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; max-width:none; }
.skx-plan-pin{ position:absolute; inset:0; width:100%; height:100%; }
.skx-plan .pin{ fill:#635bff; stroke:#fff; stroke-width:2.4; stroke-linejoin:round; }
.skx-plan .pin-oeil{ fill:#fff; }
.skx-plan .onde{ fill:none; stroke:#635bff; stroke-width:1.8; }
.skx-credit{ position:absolute; right:10px; top:9px; z-index:2;
  padding:3px 7px; border-radius:6px; font-size:10px; letter-spacing:.01em;
  background:rgba(255,255,255,.82); color:#4a5768; border:1px solid rgba(10,37,64,.1); }

.skx-chip{ position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px; background:rgba(4,8,20,.72); border:1px solid rgba(255,255,255,.22);
  font-size:13px; font-weight:600; color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.skx-chip svg{ position:static; inset:auto; width:14px; height:14px; color:var(--accent-txt); }

/* 2. la conversation */
.skx-tile--rep{ grid-column:span 2; }
.skx-bulles{ display:grid; gap:9px; }
.skx-bulle{ max-width:88%; padding:11px 14px; border-radius:16px; font-size:14px; line-height:1.35; }
.skx-bulle--eux{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); color:#d2d2d7; border-bottom-left-radius:6px; }
.skx-bulle--nous{ justify-self:end; background:linear-gradient(180deg,#2e9bff 0%,#0b84ff 100%); color:#fff; border-bottom-right-radius:6px; }
.skx-heure{ justify-self:end; font-size:12px; color:var(--muted); }

/* 3. ce qui est inclus */
.skx-tile--seo{ grid-column:span 2; }
.skx-inclus{ list-style:none; margin:0; padding:0; display:grid; }
.skx-inclus li{ display:flex; align-items:center; gap:12px; padding:11px 2px; font-size:15px; color:var(--fg); }
.skx-inclus li + li{ border-top:1px solid rgba(255,255,255,.08); }
.skx-inclus i{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:rgba(26,143,201,.24); border:1px solid rgba(26,143,201,.6); }
.skx-inclus i svg{ width:12px; height:12px; color:#6fd0ff; }

/* 4. les cinq jours */
.skx-tile--delai{ grid-column:span 2; }
.skx-jours{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); }
.skx-jours::before{ content:""; position:absolute; left:10%; right:10%; top:10px; height:2px; background:rgba(255,255,255,.14); }
.skx-jour{ position:relative; text-align:center; font-size:12px; color:#0a2540; font-weight:500; }
.skx-jour b{ position:relative; z-index:1; display:block; width:18px; height:18px; margin:0 auto 10px; border-radius:50%;
  background:#120d19; border:2px solid rgba(255,255,255,.22); }
.skx-jour:last-child{ font-weight:600; }
/* la frise avance jour après jour, en boucle */
.skx-jours{ --cycle:5s; }
.skx-jours::after{ content:""; position:absolute; left:10%; top:10px; height:2px; width:0;
  background:linear-gradient(90deg,#635bff,#ff5996); border-radius:2px;
  animation:skx-frise var(--cycle) linear infinite; }
@keyframes skx-frise{ 0%{ width:0; } 82%{ width:80%; } 100%{ width:80%; } }
.skx-jour b{ animation:skx-jalon var(--cycle) linear infinite; }
.skx-jour:nth-child(1) b{ animation-delay:0s; }
.skx-jour:nth-child(2) b{ animation-delay:1s; }
.skx-jour:nth-child(3) b{ animation-delay:2s; }
.skx-jour:nth-child(4) b{ animation-delay:3s; }
.skx-jour:nth-child(5) b{ animation-delay:4s; }
@keyframes skx-jalon{
  0%,3%{ background:linear-gradient(140deg,#635bff,#ff5996); border-color:transparent; transform:scale(1.08); }
  18%{ background:linear-gradient(140deg,#635bff,#ff5996); border-color:transparent; transform:scale(1.04); }
  19%,100%{ background:#fff; border-color:rgba(10,37,64,.22); transform:scale(1); }
}

/* bulle « en train d'écrire » (tuile « une réponse rapide ») */
.skx-ecrit{ display:inline-flex; align-items:center; gap:6px; padding:14px 16px; }
.skx-ecrit i{ width:7px; height:7px; border-radius:50%; background:#fff; opacity:.35; animation:skx-pt 1.4s infinite ease-in-out; }
.skx-ecrit i:nth-child(2){ animation-delay:.18s; }
.skx-ecrit i:nth-child(3){ animation-delay:.36s; }
@keyframes skx-pt{ 0%,62%,100%{ opacity:.3; transform:translateY(0); } 31%{ opacity:1; transform:translateY(-3px); } }

/* 5. un seul interlocuteur — la carte est bâtie autour de la photo :
   elle est calée dans l'angle bas-droit et c'est le bord de la carte qui la
   coupe, donc la découpe des jambes ne se voit pas. */
.skx-tile--contact{ grid-column:span 2; --photo:clamp(136px,12.4vw,182px); }
.skx-moi{ position:relative; margin-top:auto; display:flex; align-items:flex-end;
  min-height:calc(var(--photo) * 1.5 - var(--pad-tuile) - 18px); }
.skx-moi-photo{ position:absolute; z-index:1;
  right:calc(-1 * var(--pad-tuile)); bottom:calc(-1 * var(--pad-tuile));
  width:var(--photo); height:auto;
  /* la jambe gauche était tranchée net par le cadrage de la photo :
     on la fond vers le blanc de la carte, comme à côté du formulaire. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 7%,#000 17%);
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 7%,#000 17%); }
.skx-moi-id{ position:relative; z-index:2; display:flex; flex-direction:column; gap:2px;
  padding-right:calc(var(--photo) * .74); padding-bottom:2px; }
.skx-moi-id b{ font-size:clamp(1.02rem,.95rem + .3vw,1.2rem); font-weight:650; letter-spacing:-.02em; color:#0a2540; }
.skx-moi-id > span{ font-size:clamp(.8rem,.76rem + .16vw,.9rem); line-height:1.35; color:#5c6b81; }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .skx-presentation .skx-wrap{ grid-template-columns:1fr; gap:clamp(34px,6vw,52px); }
  .skx-hero-texte{ max-width:none; text-align:center; }
  .skx-hero-texte{ text-align:center; }
  .skx-hero .skx-lead{ margin-inline:auto; }
  .skx-hero .skx-actions{ justify-content:center; }
  .skx-plat .skx-wrap{ grid-template-columns:1fr; text-align:center; }
  .skx-plat .skx-lead{ margin-inline:auto; }
  /* présentation, « Livré » et devis sur une colonne : texte calé à gauche. Centrés, les
     paragraphes aux lignes de longueurs inégales donnaient un bloc en dents de scie. */
  .skx .skx-presentation :is(.skx-pres-txt,.skx-h2,.skx-texte),
  .skx .skx-plat :is(.skx-h2,.skx-lead),
  .skx .skx-contact :is(.skx-h2,.skx-lead){ text-align:left; margin-inline:0; }
  .skx :is(.skx-presentation,.skx-plat,.skx-contact) .skx-sur{ justify-content:flex-start; }
  .skx-bento{ grid-template-columns:repeat(2,1fr); }
  .skx-tile--local{ grid-column:span 2; grid-template-columns:1fr; }
  .skx-tile--local .skx-vis{ margin-top:0; }
  .skx-tile--rep,.skx-tile--seo,.skx-tile--delai,.skx-tile--contact{ grid-column:span 1; }
}
@media (max-width:680px){
  .skx-hero-texte{ text-align:center; }
  .skx-hero .skx-lead{ margin-inline:auto; }
  .skx-hero .skx-actions{ justify-content:center; }
  .skx-bloc{ margin-inline:8px; border-radius:24px; }
  .skx{ font-size:16px; }
  .skx-bento{ grid-template-columns:1fr; gap:16px; }
  :root .skx{ --gap-titre-seul:58px; }
  .skx-tile--local,.skx-tile--rep,.skx-tile--seo,.skx-tile--delai,.skx-tile--contact{ grid-column:span 1; }
  .skx-demo-mob{ display:block; }

  .skx-tile{ min-height:0; }
  .skx-tile--local{ min-height:300px; }
  .skx-tile--rep{ gap:12px; }
  /* sur téléphone : tout plus grand, l'ordinateur pleine largeur, la tablette et le téléphone devant */
}

@media (prefers-reduced-motion:reduce){
  [data-sx]{ --p:1 !important; }
  .skx-jour b,.skx-jours::after { animation:none !important; }
  .skx-nuee{ display:none; }
  .skx-ecrit i{ animation:none !important; opacity:.7; }
  .skx-js .skx-sec{ opacity:1 !important; transform:none !important; }
  .skx *,.skx *::before,.skx *::after{ transition:none !important; animation:none !important; }
  .skx-js .skx-hero .skx-in { opacity:1 !important; transform:none !important; filter:none !important; }
  .skx-hero-fond{ opacity:.35; }
}

/* ============ écran de téléphone « mini-site Skapelys » (réalisations, livré) ============
   En-tête du site, bannière aux couleurs Skapelys dont la mascotte « sort » (la tête dépasse du
   cadre), résultat de recherche Google, trois atouts. Unités cqw (sauf les marges de l'écran lui-même,
   en % : ses cqw se rapporteraient à la fenêtre) : les proportions tiennent à toutes les tailles. L'ancien écran centrait son contenu : ici tout s'étire sur la largeur. */
.skx-hero-tel .skx-app{ container-type:inline-size; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  place-items:stretch; gap:0; padding:0 5.5% 7%; overflow:hidden; background:linear-gradient(180deg,#fff 0%,#F6F7FC 100%); }
.skx-hero-tel .skx-app > *{ width:auto; }
.skx-hero-tel .skx-app img{ max-width:none; }
.skx-app-statut{ display:flex; justify-content:space-between; align-items:center; padding:5.5cqw 2.5cqw 0 3.5cqw;
  font-size:5cqw; font-weight:650; color:#0a2540; letter-spacing:-.01em; }
.skx-app-icones{ display:flex; gap:1.6cqw; align-items:flex-end; }
.skx-app-icones i{ display:block; width:2.2cqw; border-radius:1cqw; background:#0a2540; }
.skx-app-icones i:nth-child(1){ height:2.4cqw; } .skx-app-icones i:nth-child(2){ height:3.4cqw; }
.skx-app-icones i:nth-child(3){ width:6.4cqw; height:3.2cqw; border-radius:1.2cqw; }
.skx-app-nav{ display:flex; align-items:center; gap:2.4cqw; margin-top:6cqw; padding:0 1cqw; }
.skx-app-nav img{ width:auto; height:9cqw; }
.skx-app-nav b{ font-size:5.2cqw; font-weight:700; color:#0a2540; letter-spacing:-.02em; }
.skx-app-burger{ margin-left:auto; display:grid; gap:1.4cqw; }
.skx-app-burger i{ display:block; width:6cqw; height:.8cqw; border-radius:1cqw; background:#0a2540; }
/* la bannière : la mascotte y est posée, sa tête dépasse du cadre */
.skx-app-banniere{ position:relative; margin-top:auto; height:66cqw; border-radius:7cqw;
  background:linear-gradient(135deg,#38BDF8 0%,#635BFF 42%,#C0269F 78%,#FF8A3D 112%);
  box-shadow:0 4cqw 10cqw rgba(91,75,255,.28); }
.skx-app-ondes{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none;
  background:radial-gradient(circle at 78% 72%, transparent 0 24cqw, rgba(255,255,255,.14) 24cqw 25cqw, transparent 25cqw 34cqw,
             rgba(255,255,255,.10) 34cqw 35cqw, transparent 35cqw 45cqw, rgba(255,255,255,.07) 45cqw 46cqw, transparent 46cqw),
             radial-gradient(60% 70% at 10% 0%, rgba(255,255,255,.22), transparent 70%); }
.skx-app-titre{ position:relative; z-index:1; margin:0; padding:8cqw 0 0 6.5cqw; max-width:46%;
  color:#fff; font-size:6.6cqw; font-weight:700; line-height:1.08; letter-spacing:-.03em; }
.skx-app-titre small{ display:block; margin-bottom:2.4cqw; font-size:3.3cqw; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.skx-app-masc{ position:absolute; z-index:2; right:-9cqw; bottom:0; width:68cqw; height:auto; transform-origin:50% 100%;
  filter:drop-shadow(0 2cqw 3cqw rgba(20,6,60,.30)); }
/* résultat de recherche : le site trouvé sur Google */
.skx-app-resultat{ display:grid; gap:1.6cqw; margin-top:7cqw; padding:4.6cqw 5cqw; border-radius:5cqw; background:#fff;
  box-shadow:0 1.5cqw 6cqw rgba(10,37,64,.10), 0 0 0 1px rgba(10,37,64,.05); }
.skx-app-source{ display:flex; align-items:center; gap:2cqw; color:#4d5156; font-size:3.4cqw; }
.skx-app-source i{ display:grid; place-items:center; width:5.4cqw; height:5.4cqw; border-radius:50%; font-style:normal; font-size:3.2cqw; font-weight:800;
  color:#fff; background:linear-gradient(140deg,#38BDF8,#635BFF 60%,#A855F7); }
.skx-app-resultat b{ color:#1a0dab; font-size:4.3cqw; font-weight:600; line-height:1.25; letter-spacing:-.01em; }
.skx-app-ligne{ display:block; height:2cqw; border-radius:2cqw; background:#E8EBF2; }
.skx-app-ligne--courte{ width:62%; }
/* « En ligne » : pastille verte à la place du favicon */
.skx-app-source--ok i{ width:2.6cqw; height:2.6cqw; background:#22C55E; box-shadow:0 0 0 1.2cqw rgba(34,197,94,.18); }
.skx-app-cle{ display:grid; place-items:center; width:6.4cqw; height:6.4cqw; border-radius:50%; color:#fff;
  background:linear-gradient(140deg,#38BDF8,#635BFF 60%,#A855F7); }
.skx-app-cle svg{ width:3.6cqw; height:3.6cqw; }
/* la note Google (mise à jour par le script des avis, comme le badge du hero) */
.skx-app-note{ display:flex; align-items:center; gap:2.2cqw; margin-top:5cqw; padding:3.6cqw 5cqw; border-radius:5cqw; background:#fff;
  color:#3c4257; font-size:3.8cqw; box-shadow:0 1.5cqw 6cqw rgba(10,37,64,.10), 0 0 0 1px rgba(10,37,64,.05); }
.skx-app-note b{ color:#0a2540; font-size:4.6cqw; font-weight:700; }
.skx-app-etoiles{ display:flex; gap:.8cqw; }
.skx-app-etoiles svg{ width:4.2cqw; height:4.2cqw; fill:#F5A623; }
/* trois atouts */
.skx-app-atouts{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.6cqw; margin-top:5cqw; margin-bottom:auto; }
/* le bloc bannière → atouts est centré entre l'en-tête et le bas ; l'espace du haut accueille la tête de la mascotte */
.skx-app-nav{ margin-bottom:22cqw; }
.skx-app-atouts span{ display:grid; justify-items:center; gap:1.8cqw; padding:3.4cqw 0; border-radius:4.5cqw; background:#fff;
  color:#0a2540; font-size:3.5cqw; font-weight:650; box-shadow:0 1cqw 4cqw rgba(10,37,64,.08), 0 0 0 1px rgba(10,37,64,.05); }
.skx-app-atouts i{ display:grid; place-items:center; width:8cqw; height:8cqw; border-radius:50%; color:#fff;
  background:linear-gradient(140deg,#38BDF8,#635BFF 60%,#A855F7); }
.skx-app-atouts svg{ width:4.4cqw; height:4.4cqw; }
/* arrivée quand le téléphone entre dans l'écran : la bannière monte, la mascotte sort, le reste suit */
.skx-js :is(.skx-app-banniere,.skx-app-resultat,.skx-app-note,.skx-app-atouts span){ opacity:0; transform:translateY(5cqw);
  transition:opacity .6s var(--ease), transform .8s cubic-bezier(.2,1,.3,1); }
.skx-js .skx-app-masc{ opacity:0; transform:translateY(14cqw) scale(.9); transition:opacity .5s var(--ease), transform .9s cubic-bezier(.25,1.4,.4,1); }
.skx-js .skx-hero-tel.is-la :is(.skx-app-banniere,.skx-app-resultat,.skx-app-note,.skx-app-atouts span,.skx-app-masc){ opacity:1; transform:none; }
.skx-js .skx-hero-tel.is-la .skx-app-note{ transition-delay:1.25s; }
.skx-js .skx-hero-tel.is-la .skx-app-banniere{ transition-delay:.55s; }
.skx-js .skx-hero-tel.is-la .skx-app-masc{ transition-delay:.9s; }
.skx-js .skx-hero-tel.is-la .skx-app-resultat{ transition-delay:1.15s; }
.skx-js .skx-hero-tel.is-la .skx-app-atouts span:nth-child(1){ transition-delay:1.3s; }
.skx-js .skx-hero-tel.is-la .skx-app-atouts span:nth-child(2){ transition-delay:1.4s; }
.skx-js .skx-hero-tel.is-la .skx-app-atouts span:nth-child(3){ transition-delay:1.5s; }
@media (prefers-reduced-motion:reduce){
  .skx-js :is(.skx-app-banniere,.skx-app-resultat,.skx-app-note,.skx-app-atouts span,.skx-app-masc){ opacity:1; transform:none; transition:none; }
}

/* ============ la mascotte arrive en bondissant, en bas à droite du hero ============
   Une seule image, main levée. Trois animations synchronisées sur la même durée :
   le conteneur glisse depuis la droite (X), l'image fait les bonds (Y, écrasement à
   chaque réception, légère inclinaison vers l'avant), l'ombre reste au sol et rétrécit
   quand la mascotte monte. Hauteur de chaque bond (--b1 à --b3) calculée par le script
   pour ne jamais passer sur le titre ni les boutons. Une seule fois : ensuite elle ne bouge plus. */
.skx-salut{ position:absolute; z-index:2; right:var(--align-page); bottom:clamp(14px,3vh,40px);
  width:clamp(160px,14vw,222px); aspect-ratio:440 / 508; }
.skx-salut-img{ position:relative; z-index:1; display:block; width:100%; height:auto; transform-origin:50% 100%; }
/* ombre de contact : l'image n'en a pas, sans elle la mascotte flotte */
.skx-salut-ombre{ position:absolute; left:16%; right:14%; bottom:-3%; height:7%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(10,37,64,.22), rgba(10,37,64,0)); }
.skx-js .skx-salut{ visibility:hidden; }
.skx-js .skx-salut.is-la{ visibility:visible; animation:skx-arrivee 1.9s cubic-bezier(.3,.45,.45,1) both; }
.skx-js .skx-salut.is-la .skx-salut-img{ animation:skx-bonds 1.9s linear both; }
.skx-js .skx-salut.is-la .skx-salut-ombre{ animation:skx-ombre 1.9s linear both; }
/* glisse depuis le bord droit (--depart, mesuré par le script) jusqu'à la dernière réception */
@keyframes skx-arrivee{
  0%     { transform:translateX(var(--depart,110vw)); }
  76%,100%{ transform:translateX(0); }
}
/* montée en décélération, descente en accélération : la gravité d'un dessin animé */
@keyframes skx-bonds{
  0%  { transform:translateY(0) scale(1,1) rotate(0deg); animation-timing-function:cubic-bezier(.25,.7,.45,1); }
  15% { transform:translateY(calc(-1 * var(--b1,55%))) scale(.97,1.05) rotate(-5deg); animation-timing-function:cubic-bezier(.55,0,.75,.3); }
  30% { transform:translateY(0) scale(1.1,.88) rotate(0deg); animation-timing-function:cubic-bezier(.25,.7,.45,1); }
  44% { transform:translateY(calc(-1 * var(--b2,32%))) scale(.98,1.03) rotate(-3deg); animation-timing-function:cubic-bezier(.55,0,.75,.3); }
  57% { transform:translateY(0) scale(1.07,.92) rotate(0deg); animation-timing-function:cubic-bezier(.25,.7,.45,1); }
  67% { transform:translateY(calc(-1 * var(--b3,13%))) scale(.99,1.02) rotate(-1.5deg); animation-timing-function:cubic-bezier(.55,0,.75,.3); }
  76% { transform:translateY(0) scale(1.05,.94) rotate(0deg); animation-timing-function:cubic-bezier(.3,.6,.4,1); }
  87% { transform:translateY(0) scale(.99,1.015) rotate(0deg); animation-timing-function:ease-in-out; }
  100%{ transform:translateY(0) scale(1,1) rotate(0deg); }
}
@keyframes skx-ombre{
  0%,30%,57%,76%,100%{ transform:scale(1); opacity:1; }
  15%{ transform:scale(.62); opacity:.45; }
  44%{ transform:scale(.76); opacity:.62; }
  67%{ transform:scale(.9); opacity:.85; }
}
@media (max-width:1024px){
  .skx-salut{ position:relative; right:auto; bottom:auto; justify-self:center;
    width:clamp(108px,25vw,146px); margin-top:clamp(56px,14vw,72px); }
}
@media (prefers-reduced-motion:reduce){
  .skx-js .skx-salut{ visibility:visible; }
  .skx-js .skx-salut.is-la,.skx-js .skx-salut.is-la .skx-salut-img,.skx-js .skx-salut.is-la .skx-salut-ombre{ animation:none; }
}


/* ============================================================
   Skapelys — refonte façon Apple : partie basse (préfixe skx-)
   Tarifs, timeline, avis, confiance, FAQ, contact.
   (Le nom de classe .skx-light date de la première version, en clair.)
   ============================================================ */
/* Passée en noir le 2026-09-19 à la demande d'Adel : toute la page reste
   dans l'univers sombre d'Apple, pas de bascule claire pour la partie achat. */
.skx-light{
  --bg:#fff; --fg:#0a2540; --txt:#3c4257; --tile:#fff; --line:rgba(10,37,64,.12);
  --link:#0a2540; --accent:#7b26c9; --accent-hi:#8c31e0; --accent-txt:#7b26c9;
  background:var(--bg); color:var(--fg);
}
.skx-light .skx-white{ background:#fff; }
/* même respiration que la partie haute : sinon tout le bas du site paraît tassé */
.skx-light .skx-sec{ padding-block:clamp(64px,8vw,116px); }
.skx :is(input,textarea,select,label,legend){ font-family:inherit; }

/* ============ alternance noir / blanc d'une section à l'autre ============
   noir : hero, services, réalisations, livré, avis, FAQ
   blanc : présentation, tarifs, pourquoi Skapelys, contact */
.skx-light .skx-prix,.skx-light .skx-contact{ background:#fff; }
.skx-light .skx-prix .skx-h2,.skx-light .skx-contact .skx-h2{ color:#0a2540; }
.skx-light .skx-contact .skx-lead{ color:#3c4257; }


.skx .skx-prix .skx-note{ color:#3c4257; }
html body .skx .skx-prix .skx-note a{ color:#635bff; }

/* --- contact --- */
.skx-contact .skx-coord{ border-top-color:rgba(10,37,64,.12); }
.skx-contact .skx-coord li{ border-bottom-color:rgba(10,37,64,.12); }
.skx-contact .skx-coord span{ color:#6b7a90; }
.skx-contact .skx-coord b{ color:#0a2540; }
html body .skx .skx-contact .skx-coord a{ color:#0a2540; }
.skx-contact .skx-coord svg{ color:#635bff; }

/* ---------- tarifs : comparaison façon « Quel iPhone choisir ? » d'Apple ----------
   Trois colonnes centrées, chacune portée par un objet ; lignes alignées par subgrid
   (visuel, nom, description, prix, bouton, liste). La formule du milieu est posée
   sur un panneau : trait de lumière qui fait le tour du bord + lueur qui suit la souris. */
@property --skx-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

/* la note du bas suit, juste après */
.skx-js .skx-prix .skx-note{ opacity:0; transform:translate3d(0,18px,0);
  transition:opacity .7s var(--ease) .38s, transform .7s var(--ease) .38s; }
.skx-js .skx-prix .skx-note.is-la{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .skx-js .skx-prix .skx-note {
    opacity:1 !important; transform:none !important; transition:none !important; }
}


.skx-col--star{ background:radial-gradient(74% 56% at 18% 100%, rgba(226,96,210,.34), transparent 66%), var(--bloc-bleu); }
.skx-col--star li{ border-top-color:rgba(255,255,255,.2); color:rgba(255,255,255,.9); }
.skx-col--star li small { color:rgba(255,255,255,.74); }
.skx-col--star .skx-btn{ background:#fff; color:#2a0a46 !important; }
.skx-col--star .skx-btn:hover{ background:#f3e9ff; box-shadow:0 14px 32px rgba(0,0,0,.4); }
.skx-col--star::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:1; pointer-events:none;
  background:conic-gradient(from var(--skx-ang), rgba(255,255,255,.16) 0deg, rgba(255,255,255,.16) 250deg, rgba(255,255,255,.6) 300deg, #fff 318deg, rgba(255,255,255,.6) 330deg, rgba(255,255,255,.16) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:skx-tour 6s linear infinite; }
@keyframes skx-tour{ to{ --skx-ang:360deg; } }
.skx-col--star::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%), rgba(255,255,255,.12), transparent 65%); }
.skx-col--star:hover::after{ opacity:1; }
.skx .skx-note{ text-align:center; color:var(--txt); margin:clamp(40px,5vw,56px) auto 0; max-width:62ch; }
.skx-note a{ text-decoration:underline; text-underline-offset:.2em; }


html body .skx .skx-col--star li small{ color:#fff !important; }
.skx-avis .skx-h2{ margin-bottom:0; }
/* ============ tarifs : deux formules comparées ligne à ligne, la maintenance à part ============
   Mêmes lignes dans les deux cartes : ✓ ce qui est inclus, ✗ ce qui ne l'est pas. On voit d'un coup
   d'œil ce qu'apporte le Sur Mesure. La maintenance est un abonnement, pas un site : bandeau dessous. */
.skx-prix .skx-lead{ max-width:52ch; }
.skx-offres{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.2vw,30px);
  max-width:980px; margin:var(--gap-titre,clamp(44px,5.5vw,84px)) auto 0; align-items:stretch; }
.skx-offre{ position:relative; display:flex; flex-direction:column; padding:clamp(26px,3vw,40px);
  border-radius:30px; background:#fff; border:1px solid rgba(10,37,64,.10);
  box-shadow:0 1px 2px rgba(10,37,64,.04), 0 18px 44px rgba(10,37,64,.07); }
.skx-offre--star{ border:1.5px solid transparent;
  background:linear-gradient(180deg, #fff 0%, #fff 55%, #FBFAFF 100%) padding-box,
             linear-gradient(140deg,#38BDF8,#7C6CFF 40%,#C0269F 75%,#FF8A3D) border-box;
  box-shadow:0 2px 6px rgba(10,37,64,.05), 0 30px 70px rgba(91,75,255,.16); }
.skx-offre-badge{ position:absolute; top:0; left:clamp(26px,3vw,40px); transform:translateY(-50%);
  padding:7px 14px; border-radius:999px; color:#fff; font-size:12px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  background:linear-gradient(104deg,#0EA5E9,#635BFF 50%,#C0269F); box-shadow:0 8px 20px rgba(91,75,255,.28); }
/* la mascotte se pose sur la carte, côté droit, et fait un petit bond quand la carte arrive */
.skx-offre-masc{ position:absolute; z-index:2; right:clamp(16px,2.4vw,30px); bottom:calc(100% - 14px);
  width:clamp(84px,8vw,108px); height:auto; pointer-events:none; transform-origin:50% 100%;
  filter:drop-shadow(0 10px 14px rgba(10,37,64,.16)); }
.skx-js .skx-offre--star .skx-offre-masc{ opacity:0; transform:translateY(24px) scale(.9); }
.skx-js .skx-offre--star.is-la .skx-offre-masc{ animation:skx-offre-hop .95s .45s cubic-bezier(.3,.45,.45,1) both; }
@keyframes skx-offre-hop{
  0%  { opacity:0; transform:translateY(24px) scale(.9); }
  35% { opacity:1; transform:translateY(-18px) scale(.98,1.04); }
  62% { transform:translateY(0) scale(1.06,.93); }
  80% { transform:translateY(-4px) scale(.99,1.01); }
  100%{ opacity:1; transform:none; }
}
.skx-offre h3{ margin:0; color:#0a2540; font-size:clamp(1.45rem,1.1rem + 1vw,1.9rem); letter-spacing:-.025em; line-height:1.1; }
.skx-offre-desc{ margin:10px 0 0; color:#3c4257; line-height:1.5; max-width:34ch; }
.skx-offre-prix{ display:flex; align-items:baseline; gap:8px; margin:clamp(20px,2.2vw,28px) 0 0; }
.skx-offre-prix small{ color:#6b7a90; font-size:14px; }
.skx-offre-prix b{ color:#0a2540; font-size:clamp(2.8rem,2.1rem + 2vw,3.8rem); font-weight:650; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums; }
.skx-offre-prix b span{ font-size:.42em; font-weight:550; color:#6b7a90; margin-left:.06em; }
.skx-offre--star .skx-offre-prix b{ background:linear-gradient(104deg,#0EA5E9,#635BFF 50%,#C0269F); -webkit-background-clip:text; background-clip:text; color:transparent; }
.skx-offre .skx-btn{ margin-top:clamp(18px,2vw,24px); width:100%; justify-content:center; }
.skx .skx-btn--clair{ background:#fff; color:#0a2540 !important; border:1.5px solid rgba(10,37,64,.16); box-shadow:none; }
.skx .skx-btn--clair:hover{ background:#fff; border-color:#635BFF; color:#635BFF !important; box-shadow:0 10px 24px rgba(99,91,255,.14); }
.skx-offre-liste{ list-style:none; margin:clamp(40px,4vw,52px) 0 0; padding:0; }
.skx-offre-liste li{ display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start; min-height:60px;
  padding:18px 0; border-top:1px solid rgba(10,37,64,.08); color:#0a2540; font-size:16px; line-height:1.4; }
.skx-offre-liste li small{ display:block; margin-top:2px; color:#6b7a90; font-size:13.5px; }
.skx-offre-liste li.skx-off{ color:#8a96a8; }
.skx-offre-liste li.skx-off small{ color:#a3adbb; }
.skx-oui,.skx-non{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; margin-top:1px; }
.skx-oui{ color:#fff; background:linear-gradient(140deg,#38BDF8,#635BFF 60%,#A855F7); box-shadow:0 4px 10px rgba(99,91,255,.25); }
.skx-non{ color:#a3adbb; background:#EEF1F6; }
.skx-oui svg,.skx-non svg{ width:12px; height:12px; }
.skx-maint{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); max-width:980px; margin:clamp(18px,2.2vw,30px) auto 0;
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.6vw,34px); border-radius:26px; background:#fff; border:1px solid rgba(10,37,64,.10);
  box-shadow:0 1px 2px rgba(10,37,64,.04), 0 14px 34px rgba(10,37,64,.06); }
.skx-maint-ico{ flex:0 0 auto; display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:#635BFF;
  background:linear-gradient(150deg, color-mix(in srgb,#38BDF8 16%,#fff), color-mix(in srgb,#A855F7 16%,#fff)); }
.skx-maint-ico svg{ width:26px; height:26px; }
.skx-maint-txt{ flex:1; min-width:0; }
.skx-maint h3{ margin:0; color:#0a2540; font-size:clamp(1.15rem,1rem + .5vw,1.35rem); letter-spacing:-.02em; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.skx-maint h3 span{ color:#6b7a90; font-size:.8em; font-weight:500; letter-spacing:0; }
.skx-maint h3 b{ color:#0a2540; font-weight:650; }
.skx-maint p{ margin:6px 0 0; color:#3c4257; line-height:1.5; }
.skx-maint .skx-more{ flex:0 0 auto; color:#0a2540 !important; font-weight:600; font-size:16px; text-decoration:none !important; }
.skx-js .skx-prix .skx-offre,.skx-js .skx-prix .skx-maint{ opacity:0; transform:translate3d(0,40px,0) scale(.98);
  transition:opacity .8s var(--ease), transform .9s cubic-bezier(.22,.9,.3,1); }
.skx-js .skx-prix .skx-offre:nth-child(2){ transition-delay:.13s; }
.skx-js .skx-prix .skx-offre.is-la,.skx-js .skx-prix .skx-maint.is-la{ opacity:1; transform:none; }
@media (max-width:860px){
  .skx-offres{ grid-template-columns:1fr; max-width:520px; gap:clamp(56px,14vw,72px); }
  .skx-maint{ flex-direction:column; align-items:flex-start; max-width:520px; }
}
@media (prefers-reduced-motion:reduce){
  .skx-js .skx-prix .skx-offre,.skx-js .skx-prix .skx-maint{ opacity:1 !important; transform:none !important; transition:none !important; }
  .skx-js .skx-offre--star .skx-offre-masc{ opacity:1; transform:none; animation:none !important; }
}
/* ============ « Ce que disent nos clients » : dans l'esprit du hero ============
   Titre centré avec un dégradé, et un mur
   d'avis en deux rangées qui défilent en sens inverse. Les cartes sont construites par le
   script à partir du widget Trustindex (resté dans la page, caché) : elles suivent les
   mises à jour du plugin. Sans script, c'est le widget qui s'affiche. */
.skx-avis{ position:relative; overflow:clip; }
.skx-avis > .skx-wrap,.skx-avis > .skx-avis-mur,.skx-avis > .skx-avis-garantie{ position:relative; z-index:1; }
.skx-avis-tete .skx-h2 em{ font-style:normal; background:linear-gradient(104deg,#0EA5E9 0%,#635BFF 48%,#C0269F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.skx-avis.is-mur .ti-widget{ display:none !important; }
.skx-avis-mur{ display:grid; margin-top:clamp(48px,6vw,80px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); }
.skx-avis-rang{ display:flex; align-items:stretch; width:max-content; gap:16px; padding-block:6px 18px;
  animation:skx-avis-defile var(--duree,70s) linear infinite; }
.skx-avis-mur.is-hors .skx-avis-rang{ animation-play-state:paused; }   /* hors écran seulement */
@keyframes skx-avis-defile{ to{ transform:translate3d(-50%,0,0); } }
.skx-avis-carte{ position:relative; flex:0 0 auto; width:clamp(252px,21vw,300px); margin:0;
  display:flex; flex-direction:column; gap:10px; padding:18px 18px 16px;
  border-radius:20px; background:rgba(255,255,255,.94); border:1px solid rgba(10,37,64,.08);
  box-shadow:0 1px 2px rgba(10,37,64,.04), 0 12px 28px rgba(10,37,64,.07); }
/* en-tête façon Google : photo, nom, date, et le logo de la source */
.skx-avis-carte figcaption{ display:flex; align-items:center; gap:10px; }
.skx-avis-av{ position:relative; flex:0 0 auto; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; overflow:hidden;
  color:#fff; font-size:.82rem; font-weight:650; letter-spacing:.02em; background:linear-gradient(150deg, var(--teinte), var(--teinte2)); }
.skx-avis-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.skx-avis-qui{ min-width:0; flex:1; }
.skx-avis-qui b{ display:block; color:#0a2540; font-weight:600; font-size:.95rem; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.skx-avis-qui small{ display:block; margin-top:1px; color:#6b7a90; font-size:.8rem; }
.skx-avis-source{ flex:0 0 auto; width:20px; height:20px; }
.skx-avis-ligne{ display:flex; align-items:center; gap:8px; }
.skx-avis-etoiles{ display:flex; gap:2px; }
.skx-avis-etoiles svg{ width:15px; height:15px; fill:#F5A623; }
/* la coche de vérification : même mention que le widget Trustindex */
.skx-avis-ok{ display:inline-flex; align-items:center; gap:4px; color:#1a73e8; font-size:.76rem; font-weight:600; }
.skx-avis-ok svg{ width:14px; height:14px; }
.skx .skx-avis-carte blockquote{ border:0 !important; padding:0 !important; background:none !important; font-style:normal; quotes:none; }
.skx .skx-avis-carte blockquote::before,.skx .skx-avis-carte blockquote::after{ content:none !important; }
.skx-avis-carte blockquote{ margin:0; color:#24324a; font-size:.95rem; line-height:1.5; letter-spacing:-.005em;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.skx-avis-garantie{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 18px; margin-top:clamp(22px,2.4vw,32px);
  color:#5F6C7E; font-size:14px; }
.skx-avis-garantie span{ display:inline-flex; align-items:center; gap:6px; }
.skx-avis-garantie img{ width:16px; height:16px; }
.skx-avis-garantie svg{ width:15px; height:15px; color:#1a73e8; }
.skx-avis-lien a{ display:inline-flex; align-items:center; gap:6px; color:#0a2540 !important; font-weight:600; font-size:16px; text-decoration:none !important; }
.skx-avis-lien a:hover{ color:#635bff !important; }
.skx-avis-lien svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.skx-avis-lien a:hover svg{ transform:translateX(3px); }
@media (max-width:720px){
  .skx-avis-mur{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); }
}
/* mouvement réduit : la rangée ne défile plus seule, on la fait glisser soi-même */
@media (prefers-reduced-motion:reduce){
  .skx-avis-rang{ animation:none; }
  .skx-avis-mur{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
  .skx-avis-carte{ scroll-snap-align:start; }
}
.skx-avis .ti-widget{ margin-top:clamp(40px,5vw,72px) !important; }
.skx-avis .ti-widget{ max-width:var(--wrap); margin-inline:auto !important; padding-inline:var(--gut); }
.skx.skx-light .skx-avis .ti-widget .ti-review-item > .ti-inner{
  background:#fff !important; background-color:#fff !important; border:1px solid rgba(10,37,64,.12) !important; border-radius:20px !important; box-shadow:none !important;
}
.skx.skx-light .skx-avis .ti-widget .ti-name{ color:#0a2540 !important; }
.skx.skx-light .skx-avis .ti-widget .ti-date{ color:#6b7a90 !important; }
.skx.skx-light .skx-avis .ti-widget .ti-review-content,.skx.skx-light .skx-avis .ti-widget .ti-review-text-container{ color:#3c4257 !important; }
.skx.skx-light .skx-avis .ti-widget .ti-read-more,.skx.skx-light .skx-avis .ti-widget .ti-read-more *{ color:var(--accent-txt) !important; }
.skx.skx-light .skx-avis .ti-widget .ti-prev,.skx.skx-light .skx-avis .ti-widget .ti-next{ background-color:#fff !important; border-color:rgba(10,37,64,.14) !important; }
.skx.skx-light .skx-avis .ti-widget .ti-verified-by-row{ text-align:center !important; margin-top:clamp(28px,4vw,44px) !important; }
.skx.skx-light .skx-avis .ti-widget .ti-controls-line{ background:rgba(10,37,64,.14) !important; }

/* ============================================================
   « Comment ça se passe ? » — timeline sinueuse, préfixe .skp-proc
   Le tracé, les bulles et les seuils d'apparition sont calculés
   par le script : les cartes s'allument quand la lumière atteint
   leur bulle, pas sur des délais arbitraires.
   ============================================================ */
/* Fond blanc, comme la présentation : le magenta donnait l'impression d'arriver sur
   un autre site. La couleur vient des halos qui s'allument à chaque étape. */
.skp-proc.skx-bloc{ background:#fff; border:1px solid rgba(10,37,64,.08); }
.skp-proc.skx-bloc::before{ display:none; }
.skp-proc .skx-h2{ color:#0a2540; }
.skp-proc .skx-lead{ margin-top:var(--gap-sous-titre); max-width:46ch; color:#3c4257; }

.skp-proc-piste{ position:relative; margin-top:var(--gap-titre,clamp(72px,9vw,136px));
  padding-inline:var(--align); min-height:clamp(880px,74vw,1120px); }

/* ---------- le tracé ---------- */
.skp-proc-trace{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible; z-index:0; }
.skp-proc-fond{ stroke:rgba(10,37,64,.18); stroke-width:1.6; stroke-linecap:round; }
.skp-proc-vive{ stroke:url(#skpProcLueur); stroke-width:3.2; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(124,108,255,.55)) drop-shadow(0 0 14px rgba(192,38,159,.28));
  stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--tl,1)); }

/* ---------- les halos : un nuage de la couleur de l'étape s'allume quand la lumière
   atteint sa bulle. Ils se mêlent entre eux, du bleu ciel à l'orange (la palette du ruban
   du hero), en dégradés doux plutôt qu'en ruban. ---------- */
.skp-proc-auras{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.skp-proc-aura{ position:absolute; left:var(--bx,0px); top:var(--by,0px);
  --on:clamp(0, calc((var(--tl,1) - var(--seuil,0)) * 24), 1);
  width:clamp(380px,44vw,660px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--teinte) 46%, transparent),
             color-mix(in srgb, var(--teinte) 16%, transparent) 55%, transparent 100%);
  opacity:calc(var(--on,1) * .62); transform:translate(-50%,-50%) scale(calc(.72 + var(--on,1) * .28));
  transition:opacity 1s var(--ease), transform 1.3s var(--ease); }

/* ---------- la mascotte descend avec le trait : posée sur la pointe de la lumière ---------- */
.skp-proc-guide{ position:absolute; left:0; top:0; z-index:3; width:clamp(58px,5.2vw,78px); height:auto;
  pointer-events:none; transform-origin:50% 100%;
  transform:translate(calc(var(--gx,0px) - 50%), calc(var(--gy,0px) - 92%)) rotate(var(--gr,0deg));
  filter:drop-shadow(0 8px 14px rgba(10,37,64,.22)); opacity:0; transition:opacity .5s var(--ease); }
.skp-proc-guide.is-la{ opacity:1; }

/* ---------- les étapes ---------- */
.skp-proc-etapes{ list-style:none; margin:0; padding:0; }
.skp-proc-etape{ position:absolute; top:var(--y); z-index:1; transform:translateY(-50%);
  /* la carte s'allume dès que la lumière a franchi sa bulle */
  --on:clamp(0, calc((var(--tl,1) - var(--seuil,0)) * 24), 1); }
.skp-proc-etape:nth-child(odd){ left:var(--align); right:calc(100% - 38% + 36px); }
.skp-proc-etape:nth-child(even){ left:calc(62% + 36px); right:var(--align); }

/* ---------- les bulles, posées sur la courbe ---------- */
.skp-proc-bulles{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.skp-proc-bulle{ position:absolute; left:var(--bx,0px); top:var(--by,0px);
  --on:clamp(0, calc((var(--tl,1) - var(--seuil,0)) * 24), 1);
  display:flex; align-items:center; justify-content:center;
  width:clamp(44px,3.6vw,54px); aspect-ratio:1; border-radius:50%;
  font-size:clamp(.82rem,.78rem + .18vw,.95rem); font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:.02em; color:#fff;
  border:1px solid rgba(255,255,255,calc(.26 + var(--on,1) * .5));
  box-shadow:0 6px 16px rgba(10,37,64,.16);
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--teinte) calc(var(--on,1) * 100%), #13213a),
    color-mix(in srgb, var(--teinte2) calc(var(--on,1) * 100%), #24304d));
  transform:translate(-50%,-50%) scale(calc(.9 + var(--on,1) * .1));
  transition:border-color .55s var(--ease), background .55s var(--ease), transform .55s var(--ease);
}
/* halo doux à l'activation : une nappe lumineuse, pas une ombre colorée */
.skp-proc-bulle::after{ content:""; position:absolute; inset:-60%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle at 50% 50%, var(--teinte) 0%, transparent 66%);
  opacity:calc(var(--on,1) * .38); transform:scale(calc(.55 + var(--on,1) * .45));
  transition:opacity .6s var(--ease), transform .6s var(--ease); }

/* ---------- la carte ----------
   Les cartes étaient en blanc translucide sur le fond magenta : délavées, et
   le texte perdait du contraste. Elles sont maintenant franchement blanches,
   chacune avec le dessin de son étape et son numéro teintés à sa couleur. */
.skp-proc-carte{ position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(22px,2.2vw,32px);
  border-radius:clamp(18px,1.7vw,26px);
  /* contour néon : un filet en dégradé aux couleurs de l'étape, et sa lueur autour */
  border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(140deg, var(--teinte), var(--teinte2) 52%, color-mix(in srgb, var(--teinte) 30%, #fff)) border-box;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--teinte) 9%, transparent),
             0 0 26px color-mix(in srgb, var(--teinte) 34%, transparent),
             inset 0 0 22px color-mix(in srgb, var(--teinte) 8%, transparent),
             0 24px 50px rgba(10,37,64,.10);
  opacity:var(--on,1);
  transform:translateY(calc((1 - var(--on,1)) * 46px)) scale(calc(.97 + var(--on,1) * .03));
  transition:opacity .8s var(--ease), transform .9s cubic-bezier(.22,.9,.3,1);
}

/* le dessin de l'étape, en pastille, au-dessus du titre */
.skp-proc-ico{ display:inline-flex; align-items:center; justify-content:center;
  width:clamp(40px,3.4vw,46px); height:clamp(40px,3.4vw,46px); margin-bottom:clamp(14px,1.3vw,18px);
  border-radius:14px; color:var(--teinte);
  background:color-mix(in srgb, var(--teinte) 11%, #fff);
  border:1px solid color-mix(in srgb, var(--teinte) 30%, #fff); }
.skp-proc-ico svg{ width:55%; height:55%; }
.skp-proc-carte > :not(.skp-proc-filigrane){ position:relative; z-index:1; }
.skp-proc-carte h3{ margin:0; color:#0a2540; font-weight:600; letter-spacing:-.022em;
  font-size:clamp(1.35rem,1.05rem + .95vw,1.95rem); line-height:1.14; text-wrap:balance; }
.skp-proc-carte p{ margin-top:var(--gap-sous-h3); color:#3c4257;
  font-size:clamp(1rem,.95rem + .25vw,1.1rem); line-height:1.55; max-width:40ch; }
/* l'engagement de l'étape : une ligne sous un filet, coche Lucide à la couleur de l'étape
   (la pastille arrondie à point coloré faisait gabarit généré) */
.skp-proc-note{ display:flex; align-items:flex-start; gap:10px;
  margin-top:clamp(18px,1.7vw,24px); padding-top:clamp(14px,1.3vw,18px);
  border-top:1px solid rgba(10,37,64,.10);
  color:#0a2540; font-size:clamp(.9rem,.86rem + .14vw,.98rem); font-weight:600;
  letter-spacing:-.01em; line-height:1.35; }
.skp-proc-note svg{ flex:0 0 auto; width:18px; height:18px; margin-top:.5px; color:var(--teinte); }

/* ---------- cartes : bandeau dégradé de la couleur de l'étape, corps blanc (le langage du mini-site) ---------- */
.skp-proc-carte{ padding:0; border:1px solid rgba(10,37,64,.08); background:#fff;
  box-shadow:0 1px 2px rgba(10,37,64,.04), 0 20px 46px rgba(10,37,64,.10); }
.skp-proc-ban{ position:relative; display:flex; align-items:center; justify-content:space-between; overflow:hidden;
  height:clamp(88px,7.4vw,112px); margin:8px 8px 0; padding:0 clamp(18px,1.8vw,24px);
  border-radius:calc(clamp(18px,1.7vw,26px) - 6px); background:linear-gradient(135deg, var(--teinte), var(--teinte2)); }
.skp-proc-ban::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 92% 120%, transparent 0 34px, rgba(255,255,255,.16) 34px 36px, transparent 36px 58px,
             rgba(255,255,255,.11) 58px 60px, transparent 60px 84px, rgba(255,255,255,.08) 84px 86px, transparent 86px),
             radial-gradient(60% 90% at 0% 0%, rgba(255,255,255,.22), transparent 70%); }
.skp-proc-carte .skp-proc-ico{ position:relative; z-index:1; margin:0; width:clamp(44px,3.6vw,52px); height:clamp(44px,3.6vw,52px);
  border-radius:16px; color:#fff; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35); }
.skp-proc-num{ position:relative; z-index:1; color:#fff; font-size:clamp(2.4rem,1.8rem + 1.6vw,3.4rem); font-weight:700; line-height:1;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums; opacity:.92; }
.skp-proc-corps{ padding:clamp(18px,1.8vw,24px) clamp(22px,2.2vw,30px) clamp(22px,2.2vw,28px); }

/* ---------- mobile : une colonne, la courbe à gauche ---------- */
@media (max-width:820px){
  .skp-proc-piste{ min-height:0; padding-inline:var(--align); }
  .skp-proc-etapes{ display:grid; gap:clamp(26px,5vw,40px); }
  .skp-proc-etape,
  .skp-proc-etape:nth-child(odd),
  .skp-proc-etape:nth-child(even){ position:relative; top:auto; left:auto; right:auto;
    transform:none; padding-left:clamp(76px,21vw,96px); }
  .skp-proc-bulle{ width:clamp(38px,9vw,46px); }
  .skp-proc-carte p{ max-width:none; }
  .skp-proc-guide{ width:clamp(40px,11vw,50px); }
  .skp-proc-aura{ width:clamp(260px,80vw,360px); }
}

/* ---------- sans animation ---------- */
@media (prefers-reduced-motion:reduce){
  .skp-proc-carte,.skp-proc-bulle,.skp-proc-bulle::after,.skp-proc-aura{ transition:none !important; }
  .skp-proc-carte{ opacity:1 !important; transform:none !important; }
}

/* ---------- nos réalisations : même langage que les cartes de service ---------- */
.skx-real .skx-lead{ max-width:46ch; }
/* ============ réalisations : une vitrine par projet ============
   Les mockups seuls et en grand, posés sur un halo aux couleurs du client ; à côté, le nom, une
   phrase, trois faits et le lien. Les projets alternent gauche / droite. Plus de carte autour. */
.skx-real-grille{ display:grid; gap:clamp(28px,3.4vw,44px); margin-top:clamp(72px,9vw,128px); }
.skx-real-carte:nth-child(1){ --c1:#5FD068; --c2:#22A026; --c3:#0E5E14; --acc:#22A026; --acc-ink:#fff; --hx:0%; }     /* Alp Park : vert franc */
.skx-real-carte:nth-child(2){ --c1:#FFE27A; --c2:#FCCB1F; --c3:#9A6F00; --acc:#FCCB1F; --acc-ink:#0a2540; --hx:100%; } /* KBM Taxi : jaune franc */
.skx-real-carte{ position:relative; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(32px,5vw,80px); align-items:center; }
/* chaque projet dans un grand cadre aux couleurs du site, collant : le suivant monte et vient se poser dessus.
   --c (posé par le script, 0 → 1) dit à quel point la carte est recouverte : elle recule et s'assombrit à peine. */
.skx-real-carte{ position:sticky; top:calc(96px + var(--i,0) * 26px); padding:clamp(28px,4vw,60px);
  border-radius:clamp(26px,3vw,40px); border:1px solid rgba(10,37,64,.08);
  background:radial-gradient(60% 90% at var(--hx) 100%, color-mix(in srgb, var(--c1) 26%, transparent), transparent 64%), #fff;
  box-shadow:0 -14px 40px rgba(10,37,64,.06), 0 30px 70px rgba(10,37,64,.10);
  transform-origin:50% 0; scale:calc(1 - var(--c,0) * .045); filter:brightness(calc(1 - var(--c,0) * .06)); }
.skx-real-carte:nth-child(2){ --i:1; }
.skx-real-carte:nth-child(2){ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); }
.skx-real-carte:nth-child(2) .skx-real-vis{ order:2; }
.skx-real-vis{ display:block; position:relative; aspect-ratio:16 / 10; }
/* le halo : une nappe floue de la couleur du client, derrière les appareils */
.skx-real-vis::before{ content:""; position:absolute; inset:6% 4% -2%; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--c1) 80%, transparent), color-mix(in srgb, var(--c2) 42%, transparent) 50%, transparent 100%);
  filter:blur(34px); opacity:.9; }
.skx-real-vis::after{ content:""; position:absolute; left:12%; right:12%; bottom:-3%; height:9%; border-radius:50%; z-index:0;
  background:radial-gradient(closest-side, rgba(10,37,64,.22), transparent); }
.skx-real-scene{ z-index:1; filter:drop-shadow(0 26px 34px rgba(10,37,64,.20)); }
.skx-real-num{ display:flex; align-items:center; gap:12px; margin:0 0 16px; font-size:12px; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:#3c4257; }
.skx-real-num::before{ content:""; width:34px; height:3px; border-radius:2px; background:var(--acc); flex:0 0 auto; }
.skx .skx-real-titre{ margin:0; color:#0a2540; font-size:clamp(2rem,1.3rem + 2.2vw,3.2rem); font-weight:700; letter-spacing:-.035em; line-height:1; }
.skx-real-desc{ margin:16px 0 0; color:#3c4257; font-size:clamp(1.02rem,.98rem + .2vw,1.12rem); line-height:1.55; max-width:34ch; }
.skx-real-faits{ list-style:none; margin:clamp(24px,2.6vw,32px) 0 0; padding:0; display:grid; gap:12px; }
.skx-real-faits li{ display:flex; align-items:center; gap:12px; color:#0a2540; font-size:15.5px; font-weight:550; }
.skx-real-faits i{ display:grid; place-items:center; width:34px; height:34px; border-radius:11px; flex:0 0 auto;
  color:var(--acc-ink); background:var(--acc); }
.skx-real-faits svg{ width:17px; height:17px; }
.skx .skx-real-lien{ display:inline-flex; align-items:center; gap:8px; margin-top:clamp(26px,2.8vw,34px); padding:12px 20px 12px 22px; border-radius:999px;
  color:var(--acc-ink) !important; font-size:15px; font-weight:650; text-decoration:none !important; background:var(--acc);
  border:1.5px solid var(--acc); box-shadow:0 10px 22px rgba(10,37,64,.14);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.skx .skx-real-lien:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(10,37,64,.2); }
.skx-real-lien svg{ width:15px; height:15px; flex:0 0 auto; color:currentColor; transition:transform .3s var(--ease); }
.skx-real-lien:hover svg{ transform:translate(3px,-3px); }
.skx-real-lien:focus-visible{ outline:2px solid #0a2540; outline-offset:3px; }
.skx-real-carte:hover .skx-real-scene{ transform:translateY(-8px); }
/* en-tête : le texte à gauche, le mini-site Skapelys à droite */
.skx-real-tete{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(30px,5vw,80px); align-items:center; }
.skx-real-tete .skx-real-tel{ justify-self:center; }
@media (max-width:900px){
  .skx-real-tete{ grid-template-columns:1fr; }
  .skx-real-tete .skx-real-tel{ width:min(240px,64%); }
}
.skx-real-scene{ position:absolute; left:0; right:0; bottom:0; display:flex;
  align-items:flex-end; justify-content:center; padding-inline:3%;
  transition:transform .45s var(--ease); }
.skx-real-scene .skx-demo-ordi{ position:relative; flex:0 0 84%; min-width:0; }
.skx-real-scene .skx-ecran{ position:absolute; left:13.39%; top:3.61%; width:73.4%; height:69.23%;
  overflow:hidden; background:#100918; }
.skx-real-scene .skx-ecran video{ width:100%; height:100%; object-fit:cover; display:block; }
.skx-real-scene .skx-ecran-tel{ position:absolute; left:5.92%; top:2.53%; width:88%; height:94.94%;
  overflow:hidden; border-radius:7%/3.3%; background:#100918; }
.skx-real-scene .skx-ecran-tel video{ width:100%; height:100%; object-fit:cover; display:block; }
.skx-real-scene .skx-demo-ordi > img{ position:relative; z-index:1; width:100%; display:block; }
.skx-real-scene .skx-demo-tel{ flex:0 0 19%; min-width:0; margin-left:-6%; position:relative; z-index:2; }
.skx-real-scene .skx-demo-tel img{ width:100%; display:block; }
.skx-real-scene .skx-demo-mob{ display:none; position:relative; min-width:0; width:min(62%,250px); margin-inline:auto; }
.skx-real-scene .skx-demo-mob > img{ position:relative; z-index:1; width:100%; display:block; }
@media (max-width:860px){
  .skx-real-carte,.skx-real-carte:nth-child(2){ grid-template-columns:1fr; gap:clamp(24px,6vw,36px); }
  .skx-real-carte{ top:calc(76px + var(--i,0) * 18px); padding:clamp(22px,6vw,32px) clamp(18px,5vw,28px) clamp(26px,7vw,36px); }
  .skx-real-carte:nth-child(2) .skx-real-vis{ order:0; }
  .skx-real-desc{ max-width:none; }
}
@media (max-width:620px){
  /* sur téléphone : même composition qu'à l'écran large, halo resserré, texte centré comme les titres */
  .skx-real-vis::before{ inset:10% 0 0; filter:blur(22px); }
  .skx-real-infos{ text-align:center; }
  .skx-real-num{ justify-content:center; }
  .skx-real-desc{ margin-inline:auto; }
  .skx-real-faits{ justify-content:center; grid-template-columns:auto; }
  .skx-real-faits li{ justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  .skx-real-carte,.skx-real-scene{ transition:none !important; transform:none !important; scale:none !important; filter:none !important; }
}

/* entrées au défilement : les cartes montent simplement (plus de glissé latéral : la 2e arrivait par la droite
   avant de monter, ce qui faisait un décalage) */
.skx-js .skx-real-carte{ opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .75s var(--ease), transform .85s cubic-bezier(.22,.9,.3,1); }
.skx-js .skx-real-carte.is-la{ opacity:1; transform:translate3d(0,0,0); }
@media (prefers-reduced-motion:reduce){
  .skx-js .skx-real-carte{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   Pied de page — posé par le thème, repris ici pour qu'il parle
   la même langue que le reste : fond clair, ruban du hero, logo.
   ============================================================ */
html body footer.site-footer{ position:relative; overflow:hidden;
  /* le pied est hors du conteneur .skx : il lui faut ses propres repères d'alignement */
  --skp-gut:clamp(20px,4vw,28px);
  --skp-align:max(var(--skp-gut), calc((100vw - 1180px) / 2 + var(--skp-gut)));
  background:#FBFCFE !important; border-top:1px solid rgba(10,37,64,.10); }
html body footer.site-footer .site-footer-wrap{ position:relative; z-index:2;
  background:transparent !important; border:0 !important; }
.skp-pied-ruban{ position:absolute; inset:-30% -6%; z-index:0; width:112%; height:160%;
  pointer-events:none; opacity:.34; transform:scaleY(-1);
  -webkit-mask-image:linear-gradient(24deg, transparent 0%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.5) 38%, #000 56%, rgba(0,0,0,.5) 74%, rgba(0,0,0,.12) 88%, transparent 100%);
  mask-image:linear-gradient(24deg, transparent 0%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.5) 38%, #000 56%, rgba(0,0,0,.5) 74%, rgba(0,0,0,.12) 88%, transparent 100%); }
.skp-pied-haut{ position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:clamp(14px,1.6vw,20px);
  padding:clamp(34px,4vw,52px) var(--skp-align) clamp(18px,2vw,26px); }
.skp-pied-mot{ margin:0; max-width:60ch; color:#55637A; text-transform:uppercase;
  font-size:clamp(.74rem,.7rem + .18vw,.84rem); font-weight:650; letter-spacing:.16em; line-height:1.6; }
/* le thème aligne à gauche : on recentre tout le pied */
html body #colophon .site-footer-row-container-inner,
html body #colophon .site-footer-row,
html body #colophon .footer-navigation,
html body #colophon .footer-navigation ul{ justify-content:center !important; text-align:center !important; }
html body #colophon .footer-navigation ul{ display:flex !important; flex-direction:row !important;
  flex-wrap:wrap; gap:clamp(20px,3vw,40px); margin:0 !important; padding:0 !important; }
html body #colophon .footer-navigation li{ margin:0 !important; }
html body #colophon a,
html body #colophon .footer-navigation a{ font-size:clamp(.95rem,.9rem + .24vw,1.06rem) !important; }
html body #colophon p{ font-size:clamp(.92rem,.88rem + .2vw,1.02rem) !important; text-align:center !important; }
/* les textes et liens du thème repassent en clair */
html body footer.site-footer p,
html body footer.site-footer li,
html body #colophon,
html body footer.site-footer .site-footer-row-container-inner{ color:#55637A !important; }
html body footer.site-footer a,
html body #colophon a,
html body #colophon .footer-navigation a,
html body #colophon .footer-navigation .footer-menu-container > ul > li > a{
  color:#0a2540 !important; text-decoration:none !important; transition:color .25s ease; }
html body footer.site-footer a:hover,
html body #colophon a:hover,
html body #colophon .footer-navigation a:hover{ color:#635BFF !important; }
html body footer.site-footer a:focus-visible{ outline:2px solid #635BFF; outline-offset:3px; border-radius:6px; }

/* la photo du fondateur, à côté du formulaire.
   Le bas de la photo est fondu vers le blanc de la section : sans ça, les
   jambes s'arrêtaient d'un coup sur une ligne droite au milieu du vide. */
.skx-photo-adel{ display:block; width:min(300px,76%); height:auto; margin-top:clamp(24px,3vw,36px);
  -webkit-mask-image:linear-gradient(to bottom,#000 85%,rgba(0,0,0,.45) 95%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 85%,rgba(0,0,0,.45) 95%,transparent 100%); }
@media (max-width:767px){
  .skx-photo-adel{ margin-inline:auto; width:min(240px,62%); }
}

/* ---------- FAQ ---------- */
.skx-faq .skx-wrap{ display:block; }
.skx-faq-l{ margin-top:var(--gap-titre,clamp(44px,5.5vw,84px)); }
.skx-faq-tete{ position:static; }
.skx-faq-l{ border-top:1px solid var(--line); }
/* chaque question arrive à son tour, quand elle entre dans l'écran */
.skx-js .skx-faq-l details{ opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .6s var(--ease), transform .7s cubic-bezier(.22,.9,.3,1); }
.skx-js .skx-faq-l details.is-la{ opacity:1; transform:none; }
/* le bloc de contact : coordonnées puis formulaire */
.skx-js .skx-contact .skx-coord li{ opacity:0; transform:translate3d(-18px,0,0);
  transition:opacity .55s var(--ease), transform .65s cubic-bezier(.22,.9,.3,1); }
.skx-js .skx-contact .skx-coord li.is-la{ opacity:1; transform:none; }
.skx-js .skx-contact .skx-form{ opacity:0; transform:translate3d(0,30px,0);
  transition:opacity .7s var(--ease), transform .8s cubic-bezier(.22,.9,.3,1); }
.skx-js .skx-contact .skx-form.is-la{ opacity:1; transform:none; }
.skx-js .skx-contact .skx-photo-adel{ opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .7s var(--ease), transform .8s cubic-bezier(.22,.9,.3,1); }
.skx-js .skx-contact .skx-photo-adel.is-la{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .skx-js .skx-faq-l details,.skx-js .skx-contact .skx-coord li,
  .skx-js .skx-contact .skx-form,.skx-js .skx-contact .skx-photo-adel{
    opacity:1 !important; transform:none !important; transition:none !important; }
}
.skx-faq-l details{ border-bottom:1px solid var(--line); }
.skx-faq-l summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:24px 0; font-size:clamp(1.1rem,1rem + .35vw,1.3rem); font-weight:600; letter-spacing:-.015em; color:var(--fg);
}
.skx-faq-l summary::-webkit-details-marker{ display:none; }
.skx-faq-l summary svg{ flex:0 0 22px; width:22px; height:22px; color:var(--txt); transition:transform .35s var(--ease); }
.skx-faq-l details[open] summary svg{ transform:rotate(45deg); }
.skx-faq-l summary:focus-visible{ outline:2px solid var(--link); outline-offset:4px; border-radius:6px; }
.skx-faq-l details p{ color:var(--txt); padding:0 48px 26px 0; max-width:65ch; }

/* ---------- contact ---------- */
.skx-contact .skx-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,6vw,96px); align-items:start; }
.skx-contact .skx-lead{ margin-top:22px; }
.skx-coord{ list-style:none; margin:36px 0 0; padding:0; border-top:1px solid var(--line); }
/* « : » lu par Google et les lecteurs d'écran, invisible : sinon l'extrait Google collait « Téléphone07 71… » */
.skx-coord-sep{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skx-coord li{ display:grid; grid-template-columns:22px 1fr; gap:5px 14px; padding:18px 0; border-bottom:1px solid var(--line); }
.skx-coord svg{ grid-row:span 2; width:22px; height:22px; color:var(--accent-txt); margin-top:2px; }
.skx-coord span{ font-size:14px; color:var(--txt); }
.skx-coord b,.skx-coord a{ font-weight:600; color:var(--fg); }
.skx-form{
  position:relative; overflow:hidden; border-radius:28px; padding:clamp(24px,3vw,40px);
  background:#fff; border:1px solid rgba(10,37,64,.10);
  box-shadow:0 1px 2px rgba(10,37,64,.04), 0 16px 40px rgba(10,37,64,.07);
  --wpforms-field-border-radius:12px; --wpforms-field-border-color:rgba(10,37,64,.16);
  --wpforms-field-background-color:#fff;
  --wpforms-field-text-color:#0a2540; --wpforms-label-color:#0a2540; --wpforms-label-sublabel-color:#667487;
  --wpforms-button-background-color:#635BFF; --wpforms-button-text-color:#fff; --wpforms-button-border-radius:999px;
  --wpforms-field-size-input-height:48px; --wpforms-button-size-height:48px;
}
.skx-form .wpforms-container{ margin:0 !important; }
.skx-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),.skx-form textarea,.skx-form select{
  border-radius:12px !important; border:1px solid rgba(10,37,64,.16) !important; font-size:16px !important;
  transition:border-color .2s, box-shadow .2s;
  background:#fff !important; color:#0a2540 !important;
}
.skx-form ::placeholder{ color:#8795AB !important; opacity:1; }
.skx-form label,.skx-form legend,.skx-form .wpforms-field-label,.skx-form .wpforms-field-label-inline{ color:#0a2540 !important; }
.skx-form .wpforms-field-sublabel,.skx-form .wpforms-field-description{ color:#5F6C7E !important; }
.skx-form a{ color:#4F46E5 !important; }
.skx-form .wpforms-required-label{ color:#C2410C !important; }
.skx-form input:focus,.skx-form textarea:focus,.skx-form select:focus{
  border-color:#635BFF !important; box-shadow:0 0 0 4px rgba(99,91,255,.18) !important; outline:0 !important; }
.skx-form button[type=submit],.skx-form .wpforms-submit{
  border-radius:999px !important; background:var(--degrade) !important; color:#fff !important;
  font-weight:600 !important; padding:12px 26px !important; border:0 !important;
  box-shadow:0 10px 26px rgba(104,25,170,.28) !important; transition:background .25s ease, box-shadow .25s ease !important;
}
.skx-form button[type=submit]:hover,.skx-form .wpforms-submit:hover{
  background:var(--degrade-survol) !important; box-shadow:0 14px 32px rgba(104,25,170,.36) !important; }

/* ---------- rubans de soie des sections claires (dessinés par le script plus bas) ----------
   Fins, pastel, à 42 % : la même discrétion que le ruban de « Un site qui vous ressemble ». */
.skp-proc,.skx-faq,.skx-contact{ position:relative; }
.skx-faq,.skx-contact{ overflow:clip; }          /* clip et non hidden : le titre de la FAQ reste collant */
.skx-soie{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.42; }
.skx-faq > .skx-wrap,.skx-contact > .skx-wrap{ position:relative; z-index:1; }
/* masques : deux couches en intersection (forme + fondus de bord), pour qu'aucun ruban
   ne s'arrête net sur le bord d'une section */
.skx-soie{ -webkit-mask-composite:source-in; mask-composite:intersect; }
.skx-soie[data-soie="faq"]{ opacity:.3;
  -webkit-mask-image:radial-gradient(34% 30% at 0% 14%, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
  mask-image:radial-gradient(34% 30% at 0% 14%, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); }
/* sur une seule colonne, le ruban de la FAQ passerait derrière les questions */
@media (max-width:1024px){ .skx-soie[data-soie="faq"]{ display:none; } }

/* ---------- contact : en-tête du formulaire et « Et ensuite ? » ---------- */
.skx-contact-droite{ display:grid; gap:clamp(18px,2vw,26px); align-content:start; }
/* sans la photo, « Et ensuite ? » prend sa place dans la colonne de gauche : les deux colonnes s'équilibrent */
.skx-contact .skx-suite{ margin-top:clamp(28px,3vw,40px); }
.skx-form-tete{ display:grid; grid-template-columns:1fr auto; align-items:start; gap:18px 24px;
  padding-bottom:clamp(18px,2vw,24px); margin-bottom:clamp(20px,2.2vw,28px);
  border-bottom:1px solid rgba(10,37,64,.10); }
.skx-form-atouts{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.skx-form-atouts li{ display:flex; align-items:center; gap:9px; color:#0a2540 !important;
  font-size:clamp(.95rem,.9rem + .15vw,1.02rem); font-weight:600; letter-spacing:-.01em; line-height:1.3; }
.skx-form-atouts svg{ flex:0 0 auto; width:18px; height:18px; color:#7b26c9; }
.skx-form-mot{ margin:0; max-width:11.5em; text-align:right; text-wrap:balance; color:#3c4257 !important;
  font-size:clamp(.9rem,.86rem + .12vw,.97rem); line-height:1.4; }
.skx-form-mot b{ display:block; margin-top:3px; font-size:1.18em; font-weight:700; letter-spacing:-.02em;
  background:var(--degrade); -webkit-background-clip:text; background-clip:text; color:transparent !important; }
.skx-suite{ position:relative; border-radius:28px; padding:clamp(24px,3vw,36px) clamp(24px,3vw,40px);
  background:#fff; border:1px solid rgba(10,37,64,.10);
  box-shadow:0 1px 2px rgba(10,37,64,.04), 0 16px 40px rgba(10,37,64,.07); }
.skx-suite-t{ margin:0; color:#0a2540; font-size:clamp(1.25rem,1.05rem + .6vw,1.55rem); font-weight:600; letter-spacing:-.022em; }
.skx-suite-l{ list-style:none; margin:clamp(18px,2vw,24px) 0 0; padding:0; position:relative;
  display:grid; gap:clamp(14px,1.6vw,18px); }
/* le fil vertical qui relie les trois étapes, aux couleurs de la timeline */
.skx-suite-l::before{ content:""; position:absolute; top:18px; bottom:18px; left:17px; width:2px;
  border-radius:2px; background:linear-gradient(180deg,#38BDF8,#7C6CFF 50%,#C0269F); opacity:.35; }
.skx-suite-l li{ position:relative; display:grid; grid-template-columns:36px 1fr; gap:16px; align-items:center; }
.skx-suite-n{ position:relative; display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; color:#fff; font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums;
  background:linear-gradient(150deg,var(--teinte),var(--teinte2)); box-shadow:0 6px 16px rgba(10,37,64,.16); }
.skx-suite-l p{ margin:0; color:#3c4257; font-size:clamp(.95rem,.9rem + .15vw,1.02rem); line-height:1.5; }
.skx-suite-l b{ color:#0a2540; font-weight:600; }
.skx-js .skx-contact .skx-suite{ opacity:0; transform:translate3d(0,30px,0);
  transition:opacity .7s var(--ease), transform .8s cubic-bezier(.22,.9,.3,1); }
.skx-js .skx-contact .skx-suite.is-la{ opacity:1; transform:none; }
@media (max-width:560px){
  .skx-form-tete{ grid-template-columns:1fr; }
  .skx-form-mot{ text-align:left; max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .skx-js .skx-contact .skx-suite{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .skx-contact .skx-wrap{ grid-template-columns:1fr; }
  /* une seule colonne : « Et ensuite ? » passe sous le formulaire. La colonne de gauche s'efface (display:contents)
     pour que ses enfants se rangent avec le formulaire ; l'écart se règle alors élément par élément. */
  .skx-contact .skx-wrap{ row-gap:0; }
  .skx-contact .skx-wrap > div:first-child{ display:contents; }
  .skx-contact .skx-contact-droite{ order:1; margin-top:clamp(36px,7vw,56px); }
  .skx-contact .skx-suite{ order:2; margin-top:clamp(28px,6vw,40px); }
  .skx-faq-tete{ position:static; }
}
@media (max-width:680px){
  .skx-form { border-radius:24px; }
  .skx-faq-l details p{ padding-right:0; }
}

/* ---------- pages services : comparatif des formules (site vitrine / sur mesure) ---------- */
.skx-choix .skx-h2{ max-width:20ch; }
.skx-choix-grille{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,1.8vw,24px);
  margin-top:clamp(40px,5vw,72px); }
.skx-choix-carte{ display:flex; flex-direction:column; gap:16px; padding:clamp(26px,3vw,40px); border-radius:28px;
  background:#fff; border:1px solid rgba(10,37,64,.12); box-shadow:0 2px 5px rgba(10,37,64,.05), 0 14px 34px rgba(10,37,64,.07); }
.skx-choix-prix{ margin:0; color:#635BFF; font-size:15px; font-weight:650; letter-spacing:.01em; }
.skx-choix-carte .skx-h3{ margin:0; color:#0a2540; }
.skx-choix-carte > p{ margin:0; color:#3c4257; line-height:1.6; }
.skx-choix .skx-inclus{ margin-top:4px; }
.skx-choix .skx-inclus li{ color:#0a2540; border-top-color:rgba(10,37,64,.1); align-items:flex-start; }
.skx-choix .skx-inclus i{ margin-top:1px; background:rgba(99,91,255,.12); border-color:rgba(99,91,255,.45); }
.skx-choix .skx-inclus i svg{ color:#5b4bff; }
.skx-choix-note{ margin:clamp(28px,3.4vw,44px) auto 0; color:#3c4257; max-width:62ch; text-align:center; }
@media (max-width:820px){ .skx-choix-grille{ grid-template-columns:1fr; } }
/* grille de trois cartes (page SEO) : trois colonnes, puis deux, puis une */
.skx-choix-grille--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1024px){ .skx-choix-grille--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .skx-choix-grille--3{ grid-template-columns:1fr; } }
/* ---------- pages de texte (mentions légales, confidentialité) : titre de WordPress affiché (classe Kadence
   content-title-style-above), contenu en blocs classiques. Rien ici ne touche l'accueil ni les pages services. ---------- */
.content-title-style-above .entry-hero,
.content-title-style-above .entry-hero-container-inner{ background:transparent; }
.content-title-style-above .entry-hero-container-inner{ padding-top:clamp(116px,11vw,150px); padding-bottom:0; }
/* Kadence ajoute une grande marge au-dessus du contenu : on la réduit, le titre est juste au-dessus */
.content-title-style-above.content-vertical-padding-show .content-area{ margin-top:clamp(20px,2.4vw,36px); }
.content-title-style-above .entry-hero .entry-title{ font-family:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:clamp(2.1rem,1.2rem + 3vw,3.4rem); line-height:1.06; letter-spacing:-.028em; color:#0a2540; }
.content-title-style-above .entry-content{ max-width:72ch; margin-inline:auto;
  font-family:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.content-title-style-above .entry-content :is(h2,h3,h4){ font-family:inherit; color:#0a2540; letter-spacing:-.02em; }
.content-title-style-above .entry-content :is(p,li){ color:#3c4257; line-height:1.7; }
/* !important : la règle générale des liens (body a:not(…)) est plus spécifique */
.content-title-style-above .entry-content a{ color:#5b4bff !important; text-decoration-color:rgba(91,75,255,.4); text-underline-offset:2px; }
/* carte « avant » (page refonte) : les problèmes sont marqués d'une croix discrète, pas d'une coche */
.skx-choix-carte--avant .skx-choix-prix{ color:#6b7a90; }
.skx-choix .skx-choix-carte--avant .skx-inclus i{ background:rgba(10,37,64,.06); border-color:rgba(10,37,64,.2); }
.skx-choix .skx-choix-carte--avant .skx-inclus i svg{ color:#6b7a90; }
/* pages services : présentation sur une seule colonne (titre, puis texte dessous) */
.skx-presentation--colonne .skx-pres-txt{ grid-template-columns:1fr; gap:clamp(24px,3vw,36px); }
.skx-presentation--colonne .skx-h2{ max-width:22ch; }
.skx-presentation--colonne .skx-pres-corps{ max-width:68ch; }
/* … avec le téléphone de l'accueil à droite, et la même entrée en rotation que celui des réalisations */
.skx-presentation--tel .skx-wrap{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(40px,6vw,96px); align-items:center; }
.skx-js .skx-presentation .skx-pres-tel{ transform-origin:36% 50%; }
.skx-js .skx-presentation .skx-pres-tel.is-la{ animation:skx-tel-tourne-b 2.8s linear .14s both; transition:none; }
@media (max-width:900px){ .skx-presentation--tel .skx-wrap{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .skx-js .skx-presentation .skx-pres-tel{ animation:none; opacity:1; transform:none; } }