/* Oterys — feuille de style du site (éditée à la main, non générée).
   Charte : proposition C « La route » (héros photo, titres condensés, or sur asphalte), validée le 10/11/2026.
   Motif de la marque : l'anneau du « o » et son point or. Formes rondes, pas de bandes inclinées. */

@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-display:swap;src:url(/assets/fonts/PlusJakartaSans-latin-400.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-display:swap;src:url(/assets/fonts/PlusJakartaSans-latin-600.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url(/assets/fonts/PlusJakartaSans-latin-700.woff2) format("woff2")}

:root{
  --asphalte:#12132B; --nuit:#17183A; --nuit-2:#22244F; --or:#E0B52A; --or-clair:#F3D873; --indigo:#4B45D6; --indigo-f:#3C36B8;
  --lavande:#E3E4FC; --brume:#F4F4FA; --blanc:#fff; --encre:#16172E; --texte:#2F3048; --acier:#64657F; --trait:#DADBE9;
  --sur-nuit:#C3C5E3; --vert:#0F8A7E;
  --titre:"Sofia Sans Condensed","Arial Narrow",Arial,sans-serif; --corps:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
  --gut:max(28px,env(safe-area-inset-left,0px)); --gut-r:max(28px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--blanc);color:var(--texte);font:400 17px/1.6 var(--corps);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{font-family:var(--titre);font-weight:800;line-height:.98;margin:0;color:var(--encre);letter-spacing:-.005em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.ico{width:24px;height:24px;flex:none}.ico .a{stroke:var(--or)}
.logo{display:block;height:28px;width:auto}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:4px}
.evitement{position:absolute;left:-9999px;top:0;z-index:100;background:var(--blanc);color:var(--encre);padding:10px 16px;font-weight:600}
.evitement:focus{left:16px;top:16px}

/* étiquette en pilule */
.tag{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--or);color:var(--asphalte);font:700 13px/1.2 var(--corps)}
.tag--clair{background:var(--lavande);color:var(--indigo-f)}

/* boutons */
.btn{background:transparent;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:700 16px/1 var(--corps);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-or{background:var(--or);color:var(--asphalte)}.btn-or:hover{background:var(--or-clair)}
.btn-o{border-color:rgba(255,255,255,.55);color:var(--blanc)}.btn-o:hover{border-color:var(--blanc);background:rgba(255,255,255,.1)}
.clair .btn-o,.prose .btn-o{border-color:var(--encre);color:var(--encre)}
.btn-w{background:var(--blanc);color:var(--encre)}.btn-w:hover{background:var(--or)}
.btn .ico{width:20px;height:20px}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;color:var(--indigo)}
.lnk .ico{width:20px;height:20px;transition:transform .15s}.lnk:hover .ico{transform:translateX(4px)}
.lnk:hover{text-decoration:underline;text-underline-offset:4px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* motif : l'anneau du logo et son point or */
.anneau{position:absolute;width:560px;aspect-ratio:1;border-radius:50%;border:96px solid rgba(255,255,255,.045);pointer-events:none}
.anneau::after{content:"";position:absolute;right:-70px;bottom:-70px;width:56px;aspect-ratio:1;border-radius:50%;background:var(--or)}

/* EN-TÊTE : posé sur le héros, prend un fond dès que la page défile */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;color:var(--blanc);transition:background .2s,box-shadow .2s}
.hd.defile{background:rgba(18,19,43,.94);box-shadow:0 10px 30px -14px rgba(0,0,0,.6);backdrop-filter:blur(8px)}
.hd .wrap{display:flex;align-items:center;gap:34px;height:86px}
.nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:15px;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--or)}
.hd .btn{min-height:44px;padding:0 20px;font-size:15px}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--blanc);padding:10px;cursor:pointer}
.burger .ico{width:28px;height:28px}
.sm{position:relative;display:flex}
.sm-l{position:absolute;top:100%;left:-18px;min-width:280px;list-style:none;margin:0;padding:10px;background:var(--asphalte);border-radius:14px;box-shadow:0 22px 44px -16px rgba(0,0,0,.6);opacity:0;visibility:hidden;translate:0 8px;transition:opacity .15s,translate .15s,visibility .15s}
.sm:hover .sm-l,.sm:focus-within .sm-l{opacity:1;visibility:visible;translate:0 0}
.sm-l a{display:block;padding:9px 14px;border:0!important;border-radius:8px}
.sm-l a:hover,.sm-l a[aria-current]{background:var(--nuit-2)}
.sm>a::after{content:"";display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;rotate:45deg;margin:0 0 3px 8px}

/* MENU PLEIN ÉCRAN (mobile) */
#menu{position:fixed;inset:0;z-index:70;background:var(--asphalte);color:var(--blanc);display:none;flex-direction:column;padding:calc(22px + env(safe-area-inset-top,0px)) var(--gut-r) calc(28px + env(safe-area-inset-bottom,0px)) var(--gut);overflow:auto}
.menu-open #menu{display:flex}
.menu-open{overflow:hidden}
#menu .top{display:flex;justify-content:space-between;align-items:center}
#menu .top .burger{display:block;margin:0}
#menu nav{display:flex;flex-direction:column;margin:32px 0 0}
#menu nav a{font:800 38px/1.25 var(--titre);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.14);padding:8px 0}
#menu .m-sous{flex-direction:row;flex-wrap:wrap;gap:8px 18px;margin:26px 0 auto}
#menu .m-sous a{font:400 15px/1.4 var(--corps);border:0;padding:0;color:var(--sur-nuit)}
#menu .m-cta{margin-top:30px;display:grid;gap:12px}

/* HÉROS DE L'ACCUEIL : validé le 10/11/2026, ne pas modifier sans demande */
.hero{position:relative;background:var(--asphalte);color:var(--blanc);overflow:hidden}
.hero h1{color:var(--blanc)}
.hero--photo{min-height:min(92vh,880px);display:flex;flex-direction:column}
.hero-fond{position:absolute;inset:0}
.hero-fond img{width:100%;height:100%;object-fit:cover;object-position:0% 50%;display:block}
.hero-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,19,43,.72) 0,rgba(18,19,43,.12) 34%,rgba(18,19,43,.88) 100%)}
.hero--photo .wrap{position:relative;width:100%;margin-top:auto;padding-top:120px;padding-bottom:116px}
.hero--photo h1{font-size:clamp(54px,9.4vw,138px);line-height:.95;max-width:7em}
.hero--photo .bas{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:end;margin-top:30px}
.hero .sub{font-size:20px;line-height:1.55;max-width:31em;color:#F1F1FA}

/* quatre arguments, à cheval sur le héros */
.kpis{position:relative;z-index:3;margin-top:-60px}
.atouts{background:var(--blanc);border-radius:18px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 24px 50px -24px rgba(18,19,43,.45)}
.atout{display:flex;gap:14px;align-items:flex-start;padding:28px 24px;position:relative}
.atout+.atout::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:1px;background:var(--trait)}
.atout .ico{width:34px;height:34px;color:var(--indigo);margin-top:2px}
.atout b{display:block;font:800 24px/1.05 var(--titre);color:var(--encre)}
.atout span{display:block;margin-top:6px;font-size:15px;line-height:1.4;color:var(--acier)}

/* SECTIONS */
.sec{padding-block:108px}
.sec--brume{background:var(--brume)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px 48px;margin-bottom:56px;flex-wrap:wrap}
.sec h2{font-size:clamp(36px,4.6vw,64px);max-width:12em}
.sec-head p{max-width:29em;color:var(--acier);font-size:18px}

.pic{width:58px;height:58px;border-radius:50%;background:var(--lavande);color:var(--indigo-f);display:grid;place-items:center;flex:none}
.pic .ico{width:30px;height:30px}
.sec--brume .pic{background:var(--blanc)}

