/* Yodriv · site v5 · « Les prestations » (05) : une console où l'on choisit Connect ou Signature et où l'on essaie son nom et sa couleur sur un téléphone.
   Même langage que « Le problème » et « Le parcours » : ouverture de chapitre, console à barre, saphir pour le choix, glacier décoratif. */
.of2{--marque:#2457A7}
.of-console{--marque:#2457A7}
.of-etat{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:99px;background:var(--brand-primarySoft);color:var(--brand-primary);font:600 13px Lexend;white-space:nowrap}
.of-etat i{width:8px;height:8px;border-radius:50%;background:var(--brand-primary)}
.of-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(22px,3.2vw,44px)}

/* Le choix */
.of-onglets{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.of-onglets button{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--border-subtle);border-radius:20px;background:var(--surface-default);text-align:left;cursor:pointer;transition:background var(--duration-normal),box-shadow var(--duration-normal),transform var(--duration-normal) var(--ressort)}
.of-onglets button b{font:800 20px/1.15 Lexend;letter-spacing:-.03em}
.of-onglets button span{font-size:14.5px;line-height:1.35;color:var(--text-secondary)}
.of-onglets button:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.of-onglets button[aria-selected="true"]{background:var(--brand-primary);border-color:var(--brand-primary);box-shadow:var(--shadow-saphir)}
.of-onglets button[aria-selected="true"] b{color:var(--text-inverse)}
.of-onglets button[aria-selected="true"] span{color:var(--brand-primarySoft)}
.of-onglets button:focus-visible,.of-couleurs button:focus-visible,.of-exemples button:focus-visible,.of-champ input:focus-visible,#of-panneau:focus-visible{outline:3px solid var(--focus-light);outline-offset:3px}
/* La personnalisation : un panneau à part, bien visible, avec ses deux étapes */
.of-perso{display:grid;gap:14px;margin:22px 0 4px;padding:20px 22px 22px;border-radius:24px;border:1px solid color-mix(in srgb,var(--brand-primary) 22%,#fff);background:linear-gradient(135deg,var(--brand-primarySoft),var(--brand-accentSoft));box-shadow:0 18px 34px -24px rgb(36 87 167 / .55)}
.of-perso-titre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;font:800 19px/1.2 Lexend;letter-spacing:-.03em;color:var(--text-primary)}
.of-perso-titre svg{color:var(--brand-primary)}
.of-perso-titre span{margin-left:auto;padding:4px 12px;border-radius:99px;background:var(--surface-default);box-shadow:0 0 0 1px var(--border-subtle);font:600 12.5px Lexend;letter-spacing:0;color:var(--brand-primary)}
.of-champ{display:grid;gap:8px;font:600 15px Lexend;color:var(--text-primary)}
.of-champ>span{display:flex;align-items:center;gap:10px}
.of-champ>span b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand-primary);color:#fff;font:700 13px Lexend}
.of-champ input{width:100%;min-height:54px;padding:0 18px;border-radius:14px;border:2px solid var(--brand-primary);background:var(--surface-default);font:600 18px Lexend;color:var(--text-primary)}
.of-champ input::placeholder{color:#8296B2;font-weight:500}
.of-exemples{display:flex;flex-wrap:wrap;gap:8px;margin-top:-6px}
.of-exemples button{padding:6px 14px;border:1px solid var(--border-control);border-radius:99px;background:var(--surface-default);font:500 13.5px Lexend;cursor:pointer;transition:background var(--duration-fast),transform var(--duration-normal) var(--ressort)}
.of-exemples button:hover{background:var(--brand-primarySoft);transform:translateY(-1px)}
.of-couleurs{display:flex;flex-wrap:wrap;gap:12px}
.of-couleurs button{width:50px;height:50px;border-radius:50%;border:0;background:var(--c);cursor:pointer;transition:transform var(--duration-normal) var(--ressort),box-shadow var(--duration-fast)}
.of-couleurs button:hover{transform:scale(1.12) rotate(-10deg)}
.of-couleurs button[aria-checked="true"]{box-shadow:0 0 0 3px var(--brand-primarySoft),0 0 0 6px var(--c)}
.of-liste{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.of-liste[hidden],.of-note[hidden]{display:none}
.of-liste li{position:relative;padding-left:34px;font-size:17px;line-height:1.45;color:var(--text-primary);animation:of-entre var(--duration-reveal) var(--sortie) both}
.of-liste li:nth-child(2){animation-delay:.05s}.of-liste li:nth-child(3){animation-delay:.1s}.of-liste li:nth-child(4){animation-delay:.15s}
.of-liste li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--brand-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.of-bientot{display:inline-block;margin-left:6px;padding:2px 10px;border-radius:99px;border:1px solid var(--brand-accent);background:var(--brand-accentSoft);color:var(--text-primary);font:600 12.5px Lexend;vertical-align:1px}
.of-note{margin:14px 0 0;font-size:14.5px;color:var(--text-secondary)}
.of-scene .petite{margin:18px 0 0;font-size:14px;color:var(--text-secondary)}
@keyframes of-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Le téléphone : la vraie photo (iPhone 18 Pro Max, de face), son écran transparent posé sur l'écran de l'application */
.of-apercu{position:relative;display:grid;justify-items:center;align-content:end;gap:10px;padding-top:58px;align-self:end;margin:0 calc(-1 * clamp(22px,3.2vw,44px)) calc(-1 * clamp(22px,3.2vw,44px)) 0}
.of-console{overflow:hidden}
/* La main : son avant-bras sort par le bord bas de la carte (la bordure arrondie fait le cadre), il ne sort pas de nulle part */
/* Plus grande ; le téléphone (à 35,5 % de la largeur de la photo) reste au centre de sa colonne : on décale la photo de 7,4 % vers la droite, le bras sort et la carte le coupe. */
.of-main{position:relative;width:min(700px,124%);aspect-ratio:1100/1389;transform:translateX(7.4%);--w0:276px;--h0:598px}
.of-main-img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;z-index:9}
.of-ecran-boite{position:absolute;left:0;top:0;width:var(--w0);height:var(--h0);transform-origin:0 0;overflow:hidden;border-radius:38px;background:#fff;will-change:transform}   /* mêmes coins arrondis que l'écran de l'iPhone (≈ 13 % de la largeur) */
.of-statut{position:absolute;z-index:7;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:13px 26px 0;font:700 12.5px Lexend;color:var(--text-primary);transition:color var(--duration-normal)}
.of-console[data-offre="signature"] .of-statut{color:#fff}
.of-statut span{display:flex;align-items:center;gap:3px}
.of-statut i{width:3px;height:9px;border-radius:2px;background:currentColor}.of-statut i:nth-child(2){height:7px}.of-statut i:nth-child(3){height:5px}
.of-statut em{width:20px;height:10px;margin-left:5px;border-radius:3px;background:currentColor}
.of-ecran{position:absolute;inset:0;display:none;--m-soft:color-mix(in srgb,var(--marque) 12%,#fff);--m-fonce:color-mix(in srgb,var(--marque) 70%,#000)}
/* Deux prestations, deux réglages : la couleur de Connect n'est jamais celle de Signature */
.of-ecran-connect{--marque:var(--c-connect,#2457A7)}
.of-ecran-signature{--marque:var(--c-signature,#C2410C)}
.of-console[data-offre="connect"] .of-ecran-connect,.of-console[data-offre="signature"] .of-ecran-signature{display:block;animation:of-entre var(--duration-reveal) var(--sortie) both}
.ic{width:20px;height:20px;flex:none}
.of-initiale{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--marque);color:#fff;font:800 17px Lexend;transition:background var(--duration-normal),transform var(--duration-normal) var(--ressort)}
.of-initiale.pop{transform:scale(1.22) rotate(-8deg)}
.of-vue{padding:50px 14px 84px;animation:of-entre .35s var(--sortie) both}
.of-vue[hidden]{display:none}

/* — Connect : l'application Yodriv, à votre nom — */
.of-ecran-connect{background:linear-gradient(color-mix(in srgb,var(--marque) 17%,#fff),#fff 170px),#fff}
.of-entete{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.of-ecole{display:grid;min-width:0;flex:1}
.of-ecole b{font:800 14px/1.2 Lexend;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-ecole small{font:500 10px Lexend;color:var(--text-secondary)}
.of-cloche{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--border-subtle);color:var(--text-primary)}
.of-cloche .ic{width:17px;height:17px}.of-cloche i{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--marque);box-shadow:0 0 0 2px #fff}
.of-date{margin:0;font:500 10.5px Lexend;color:var(--text-secondary)}
.of-salut{margin:1px 0 11px;font:800 22px/1.1 Lexend;letter-spacing:-.04em}
.of-hero{position:relative;display:grid;gap:2px;margin-bottom:10px;padding:14px 14px 13px;border-radius:22px;background:linear-gradient(150deg,color-mix(in srgb,var(--marque) 88%,#fff),var(--marque) 45%,var(--m-fonce));color:#fff;box-shadow:0 16px 24px -14px var(--marque);transition:background var(--duration-normal)}
.of-hero-l{font:600 10px Lexend;opacity:.85;letter-spacing:.02em}
.of-hero b{font:800 22px/1.15 Lexend;letter-spacing:-.04em}
.of-hero-s{font:500 10.5px Lexend;opacity:.9}
.of-hero img{position:absolute;right:12px;top:12px;border-radius:50%;box-shadow:0 0 0 2px rgb(255 255 255 / .85)}
.of-hero-b{justify-self:start;margin-top:8px;padding:5px 12px;border-radius:99px;background:rgb(255 255 255 / .22);font:700 10px Lexend}
.of-w{display:grid;gap:6px;margin-bottom:9px;padding:11px 12px;border-radius:18px;border:1px solid var(--border-subtle);background:#fff;box-shadow:0 8px 16px -14px rgb(23 43 70 / .5)}
.of-w-libre{border-color:var(--marque);box-shadow:0 12px 22px -14px color-mix(in srgb,var(--marque) 75%,transparent)}
.of-w-onglet{justify-self:start;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;background:var(--m-soft);color:var(--marque);font:700 9.5px Lexend;transition:background var(--duration-normal),color var(--duration-normal)}
.of-w-onglet .pt{width:10px;height:10px}
.of-w-titre{font:800 13.5px/1.25 Lexend;letter-spacing:-.02em}
.of-w-pied{display:flex;align-items:center;justify-content:space-between;gap:8px}
.of-w-pied small,.of-petit{font:500 10px/1.3 Lexend;color:var(--text-secondary)}
.of-bouton{flex:none;padding:6px 11px;border-radius:99px;background:var(--marque);color:#fff;font:700 10.5px Lexend;transition:background var(--duration-normal)}
.of-barre{height:7px;border-radius:99px;background:var(--border-subtle);overflow:hidden}
.of-barre i{display:block;height:100%;border-radius:99px;background:var(--marque);transition:background var(--duration-normal)}
.of-titre-vue{margin:0 0 12px;font:800 20px/1.1 Lexend;letter-spacing:-.03em}
.of-ligne{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:10px;border-radius:16px;border:1px solid var(--border-subtle);background:#fff}
.of-jour{display:grid;place-items:center;flex:none;width:38px;height:42px;border-radius:12px;background:var(--m-soft);color:var(--marque)}
.of-jour small{font:700 8px Lexend;letter-spacing:.06em}.of-jour b{font:800 17px/1 Lexend}
.of-l-txt{display:grid;flex:1;min-width:0}
.of-l-txt b{font:700 12px/1.25 Lexend}.of-l-txt small{font:500 10px/1.3 Lexend;color:var(--text-secondary)}
.of-ok{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--m-soft);color:var(--marque)}.of-ok .ic{width:12px;height:12px}
.of-comp{display:grid;gap:12px;margin-bottom:12px}
.of-comp span{display:grid;gap:5px}.of-comp b{font:600 10.5px Lexend}
.of-comp i{display:block;height:7px;border-radius:99px;background:linear-gradient(90deg,var(--marque) var(--p),var(--border-subtle) var(--p))}
.of-tabs{position:absolute;z-index:4;left:10px;right:10px;bottom:16px;display:flex;justify-content:space-around;padding:8px 4px 7px;border-radius:20px;background:rgb(255 255 255 / .92);box-shadow:0 0 0 1px var(--border-subtle),0 10px 22px -12px rgb(23 43 70 / .35);backdrop-filter:blur(10px)}
.of-tabs button{display:grid;justify-items:center;gap:2px;min-width:52px;padding:2px 4px;border:0;background:none;font:600 8.5px Lexend;color:var(--text-secondary);cursor:pointer;transition:color var(--duration-fast)}
.of-tabs button .ic{width:19px;height:19px}
.of-tabs button.actif{color:var(--marque)}
.of-tabs button:focus-visible{outline:2px solid var(--marque);outline-offset:1px;border-radius:10px}

/* — Signature : un écran d'accueil d'iPhone, et l'application à son nom dedans — */
.of-ecran-signature{background:radial-gradient(120% 70% at 15% 8%,color-mix(in srgb,var(--marque) 62%,#fff),transparent 58%),radial-gradient(90% 60% at 95% 78%,color-mix(in srgb,var(--marque) 50%,#72D9E4),transparent 62%),linear-gradient(170deg,color-mix(in srgb,var(--marque) 55%,#0b1b30),color-mix(in srgb,var(--marque) 30%,#0b1b30));transition:background var(--duration-normal)}
.of-home{position:absolute;inset:0;padding:54px 14px 0;transition:transform .55s var(--sortie),filter .55s var(--sortie)}
[data-etat="app"] .of-home{transform:scale(.9);filter:blur(3px) brightness(.8)}
.of-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:15px 7px}
.of-a{display:grid;justify-items:center;gap:5px;min-width:0}
.of-a small{max-width:100%;font:500 8.8px/1.1 Lexend;color:#fff;text-shadow:0 1px 3px rgb(0 0 0 / .35);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-ai{position:relative;display:grid;place-items:center;width:100%;max-width:54px;aspect-ratio:1;border-radius:23%;border:0;color:#fff;box-shadow:0 4px 8px -4px rgb(0 0 0 / .45)}
.of-ai .ic{width:56%;height:56%}
.g-vert{background:linear-gradient(#5be07a,#1fb04a)}.g-vert2{background:linear-gradient(#52d86b,#1f9d46)}.g-blanc{background:#fff;color:#172B46}
.g-photo{background:conic-gradient(from 20deg,#ff6b6b,#ffd93d,#6bcf63,#4dabf7,#b57bff,#ff6b6b)}.g-gris{background:linear-gradient(#a3abb6,#5f6873)}
.g-bleu{background:linear-gradient(#58b6ff,#1f6bff)}.g-jaune{background:linear-gradient(#ffe066,#ffb703);color:#5b3b00}.g-rose{background:linear-gradient(#ff7ea8,#f0366b)}
.g-noir{background:linear-gradient(#2d333d,#0d1015)}.g-orange{background:linear-gradient(#ffa64d,#ff6b00)}.g-ciel{background:linear-gradient(#8fd3ff,#3f8cff)}
.g-rouge{background:linear-gradient(#ff7a7a,#e0243a)}.g-violet{background:linear-gradient(#c58bff,#7b3df0)}
.of-ai-cal{display:grid;grid-template-rows:auto auto;align-content:center;gap:0}.of-ai-cal em{font:700 6.5px Lexend;font-style:normal;color:#e0243a;letter-spacing:.04em;text-align:center}.of-ai-cal b{font:300 24px/1 Lexend;text-align:center}
.of-ai-propre{cursor:pointer;background:linear-gradient(160deg,color-mix(in srgb,var(--marque) 80%,#fff),var(--marque) 55%,var(--m-fonce));animation:of-pulse 2.4s ease-out infinite;transition:transform var(--duration-normal) var(--ressort),background var(--duration-normal)}
.of-ai-propre:hover{transform:scale(1.08)}
.of-ai-propre .of-initiale{width:auto;height:auto;background:none;border-radius:0;font:800 27px Lexend}
.of-badge{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#ff3b30;color:#fff;font:700 10.5px Lexend;font-style:normal;box-shadow:0 0 0 2px rgb(255 255 255 / .9)}
@keyframes of-pulse{0%{box-shadow:0 4px 8px -4px rgb(0 0 0 / .45),0 0 0 0 color-mix(in srgb,var(--marque) 70%,#fff)}70%,100%{box-shadow:0 4px 8px -4px rgb(0 0 0 / .45),0 0 0 14px transparent}}
.of-pageur{position:absolute;left:0;right:0;bottom:108px;display:flex;justify-content:center;gap:6px;margin:0}
.of-pageur i{width:6px;height:6px;border-radius:50%;background:rgb(255 255 255 / .4)}.of-pageur i.on{background:#fff}
.of-dock{position:absolute;left:10px;right:10px;bottom:28px;display:flex;justify-content:space-around;padding:10px;border-radius:28px;background:rgb(255 255 255 / .24);backdrop-filter:blur(16px)}
.of-dock .of-ai{max-width:50px}

.of-app{position:absolute;z-index:6;left:var(--x,40%);top:var(--y,40%);width:var(--w,54px);height:var(--h,54px);border-radius:23%;overflow:hidden;opacity:0;pointer-events:none;background:linear-gradient(160deg,color-mix(in srgb,var(--marque) 80%,#fff),var(--marque) 55%,var(--m-fonce));transition:left .55s var(--sortie),top .55s var(--sortie),width .55s var(--sortie),height .55s var(--sortie),border-radius .55s var(--sortie),opacity .12s}
[data-etat="app"] .of-app{left:0;top:0;width:100%;height:100%;border-radius:0;opacity:1;pointer-events:auto}
.of-splash{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:12px;color:#fff;text-align:center;padding:0 24px;transition:opacity .4s .05s,visibility .4s}
.of-splash .of-initiale{width:78px;height:78px;border-radius:26px;background:rgb(255 255 255 / .18);font-size:38px;box-shadow:inset 0 0 0 2px rgb(255 255 255 / .45)}
.of-splash b{font:800 17px/1.2 Lexend;letter-spacing:-.02em}
.of-spin{width:20px;height:20px;border-radius:50%;border:2.5px solid rgb(255 255 255 / .35);border-top-color:#fff;animation:fl-tourne .8s linear infinite}
.of-app.pret .of-splash{opacity:0;visibility:hidden}
.of-app-contenu{position:absolute;inset:0;background:color-mix(in srgb,var(--marque) 5%,#fff);opacity:0;transition:opacity .4s}
.of-app.pret .of-app-contenu{opacity:1}
.of-sig-haut{position:relative;margin:-50px -14px 0;padding:56px 18px 50px;border-radius:0 0 34px 34px;color:#fff;overflow:hidden;background:linear-gradient(165deg,color-mix(in srgb,var(--marque) 78%,#fff),var(--marque) 42%,var(--m-fonce))}
.of-sig-haut::before{content:"";position:absolute;right:-40px;top:-30px;width:170px;height:170px;border-radius:50%;background:radial-gradient(closest-side,rgb(255 255 255 / .28),transparent)}
.of-sig-haut::after{content:"";position:absolute;left:-30px;bottom:-60px;width:150px;height:150px;border-radius:50%;background:radial-gradient(closest-side,rgb(255 255 255 / .16),transparent)}
.of-sig-haut>*{position:relative;z-index:1}
.of-sig-logo{display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:50%;background:#fff;box-shadow:0 8px 14px -8px rgb(0 0 0 / .5)}
.of-sig-logo .of-initiale{width:auto;height:auto;background:none;color:var(--marque);font:800 21px Lexend}
.of-sig-haut .of-cloche{position:absolute;right:18px;top:56px;background:rgb(255 255 255 / .2);box-shadow:none;color:#fff}.of-sig-haut .of-cloche i{box-shadow:0 0 0 2px transparent;background:#fff}
.of-sig-haut small{display:block;font:600 9px Lexend;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.of-sig-haut h4{margin:3px 0 4px;font:700 25px/1.08 ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;letter-spacing:-.01em}
.of-sig-haut p{margin:0;font:500 11px Lexend;opacity:.9}
.of-sig-carte{position:relative;display:flex;align-items:center;gap:11px;margin:0 0 9px;padding:11px 12px;border-radius:24px;background:#fff;box-shadow:0 12px 22px -16px rgb(23 43 70 / .55)}
.of-sig-haut+.of-sig-carte{margin-top:-24px}
.of-sig-date{display:grid;place-items:center;flex:none;width:44px;height:48px;border-radius:16px;background:var(--m-soft);color:var(--marque)}
.of-sig-date small{font:700 8px Lexend;letter-spacing:.08em}.of-sig-date b{font:700 20px/1 ui-serif,Georgia,serif}
.of-sig-carte img{border-radius:50%}
.of-sig-libre{display:flex;align-items:center;gap:10px;margin-bottom:11px;padding:10px 10px 10px 14px;border-radius:99px;background:linear-gradient(100deg,var(--marque),var(--m-fonce));color:#fff;box-shadow:0 14px 22px -14px var(--marque)}
.of-sig-libre .ic{width:18px;height:18px}.of-sig-libre span{display:grid;flex:1;min-width:0}.of-sig-libre b{font:700 11.5px Lexend}.of-sig-libre small{font:500 9.5px Lexend;opacity:.9}
.of-sig-libre em{padding:6px 11px;border-radius:99px;background:#fff;color:var(--marque);font:700 9.5px Lexend;font-style:normal}
.of-sig-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.of-sig-actions span{display:grid;justify-items:center;gap:5px;font:600 8.8px Lexend;color:var(--text-primary)}
.of-sig-actions .ic{box-sizing:content-box;width:20px;height:20px;padding:11px;border-radius:18px;background:var(--m-soft);color:var(--marque)}
.of-serif{font-family:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:700;font-size:24px;padding-top:8px}
.of-sig-equipe{display:flex;justify-content:space-around;margin:4px 0 14px}.of-sig-equipe span{display:grid;justify-items:center;gap:4px;font:600 10px Lexend}.of-sig-equipe img{border-radius:50%;box-shadow:0 0 0 3px var(--m-soft)}
.of-sig-ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:15px;background:var(--m-soft);color:var(--marque)}
.of-tabs-sig{left:22px;right:22px;border-radius:99px;padding:6px}
.of-tabs-sig button{grid-auto-flow:column;align-items:center;gap:5px;padding:7px 11px;border-radius:99px;font-size:9.5px}
.of-tabs-sig button.actif{background:var(--marque);color:#fff}.of-tabs-sig button:not(.actif) span{display:none}
.of-indicateur{position:absolute;z-index:9;left:50%;bottom:7px;width:36%;height:5px;margin-left:-18%;padding:0;border:0;border-radius:99px;background:rgb(255 255 255 / .85);pointer-events:none}
.of-indicateur::after{content:"";position:absolute;inset:-14px -8px}
[data-etat="app"]~.of-indicateur,[data-etat="app"] .of-indicateur{pointer-events:auto;background:#172B46}

@media (max-width:980px){.of-scene{grid-template-columns:minmax(0,1fr)}.of-apercu{width:min(560px,100%);justify-self:center}}
@media (max-width:980px){.of-main{width:min(460px,110%)}}
@media (max-width:560px){.of-main{width:150%}}
@media (max-width:560px){.of-onglets{grid-template-columns:1fr}.of-perso{padding:16px}.of-perso-titre span{margin-left:0}.of-liste li{font-size:16px}}
@media (prefers-reduced-motion:reduce){.of-liste li,.of-console .of-ecran,.of-ai-propre,.of-vue,.of-spin,.of-indice::before{animation:none!important}.of-app,.of-home{transition:none!important}.of-onglets button,.of-couleurs button,.of-initiale{transition:none}}

.of-perso-note{margin:0;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--brand-primary) 30%,#fff);font:500 13.5px/1.45 Lexend;color:var(--text-secondary)}
.of-perso-note[hidden]{display:none}
.of-perso-note b{color:var(--text-primary)}

/* Le texte d'aide : au-dessus du téléphone, centré sur lui */
.of-indice{position:absolute;z-index:10;left:35.5%;top:-54px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:9px;margin:0;width:max-content;max-width:94vw;white-space:nowrap;text-align:center;font:600 14px/1.4 Lexend;color:var(--brand-primary)}   /* 35,5 % de la photo = le centre du téléphone */
.of-indice::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--brand-primary);animation:of-pulse-p 1.8s ease-out infinite}
@keyframes of-pulse-p{0%{box-shadow:0 0 0 0 rgb(36 87 167 / .5)}100%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.of-indice::before{animation:none}}
.of-indice-nom{display:inline-block;max-width:15ch;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;font-weight:800}
@media (max-width:560px){.of-indice{font-size:12.5px}}
@media (max-width:640px){.of-exemples button{min-height:40px}}

/* Connect ↔ Signature sans que rien ne bouge (5/11/2026) : les deux versions occupent la même place,
   celle de la plus longue ; celle qui n'est pas choisie est seulement invisible. */
#of-panneau{display:grid}
#of-panneau>.of-liste[data-pour="connect"]{grid-area:1/1/3/2;align-self:start}
#of-panneau>.of-liste[data-pour="signature"]{grid-area:1/1}
#of-panneau>.of-note{grid-area:2/1}
#of-panneau>.of-liste[hidden]{display:grid;visibility:hidden}
#of-panneau>.of-note[hidden]{display:block;visibility:hidden}
.of-perso>.of-perso-note{grid-row:5;grid-column:1}
.of-perso>.of-perso-note[hidden]{display:block;visibility:hidden}
/* Le téléphone ne bouge pas quand on change de prestation : l'écran change en fondu, sur place, sans glisser (5/11/2026). */
@keyframes of-fondu{from{opacity:0}to{opacity:1}}
.of-console[data-offre="connect"] .of-ecran-connect,.of-console[data-offre="signature"] .of-ecran-signature{animation:of-fondu .35s ease both}
.of-vue{animation:of-fondu .3s ease both}
.of-liste li{animation-name:of-fondu}
/* Les cartes Connect / Signature collées en haut du cadre, quelle que soit la prestation choisie (5/11/2026) */
.of-scene{align-items:start}
.of-choix{align-self:start}