/* Lexoral — V67 : l'accueil, réplique d'OCI (sans l'animation d'ouverture ni les projets). Mêmes mesures qu'OCI,
   en rem fluides (v67/oci.css) : 1/16 rem = 1 px à 1440 px de large. V67 : l'illustration noir et blanc, sans loupe ; la
   page de transcription des services en Courier New ; le déroulement tapé et suivi ; le nom sur le filet. */

/* ---------- 1. l'ouverture : la photo plein écran, le titre au pied, les filets ---------- */
.xh{position:relative;height:100vh;height:100svh;min-height:32rem;padding:0 var(--gx);overflow:hidden;color:#FFFFFF;background:#0D1355}
.xh-img{position:absolute;inset:0;overflow:hidden}
.xh-img img{width:100%;height:100%;object-fit:cover;object-position:34% 40%}
.xh-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(90deg,rgba(7,8,24,.34) 0%,rgba(7,8,24,0) 58%),
  linear-gradient(180deg,rgba(7,8,24,.32) 0%,rgba(7,8,24,.08) 30%,rgba(7,8,24,.3) 56%,rgba(7,8,24,.72) 100%)}
.xh-g{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);height:100%;align-content:end;padding-bottom:calc(var(--s) * 62)}
.xh-t{color:#FFFFFF;font:500 3.25rem/1.2 var(--pp);letter-spacing:0}
.xh-tm{grid-column:1/-1;grid-row:2}
.xh-t1,.xh-t2,.xh-l{display:none}
.xh-tag{grid-column:3/-1;grid-row:1;margin:0 0 calc(var(--s) * 100);color:#FFFFFF;font:400 1.5rem/1 var(--pp);letter-spacing:0}
.xh-tag i{font-style:italic}
/* la phrase passe sur le magnétophone (gris clair) : un halo d'encre derrière elle, pour la lire */
.xh-tag{position:relative;isolation:isolate;justify-self:start;width:max-content;max-width:100%}
.xh-tag::before{content:"";position:absolute;z-index:-1;inset:-1.6em -2.2em;pointer-events:none;
 background:radial-gradient(closest-side,rgba(7,8,24,.5),rgba(7,8,24,.3) 55%,rgba(7,8,24,0))}
@media (min-width:640px){.xh-tm{font-size:7.5rem;line-height:1}}
@media (min-width:1024px){
 .xh-g{grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-areas:". . line1 line2" ". . line1 tagline" "title1 title1 title1 line3" "title2 title2 title2 title2" ". . line4 line5";
  grid-template-rows:1fr auto;padding-bottom:0}
 .xh-tm{display:none}
 .xh-t1,.xh-t2{display:block;font-size:10rem;line-height:.9375;margin-left:calc(var(--s) * 15)}
 .xh-t1{grid-area:title1;margin-top:-.05em}
 .xh-t2{grid-area:title2;margin-bottom:calc(var(--s) * 10)}
 .xh-tag{grid-area:tagline;align-self:end;margin:calc(var(--s) * 16) 0 calc(var(--s) * 60) 0}
 .xh-l{display:block;position:relative;overflow:hidden}
 .xh-l i{position:absolute;left:0;top:0;width:1px;height:100%;background:#FFFFFF;transform-origin:top;animation:xh-in 1.1s cubic-bezier(.6,0,.2,1) both}
 .xh-l1{grid-area:line1}.xh-l2{grid-area:line2}.xh-l3{grid-area:line3;overflow:visible}
 .xh-l4{grid-area:line4;height:calc(var(--s) * 45)}.xh-l5{grid-area:line5;height:calc(var(--s) * 45)}
 /* V67 : les deux filets de la phrase s'en approchent à 16 px (au-dessus, au-dessous) */
 .xh-l3 i{top:calc(var(--s) * -42);bottom:0;height:auto;transform-origin:bottom}
}
@keyframes xh-in{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.xh-l i{animation:none}}

/* ---------- 2. la bande indigo, ses deux notes, l'escalier ---------- */
.xi{position:relative;min-height:100vh;padding:calc(var(--s) * 60) var(--gx) calc(var(--s) * 450);overflow:hidden;background:#1925AA;color:#E8E6E0}
.xi .og{position:relative;z-index:1;align-content:start}
.xi-p{grid-column:1/-1;width:99%;margin:0;font:400 1.625rem/1.05 var(--pp);letter-spacing:0}
.xi-m{grid-column:3/-1;display:flex;flex-direction:column;gap:calc(var(--s) * 50);margin:calc(var(--s) * 68) 0 0;padding:0;list-style:none}
.xi-m li{font:400 .875rem/1.2 var(--gta);letter-spacing:0;text-transform:uppercase}
.xi-stairs{position:absolute;left:0;bottom:-1px;width:100%;padding:0 var(--gx);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);pointer-events:none}
.xi-st{grid-column:1/-1;height:calc(var(--s) * 130);margin-left:calc(var(--s) * -15);background:#E8E6E0;width:calc(var(--k) / 3 * 100% + 1.875rem)}
@media (min-width:1024px){
 .xi-p{grid-column:1/span 10;font-size:2.875rem;line-height:1.04}
 .xi-m{grid-column:7/span 5;display:grid;grid-template-columns:auto auto;column-gap:calc(var(--s) * 65.6);margin-top:calc(var(--s) * 85)}
 .xi-m li{width:17.5rem;font-size:.75rem;line-height:1.33}
 .xi-stairs{grid-template-columns:repeat(12,minmax(0,1fr))}
 .xi-st{grid-column:1/7;height:calc(var(--s) * 140);width:calc(var(--k) / 3 * 100% + .9375rem)}
}

/* ---------- 3. « Services | to scale. » : le titre en deux, le filet, la page de transcription, l'accordéon ---------- */
.xs{position:relative;padding:calc(var(--s) * 50) var(--gx) 0;min-height:100svh}
.xs-g{grid-template-rows:repeat(2,auto);align-content:start}
.xs-line{display:none}
.xs-t{grid-column:1/-1;grid-row:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 var(--gap);color:#1925AA;font:500 4.25rem/1 var(--pp);letter-spacing:0}
.xs-t div:last-child{margin-left:auto}
.xs-left{grid-column:1/-1;display:flex;flex-direction:column;align-items:center}
.xs-cards{display:none}
.xs-acc{grid-column:1/-1;margin-top:calc(var(--s) * 50);padding-bottom:calc(var(--s) * 15)}
.xs-end{grid-column:1/-1;border-bottom:1px solid #1925AA}
.xa{border-top:1px solid #1925AA}
.xa-i{border-bottom:1px solid #1925AA}
.xa-i h3{margin:0;font:inherit}
.xa-b{display:flex;justify-content:space-between;gap:1rem;width:100%;margin:0;padding:calc(var(--s) * 17) calc(var(--s) * 3) calc(var(--s) * 17) 0;border:0;background:none;
 color:#1925AA;text-align:left;cursor:pointer;font:400 1.875rem/1 var(--pp);letter-spacing:0;transition:opacity .25s}
.xa-b:hover{opacity:.65}
.o-plus{display:block;flex:none;width:calc(var(--s) * 18);height:calc(var(--s) * 18);margin-top:calc(var(--s) * 6);transition:transform .45s cubic-bezier(.6,0,.2,1)}
.xa-i.is-open .o-plus{transform:rotate(135deg)}
.xa-p{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s cubic-bezier(.6,0,.2,1)}
.js .xa-i:not(.is-open) .xa-p{grid-template-rows:0fr}
.xa-in{overflow:hidden;min-height:0}
.xa-c{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap)}
.xa-txt{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;padding:0 0 calc(var(--s) * 30);color:#1925AA;font:400 .875rem/1.21 var(--gta);text-transform:uppercase}
.xa-txt p{margin:0}
.xa-txt .o-brk{margin-top:calc(var(--s) * 40)}
/* la page de transcription : papier blanc, Courier New, noir, double interligne, le double filet des numéros de ligne */
.pc{display:flex;flex-direction:column;padding:calc(var(--s) * 26) calc(var(--s) * 30) calc(var(--s) * 20);background:#FFFFFF;color:#000}
.pc-h{display:flex;justify-content:space-between;margin:0 0 calc(var(--s) * 16);color:#000;font:400 .8125rem/1 var(--cour);letter-spacing:.06em}
.pc ol{margin:0;padding:0;list-style:none}
.pc li{display:grid;grid-template-columns:2.4em minmax(0,1fr);color:#000;font:400 .875rem/2 var(--cour)}
.pc-n{margin-right:.8em;padding-right:.55em;border-right:3px double #000;text-align:right}
.pc-t{overflow:hidden;white-space:pre}
.pc-f{margin:calc(var(--s) * 16) 0 0;color:#000;text-align:center;font:400 .6875rem/1 var(--cour);letter-spacing:.14em}
@media (min-width:1024px){
 .xs-line{display:block;grid-column:7/-1;grid-row:1/3;border-left:1px solid #1925AA}
 .xs-t{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:calc(var(--s) * 70);font-size:10rem;line-height:.9375}
 .xs-t div:first-child{grid-column:1/span 6}
 .xs-t div:last-child{grid-column:7/span 6;margin-left:0;padding-left:calc(var(--s) * 15)}
 .xs-left{grid-column:1/span 6;grid-row:2;margin-top:calc(var(--s) * 110);padding:0 calc(var(--s) * 30) calc(var(--s) * 80) 0}
 .xs-cards{display:grid;grid-template-areas:"stack";width:27rem}
 .xs-card{grid-area:stack;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
 .xs-card.is-active{opacity:1;visibility:visible}
 .xs-acc{grid-column:7/-1;grid-row:2;margin-top:calc(var(--s) * 110)}
 .xa-b{padding:calc(var(--s) * 17) calc(var(--s) * 15) calc(var(--s) * 17) calc(var(--s) * 15)}
 .xa-txt{grid-column:4/span 3;padding:calc(var(--s) * 35) 0 calc(var(--s) * 45);font-size:.75rem;line-height:1.33}
 .xa-txt .o-brk{margin-top:calc(var(--s) * 30)}
 .xs-acc .o-btn{width:auto;margin-left:calc(var(--s) * 15)}
}

/* ---------- 4. le déroulement : le titre tapé, la barre de suivi, les quatre fiches qui s'allument ---------- */
.xp{position:relative;z-index:1;overflow:hidden;padding:calc(var(--s) * 18) var(--gx) calc(var(--s) * 60)}
.xp-bg{position:absolute;inset:0;z-index:-1;padding:0 var(--gx);pointer-events:none}
.xp-bg div{display:none}
.xp-g{margin-top:calc(var(--s) * 50);align-items:start}
.xp-l{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-content:start}
.xp-tt{grid-column:1/-1;position:relative}
.xp-tb{position:relative}
.xp-tb i{position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;background:#E8E6E0}
.xp-h{font-size:4.25rem}
.xp-h.xp-armed .xp-ty .xp-k{visibility:hidden}
.xp-h.xp-armed .xp-ty .xp-k.on{visibility:visible}
.xp-caret{display:none}
.xp-h.is-typing .xp-caret{display:inline-block;width:.055em;height:.74em;margin-left:.03em;background:currentColor;vertical-align:baseline;animation:xp-blink .8s steps(1) infinite}
@keyframes xp-blink{50%{opacity:0}}
.xp-trk{display:none}
.xp-st{display:flex;justify-content:space-between;gap:1rem}
.xp-st b{font-weight:400}
.xp-bar{position:relative;height:3px;margin-top:calc(var(--s) * 12);background:rgba(25,37,170,.16)}
.xp-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p, 0) * 100%);background:#1925AA;transition:width .3s cubic-bezier(.2,.7,.2,1)}
.xp-dots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5em;margin:calc(var(--s) * 10) 0 0;padding:0;list-style:none}
.xp-dots li{opacity:.35;transition:opacity .3s}
.xp-dots li.is-on{opacity:1}
.xp-p{grid-column:2/-1;margin-top:calc(var(--s) * 80)}
.xp-p p{margin:0}
.xp-r{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-content:start;row-gap:1.25em;margin:calc(var(--s) * 66) 0 0;padding:0;list-style:none}
.xp-c{grid-column:1/-1;display:block;padding:calc(var(--s) * 10) calc(var(--s) * 16) calc(var(--s) * 20);background:#FFFFFF;color:#1925AA;
 transition:background-color .5s cubic-bezier(.2,.7,.2,1),color .5s}
.xp-ch{display:flex;justify-content:space-between;align-items:center;font:400 1.875rem/1 var(--pp);letter-spacing:0}
.xp-ch h3{margin:0;font:inherit}
.xp-ch span{margin-right:calc(var(--s) * 8)}
.xp-c hr{margin:calc(var(--s) * 8) 0 0;border:0;border-top:1px solid currentColor;opacity:1;transition:opacity .5s}
.xp-c p{margin:calc(var(--s) * 20) 0 0;padding-right:calc(var(--s) * 60);color:inherit;transition:color .5s}
.xp-c hr:last-child{margin-top:calc(var(--s) * 28)}
/* la fiche atteinte s'allume : l'aplat indigo, le texte blanc */
.xp-c.is-on{background:#1925AA;color:#FFFFFF}
.xp-c.is-on hr{opacity:.55}
@media (prefers-reduced-motion:reduce){.xp-c,.xp-c p,.xp-c hr,.xp-bar i{transition:none}}
@media (min-width:1024px){
 .xp{padding-bottom:calc(var(--s) * 160)}
 .xp-bg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
 .xp-bg div{display:block;grid-column:5/span 4;border-left:1px solid #1925AA;border-right:1px solid #1925AA}
 .xp-g{margin-top:calc(var(--s) * 90)}
 .xp-l{grid-column:1/span 6;position:sticky;top:7rem}
 .xp-h{font-size:8.75rem;line-height:.9375}
 .js .xp-trk{display:block;grid-column:2/span 4;margin-top:calc(var(--s) * 56);padding:calc(var(--s) * 14) calc(var(--s) * 16);background:#E8E6E0;border:1px solid #1925AA}
 .xp-p{grid-column:2/span 3;margin-top:calc(var(--s) * 40);font-size:.875rem;line-height:1.21}
 .xp-r{grid-column:7/-1;margin-top:calc(var(--s) * 30)}
 .xp-c{grid-column:1/span 4;padding:calc(var(--s) * 10) calc(var(--s) * 22) calc(var(--s) * 22)}
 .xp-c hr{margin-top:calc(var(--s) * 10)}
 .xp-c p{margin-top:calc(var(--s) * 26);padding-right:calc(var(--s) * 150)}
 .xp-c hr:last-child{margin-top:calc(var(--s) * 46)}
}

/* ---------- 5. les témoignages, sur blanc : le nom en grand au milieu du filet, la citation à droite ---------- */
.xt{padding:calc(var(--s) * 50) var(--gx) calc(var(--s) * 56);background:#FFFFFF}
.xt-g{margin-top:calc(var(--s) * 50)}
.xt-ctl{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:calc(var(--s) * 40)}
.xt-line{display:none}
.xt-names{display:grid;grid-template-areas:"stack";align-items:end}
.xt-name{grid-area:stack;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.xt-name.is-active{opacity:1;visibility:visible;transition-delay:.15s}
.xt-nm{margin:0;color:#1925AA;font:500 1.75rem/1 var(--pp);letter-spacing:0}
.xt-nm a{color:inherit;text-decoration:none}
.xt-nm a:hover,.xt-nm a:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.xt-sub{margin-top:calc(var(--s) * 12)}
.xt-body{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-content:start}
.xt-qs{grid-column:1/-1;display:grid;grid-template-areas:"stack"}
.xt-q{grid-area:stack;margin:0;color:#1925AA;font:400 2rem/1 var(--pp);letter-spacing:0;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.xt-q.is-active{opacity:1;visibility:visible}
.xt-q>p{margin:0}
.xt-more{margin-top:calc(var(--s) * 24)}
.xt-more summary,.xt-tr summary{display:inline-block;cursor:pointer;list-style:none}
.xt-more summary::-webkit-details-marker,.xt-tr summary::-webkit-details-marker{display:none}
.xt-rest p,.xt-tr-in p{margin:calc(var(--s) * 16) 0 0;max-width:42rem;color:#000;font:400 1rem/1.5 var(--pp)}
.xt-cnt{grid-column:1/span 2;display:flex;gap:.2em;margin-top:calc(var(--s) * 40)}
.xt-tr{grid-column:1/-1;margin-top:calc(var(--s) * 30)}
.xt-tr-in [data-i]{display:none}
.xt-tr-in [data-i].is-active{display:block}
.xt-btns{display:flex;gap:calc(var(--s) * 20)}
.xt-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:calc(var(--s) * 57);height:calc(var(--s) * 57);margin:0;padding:0;
 border:1px solid #1925AA;background:#FFFFFF;color:#1925AA;cursor:pointer;transition:color .35s}
.xt-bg{position:absolute;inset:0;background:#1925AA;transform:scaleY(0);transform-origin:bottom center;transition:transform .35s cubic-bezier(.6,0,.2,1)}
.xt-btn .o-ar{position:relative;z-index:1}
.xt-btn[data-d="-1"] .o-ar{transform:rotate(180deg)}
.xt-btn:hover,.xt-btn:focus-visible{color:#FFFFFF}
.xt-btn:hover .xt-bg,.xt-btn:focus-visible .xt-bg{transform:none}
@media (min-width:1024px){
 .xt{padding-bottom:0}
 .xt-g{margin-top:0}
 .xt-body{grid-column:5/-2;grid-row:1;padding:calc(var(--s) * 122) 0 calc(var(--s) * 110)}
 .xt-ctl{grid-column:3/span 2;grid-row:1;position:relative;display:block;margin:0;min-height:calc(var(--s) * 600)}
 .xt-line{display:block;position:absolute;left:0;top:calc(var(--s) * 60);bottom:0;width:1px;background:#1925AA}
 /* le nom, comme le logo du client chez OCI : centré sur le filet, qu'il interrompt */
 .xt-names{position:absolute;left:0;top:calc(var(--s) * 140);width:23rem;padding:calc(var(--s) * 28) 0;transform:translateX(-50%);background:#FFFFFF;justify-items:center;text-align:center}
 .xt-nm{font-size:2.875rem;line-height:1}
 .xt-sub{margin-top:calc(var(--s) * 14)}
 .xt-btns{position:absolute;left:0;top:calc(var(--s) * 420);flex-direction:column;transform:translateX(-50%);padding:calc(var(--s) * 20) 0;background:#FFFFFF}
}

/* ---------- 6. les dernières nouvelles : l'image carrée (en sérigraphie), le damier des billets ---------- */
.xn{padding:calc(var(--s) * 50) var(--gx) calc(var(--s) * 64);overflow:hidden}
.xn-hd{padding-top:calc(var(--s) * 20);border-top:1px solid #1925AA}
.xn-hd h2{margin:0;font:inherit}
.xn-imgs{grid-column:1/-1;display:grid;grid-template-areas:"stack";margin-top:calc(var(--s) * 50);aspect-ratio:1/1;background:#0D1355}
.xn-img{grid-area:stack;overflow:hidden;opacity:0;transition:opacity .5s}
.xn-img.is-active{opacity:1}
.xn-img img{width:100%;height:100%;object-fit:cover}
.xn-posts{grid-column:1/-1;display:flex;gap:0 calc(var(--s) * 10);margin-top:calc(var(--s) * 15);overflow-x:auto;scroll-snap-type:x mandatory}
.xn-post{position:relative;z-index:0;flex:0 0 76.94%;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1/1;padding:calc(var(--s) * 28);
 border-bottom:1px solid #1925AA;color:#1925AA;font:400 1.125rem/1 var(--pp);letter-spacing:0;scroll-snap-align:start;transition:color .35s}
.xn-bg{position:absolute;inset:0;z-index:-1;background:#1925AA;opacity:0;transition:opacity .35s}
.xn-bg span{position:absolute;top:0;right:0;display:grid;place-items:center;width:calc(var(--s) * 85);height:calc(var(--s) * 85);background:#E8E6E0;
 border-left:.5px solid #1925AA;border-bottom:.5px solid #1925AA;color:#1925AA;transform:scale(0);transform-origin:top right;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.xn-bg .o-ar{transform:rotate(-45deg)}
.xn-post:hover,.xn-post:focus-within{color:#E8E6E0}
.xn-post:hover .xn-bg,.xn-post:focus-within .xn-bg{opacity:1}
.xn-post:hover .xn-bg span,.xn-post:focus-within .xn-bg span{transform:none}
.xn-post time{display:block}
.xn-k{display:block;font:400 .625rem/1 var(--gta);text-transform:uppercase}
.xn-post h3{margin:calc(var(--s) * 22) 0 0;max-width:15em;font:400 1.125rem/1 var(--pp);letter-spacing:0}
.xn-post h3 a{color:inherit;text-decoration:none}
.xn-post h3 a::after{content:"";position:absolute;inset:0}
.xn-post h3 a:focus-visible{outline:none}
.xn-post:focus-within{outline:2px solid #1925AA;outline-offset:-2px}
@media (min-width:1024px){
 .xn{padding-bottom:calc(var(--s) * 100)}
 .xn-imgs{grid-column:1/span 6}
 .xn-posts{grid-column:7/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:calc(var(--s) * 50);overflow:visible}
 .xn-post:nth-child(odd)::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(#1925AA,#1925AA) 100% 50%/1px 89% no-repeat}
}