.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc article{background:var(--brume);border-radius:20px;padding:34px;display:flex;flex-direction:column;gap:16px}
.svc h3{font-size:36px}
.svc p{color:var(--acier)}
.svc .lnk{margin-top:auto;padding-top:6px}
.tags-presta{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tags-presta a{display:inline-block;padding:10px 18px;border:2px solid var(--trait);border-radius:999px;font-weight:600;font-size:15px;text-decoration:none}
.tags-presta a:hover{border-color:var(--encre)}

/* texte et visuel côte à côte */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:76px;align-items:center}
.split--large{grid-template-columns:minmax(0,9fr) minmax(0,13fr)}
.split--inv{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--inv.split--large{grid-template-columns:minmax(0,13fr) minmax(0,9fr)}
.split--inv>.txt{order:2}
.split .txt{display:grid;gap:18px;justify-items:start}
.split h2{font-size:clamp(34px,3.9vw,54px)}
.split .txt>p{font-size:18px}
.check{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.check li{position:relative;padding-left:32px}
.check li::before{content:"";position:absolute;left:3px;top:.5em;width:12px;height:12px;border-radius:50%;border:3px solid var(--or)}
.ph{border-radius:20px;overflow:hidden;aspect-ratio:4/3}
.ph img{width:100%;height:100%;object-fit:cover;display:block}

/* FRAGMENTS D'ÉCRAN (build/ecrans.py) */
.ecran{background:var(--blanc);border-radius:14px;overflow:hidden;font-size:13px;line-height:1.35;color:var(--texte);box-shadow:0 0 0 1px var(--trait),0 40px 70px -30px rgba(18,19,43,.5)}
.ecran-barre{display:flex;align-items:center;gap:12px;background:var(--asphalte);color:var(--sur-nuit);padding:12px 16px}
.ecran-barre img{height:13px;width:auto}
.ecran-barre b{color:var(--blanc);font-weight:600}
.ecran-barre .droite{margin-left:auto}
.gantt{display:grid;grid-template-columns:118px repeat(10,minmax(0,1fr))}
.gantt .jour{grid-column:span 2;padding:9px 10px;font-weight:700;color:var(--encre);border-bottom:1px solid var(--trait);border-left:1px solid #ECECF5}
.gantt .coin{border-bottom:1px solid var(--trait)}
.gantt .veh{padding:10px 14px;border-bottom:1px solid var(--trait)}
.gantt .veh b{display:block;color:var(--encre)}
.gantt .veh span{color:var(--acier);font-size:12px}
.gantt .ligne{grid-column:2 / -1;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));align-items:center;border-bottom:1px solid var(--trait);background:repeating-linear-gradient(90deg,#ECECF5 0,#ECECF5 1px,transparent 1px,transparent 20%)}
.barre{margin:0 3px;padding:8px 10px;border-radius:999px;background:var(--indigo);color:var(--blanc);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre.liv{background:var(--vert)}
.barre.att{background:#FBF3D9;color:#6B5206;box-shadow:inset 0 0 0 2px var(--or)}
.ecran-pied{display:flex;flex-wrap:wrap;gap:6px 20px;padding:11px 16px;color:var(--acier);font-size:12px}
.ecran-pied i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:var(--indigo)}
.ecran-pied .v i{background:var(--vert)}.ecran-pied .a i{background:var(--or)}
.ot-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:16px 20px;border-bottom:1px solid var(--trait)}
.ot-num{font:800 30px/1 var(--titre);color:var(--encre)}
.ot-etat{background:#FBF3D9;color:#6B5206;font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px}
.ot-prix{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.ot-prix b{color:var(--encre)}
.ot-prix .taux{background:#DDF1E6;color:#1F6B45;font-weight:700;padding:3px 10px;border-radius:999px}
.frise{display:grid;grid-template-columns:repeat(7,1fr);list-style:none;margin:0;padding:22px 12px 18px;border-bottom:1px solid var(--trait)}
.frise li{position:relative;text-align:center;font-size:12px;color:var(--acier);padding-top:22px}
.frise li::before{content:"";position:absolute;top:0;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--blanc);border:2px solid var(--trait);z-index:1}
.frise li::after{content:"";position:absolute;top:5px;left:-50%;width:100%;height:2px;background:var(--trait)}
.frise li:first-child::after{display:none}
.frise .fait::before{background:var(--indigo);border-color:var(--indigo)}
.frise .fait::after{background:var(--indigo)}
.frise .ici{color:var(--encre);font-weight:700}
.frise .ici::before{background:var(--or);border-color:var(--or);box-shadow:0 0 0 5px #FBF3D9}
.arrets{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 20px 22px}
.arret{border:1px solid var(--trait);border-left:4px solid var(--indigo);border-radius:10px;padding:12px 14px}
.arret.liv{border-left-color:var(--vert)}
.arret small{display:block;font-weight:700;font-size:12px;color:var(--indigo)}
.arret.liv small{color:var(--vert)}
.arret strong{display:block;color:var(--encre);font-size:15px;margin:3px 0 1px}
.arret span{color:var(--acier)}
.lecture-ia{padding:20px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:stretch}
.pdf{border:2px dashed var(--indigo);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.pdf b{color:var(--encre);font-size:14px;overflow-wrap:anywhere}
.pdf i{display:block;height:7px;border-radius:4px;background:#E6E7F3}
.pdf i:nth-of-type(2){width:70%}.pdf i:nth-of-type(3){width:86%}.pdf i:nth-of-type(4){width:52%}
.pdf-tag{align-self:flex-start;background:var(--indigo);color:var(--blanc);font-weight:700;font-size:11px;padding:3px 8px;border-radius:999px}
.lu dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0}
.lu dt{color:var(--acier)}
.lu dd{margin:0;text-align:right;font-weight:600;color:var(--encre)}
.lu .ok{margin-top:14px;padding:10px 12px;border-radius:10px;background:#DDF1E6;color:#1F6B45;font-weight:600}
.fv{padding:20px;font-size:14px}
.fv-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.fv-tete b{display:block;font:800 26px/1 var(--titre);color:var(--encre)}
.fv-tete span{color:var(--acier)}
.fv-tete .fv-etat{background:var(--lavande);color:var(--indigo-f);font-weight:700;font-size:12px;padding:4px 10px;border-radius:999px}
.fv table{width:100%;border-collapse:collapse}
.fv td{padding:9px 0;border-top:1px solid var(--trait)}
.fv td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--encre);white-space:nowrap}
.fv .ttc td{font-weight:700;color:var(--encre);border-top:2px solid var(--encre)}
.fv-pied{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:14px;color:var(--acier);font-size:13px}
.ticket{background:var(--asphalte);color:var(--sur-nuit);border-radius:20px;padding:34px;box-shadow:0 40px 70px -30px rgba(18,19,43,.6)}
.ticket small{display:block;font-size:14px}
.ticket dl{display:grid;grid-template-columns:1fr auto;gap:12px 18px;margin:20px 0 0;font-size:16px}
.ticket dd{margin:0;text-align:right;color:var(--blanc);font-weight:600;font-variant-numeric:tabular-nums}
.ticket .somme{margin-top:22px;padding-top:20px;border-top:1px solid #3A3C70;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.ticket .somme span{color:var(--blanc);font-weight:700}
.ticket .somme b{font:800 68px/1 var(--titre);color:var(--or)}

/* capture de l'application dans un cadre d'écran */
.capture{border:8px solid var(--asphalte);border-radius:16px;overflow:hidden;background:var(--asphalte);box-shadow:0 44px 80px -34px rgba(18,19,43,.55)}
.capture img{display:block;width:100%;height:auto}

/* le distancier dans un écran incliné, la vue téléphone devant */
.scene{position:relative;perspective:1900px;padding:6px 7% 44px 0}
.moniteur{border:10px solid var(--asphalte);border-radius:18px;overflow:hidden;background:var(--asphalte);transform:rotateY(-13deg) rotateX(3deg);transform-origin:0 50%;box-shadow:46px 56px 80px -34px rgba(18,19,43,.6)}
.moniteur img,.tel img{display:block;width:100%;height:auto}
.tel{position:absolute;right:0;bottom:0;width:23%;border:7px solid var(--asphalte);border-radius:28px;overflow:hidden;background:var(--asphalte);transform:rotateY(-13deg) rotateX(3deg);box-shadow:30px 40px 60px -26px rgba(18,19,43,.7)}
.split--inv .scene{padding:6px 0 44px 7%}
.split--inv .moniteur{transform:rotateY(13deg) rotateX(3deg);transform-origin:100% 50%;box-shadow:-46px 56px 80px -34px rgba(18,19,43,.6)}
.split--inv .tel{right:auto;left:0;transform:rotateY(13deg) rotateX(3deg)}

/* ESSAI GRATUIT : grand aplat indigo */
.spot{position:relative;overflow:hidden;color:var(--blanc);background:var(--indigo)}
.spot .anneau{right:-140px;top:-190px;border-color:rgba(255,255,255,.09)}
.spot .wrap{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:56px;align-items:center;padding-block:76px}
.spot .big{font:800 clamp(120px,15vw,220px)/.8 var(--titre);letter-spacing:-.03em;color:var(--or)}
.spot .big small{font-size:.36em;letter-spacing:0;color:var(--blanc)}
.spot h2{color:var(--blanc);font-size:clamp(32px,3.6vw,50px);margin-top:16px}
.spot p{margin-top:14px;font-size:19px;max-width:32em;color:#E4E3FB}

/* FACTURE ÉLECTRONIQUE : bandeau nuit, photo fondue à droite */
.route{position:relative;background:var(--asphalte);color:var(--sur-nuit);overflow:hidden}
.route-ph{position:absolute;top:0;bottom:0;right:0;width:56%}
.route-ph img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;display:block}
.route-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--asphalte) 0,rgba(18,19,43,.55) 45%,rgba(18,19,43,.25) 100%)}
.route .wrap{position:relative;z-index:1;padding-block:104px}
.route .txt{max-width:560px;display:grid;gap:18px;justify-items:start}
.route h2{color:var(--blanc);font-size:clamp(36px,4.2vw,58px)}
.route .txt>p{font-size:18px;color:#E6E7F5}
.route .lnk{color:var(--or)}

/* points forts */
.pts{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.pt{display:grid;gap:14px;align-content:start}
.pt h3{font-size:28px}
.pt p{color:var(--acier);font-size:16px}

/* rubriques de l'application */
.doms{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dom{background:var(--brume);border-radius:20px;padding:32px;display:grid;gap:16px;align-content:start}
.dom .pic{background:var(--blanc)}
.dom h3{font-size:32px}
.dom h3 a{text-decoration:none}.dom h3 a:hover{color:var(--indigo)}
.dom ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:16px}
.dom li{position:relative;padding-left:20px}
.dom li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--or)}

/* calendrier de la réforme, étapes de l'essai */
.dates,.etapes{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.dates{grid-template-columns:1fr 1fr}
.dates li{background:var(--asphalte);color:var(--sur-nuit);border-radius:20px;padding:36px;display:grid;gap:12px}
.dates b{font:800 clamp(38px,4.4vw,60px)/1 var(--titre);color:var(--or)}
.dates h3{color:var(--blanc);font-size:28px}
.etapes{grid-template-columns:repeat(3,1fr);counter-reset:etape}
.etapes li{counter-increment:etape;background:var(--brume);border-radius:20px;padding:32px;display:grid;gap:12px;align-content:start}
.etapes li::before{content:counter(etape);width:52px;height:52px;border-radius:50%;background:var(--asphalte);color:var(--or);font:800 30px/52px var(--titre);text-align:center}
.etapes h3{font-size:28px}
.etapes p{color:var(--acier)}

/* liens entre pages */
.autres{padding-block:84px}
.liens-presta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.liens-presta a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px;border-radius:16px;background:var(--brume);font:800 24px/1.1 var(--titre);color:var(--encre);text-decoration:none;transition:background .15s}
.liens-presta a .ico{color:var(--indigo);transition:transform .15s}
.liens-presta a:hover{background:var(--lavande)}.liens-presta a:hover .ico{transform:translateX(4px)}

/* questions fréquentes */
.faq-in{max-width:980px}
.faq{border-top:2px solid var(--encre)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font:700 19px/1.35 var(--corps);color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{color:var(--indigo);transition:rotate .2s}
.faq details[open] summary .ico{rotate:45deg}
.faq details>div{padding:0 48px 24px 0;color:var(--acier)}
.faq details a{color:var(--indigo)}

/* APPEL FINAL */
.final{position:relative;background:var(--asphalte);color:var(--sur-nuit);overflow:hidden}
.final .anneau{right:-120px;bottom:-260px}
.final .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center;padding-block:96px}
.final h2{color:var(--blanc);font-size:clamp(42px,5.4vw,78px);max-width:10em}
.final p{font-size:19px;margin-top:16px;max-width:32em}
.final .side{display:grid;gap:12px}

/* PIED DE PAGE */
.ft{background:#0C0D20;color:#9A9CC2;font-size:15px}
.ft .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;padding-block:60px 40px}
.ft .logo{height:24px}
.ft-adr{margin-top:18px;max-width:26em}.ft-mail{margin-top:12px}
.ft-t{margin:0 0 14px;color:var(--blanc);font:700 15px/1 var(--corps);letter-spacing:0}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}.ft a{text-decoration:none}.ft a:hover{color:var(--blanc)}
.ft .base{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}
.ft-cookies{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cookies{position:fixed;z-index:90;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));max-width:440px;background:var(--asphalte);color:var(--sur-nuit);border-radius:16px;padding:22px 24px;box-shadow:0 20px 50px rgba(0,0,0,.35);font-size:15px;line-height:1.5}
.cookies p{margin:0 0 16px}.cookies a{color:var(--blanc)}
.cookies-actions{display:flex;gap:10px}
.cookies-actions .btn{flex:1;min-height:46px;padding:0 16px}

/* PAGES INTÉRIEURES */
.hero--page .anneau{right:-150px;top:-210px}
.hero--page .wrap{position:relative;z-index:2;padding-block:132px 88px}
.hero--page .wrap>div{max-width:760px}
.hero--page h1{font-size:clamp(42px,5.6vw,82px);margin-top:20px}
.hero--page .sub{font-size:19px;margin-top:22px;color:#DADBEF}
.hero--page .ctas{margin-top:32px}
.hero--court .wrap{padding-block:180px 140px}
.hero--ph .hp-ph{position:absolute;top:0;bottom:0;right:0;width:50%;z-index:0}
.hero--ph .hp-ph img{width:100%;height:100%;object-fit:cover;display:block}
.hero--ph .hp-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--asphalte) 0,rgba(18,19,43,.6) 40%,rgba(18,19,43,.2) 100%)}
.hero--ph .anneau{display:none}
.hero--ph .wrap>div{max-width:640px}
.fil ol{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:14px;color:var(--sur-nuit)}
.fil li+li::before{content:"/";margin:0 10px;opacity:.5}
.fil a{text-decoration:none}.fil a:hover{color:var(--blanc);text-decoration:underline}
.lecture{max-width:900px}
.lecture>h2{font-size:clamp(32px,3.8vw,50px);margin-bottom:26px}
.prose{font-size:18px;display:grid;gap:16px}
.prose h2{font-size:clamp(28px,2.8vw,36px);margin-top:20px}
.prose a{color:var(--indigo);text-underline-offset:3px}

/* formulaires */
.contact{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
.contact h2{font-size:clamp(30px,3.2vw,44px);margin-bottom:16px}
.coord{background:var(--asphalte);color:var(--sur-nuit);border-radius:20px;padding:36px;display:grid;gap:18px}
.coord h2{color:var(--blanc);margin:0}
.coord .check li{color:#E6E7F5}
.coord-mail{border-top:1px solid rgba(255,255,255,.15);padding-top:18px}
.coord-mail a{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--blanc);text-decoration:none}
.form-intro{color:var(--acier);margin-bottom:24px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.champ{display:grid;gap:6px}
.champ--l{grid-column:1/-1}
.champ label{font-weight:600;font-size:16px;color:var(--encre)}
.champ abbr{color:#B4232A;text-decoration:none}
.form input,.form select,.form textarea{font:inherit;color:var(--encre);background:var(--blanc);border:2px solid #C4C6DC;border-radius:12px;padding:12px 14px;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(75,69,214,.18)}
.rgpd{font-size:14px;color:var(--acier)}.rgpd a{color:inherit}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-statut{grid-column:1/-1;margin:0;font-weight:600;border-radius:12px}
.form-statut:empty{display:none}
.form-statut[data-etat=ok]{padding:14px 18px;background:#DDF1E6;color:#14532D}
.form-statut[data-etat=erreur]{padding:14px 18px;background:#FDECEC;color:#7F1D1D}
.form button[disabled]{opacity:.6;cursor:wait}

@media (max-width:1180px){
  .nav{gap:20px}
  .pts{grid-template-columns:repeat(2,1fr)}
  .doms{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .nav,.hd .btn{display:none}.burger{display:block}
  .hd .wrap{height:70px}
  html{scroll-padding-top:84px}
  .hero-fond img{object-position:54% 50%}
  .hero--photo .wrap{padding-bottom:100px}
  .hero--photo .bas{grid-template-columns:1fr;gap:26px}
  .atouts{grid-template-columns:1fr 1fr}.atout{padding:22px 20px}.atout+.atout::before{display:none}
  .sec{padding-block:72px}
  .sec-head{margin-bottom:40px}
  .svc,.split,.split--inv,.split--large,.split--inv.split--large,.contact,.dates,.etapes,.liens-presta{grid-template-columns:minmax(0,1fr)}
  .split,.contact{gap:40px}
  .split--inv>.txt{order:0}
  .ecran-scroll{overflow-x:auto}.gantt{min-width:620px}
  .spot .wrap{grid-template-columns:1fr;gap:22px;padding-block:60px}
  .route-ph{position:relative;width:100%;height:240px}
  .route-ph::after{background:linear-gradient(0deg,var(--asphalte) 0,rgba(18,19,43,.2) 60%)}
  .route .wrap{padding-block:36px 68px}
  .final .wrap{grid-template-columns:1fr;padding-block:72px}
  .ft .wrap{grid-template-columns:1fr 1fr;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}.ft .wrap>div:first-child{grid-column:1/-1}
  .hero--page .wrap{padding-block:108px 64px}
  .hero--ph .hp-ph{position:relative;width:100%;height:220px;margin-top:70px}
  .hero--ph .hp-ph::after{background:linear-gradient(0deg,var(--asphalte) 0,rgba(18,19,43,.15) 70%)}
  .hero--ph .wrap{padding-top:28px}
  .faq details>div{padding-right:0}
}
@media (max-width:640px){
  .atouts,.pts,.doms,.form,.arrets,.lecture-ia{grid-template-columns:minmax(0,1fr)}
  .frise{grid-template-columns:repeat(4,1fr);row-gap:16px}
  .frise li:nth-child(5)::after{display:none}
  .ot-prix{margin-left:0}
  .ticket{padding:26px}.ticket .somme b{font-size:54px}
  .ctas .btn,.final .side .btn{flex:1 1 100%}
  .ft .wrap{grid-template-columns:1fr}
  .cookies{left:12px;right:12px;max-width:none}
  .coord,.dates li,.etapes li,.svc article,.dom{padding:26px}
}

/* ANIMATIONS : apparition des blocs au défilement (classe posée par oterys.js sur les blocs hors écran).
   Sans JavaScript, tout reste affiché. Coupées quand l'appareil demande de réduire les animations. */
.reveal{opacity:0;translate:0 26px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
.reveal.vu{opacity:1;translate:0 0}
@keyframes avance{from{scale:1}to{scale:1.07}}
.hero-fond img{transform-origin:70% 60%;animation:avance 24s ease-out both}
@media (prefers-reduced-motion:reduce){
  html:not(.force-anim) *,html:not(.force-anim) *::before,html:not(.force-anim) *::after{transition:none!important;scroll-behavior:auto!important;animation:none!important}
  html:not(.force-anim) .reveal{opacity:1;translate:none}
}

/* ============================================================ AJOUTS DU 10/11/2026 (soir) */
@font-face{font-family:"Sofia Sans Condensed";font-weight:100 1000;font-display:swap;src:url(/assets/fonts/SofiaSansCondensed-latin.woff2) format("woff2")}

/* VITRINE : le logiciel juste après l'en-tête. La nuit du héros se prolonge ; derrière l'écran, le logo en
   grand (anneau indigo et point or) ; l'écran, légèrement tourné, déborde sur la section claire suivante. */
.vitrine{position:relative;z-index:2;margin-top:-104px;padding:196px 0 0;background:var(--asphalte);color:var(--sur-nuit)}
.vi-fond{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.vitrine .wrap{position:relative;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,15fr);gap:48px;align-items:start}
.vitrine .txt{display:grid;gap:20px;justify-items:start;padding:24px 0 110px}
.vitrine h2{color:var(--blanc);font-size:clamp(38px,4.6vw,64px)}
.vitrine .txt>p{font-size:18px;color:#DADBEF}
.vitrine .check li{color:var(--blanc)}
.vitrine .lnk{color:var(--or)}
.vi-aplat{position:absolute;pointer-events:none;border-radius:50%}
.vi-indigo{right:-260px;top:70px;width:820px;aspect-ratio:1;border:140px solid #20224D}
.vi-or{right:3%;bottom:80px;width:76px;aspect-ratio:1;background:#2F3170}
.vitrine .vis{position:relative;align-self:end;margin-bottom:-170px}
.vi-compo{position:relative;perspective:2600px;padding:0 0 40px 7%}
.vi-compo .moniteur{border:9px solid #23254F;border-radius:20px;background:#23254F;transform:rotateY(-8deg) rotateX(2deg);transform-origin:0 50%;box-shadow:0 0 0 1px rgba(255,255,255,.14),50px 70px 90px -40px rgba(0,0,0,.8)}
.vi-compo .tel{position:absolute;left:0;right:auto;bottom:0;width:22%;border:7px solid #23254F;border-radius:32px;background:#23254F;transform:rotateY(-8deg) rotateX(2deg);box-shadow:0 0 0 1px rgba(255,255,255,.18),30px 50px 60px -28px rgba(0,0,0,.85)}
.parcours{padding-top:290px}

/* PARCOURS : le schéma d'un transport, de la commande à la comptabilité (build/parcours.py) */
.pc{position:relative}
.pc-route{display:none}
.pc-liste{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pc-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:16px;width:100%;cursor:pointer;border-radius:20px}
.pc-btn:focus-visible{outline:3px solid var(--indigo);outline-offset:4px}
.pc-scene{width:112px;flex:none;transition:transform .25s;opacity:.92}
.pc-nom{font:800 26px/1.05 var(--titre);color:var(--encre);display:flex;align-items:center;gap:10px}
.pc-nom b{width:30px;height:30px;flex:none;border-radius:50%;background:var(--asphalte);color:var(--or);font:800 18px/30px var(--titre);text-align:center}
.pc-detail{background:var(--blanc);border-radius:20px;padding:26px 28px;margin-top:14px;display:grid;gap:18px}
.pc-detail h3{font-size:30px;margin-bottom:10px}
.pc-detail p{margin-bottom:12px}

/* interactif (classe posée par oterys.js) : téléphone, une étape dépliée à la fois le long de la route */
.pc.js .pc-liste{position:relative;gap:0;padding-left:44px}
.pc.js .pc-liste::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:24px;border-radius:12px;background:var(--asphalte)}
.pc.js .pc-liste::after{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 10px,transparent 10px,transparent 20px)}
.pc.js .pc-etape{position:relative;padding:12px 0}
.pc.js .pc-etape::before{content:"";position:absolute;left:-36px;top:58px;width:24px;height:24px;border-radius:50%;background:var(--asphalte);border:6px solid var(--or);z-index:1;box-sizing:border-box;transition:background .2s}
.pc.js .pc-etape.actif::before{background:var(--or)}
.pc.js .pc-detail{display:none}
.pc.js .pc-etape.actif .pc-detail{display:grid}
.pc.js .pc-etape.actif .pc-scene{opacity:1}
.pc.js .pc-etape.actif .pc-nom{color:var(--indigo)}
.pc.js .pc-etape.actif .pc-nom b{background:var(--or);color:var(--asphalte)}

/* interactif, grand écran : route en lacets, camion mobile, détail sous le schéma */
@media (min-width:981px){
  .pc.js{padding-bottom:262px}
  .pc.js .pc-route{display:block;position:absolute;left:0;top:0;width:100%;height:auto;overflow:visible}
  .pc-anneau{fill:var(--asphalte);stroke:var(--or);stroke-width:7;transition:fill .2s}
  .pc-anneau.actif{fill:var(--or)}
  .pc.js .pc-liste{position:relative;padding:0;aspect-ratio:1200/470;display:block}
  .pc.js .pc-liste::before,.pc.js .pc-liste::after,.pc.js .pc-etape::before{display:none}
  .pc.js .pc-etape{position:static;padding:0}
  .pc.js .pc-btn{position:absolute;left:var(--x);top:var(--y);width:17%;translate:-50% 0;flex-direction:column;gap:8px;text-align:center}
  .pc.js .pc-scene{width:86%}
  .pc.js .pc-nom{font-size:clamp(17px,1.7vw,23px);justify-content:center;gap:8px}
  .pc.js .pc-nom b{width:26px;height:26px;font-size:16px;line-height:26px}
  .pc.js .pc-btn:hover .pc-scene,.pc.js .pc-etape.actif .pc-scene{transform:translateY(-6px) scale(1.06);opacity:1}
  .pc.js .pc-detail{position:absolute;left:0;right:0;top:100%;margin:26px 0 0;min-height:216px;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;padding:32px 40px;box-shadow:0 30px 60px -34px rgba(18,19,43,.5)}
  .pc.js .pc-detail h3{font-size:36px}
  #pc-camion{transition:none}
}

/* PAGE DES FONCTIONNALITÉS : sommaire, parties colorées, cartes */
.sommaire{position:sticky;top:86px;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait)}
.sommaire .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:14px;padding-bottom:14px;scrollbar-width:none}
.sommaire a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--brume);font-weight:600;font-size:15px;text-decoration:none;color:var(--encre)}
.sommaire a::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.sommaire a:hover{background:var(--lavande)}
.partie{padding-block:104px;scroll-margin-top:150px;position:relative;overflow:hidden}
.partie:nth-of-type(even){background:var(--brume)}
.pa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
.partie--inv .pa-tete{order:2}
.pa-tete{position:sticky;top:170px;display:grid;gap:18px;justify-items:start}
.pa-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;font:700 14px/1.2 var(--corps);color:var(--c);background:color-mix(in srgb,var(--c) 13%,white)}
.pa-tag::before{content:"";width:12px;height:12px;border-radius:50%;border:3px solid var(--c)}
.pa-tete h2{font-size:clamp(34px,4vw,56px)}
.pa-tete>p{font-size:18px;color:var(--acier)}
.pa-vis{width:100%;margin-top:14px;position:relative}
.pa-vis::before{content:"";position:absolute;left:-28px;right:22%;top:26px;bottom:-26px;border-radius:28px;background:color-mix(in srgb,var(--c) 16%,white);z-index:0}
.pa-vis>*{position:relative;z-index:1}
.pa-vis .scene{padding:0 9% 40px 0}
.illu{background:var(--blanc);border-radius:24px;padding:26px;box-shadow:0 30px 60px -34px rgba(18,19,43,.5)}
.illu svg{display:block;width:100%;height:auto}
.fxs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fx{background:var(--blanc);border:1px solid var(--trait);border-radius:20px;padding:26px;display:grid;gap:10px;align-content:start;transition:translate .2s,box-shadow .2s,border-color .2s}
.fx:hover{translate:0 -4px;border-color:var(--c);box-shadow:0 22px 40px -26px color-mix(in srgb,var(--c) 70%,black)}
.fx-pic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 13%,white)}
.fx-pic .ico{width:28px;height:28px}.fx-pic .ico .a{stroke:currentColor;opacity:.55}
.fx h3{font-size:26px;line-height:1.05}
.fx p{color:var(--acier);font-size:16px;line-height:1.55}
.partie--pleine .pa{grid-template-columns:minmax(0,1fr)}
.partie--pleine .pa-tete{position:static;max-width:780px}
.partie--pleine .fxs{grid-template-columns:repeat(3,1fr)}
.partie--nuit{background:var(--asphalte)!important;color:var(--sur-nuit)}
.partie--nuit h2,.partie--nuit .fx h3{color:var(--blanc)}
.partie--nuit .pa-tete>p{color:var(--sur-nuit)}
.partie--nuit .pa-tag{background:rgba(224,181,42,.14)}
.partie--nuit .fx{background:var(--nuit-2);border-color:#34366A}
.partie--nuit .fx p{color:var(--sur-nuit)}
.partie--nuit .fx-pic{background:rgba(224,181,42,.14)}
.reforme{grid-column:1/-1;scroll-margin-top:160px;margin-top:12px;border-radius:28px;background:var(--asphalte);color:var(--sur-nuit);padding:44px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center}
.reforme .pa-tag{--c:var(--or);background:rgba(224,181,42,.14)}
.reforme h3{color:var(--blanc);font-size:clamp(30px,3.4vw,44px);margin:16px 0 12px}
.reforme ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.reforme li{background:var(--nuit-2);border-radius:20px;padding:24px;display:grid;gap:8px}
.reforme li b{font:800 clamp(26px,2.6vw,36px)/1 var(--titre);color:var(--or)}

/* deux captures superposées (statistiques) */
.duo{position:relative;padding:0 0 13% 15%}
.duo-fond{rotate:2deg}
.duo-avant{position:absolute;left:0;bottom:0;width:78%;rotate:-2deg;box-shadow:0 44px 80px -30px rgba(18,19,43,.7)}

@media (max-width:980px){
  .vitrine{margin-top:-150px;padding-top:214px}
  .vitrine .txt{padding:0}
  .vitrine .vis{margin-bottom:-100px}
  .vitrine .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
  .vitrine .txt{padding-bottom:0}
  .vi-indigo{top:auto;bottom:-120px;right:-150px;width:520px;border-width:96px}
  .vi-or{display:none}
  .parcours{padding-top:160px}
  .sommaire{top:70px}
  .partie{padding-block:68px;scroll-margin-top:130px}
  .pa,.reforme{grid-template-columns:minmax(0,1fr);gap:36px}
  .partie--inv .pa-tete{order:0}
  .pa-tete{position:static}
  .pa-vis::before{left:-14px;right:10%}
  .partie--pleine .fxs{grid-template-columns:1fr 1fr}
  .reforme{padding:30px}
}
@media (max-width:640px){
  .fxs,.partie--pleine .fxs,.reforme ol{grid-template-columns:minmax(0,1fr)}
  .pc-scene{width:92px}.pc-nom{font-size:23px}
  .pc.js .pc-etape::before{top:48px}
  .pc-detail{padding:22px}
}

/* BLOCS TRAVAILLÉS (10/11/2026) : photo jusqu'au bord découpée en arc, liseré or, aplats derrière les écrans */
.bord{position:relative;background:var(--brume);overflow:hidden}
.bord-ph,.bord-arc{position:absolute;top:0;bottom:0;right:0;width:48%;clip-path:ellipse(100% 135% at 100% 50%)}
.bord-arc{right:16px;background:var(--or)}
.bord-ph img{display:block;width:100%;height:100%;object-fit:cover}
.bord .wrap{position:relative;z-index:1;padding-block:112px}
.bord .txt{max-width:540px;display:grid;gap:18px;justify-items:start}
.bord h2{font-size:clamp(36px,4.2vw,58px)}
.bord .txt>p:not(.accroche):not(.ctas-l){font-size:18px}
.accroche{font:700 22px/1.3 var(--corps);color:var(--indigo)}
.ctas-l{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:6px}
.bord--inv .bord-ph,.bord--inv .bord-arc{right:auto;left:0;clip-path:ellipse(100% 135% at 0 50%)}
.bord--inv .bord-arc{left:16px}
.bord--inv .txt{margin-left:auto}
.bord--nuit{background:var(--asphalte);color:#DADBEF}
.bord--nuit h2{color:var(--blanc)}
.bord--nuit .accroche,.bord--nuit .lnk{color:var(--or)}
.bord--nuit .check li{color:var(--blanc)}
.bord--nuit .bord-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,19,43,.1),rgba(18,19,43,.55))}

/* écrans des blocs « texte et visuel » : posés sur un aplat arrondi, avec le point or */
.sec .split>.vis{position:relative}
.sec .split>.vis::before{content:"";position:absolute;left:14%;right:-7%;top:9%;bottom:-9%;border-radius:36px;background:var(--lavande)}
.sec .split>.vis::after{content:"";position:absolute;right:-4%;top:3%;width:58px;aspect-ratio:1;border-radius:50%;background:var(--or)}
.sec .split--inv>.vis::before{left:-7%;right:14%}
.sec .split--inv>.vis::after{right:auto;left:-4%}
.sec--brume .split>.vis::before{background:var(--indigo)}
.sec .split>.vis>*{position:relative;z-index:1}

/* cartes des trois métiers : anneau en filigrane dans le coin, relief au survol */
.svc article{position:relative;overflow:hidden;transition:translate .2s,box-shadow .2s}
.svc article::after{content:"";position:absolute;right:-64px;top:-64px;width:190px;aspect-ratio:1;border-radius:50%;border:34px solid rgba(75,69,214,.08)}
.svc article:hover{translate:0 -4px;box-shadow:0 26px 44px -30px rgba(18,19,43,.5)}
.svc article>*{position:relative;z-index:1}

/* bandeau d'essai : dégradé, deux anneaux, chiffre plus présent */
.spot{background:linear-gradient(115deg,#3530A8 0%,var(--indigo) 55%,#6660EA 100%)}
.spot .anneau--2{left:-210px;right:auto;top:auto;bottom:-330px;border-color:rgba(18,19,43,.16)}
.spot .anneau--2::after{display:none}
.spot .tag{background:var(--asphalte);color:var(--blanc)}

@media (max-width:980px){
  .bord-ph,.bord-arc,.bord--inv .bord-ph,.bord--inv .bord-arc{position:relative;left:0;right:0;width:100%;height:250px;clip-path:ellipse(130% 100% at 50% 0)}
  .bord-arc{position:absolute;top:12px;bottom:auto}
  .bord--inv .bord-arc{left:0}
  .bord .wrap{padding-block:40px 72px}
  .bord--inv .txt{margin-left:0}
  .sec .split>.vis::before,.sec .split--inv>.vis::before{left:8%;right:-4%}
  .sec .split>.vis::after{display:none}
}

/* page des fonctionnalités : photo d'une partie */
.pa-vis .ph{aspect-ratio:4/3;border-radius:28px;box-shadow:0 34px 60px -34px rgba(18,19,43,.6)}

/* le bloc facture électronique reste sous les cartes, y compris quand la partie est inversée */
.reforme{order:3}

/* Les quatre arguments sous le héros : un bandeau sombre translucide, pour ne pas trancher avec la nuit qui
   l'entoure (demande du 10/11/2026). La nuit commence au milieu du bandeau, quelle que soit sa hauteur. */
.kpis{background:linear-gradient(180deg,transparent 0,transparent 60px,var(--asphalte) 60px)}
.atouts{background:rgba(34,36,79,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.atout b{color:var(--blanc)}
.atout span{color:var(--sur-nuit)}
.atout .ico{color:#C9C8F7}
.atout+.atout::before{background:rgba(255,255,255,.13)}
.vitrine{margin-top:0;padding-top:104px}
@media (max-width:980px){.vitrine{margin-top:0;padding-top:64px}}

/* TRANSITION nuit → clair sous la vitrine : la nuit se termine en arc (la courbe du « o »), la section
   claire remonte dessous. Règle du site : jamais de coupure droite entre un bloc sombre et un bloc clair. */
.vitrine{border-bottom-left-radius:50% 130px;border-bottom-right-radius:50% 130px}
.vi-fond{border-radius:inherit}
.parcours{margin-top:-130px;padding-top:420px}
@media (max-width:980px){
  .vitrine{border-bottom-left-radius:50% 56px;border-bottom-right-radius:50% 56px}
  .parcours{margin-top:-56px;padding-top:216px}
}

/* parcours : pictogrammes simples d'un seul bleu, plus petits que les anciennes illustrations */
.pc-scene{width:76px;opacity:1}
@media (min-width:981px){.pc.js .pc-scene{width:46%}}
.illu{padding:40px 26%}
@media (min-width:981px){.pc.js .pc-scene{width:60%}.pc.js .pc-btn{translate:-50% 22px}}

/* écran du portail client (build/ecrans.py) */
.po{padding:20px;font-size:14px}
.po-tete{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.po-tete b{font:800 26px/1 var(--titre);color:var(--encre)}
.po-btn{background:var(--indigo);color:var(--blanc);font-weight:700;font-size:12px;padding:7px 14px;border-radius:999px}
.po ul{list-style:none;margin:0;padding:0}
.po li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--trait)}
.po li b{display:block;color:var(--encre);font-size:15px}
.po li span{color:var(--acier);font-size:13px}
.po li i{flex:none;font-style:normal;font-weight:700;font-size:12px;padding:4px 11px;border-radius:999px;background:var(--lavande);color:var(--indigo-f)}
.po li .po-charge{background:#FBF3D9;color:#6B5206}
.po li .po-livre{background:#DDF1E6;color:#1F6B45}
.po-pied{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--trait)}
.po-pied span{border:1px solid var(--trait);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--encre)}

/* partie dont la photo occupe tout le bloc : voile asphalte, titre à gauche, cartes translucides */
.pa-photo{position:absolute;inset:0}
.pa-photo img{display:block;width:100%;height:100%;object-fit:cover}
.pa-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,19,43,.93) 0,rgba(18,19,43,.74) 46%,rgba(18,19,43,.34) 100%),linear-gradient(0deg,rgba(18,19,43,.72) 0,rgba(18,19,43,0) 55%)}
.partie--photo{padding-block:130px}
.partie--photo .pa{position:relative;z-index:1;gap:56px}
.partie--photo .pa-tete{max-width:640px}
.partie--photo .pa-tete>p{color:#E6E7F5}
.partie--photo .fx{background:rgba(27,29,66,.7);border-color:rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.partie--photo .fx p{color:#DADBEF}
@media (max-width:980px){.partie--photo{padding-block:80px}.pa-photo::after{background:rgba(18,19,43,.84)}}

/* ============================================================ ROUTE : le parcours d'un transport (build/parcours.py)
   Dessin issu de Claude Design. Base (téléphone, et sans JavaScript) : liste verticale le long d'une route. */
.rt{position:relative}
.rt-svg{display:none}
.rt-liste{list-style:none;margin:0 auto;padding:0 28px 0 84px;max-width:1240px;position:relative}
.rt-liste::before{content:"";position:absolute;left:36px;top:-60px;bottom:-60px;width:30px;background:var(--asphalte)}
.rt-liste::after{content:"";position:absolute;left:50px;top:-60px;bottom:-60px;width:2px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 12px,transparent 12px,transparent 22px)}
.rt-etape{position:relative;padding:10px 0}
.rt-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;cursor:pointer}
.rt-btn:focus-visible .rt-badge{outline:3px solid var(--indigo);outline-offset:4px}
.rt-badge{position:relative;z-index:1;flex:none;width:66px;height:66px;margin-left:-66px;border-radius:50%;background:var(--blanc);display:grid;place-items:center;box-shadow:0 0 0 0 var(--or),0 12px 22px -10px rgba(18,19,43,.6);transition:box-shadow .2s,scale .2s}
.rt-badge svg{width:40px;height:40px;display:block}
.rt-nom{display:grid;font:800 25px/1.05 var(--titre);color:var(--encre)}
.rt-nom b{font:800 16px/1.2 var(--titre);color:var(--indigo)}
.rt-detail{position:relative;background:var(--blanc);border-radius:22px;padding:24px;margin-top:12px;display:grid;gap:16px;box-shadow:0 26px 50px -34px rgba(18,19,43,.5)}
.rt-fiche{display:grid;gap:10px;justify-items:start}
.rt-fiche h3{font-size:28px;line-height:1.02}
.rt-grand{display:none}
.rt.js .rt-detail{display:none}
.rt.js .actif .rt-detail{display:grid}
.rt.js .actif .rt-badge{box-shadow:0 0 0 6px var(--or),0 12px 22px -10px rgba(18,19,43,.6)}
.rt.js .actif .rt-nom{color:var(--indigo)}

@media (min-width:981px){
  .rt.js{padding-bottom:270px}
  .rt.js .rt-svg{display:block;width:100%;height:auto;overflow:visible}
  .rt-tirets{animation:rt-defile 1.6s linear infinite}
  .rt.js .rt-liste{position:absolute;left:0;right:0;top:0;aspect-ratio:1440/600;max-width:none;margin:0;padding:0}
  .rt.js .rt-liste::before,.rt.js .rt-liste::after{display:none}
  .rt.js .rt-etape{position:static;padding:0}
  /* crête : le nom au-dessus de la pastille ; creux : le nom en dessous. La pastille est centrée sur la route. */
  .rt.js .rt-btn{position:absolute;left:var(--x);top:var(--y);width:180px;flex-direction:column-reverse;gap:14px;text-align:center;translate:-50% calc(-100% + 42px)}
  .rt.js .rt-creux .rt-btn{flex-direction:column;translate:-50% -42px}
  .rt.js .rt-badge{width:84px;height:84px;margin:0}
  .rt.js .rt-badge svg{width:50px;height:50px}
  .rt.js .rt-nom{justify-items:center}
  .rt.js .rt-btn:hover .rt-badge{scale:1.08}
  .rt.js .actif .rt-badge{scale:1.12;box-shadow:0 0 0 8px var(--or),0 18px 30px -12px rgba(18,19,43,.7)}
  .rt.js .rt-detail{position:absolute;top:100%;left:max(28px,calc(50% - 592px));right:max(28px,calc(50% - 592px));margin:0;min-height:216px;border-radius:28px;padding:0 44px 0 0;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;overflow:hidden;box-shadow:0 30px 60px -34px rgba(18,19,43,.5)}
  .rt.js .rt-fiche{position:relative;padding:30px 0 30px 214px}
  .rt.js .rt-fiche h3{font-size:36px}
  .rt.js .rt-grand{display:block;position:absolute;left:30px;top:50%;translate:0 -50%;font:800 190px/.8 var(--titre);color:transparent;-webkit-text-stroke:2px #B9B8F0}
}
@keyframes rt-defile{to{stroke-dashoffset:-31}}
@media (min-width:981px){.parcours{padding-bottom:96px}}
@media (min-width:981px){.rt.js{margin-top:-70px}}

/* route en lacet (10/11/2026) : repère 1440 × 650, tous les noms au-dessus des pastilles */
@media (min-width:981px){
  .rt.js .rt-liste{aspect-ratio:1440/650}
  .rt.js{margin-top:-30px}
}

/* parcours : marqueurs en épingle de carte (10/11/2026). La pointe touche la route, le nom est à côté. */
.rt-badge{width:58px;height:76px;margin-left:-62px;border-radius:0;background:none;box-shadow:none!important;scale:1!important;transform-origin:50% 96%;transition:transform .2s}
.rt-badge svg.rt-pin{width:100%;height:100%;display:block;overflow:visible}
.rt-goutte{fill:var(--indigo);transition:fill .2s}
.rt.js .actif .rt-goutte{fill:var(--or)}
.rt-btn:focus-visible .rt-badge{outline:none}
.rt-btn:focus-visible .rt-goutte{stroke:var(--encre);stroke-width:4}
.rt-nom{font-size:27px;color:var(--encre)}
@media (min-width:981px){
  .rt.js .rt-btn,.rt.js .rt-creux .rt-btn{flex-direction:row;align-items:flex-start;gap:10px;width:250px;text-align:left;translate:-40px -101px}
  .rt.js .rt-badge{width:80px;height:105px;margin:0}
  .rt.js .rt-badge svg.rt-pin{width:100%;height:100%}
  .rt.js .rt-nom{justify-items:start;padding-top:16px;font-size:28px}
  .rt.js .rt-nom b{font-size:17px}
  .rt.js .rt-btn:hover .rt-badge,.rt.js .actif .rt-badge{transform:scale(1.14)}
}

/* parcours : l'aide est une petite bulle, ouverte à l'endroit de l'épingle survolée ou touchée (10/11/2026) */
.rt-detail{padding:18px 20px;border-radius:18px;gap:12px;font-size:14px;line-height:1.5}
.rt-fiche{gap:8px}
.rt-fiche h3{font-size:21px;line-height:1.05}
.rt-detail .check{gap:6px;margin:0}
.rt-detail .check li{font-size:13px;padding-left:24px}
.rt-detail .check li::before{left:2px;top:.42em;width:10px;height:10px;border-width:3px}
.rt-detail .lnk{font-size:14px}
@media (min-width:981px){
  .rt.js{padding-bottom:0}
  .rt.js .rt-nom{white-space:nowrap}
  .rt.js .rt-detail{top:calc(var(--y) + 34px);left:calc(var(--x) - 40px);right:auto;width:336px;min-height:0;padding:20px 22px;border-radius:18px;grid-template-columns:minmax(0,1fr);gap:12px;overflow:visible;z-index:6;box-shadow:0 0 0 1px var(--trait),0 30px 60px -24px rgba(18,19,43,.55)}
  .rt.js .rt-detail::before{content:"";position:absolute;left:30px;top:-8px;width:18px;height:18px;rotate:45deg;background:var(--blanc);box-shadow:-1px -1px 0 var(--trait)}
  .rt.js .rt-droite .rt-detail{left:auto;right:calc(100% - var(--x) - 40px)}
  .rt.js .rt-droite .rt-detail::before{left:auto;right:30px}
  .rt.js .rt-fiche{padding:0}
  .rt.js .rt-fiche h3{font-size:22px}
}

/* route sur trois portions (repère 1440 × 700) ; sur la dernière, la bulle s'ouvre au-dessus de l'épingle */
@media (min-width:981px){
  .rt.js .rt-liste{aspect-ratio:1440/700}
  .rt.js .rt-dessus .rt-detail{top:auto;bottom:calc(100% - var(--y) + 116px)}
  .rt.js .rt-dessus .rt-detail::before{top:auto;bottom:-8px;box-shadow:1px 1px 0 var(--trait)}
}

/* parcours : épingles jaunes, sans numéro (10/11/2026). L'étape active grossit et prend un contour foncé. */
.rt-goutte,.rt.js .actif .rt-goutte{fill:var(--or)}
.rt.js .actif .rt-goutte{stroke:var(--asphalte);stroke-width:3.5}
@media (min-width:981px){.rt.js .rt-nom{padding-top:26px}}

/* parcours : fond « carte routière » pour tout le bloc (10/11/2026) : semis de points comme un fond de plan,
   halos doux indigo et or, lignes de relief très légères. Reste clair pour que la route asphalte ressorte. */
.parcours{background-color:#E9EAF7;background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%2312132B' fill-opacity='.13'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='520' fill='none' stroke='%234B45D6' stroke-opacity='.11' stroke-width='2'%3E%3Cpath d='M-20 120c120-70 220 60 360 10s200-120 340-60 160 90 240 60M-20 200c140-60 240 70 380 20s190-110 320-50 170 80 240 50M-20 400c110 50 230-60 350-20s220 100 340 40 170-70 250-30M-20 470c120 40 240-50 360-10s210 80 330 30 180-60 250-20'/%3E%3C/svg%3E"),
  radial-gradient(60% 55% at 12% 28%,rgba(75,69,214,.16),transparent 70%),
  radial-gradient(50% 50% at 88% 74%,rgba(224,181,42,.20),transparent 70%);
  background-size:26px 26px,900px 520px,auto,auto}

/* ITINÉRAIRE CAMION (accueil, 10/11/2026) : bloc sombre sur photo, texte blanc. Le bloc monte en dôme sur la
   section claire du dessus et se termine en arc sur celle du dessous (pas de coupure droite). Par-dessus la
   photo : un itinéraire tracé en or, dont les tirets avancent, et une bifurcation en pointillé. */
.parcours{padding-bottom:210px}
.iti{position:relative;z-index:2;margin-top:-90px;background:var(--asphalte);color:#DADBEF;overflow:hidden;border-radius:50% / 90px}
.iti-fond{position:absolute;inset:0}
.iti-fond img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 60%}
.iti-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,19,43,.97) 0,rgba(18,19,43,.88) 46%,rgba(18,19,43,.5) 100%)}
.iti-trace{position:absolute;right:0;top:0;width:62%;height:100%}
.iti-ligne{animation:iti-avance 1.4s linear infinite}
@keyframes iti-avance{to{stroke-dashoffset:-26}}
.iti .wrap{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center;padding-block:176px 190px}
.iti .txt{display:grid;gap:22px;justify-items:start}
.iti h2{color:var(--blanc);font-size:clamp(38px,4.6vw,64px);max-width:11em}
.iti .txt>p{font-size:18px;max-width:36em}
.iti .lnk{color:var(--or)}
.iti-points{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px 32px}
.iti-points li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start}
.iti-points .ico{width:46px;height:46px;padding:11px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.1);color:var(--blanc)}
.iti-points b{display:block;color:var(--blanc);font:800 24px/1.05 var(--titre);margin-bottom:4px}
.iti-points span{font-size:15px;line-height:1.5}
.iti-profil{background:rgba(27,29,66,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 40px 70px -34px rgba(0,0,0,.8);border-radius:28px;padding:34px;display:grid;gap:24px}
.iti-profil small{font-size:14px;font-weight:600;color:var(--or)}
.iti-chiffres{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:20px}
.iti-chiffres b{display:block;font:800 clamp(48px,5vw,72px)/.9 var(--titre);color:var(--blanc)}
.iti-chiffres span{font-size:14px}
.iti-puces{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
.iti-puces span{padding:6px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:var(--blanc);font-size:13px;font-weight:600}
.iti + .bord{margin-top:-90px}
.iti + .bord .wrap{padding-top:202px}
@media (max-width:980px){
  .parcours{padding-bottom:140px}
  .iti{margin-top:-50px;border-radius:50% / 50px}
  .iti-trace{width:100%;opacity:.5}
  .iti-fond::after{background:rgba(18,19,43,.88)}
  .iti .wrap{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:110px 120px}
  .iti + .bord{margin-top:-50px}
  .iti + .bord .wrap{padding-top:40px}
  .iti + .bord .bord-ph,.iti + .bord .bord-arc{height:300px}
}
@media (max-width:640px){.iti-points{grid-template-columns:minmax(0,1fr)}}

/* bloc itinéraire : le tracé reste dans la partie droite, hors du texte ; masqué sur téléphone */
.iti-trace{width:44%}
@media (max-width:980px){.iti-trace{display:none}}

/* pictogrammes : pastille jaune (or de la charte), tracé asphalte, partout sur le site (10/11/2026).
   Les pastilles bleues ou lavande ne vont pas avec la charte. */
.pic,.sec--brume .pic,.dom .pic,.fx-pic,.partie--nuit .fx-pic{background:var(--or);color:var(--asphalte)}
.pic .ico .a,.fx-pic .ico .a{stroke:currentColor;opacity:1}
.iti-points .ico{background:var(--or);color:var(--asphalte)}
.iti-points .ico .a{stroke:currentColor}

/* parties sans visuel ou en photo plein bloc : le titre reste toujours au-dessus des cartes */
.partie--pleine .pa-tete{order:0}

/* numéro de téléphone : appel final et encadré des formulaires */
.final .tel{display:block;text-align:center;font:800 clamp(34px,3.4vw,48px)/1 var(--titre);color:var(--blanc);text-decoration:none;font-variant-numeric:tabular-nums;margin-bottom:6px}
.final .tel:hover{color:var(--or)}
.coord-mail a{font:800 30px/1 var(--titre)}
.ft-mail a{color:var(--blanc)}

/* téléphone dans l'en-tête (demande du 10/11/2026) */
.hd-tel{display:flex;align-items:center;gap:8px;color:var(--blanc);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.hd-tel .ico{width:20px;height:20px;color:var(--or)}
.hd-tel:hover{color:var(--or-clair)}
.hd .wrap{gap:28px}
@media (max-width:1180px){.hd-tel span{display:none}}
@media (max-width:980px){.hd-tel{display:none}}

/* pages dédiées au référencement (build/pages_seo.py) */
.voisins{padding-block:72px}
.voisins .tags-presta{margin-top:0}
.partie--nuit .pa-tete .lnk{color:var(--or)}

/* « FONCTIONNE AVEC » : les logiciels compatibles, en toutes lettres */
.compat{padding-block:64px;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.compat .wrap{display:grid;gap:18px;justify-items:center;text-align:center}
.compat-t{font:800 30px/1 var(--titre);color:var(--encre)}
.compat ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px}
.compat li{padding:12px 24px;border-radius:999px;background:var(--brume);font:800 24px/1 var(--titre);color:#1F2264;letter-spacing:.01em}
.compat-n{color:var(--acier);font-size:15px}

/* TÉMOIGNAGE : photo et logo du client, citation, ses chiffres dans Oterys */
.temoin{background:var(--brume)}
.tm{margin:0;display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px 64px;align-items:center;background:var(--blanc);border-radius:32px;padding:56px;box-shadow:0 34px 70px -40px rgba(18,19,43,.45);position:relative;overflow:hidden}
.tm::before{content:"";position:absolute;right:-120px;top:-150px;width:380px;aspect-ratio:1;border-radius:50%;border:64px solid var(--brume)}
.tm>*{position:relative}
.tm-qui{display:grid;gap:26px;justify-items:center}
.tm-photo{width:200px;height:200px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 8px var(--or)}
.tm-logo{width:190px;height:auto}
.tm blockquote{margin:0;display:grid;gap:22px;justify-items:start}
.tm blockquote p{font:600 clamp(20px,2vw,26px)/1.45 var(--corps);color:var(--encre);text-indent:-.45em}
.tm blockquote p::before{content:"« "}.tm blockquote p::after{content:" »"}
.tm footer b{display:block;font:800 26px/1.1 var(--titre);color:var(--encre)}
.tm footer span{color:var(--acier);font-size:15px}
.tm-projet{padding:6px 14px;border-radius:999px;background:#FDECEC;color:#7F1D1D;font-weight:700;font-size:13px}
.tm-chiffres{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--trait);padding-top:36px}
.tm-chiffres b{display:block;font:800 clamp(38px,4vw,56px)/1 var(--titre);color:var(--indigo)}
.tm-chiffres span{color:var(--acier);font-size:15px}
@media (max-width:980px){
  .tm{grid-template-columns:minmax(0,1fr);padding:32px 24px;gap:28px}
  .tm-photo{width:140px;height:140px}
  .tm-chiffres{grid-template-columns:1fr 1fr}
  .compat li{font-size:20px;padding:10px 18px}
}

/* bloc IA : affiche typographique (IA française, Mistral AI) à la place d'un écran */
.ia-aff{background:var(--blanc);border-radius:28px;padding:64px 48px;display:grid;gap:26px;box-shadow:0 0 0 1px var(--trait),0 40px 70px -34px rgba(18,19,43,.5)}
.ia-gros{font:600 clamp(40px,4.8vw,68px)/1.06 var(--corps);letter-spacing:-.035em;color:var(--encre)}
.ia-fr{display:inline-flex;width:.86em;height:.6em;border-radius:.09em;overflow:hidden;vertical-align:.02em;margin:0 .04em;box-shadow:0 0 0 1px var(--trait)}
.ia-fr i{flex:1}
.ia-fr i:nth-child(1){background:#1F2264}.ia-fr i:nth-child(2){background:#FFFFFF}.ia-fr i:nth-child(3){background:#D2343A}
.ia-sous{font-size:18px;color:var(--acier)}
.ia-sous b{color:var(--encre)}
@media (max-width:640px){.ia-aff{padding:40px 26px}}

/* témoignage, version 2 (10/11/2026) : le portrait occupe toute la hauteur à gauche, sans cercle ;
   chiffres en encre soulignés d'or, pas de texte bleu */
.tm{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0;padding:0;align-items:stretch}
.tm::before{display:none}
.tm-portrait{position:relative;min-height:100%}
.tm-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.tm-corps{padding:56px 56px 48px;display:grid;gap:36px;align-content:center}
.tm blockquote{gap:26px}
.tm blockquote p{text-indent:0}
.tm blockquote footer{display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%}
.tm-logo{width:170px;flex:none}
.tm-chiffres{grid-column:auto;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:32px}
.tm-chiffres b{color:var(--encre);font-size:clamp(34px,3.4vw,50px);padding-bottom:8px;margin-bottom:8px;border-bottom:4px solid var(--or);display:inline-block}
.tm-chiffres span{display:block}
@media (max-width:980px){
  .tm{grid-template-columns:minmax(0,1fr)}
  .tm-portrait{min-height:0;height:300px}
  .tm-corps{padding:30px 24px}
  .tm blockquote footer{flex-direction:column;align-items:flex-start;gap:16px}
  .tm-chiffres{grid-template-columns:1fr 1fr}
}
.tm-chiffres b{font-size:clamp(28px,2.7vw,40px);white-space:nowrap}
.tm-chiffres{gap:18px}

/* affiche IA, à la manière de mistral.ai : fond blanc cassé, grande phrase en linéale fine, drapeau en pixels */
.ia-aff{background:#FBFBF7;padding:72px 44px;justify-items:center;text-align:center;box-shadow:0 0 0 1px #E9E9E0,0 40px 70px -34px rgba(18,19,43,.45)}
.ia-gros{font:400 clamp(38px,4.4vw,62px)/1.08 var(--corps);letter-spacing:-.045em;color:#1A1A1A}
.ia-drapeau{display:inline-block;height:.82em;width:auto;vertical-align:-.04em;margin:0 .06em;image-rendering:pixelated}
.ia-sous{font-size:17px}

/* « Oterys en chiffres » : à part du témoignage, au-dessus de la carte */
.chiffres{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,9fr);gap:48px;align-items:end;margin-bottom:64px}
.chiffres h2{font-size:clamp(36px,4.2vw,58px)}
.chiffres-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.chiffres-l b{display:inline-block;font:800 clamp(30px,3vw,46px)/1 var(--titre);color:var(--encre);white-space:nowrap;padding-bottom:10px;margin-bottom:10px;border-bottom:4px solid var(--or)}
.chiffres-l span{display:block;color:var(--acier);font-size:15px}
@media (max-width:980px){.chiffres{grid-template-columns:minmax(0,1fr);gap:28px;margin-bottom:40px}.chiffres-l{grid-template-columns:1fr 1fr}}

/* affiche Mistral : sans fond, sans carte ni aplat derrière (demande du 10/11/2026) */
.ia-aff{background:none;box-shadow:none;padding:24px 0}
.sec .split>.vis:has(.ia-aff)::before,.sec .split>.vis:has(.ia-aff)::after{display:none}

/* « Oterys en chiffres » : titre au-dessus, quatre chiffres sur toute la largeur, sans chevauchement */
.chiffres{grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.chiffres-l{gap:32px}
.chiffres-l b{font-size:clamp(28px,3.1vw,46px)}

/* appel final : le numéro tient sur une ligne, au-dessus des boutons */
.final .tel{white-space:nowrap;order:-1;font-size:clamp(30px,3vw,44px)}

/* liste d'étapes : sur six étapes, deux rangées de trois */
.etapes{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.etapes{grid-template-columns:minmax(0,1fr)}}

/* téléphone : arrondi et bord proportionnels à sa taille (sur mobile, 32 px le rendaient ovale) */
.tel,.vi-compo .tel{border-radius:clamp(9px,3.6vw,32px);border-width:clamp(3px,.9vw,7px)}

/* « Oterys en chiffres » sur téléphone : une colonne, sinon « + de 117 millions » sort de l'écran */
@media (max-width:600px){.chiffres-l{grid-template-columns:minmax(0,1fr);gap:22px}.chiffres-l b{font-size:34px}}