/* Almil Agentic — démonstrateur de la carte 01.B (demo.js).
   Deux encres sur papier ; relevés en Silkscreen, texte en Newsreader ; ombres de calage écarlates, angles droits. */

/* ---------- La carte qui s'agrandit ---------- */
#pret-a-lemploi [hidden],.demo__tiroir[hidden]{display:none!important}
.sol__grille{transition:grid-template-columns .55s cubic-bezier(.2,.7,.2,1),column-gap .55s cubic-bezier(.2,.7,.2,1)}
.sol__grille.demo-ouverte{grid-template-columns:0fr 1fr;column-gap:0}
.sol__carte.demo-replie{visibility:hidden;padding-left:0;padding-right:0;border-width:0;overflow:hidden}
.sol__carte.demo-replie::before{display:none}
@media (prefers-reduced-motion:reduce){.sol__grille,.demo__tiroir{transition:none!important}}

#pret-a-lemploi .demo__entete{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
#pret-a-lemploi .demo__entete h3{margin:0 0 0.75rem}
.demo__fermer{font:400 0.6875rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);background:var(--papier);border:1px solid var(--bleu);min-height:2.75rem;padding:0 1rem;cursor:pointer;flex:none}
.demo__fermer:hover{background:var(--bleu);color:var(--papier)}

/* Démonstrateur ouvert : la carte s'aligne sous le menu quand elle s'ouvre */
#pret-a-lemploi{scroll-margin-top:0.5rem}   /* s'ajoute au scroll-padding-top du html (hauteur du menu) */
.sol__grille{overflow-anchor:none}   /* sans quoi le navigateur « rattrape » le repli de la 01.A et la carte ne s'aligne pas */
/* carte ouverte : un en-tête sur une ligne, pour que la démonstration tienne dans l'écran */
.demo-ouvert .produit__tag{display:none}
#pret-a-lemploi.demo-ouvert .demo__entete{align-items:center}
#pret-a-lemploi.demo-ouvert .demo__entete h3{margin:0}
#pret-a-lemploi.demo-ouvert>.label{margin-bottom:0.375rem}

/* ---------- L'aperçu : le parcours des logiciels ---------- */
.demo__apercu{flex:1 1 auto;display:flex;flex-direction:column;margin:0.25rem 0 1.25rem;min-height:13.75rem}
.demo__parcours{position:relative;flex:1 1 auto;min-height:12.5rem;background:var(--papier);border-top:1px dotted var(--bleu);border-bottom:1px dotted var(--bleu)}
.demo__parcours canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.demo__etiquettes{position:absolute;inset:0;pointer-events:none}
.demo__etiquettes span{position:absolute;transform:translate(-50%,0);font:400 0.625rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);background:var(--papier);padding:0.1875rem 0.25rem;white-space:nowrap}
.demo__etiquettes span.actif{color:var(--papier);background:var(--bleu)}
/* sans 3D (téléphone, tablette, pas de WebGL) : la même chaîne, à plat */
.demo__plat{list-style:none;margin:0;padding:1rem 0;display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;justify-content:center;height:100%}
.demo__plat li{font:400 0.625rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);border:1px solid var(--bleu);padding:0.625rem 0.625rem 0.5625rem;background:var(--papier)}
.demo__plat li+li::before{content:"";display:inline-block;width:0.875rem;border-top:1px dotted var(--bleu);margin:0 0.625rem 0 -1.1875rem;vertical-align:0.1875rem}
.demo__plat li.actif{background:var(--bleu);color:var(--papier);box-shadow:0.1875rem 0.1875rem 0 var(--ecarlate)}
.demo-3d .demo__plat{display:none}
.demo__legende{margin:0.625rem 0 0;font:400 0.625rem/1.6 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.demo__legende b{font-weight:400;border:1px solid var(--ecarlate);padding:0.1875rem 0.3125rem 2px;margin-right:0.5rem}

/* ---------- Le tiroir : le démonstrateur ouvert ---------- */
/* Clarté d'abord : le sommaire de tout ce que fait l'agent à gauche, une démonstration à la fois à droite, une phrase par étape. */
.demo__tiroir{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.demo-ouvert .demo__tiroir{grid-template-rows:1fr}
.demo__tiroir>div{min-height:0;overflow:hidden}
.demo-ouvert .demo__apercu,.demo-ouvert .sol__action{display:none}
.demo__corps{padding:0.5rem 0 0.25rem}

/* deux colonnes : le sommaire à gauche, la démonstration à droite ; tout tient dans un écran */
.demo__cadre{display:grid;grid-template-columns:16.25rem minmax(0,1fr);gap:0 3rem;align-items:start;margin-top:0.5rem;padding-top:1.5rem;border-top:1px solid var(--bleu)}
.demo__sommaire{border-right:1px dotted var(--bleu);padding-right:1.5rem;align-self:stretch}
.demo__sommaire h4{margin:1.125rem 0 0.375rem;font:400 0.6875rem/1.4 var(--pixel);letter-spacing:.16em;text-transform:uppercase;color:var(--bleu)}
.demo__sommaire h4:first-child{margin-top:0}
.demo__liste{display:flex;flex-direction:column}
.demo__liste button{display:block;text-align:left;width:100%;background:none;border:0;border-left:0.1875rem solid transparent;padding:0.375rem 0 0.375rem 0.875rem;margin-left:-1px;cursor:pointer;color:var(--bleu)}
.demo__nom{display:block;font:400 1.125rem/1.25 var(--serif)}
.demo__desc{display:none;font:400 0.9375rem/1.4 var(--serif);margin-top:0.25rem}
.demo__liste button:hover .demo__nom{text-decoration:underline;text-underline-offset:0.25rem;text-decoration-thickness:1px}
.demo__liste button[aria-selected="true"]{border-left-color:var(--ecarlate);padding-top:0.625rem;padding-bottom:0.75rem}
.demo__liste button[aria-selected="true"] .demo__nom{text-decoration:none}
.demo__liste button[aria-selected="true"] .demo__desc{display:block}
.demo__liste button:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.demo__sommaire .demo__integration{margin:1.375rem 0 0;padding-top:0.875rem;border-top:1px dotted var(--bleu);font:400 italic 0.9375rem/1.45 var(--serif);color:var(--bleu)}

/* l'en-tête de la démonstration : ce qu'on voit, ce qu'on donne, ce qu'on reçoit */
.demo__titre{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:0.625rem 1.5rem;margin:0 0 1rem}
.demo__titre h4{margin:0;font:300 clamp(1.75rem,2.4vw,2.25rem)/1.1 var(--serif);color:var(--bleu)}
.demo__io{display:flex;align-items:center;gap:0.75rem;margin:0}
.demo__io span{display:flex;flex-direction:column;gap:0.3125rem}
.demo__io i{font:400 0.625rem/1 var(--pixel);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.demo__io b{font:400 1rem/1 var(--serif);color:var(--bleu);border:1px solid var(--bleu);padding:0.5rem 0.625rem;white-space:nowrap}
.demo__io span:last-child b{background:var(--bleu);color:var(--papier);box-shadow:0.1875rem 0.1875rem 0 var(--ecarlate)}
.demo__fleche{width:1.75rem;height:1px;border-top:1px dotted var(--bleu);align-self:flex-end;margin-bottom:1.0625rem;position:relative}
.demo__fleche::after{content:"";position:absolute;right:-1px;top:-0.3125rem;border:0.25rem solid transparent;border-left:0.375rem solid var(--bleu)}

/* la scène */
.demo__scene{position:relative;background:var(--papier);border:1px solid var(--bleu);display:flex;justify-content:center}
.demo__scene::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:
  linear-gradient(var(--ecarlate),var(--ecarlate)) top left/1.125rem 2px no-repeat,linear-gradient(var(--ecarlate),var(--ecarlate)) top left/2px 1.125rem no-repeat,
  linear-gradient(var(--ecarlate),var(--ecarlate)) bottom right/1.125rem 2px no-repeat,linear-gradient(var(--ecarlate),var(--ecarlate)) bottom right/2px 1.125rem no-repeat}
.demo__scene svg{display:block;width:100%;height:auto;max-height:max(17.5rem,calc(100vh - var(--nav-h) - 27.5rem));-webkit-user-select:none;user-select:none}
.demo__scene .t-pix{font-family:var(--pixel);letter-spacing:.1em;text-transform:uppercase}
.demo__scene .t-ser{font-family:var(--serif)}
.demo__scene .halo{paint-order:stroke;stroke:var(--papier);stroke-width:0.25rem;stroke-linejoin:round}
.demo__scene .glisse{cursor:grab;touch-action:none}
.demo__scene .glisse:active{cursor:grabbing}

/* le récit : une phrase, un bouton */
.demo__recit{display:flex;flex-direction:column;align-items:flex-start;gap:0.875rem;padding:1rem 0 0.25rem}   /* comme un sous-titre : la phrase, puis ce que vous pouvez faire */
.demo__suivi{display:flex;align-items:center;gap:0.875rem;margin:0 0 0.625rem}
.demo__suivi .demo__progres{margin:0}
.demo__compte{white-space:nowrap;font:400 0.625rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.demo__progres{display:flex;gap:0.375rem;margin:0 0 0.875rem}
.demo__progres i{display:block;position:relative;width:2.25rem;height:0.1875rem;background:var(--papier);border:1px solid var(--bleu);--u:0}
.demo__progres i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--u));background:var(--bleu)}
.demo__boutons .demo__pause{min-height:2.75rem;padding:0 1rem;background:var(--papier);color:var(--bleu);border:1px solid var(--bleu);box-shadow:none;font:400 0.6875rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase}
.demo__boutons .demo__pause:hover{transform:none;box-shadow:none;background:var(--bleu);color:var(--papier)}
.demo__phrase{margin:0;max-width:52ch;font:300 clamp(1.3125rem,1.7vw,1.625rem)/1.3 var(--serif);color:var(--bleu);text-wrap:pretty;min-height:2.6em}
.demo__texte{width:100%}
.demo__correction{display:flex;flex-wrap:wrap;gap:0.75rem 1rem;margin-top:0.75rem}
.demo__champ{display:flex;flex-direction:column;gap:0.375rem;flex:1 1 13.75rem;max-width:20rem}
.demo__correction label{font:400 0.625rem/1.4 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.demo__correction input{font:400 1.0625rem/1.3 var(--serif);color:var(--bleu);background:var(--papier);border:1px solid var(--bleu);padding:0.5rem 0.625rem;min-height:2.75rem;box-sizing:border-box;width:100%}
.demo__correction input:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.demo__boutons{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:flex-start;min-height:3rem}
.demo__boutons .btn,.demo__boutons .btn-ambre{cursor:pointer;font:400 0.75rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;min-height:3rem}

button.btn{cursor:pointer}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Tablette et téléphone : pas de démonstrateur, la carte reste une carte ---------- */
@media not all and (min-width:1021px) and (hover:hover) and (pointer:fine){
  #demo-ouvrir,.demo__tiroir,.demo__legende b{display:none!important}
}
@media (max-width:760px){
  .sol__grille.demo-ouverte{grid-template-columns:1fr}
  .demo__scene{overflow-x:auto;justify-content:flex-start}
  .demo__scene svg{min-width:37.5rem;max-height:none}
  .demo__boutons{justify-content:flex-start}
}
html.gris .demo__parcours canvas{display:none}
html.gris .demo__plat{display:flex!important}

/* ---------- Habillage du démonstrateur ouvert ---------- */
/* la 01.A repliée ne donne plus sa hauteur à la rangée (sinon 500 px vides sous le démonstrateur) */
.sol__grille.demo-ouverte{align-items:start}
.sol__carte.demo-replie{height:0;min-height:0;padding-top:0;padding-bottom:0}
/* la table à dessin : la trame légère (banque graphique, 10-textures) sous l'animation */
#pret-a-lemploi .demo__scene{background:var(--papier) url(img/trame-16-claire.svg) 0 0/8rem 8rem repeat}
/* la carte marine : les isobathes papier dans les marges, autour de la carte (banque graphique, 13-bichromie) */
#solutions{overflow-x:clip}
.sol__grille{position:relative;isolation:isolate}
.sol__grille.demo-ouverte::before{content:"";position:absolute;z-index:-1;top:0;bottom:-5rem;left:calc(50% - 50vw);right:calc(50% - 50vw);background:url(img/isobathes-papier.png) center top/max(90rem,100vw) auto repeat-y;pointer-events:none}
html.gris .sol__grille.demo-ouverte::before{display:none}

/* ================= Section 01, version par profil (octobre 2026) =================
   Deux cartes construites pareil : profil en étiquette, nom de l'offre en grand, une phrase,
   trois lignes illustrées, « avec votre accord », un bouton. Octavec est maintenant à gauche. */
.sol__head--v3{display:block;margin-bottom:1.375rem}
.sol__head--v3 .label{margin-bottom:0.875rem}
.sol__head--v3 h2{margin-bottom:0.625rem}
.sol__chapeau{margin:0;font-size:1.25rem;line-height:1.45;color:var(--bleu)}
#solutions strong{font-weight:600}
.sol__carte h3.sol__nom{font-size:clamp(2.75rem,3.8vw,3.75rem);font-weight:500;line-height:1;letter-spacing:-.01em;margin:0 0 0.75rem}
#pret-a-lemploi .demo__entete h3.sol__nom{margin:0 0 0.75rem}
.sol__offre{margin:0 0 0.875rem!important;font-size:1.0625rem;line-height:1.5}
.sol__offre em{font-style:italic}
.sol__lignes{list-style:none;margin:0 0 0.875rem;padding:0;border-top:1px solid var(--bleu)}
.sol__lignes li{display:grid;grid-template-columns:5.25rem 5.75rem 1fr;gap:1rem;align-items:center;padding:0.5rem 0;border-bottom:1px solid var(--ciel)}
#sur-mesure .sol__lignes li{grid-template-columns:5.25rem 8.25rem 1fr}
.sol__lignes b{font-weight:600;font-size:1.25rem;line-height:1.1}
.sol__lignes small{font-size:0.96875rem;line-height:1.45}
/* vignettes : scènes de la démo (Octavec) et blocs en volume (sur mesure, animés par relief3d.js) */
.ligne__vignette{display:block;width:5rem;height:3.75rem;overflow:hidden;border:1px solid var(--bleu);background:var(--papier);box-shadow:0.1875rem 0.1875rem 0 var(--ecarlate)}
.ligne__vignette svg{display:block;width:100%;height:100%}
.sol__lignes .etape__vignette,.sol__lignes .etape__vignette.a3d{grid-column:auto;grid-row:auto;width:5.25rem;height:3.9375rem;aspect-ratio:4/3;margin:0;border:0;padding:0;object-fit:contain}
.sol__fait{display:flex;gap:0.75rem;align-items:center;margin:0 0 1.25rem!important;font-size:0.96875rem!important;line-height:1.4!important}
.sol__fait .valide__mark{width:1.125rem;height:1.125rem}
.sol__fait .valide__mark::after{left:0.3125rem;top:1px}
/* « Demander une démo » seulement quand le démonstrateur n'est pas proposé (le bouton est alors masqué) */
.sol__demo-tel{display:none}
#demo-ouvrir[hidden]+.sol__demo-tel{display:inline-block}
/* démonstrateur ouvert : Octavec (à gauche) prend toute la largeur, la 01.B se replie à droite */
.sol__grille.demo-ouverte{grid-template-columns:1fr 0fr}
.demo-ouvert .sol__offre,.demo-ouvert .sol__lignes,.demo-ouvert .sol__fait{display:none}
#pret-a-lemploi.demo-ouvert .demo__entete h3.sol__nom{margin:0;font-size:2.5rem}
@media (max-width:760px){
  .sol__lignes li,#sur-mesure .sol__lignes li{grid-template-columns:4.5rem 1fr;column-gap:0.875rem;row-gap:2px;align-items:start}
  .sol__lignes .ligne__vignette,.sol__lignes .etape__vignette,.sol__lignes .etape__vignette.a3d{grid-row:1/3;width:4.5rem;height:3.375rem}
  .sol__lignes small{grid-column:2}
}

/* ================= Démonstrateur en trois vues (octobre 2026) =================
   Vue d'ensemble · Suivre un projet (l'application Octavec et son panneau ArchiCAD) · Toutes les fonctions. */
.demo__vues{display:none}
#pret-a-lemploi.demo-ouvert .demo__vues{display:flex;margin-left:auto;margin-right:1rem}
.demo__vues button{font:400 0.6875rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);background:var(--papier);border:1px solid var(--bleu);min-height:2.75rem;padding:0 0.875rem;margin-left:-1px;cursor:pointer}
.demo__vues button[aria-selected="true"]{background:var(--bleu);color:var(--papier)}
.demo__vues button:hover:not([aria-selected="true"]){text-decoration:underline;text-underline-offset:0.25rem}
.demo__vue{padding-top:1.125rem;border-top:1px solid var(--bleu);margin-top:0.5rem}
.demo__vue .demo__cadre{border-top:0;margin-top:0;padding-top:0.375rem}

/* ---------- Vue d'ensemble ---------- */
.ens__kicker{margin:0 0 0.5rem;font:400 0.75rem/1 var(--pixel);letter-spacing:.16em;text-transform:uppercase;color:var(--bleu)}
.ens__titre{margin:0 0 1.25rem;font:300 clamp(1.75rem,2.5vw,2.25rem)/1.12 var(--serif);color:var(--bleu)}
.ens__titre em{font-style:italic}
.ens__schema{display:grid;grid-template-columns:1fr 2.125rem 1.25fr 2.125rem .9fr 2.125rem 1fr;align-items:stretch;margin:0 0 1.375rem}
.ens__bloc{border:1px solid var(--bleu);padding:0.875rem 1rem 0.75rem;background:var(--papier)}
.ens__bloc h5{margin:0 0 0.625rem;font:600 1.375rem/1.15 var(--serif);color:var(--bleu)}
.ens__bloc ul{list-style:none;margin:0;padding:0}
.ens__bloc li{font:400 0.9375rem/1.3 var(--serif);color:var(--bleu);padding:0.25rem 0;border-top:1px dotted var(--bleu)}
.ens__bloc p{margin:0;font:italic 400 0.9375rem/1.35 var(--serif);color:var(--bleu)}
.ens__n{display:inline-block;margin:0 0 0.75rem;font:400 0.6875rem/1 var(--pixel);letter-spacing:.14em;color:var(--bleu);border:1px solid var(--ecarlate);padding:0.3125rem 0.375rem 0.25rem}
.ens__bloc--octavec{background:var(--bleu);box-shadow:0.3125rem 0.3125rem 0 var(--ecarlate)}
.ens__bloc--octavec h5,.ens__bloc--octavec .ens__n{color:var(--papier)}
.ens__bloc--octavec .ens__n{border-color:var(--papier)}
.ens__surface{display:flex;gap:0.75rem;align-items:center;border-top:1px dotted var(--papier);padding:0.625rem 0}
.ens__surface i{flex:none;width:2.875rem;height:2.125rem;border:1.5px solid var(--papier);position:relative}
.ens__surface i::before{content:"";position:absolute;left:0;right:0;top:0.375rem;border-top:1.5px solid var(--papier)}
.ens__surface i.ens__panneau::after{content:"";position:absolute;right:0.375rem;top:0.375rem;bottom:0;width:0.625rem;border-left:1.5px solid var(--papier);background:repeating-linear-gradient(90deg,transparent 0 2px,var(--papier) 2px 0.1875rem)}
.ens__surface b{display:block;font:600 1rem/1.2 var(--serif);color:var(--papier)}
.ens__surface small{display:block;margin-top:0.1875rem;font:400 0.84375rem/1.3 var(--serif);color:var(--papier)}
.ens__bloc--valide{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.ens__coche{display:block;width:2.5rem;height:2.5rem;border:1.5px solid var(--bleu);position:relative;margin:0 0 0.75rem}
.ens__coche::after{content:"";position:absolute;left:0.8125rem;top:0.3125rem;width:0.625rem;height:1.25rem;border:solid var(--bleu);border-width:0 0.1875rem 0.1875rem 0;transform:rotate(45deg)}
.ens__fleche{display:flex;align-items:center;justify-content:center}
.ens__fleche::before{content:"";width:1.375rem;border-top:1.5px dotted var(--bleu)}
.ens__fleche::after{content:"";border:0.3125rem solid transparent;border-left:0.4375rem solid var(--bleu);margin-left:-1px}
.ens__chiffres{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bleu);border-bottom:1px solid var(--bleu);margin:0 0 1.5rem}
.ens__chiffres div{padding:0.875rem 1.375rem 0.875rem 0}
.ens__chiffres div+div{padding-left:1.375rem;border-left:1px dotted var(--bleu)}
.ens__chiffres b{display:block;margin:0 0 0.375rem;font:500 1.875rem/1.05 var(--serif);color:var(--bleu)}
.ens__chiffres span{display:block;font:400 1rem/1.35 var(--serif);color:var(--bleu)}
.ens__actions{display:flex;gap:1.75rem;align-items:center}
.ens__actions .btn-ambre{cursor:pointer;min-height:3rem}
.ens__actions .lien{background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer}

/* ---------- Suivre un projet : la fenêtre ---------- */
.fenetre{border:1.5px solid var(--bleu);box-shadow:0.375rem 0.375rem 0 var(--ecarlate);background:var(--papier)}
.fenetre__barre{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--bleu);padding:0.5625rem 0.875rem;font:400 0.65625rem/1.3 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--papier)}
.fenetre__corps{display:grid;grid-template-columns:14.75rem minmax(0,1fr) 13.75rem}
.fenetre__corps>*{min-width:0}
.projet__gauche,.projet__dossier{padding:1rem}
.projet__gauche{border-right:1px solid var(--bleu)}
.projet__dossier{border-left:1px solid var(--bleu)}
.projet__centre{padding:0.875rem 1.125rem 0.625rem}
.projet__gauche h5,.projet__dossier h5{margin:0 0 0.625rem;font:400 0.6875rem/1.4 var(--pixel);letter-spacing:.16em;text-transform:uppercase;color:var(--bleu)}
.projet__outils,.projet__panneau{display:none}
/* la frise du projet */
.frise{list-style:none;margin:0 0 0.875rem;padding:0;position:relative}
.frise::before{content:"";position:absolute;left:0.4375rem;top:0.75rem;bottom:0.75rem;border-left:1.5px solid var(--bleu)}
.frise li{position:relative}
.frise button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:0.25rem 0 0.25rem 1.625rem;font:400 0.9375rem/1.2 var(--serif);color:var(--bleu);position:relative}
.frise button::before{content:"";position:absolute;left:1px;top:0.4375rem;width:0.75rem;height:0.75rem;border:1.5px solid var(--bleu);background:var(--papier)}
.frise li.fait button::before{background:var(--bleu)}
.frise li.fait button::after{content:"";position:absolute;left:0.34375rem;top:0.53125rem;width:0.1875rem;height:0.375rem;border:solid var(--papier);border-width:0 2px 2px 0;transform:rotate(45deg)}
.frise li.encours button{font-weight:600}
.frise li.encours button::before{border-color:var(--ecarlate);background:var(--ecarlate);box-shadow:0 0 0 0.1875rem var(--papier),0 0 0 0.28125rem var(--ecarlate)}
.frise li.avenir button{opacity:.5}
.frise button:hover{text-decoration:underline;text-underline-offset:0.1875rem}
.frise small{display:block;margin-top:2px;font:400 0.59375rem/1.4 var(--pixel);letter-spacing:.12em;text-transform:uppercase;color:var(--bleu)}
.frise li.encours small{color:var(--ecarlate)}
/* sans Octavec, avec Octavec */
.avap{border:1px solid var(--bleu);margin:0 0 0.625rem}
.avap>div{padding:0.5rem 0.625rem}
.avap>div+div{background:var(--bleu)}
.avap span{font:400 0.59375rem/1.4 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.avap>div+div span,.avap>div+div p{color:var(--papier)}
.avap p{margin:0.1875rem 0 0;font:400 0.90625rem/1.3 var(--serif);color:var(--bleu)}
.avap strong{font-weight:600}
.projet__total{margin:0;font:400 0.84375rem/1.35 var(--serif);color:var(--bleu)}
.projet__total strong{font-weight:600}
/* le dossier du projet */
.fichiers{list-style:none;margin:0;padding:0}
.fichiers li{border-bottom:1px dotted var(--bleu)}
.fichiers button{display:grid;grid-template-columns:2.625rem 1fr;gap:0.625rem;align-items:center;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:0.4375rem 0.25rem}
.fichiers .ext{font:400 0.5625rem/1 var(--pixel);letter-spacing:.06em;color:var(--bleu);border:1px solid var(--bleu);text-align:center;padding:0.375rem 0 0.3125rem}
.fichiers b{display:block;font:400 0.9375rem/1.2 var(--serif);color:var(--bleu)}
.fichiers small{display:block;font:400 0.59375rem/1.5 var(--pixel);letter-spacing:.12em;text-transform:uppercase;color:var(--bleu)}
.fichiers button:hover b{text-decoration:underline;text-underline-offset:0.1875rem}
.fichiers li.avenir{opacity:.4}
.fichiers li.attente button{outline:1.5px dashed var(--ecarlate);outline-offset:-1px}
.fichiers li.attente .ext{background:var(--bleu);color:var(--papier)}
.fichiers li.attente small{color:var(--ecarlate)}
.fichiers li.maj .ext{background:var(--bleu);color:var(--papier)}
.fichiers li.maj button{animation:almil-maj 1.6s ease-out 1}
@keyframes almil-maj{0%{background:var(--bleu)}20%{background:color-mix(in srgb,var(--bleu) 18%,var(--papier))}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.fichiers li.maj button{animation:none}}
.projet__legende{margin:0.875rem 0 0;font:italic 400 0.9375rem/1.4 var(--serif);color:var(--bleu)}
/* le lecteur dans la fenêtre : titre plus petit, scène et récit serrés */
.projet__centre .demo__titre{margin-bottom:0.5rem}
.projet__centre .demo__io{display:none}   /* le dossier, à droite, montre déjà ce qui entre et ce qui sort */
.projet__centre .demo__titre h4{font-size:1.5rem}
.projet__centre .demo__io b{font-size:0.875rem;padding:0.4375rem 0.5625rem}
.projet__centre .demo__recit{padding-top:0.625rem;gap:0.625rem}
.projet__centre .demo__phrase{font-size:1.3125rem;min-height:2.6em}
.projet__centre .demo__scene svg{max-height:max(16.25rem,calc(100vh - var(--nav-h) - 29.375rem))}

/* ---------- Suivre un projet : dans ArchiCAD, avec le panneau Octavec ---------- */
.fenetre--archicad .fenetre__corps{grid-template-columns:2.75rem minmax(0,1fr) 18.75rem}
.fenetre--archicad .projet__gauche,.fenetre--archicad .projet__dossier{display:none}
.fenetre--archicad .projet__outils{display:flex;flex-direction:column;gap:0.625rem;padding:0.75rem 0.5625rem;border-right:1px solid var(--bleu);background:repeating-linear-gradient(45deg,transparent 0 0.3125rem,color-mix(in srgb,var(--bleu) 8%,transparent) 0.3125rem 0.375rem)}
.projet__outils i{display:block;width:1.5rem;height:1.5rem;border:1px solid var(--bleu);background:var(--papier)}
.fenetre--archicad .projet__centre{padding:0.875rem;display:flex;align-items:center;background:var(--papier) radial-gradient(var(--bleu) 1px,transparent 1.2px) 0 0/1.375rem 1.375rem}
.fenetre--archicad .projet__centre .demo__histoire{width:100%}
.fenetre--archicad .projet__panneau{display:flex;flex-direction:column;border-left:2px solid var(--bleu)}
.panneau__tete{display:flex;justify-content:space-between;align-items:center;background:var(--bleu);padding:0.6875rem 1rem}
.panneau__tete b{font:500 1.375rem/1 var(--serif);color:var(--papier)}
.panneau__tete span{font:400 0.59375rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--papier)}
.panneau__corps{padding:0.875rem 1rem;display:flex;flex-direction:column;flex:1}
.panneau__corps .demo__titre{display:block;margin:0 0 0.375rem}
.panneau__corps .demo__titre h4{font:600 1.3125rem/1.2 var(--serif);margin:0 0 0.625rem}
.panneau__corps .demo__io{gap:0.5rem}
.panneau__corps .demo__io b{font-size:0.8125rem;padding:0.375rem 0.5rem;white-space:normal}
.panneau__corps .demo__recit{padding:0.5rem 0 0;gap:0.625rem}
.panneau__corps .demo__suivi{flex-wrap:wrap;row-gap:0.375rem}
.panneau__corps .demo__phrase{font-size:1.125rem;line-height:1.3;min-height:3.9em}
.panneau__corps .demo__boutons{flex-direction:column;align-items:stretch;width:100%}
.panneau__corps .demo__boutons>*{justify-content:center}
.panneau__corps .avap{margin:0.75rem 0 0}

/* démonstrateur ouvert : pas d'ancrage du défilement (sinon la page suit la section suivante quand la carte change de hauteur) */
html.demo-actif{overflow-anchor:none}
/* ni centrage vertical de la section : la carte ouverte reste calée en haut, quelle que soit sa hauteur */
html.demo-actif .section--solutions{align-items:flex-start}

/* ================= « En bref » : la boucle en cinq temps (octobre 2026) =================
   Une fenêtre, un seul élément animé à la fois, légende de 8 mots, pastille d'état de 2 mots.
   Bleu : ce que propose Octavec. Écarlate : votre décision. */
#pret-a-lemploi[data-vue="ensemble"] .demo__vues{display:none!important}
.demo__vue[data-vue="ensemble"]{padding-top:1.25rem}
.bcl{margin:0 0 0.375rem;--d:3600ms}
.bcl__fenetre{position:relative;border:1.5px solid var(--bleu);box-shadow:0.375rem 0.375rem 0 var(--ecarlate);background:var(--papier)}
.bcl__barre{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--bleu);padding:0.4375rem 0.4375rem 0.4375rem 0.875rem;font:400 0.65625rem/1.3 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--papier)}
.bcl__pastille{background:var(--papier);color:var(--bleu);padding:0.375rem 0.625rem 0.3125rem;min-width:6rem;text-align:center;transition:background .2s,color .2s}
.bcl--porte .bcl__pastille{background:var(--ecarlate);color:var(--papier)}
.bcl__corps{position:relative;height:20rem;overflow:hidden}
/* ce qui apparaît à chaque temps : .d1 à .d5, visibles dès que la fenêtre a la classe .a1 à .a5 */
.bcl__fenetre .d1,.bcl__fenetre .d2,.bcl__fenetre .d3,.bcl__fenetre .d4,.bcl__fenetre .d5{opacity:0;transform:translateY(0.5rem);transition:opacity .3s ease,transform .3s ease}
.bcl__fenetre.a1 .d1,.bcl__fenetre.a2 .d2,.bcl__fenetre.a3 .d3,.bcl__fenetre.a4 .d4,.bcl__fenetre.a5 .d5{opacity:1;transform:none}
.bcl--sans,.bcl--sans *{transition:none!important;animation:none!important}

/* -- dans l'application : le catalogue, la proposition, votre fichier -- */
.bcl__corps--app{display:grid;grid-template-columns:minmax(0,1fr) 3.25rem minmax(0,1.3fr) 3.25rem 11rem;align-items:center;padding:0 1.375rem}
.bcl__doc{position:relative;height:16.375rem}
.bcl__fenetre .bcl__doc.d1{transform:translateX(-1.75rem)}
.bcl__fenetre.a1 .bcl__doc.d1{transform:none}
.doc__feuille{position:absolute;inset:0 0.75rem 0 0;border:1px solid var(--bleu);background:var(--papier);padding:0.75rem 0.875rem;overflow:hidden}
.doc__feuille--pdf{transform:translate(0.625rem,-0.5rem) rotate(2deg);border-style:dashed}
.doc__url{margin:0 0 0.5625rem;font:400 0.5625rem/1 var(--pixel);letter-spacing:.08em;color:var(--bleu);border:1px solid var(--bleu);padding:0.3125rem 0.375rem 0.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc__titre{margin:0 0 0.625rem;font:400 1.1875rem/1 var(--serif);color:var(--bleu)}
.doc__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:0.625rem 0.5625rem}
.produit{min-width:0;outline:1.5px dashed transparent;outline-offset:0.1875rem;transition:outline-color .2s}
.produit__img{display:block;height:3.375rem;border:1px solid var(--bleu);background:repeating-linear-gradient(45deg,var(--bleu) 0 1.5px,transparent 1.5px 0.375rem)}
.produit__img--1{background:repeating-linear-gradient(0deg,var(--bleu) 0 1.5px,transparent 1.5px 0.375rem)}
.produit__img--2{background:radial-gradient(var(--bleu) 1.3px,transparent 1.5px) 0 0/0.375rem 0.375rem}
.produit b{display:block;margin-top:0.3125rem;font:400 0.78125rem/1.15 var(--serif);color:var(--bleu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.produit small{font:400 0.53125rem/1.4 var(--pixel);letter-spacing:.08em;color:var(--bleu)}
.bcl__fenetre.a2 .produit{outline-color:var(--bleu);transition-delay:calc(var(--i) * 230ms + 250ms)}
.doc__scan{position:absolute;left:0;right:0;top:-2.5rem;height:2.5rem;background:linear-gradient(transparent,color-mix(in srgb,var(--bleu) 20%,transparent) 80%,var(--bleu) 80%,var(--bleu) 84%,transparent 84%);pointer-events:none;opacity:0}
.bcl__fenetre.a2:not(.a3) .doc__scan{opacity:1;animation:bcl-scan 2s ease-in-out .15s 1 forwards}
@keyframes bcl-scan{from{top:-2.5rem}to{top:100%}}
.bcl__fleche{display:flex;align-items:center;justify-content:center}
.bcl__fleche::before{content:"";width:1.5rem;border-top:1.5px dotted var(--bleu)}
.bcl__fleche::after{content:"";border:0.3125rem solid transparent;border-left:0.4375rem solid var(--bleu);margin-left:-1px}
.bcl__prop{position:relative;border:1.5px dashed var(--bleu);padding:0.75rem 0.875rem;background:var(--papier)}
.bcl__fenetre.a5 .bcl__prop{border-style:solid}
.prop__tete{display:flex;justify-content:space-between;margin:0 0 0.5rem;font:400 0.625rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.prop__table{width:100%;border-collapse:collapse}
.prop__table td{padding:0.375rem 0.375rem 0.375rem 0;border-top:1px dashed var(--bleu);font:400 0.84375rem/1.2 var(--serif);color:var(--bleu);white-space:nowrap}
.prop__table td.px{font:400 0.59375rem/1 var(--pixel);letter-spacing:.08em}
.bcl__fenetre.a5 .prop__table td{border-top-style:solid}
.prop__table .ligne{opacity:0;transition:opacity .25s ease}
.bcl__fenetre.a3 .prop__table .ligne{opacity:1;transition-delay:calc(var(--i) * 200ms + 250ms)}
.prop__plus{margin:0.375rem 0 0;font:italic 400 0.8125rem/1.2 var(--serif);color:var(--bleu)}
.bcl__actions{display:flex;gap:0.875rem;align-items:center;margin-top:0.75rem}
.bcl__valider{font:400 0.6875rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;background:var(--ecarlate);color:var(--papier);border:0;padding:0.8125rem 1.25rem;cursor:pointer;box-shadow:0.1875rem 0.1875rem 0 var(--bleu)}
.bcl__fenetre.bcl--porte .bcl__valider{animation:bcl-appel 1.3s ease-in-out infinite}
@keyframes bcl-appel{0%,100%{outline:0 solid transparent}50%{outline:0.25rem solid color-mix(in srgb,var(--ecarlate) 30%,transparent)}}
.bcl__corriger{background:none;border:0;border-bottom:1px solid currentColor;padding:0.25rem 0;cursor:pointer;font:400 0.625rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.bcl__fenetre.a5 .bcl__actions{opacity:0;pointer-events:none}
/* le tampon gravé « Validé » : votre décision, en écarlate */
.bcl__fenetre .bcl__tampon{position:absolute;right:0.875rem;bottom:0.875rem;font:400 1.0625rem/1 var(--pixel);letter-spacing:.18em;text-transform:uppercase;color:var(--ecarlate);border:0.1875rem double var(--ecarlate);padding:0.5625rem 0.75rem 0.4375rem;background:var(--papier);opacity:0;transform:rotate(-9deg) scale(1.6);transition:opacity .2s ease,transform .35s cubic-bezier(.2,1.4,.4,1)}
.bcl__fenetre.a5 .bcl__tampon{opacity:1;transform:rotate(-9deg) scale(1)}
/* votre fichier */
.bcl__fichier{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.5rem}
.fichier__icone{position:relative;display:block;width:3.875rem;height:4.875rem;border:1.5px solid var(--bleu);background:var(--papier);clip-path:polygon(0 0,72% 0,100% 22%,100% 100%,0 100%)}
.fichier__icone::before{content:"";position:absolute;right:-1px;top:-1px;width:1.125rem;height:1.125rem;border-left:1.5px solid var(--bleu);border-bottom:1.5px solid var(--bleu)}
.fichier__icone span{position:absolute;left:0.375rem;right:0.375rem;bottom:0.5rem;font:400 0.5625rem/1 var(--pixel);letter-spacing:.06em;color:var(--papier);background:var(--bleu);padding:0.25rem 0 0.1875rem}
.bcl__fichier b{font:400 0.875rem/1.2 var(--serif);color:var(--bleu);word-break:break-word}
.fichier__plus{font:400 0.625rem/1 var(--pixel);letter-spacing:.12em;text-transform:uppercase;color:var(--papier);background:var(--bleu);padding:0.375rem 0.5rem 0.3125rem}
.bcl__fenetre.a5 .fichier__plus{transition-delay:1.2s}
.bcl__fenetre.a5 .fichier__icone{animation:bcl-recoit .45s ease 1.15s 1}
@keyframes bcl-recoit{50%{transform:scale(1.12)}}
.bcl__vol{position:absolute;left:46%;top:46%;font:400 0.625rem/1 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--papier);background:var(--bleu);padding:0.4375rem 0.5625rem 0.375rem;opacity:0;pointer-events:none;white-space:nowrap}
.bcl__fenetre.a5 .bcl__vol{animation:bcl-vol 1.05s cubic-bezier(.5,0,.3,1) .3s 1 forwards}
@keyframes bcl-vol{0%{opacity:0;left:46%;top:46%}15%{opacity:1}80%{opacity:1;left:calc(100% - 10.625rem);top:30%}100%{opacity:0;left:calc(100% - 10rem);top:30%}}
/* le curseur qui vient valider, si personne ne clique */
.bcl__curseur{position:absolute;left:0;top:0;width:1.25rem;height:1.625rem;pointer-events:none;opacity:0;z-index:3;transform:translate(calc(var(--x,18.75rem) + 8.75rem),calc(var(--y,12.5rem) + 6.875rem));transition:transform .9s cubic-bezier(.3,.7,.3,1),opacity .25s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M2 2v19l5-5 4 8 3-1.5-4-8h7z' fill='%231028FF' stroke='%23F4F0E8' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0/contain}
.bcl--curseur .bcl__curseur{opacity:1;transform:translate(var(--x),var(--y))}
.bcl--clic .bcl__curseur{transform:translate(var(--x),var(--y)) scale(.82)}

/* -- dans ArchiCAD : le plan, le panneau Octavec -- */
.bcl__corps--archicad{display:grid;grid-template-columns:2.5rem minmax(0,1fr) 16.875rem}
.cad__outils{display:flex;flex-direction:column;gap:0.5625rem;padding:0.625rem 0.4375rem;border-right:1px solid var(--bleu);background:repeating-linear-gradient(45deg,transparent 0 0.3125rem,color-mix(in srgb,var(--bleu) 8%,transparent) 0.3125rem 0.375rem)}
.cad__outils i{display:block;width:1.5rem;height:1.5rem;border:1px solid var(--bleu);background:var(--papier)}
.cad__plan{display:flex;align-items:center;justify-content:center;padding:0.75rem;background:var(--papier) radial-gradient(color-mix(in srgb,var(--bleu) 55%,transparent) 1px,transparent 1.2px) 0 0/1.25rem 1.25rem;min-width:0}
.cad__plan svg{display:block;width:100%;height:100%}
.cad__plan .mur{fill:none;stroke:var(--bleu);stroke-width:7;stroke-linecap:square}
.cad__plan .ouv{stroke:var(--bleu);stroke-width:1.5}
.cad__plan .porte{fill:none;stroke:var(--bleu);stroke-width:1;stroke-dasharray:3 3}
.meuble rect,.meuble circle{fill:var(--papier);stroke:var(--bleu);stroke-width:1.8;stroke-dasharray:6 4;opacity:0;transition:opacity .25s ease}
.meuble text{font:400 9px var(--pixel);letter-spacing:.08em;fill:var(--bleu);text-anchor:middle;paint-order:stroke;stroke:var(--papier);stroke-width:3px;opacity:0;transition:opacity .25s ease}
.bcl__fenetre.a3 .meuble rect,.bcl__fenetre.a3 .meuble circle,.bcl__fenetre.a3 .meuble text{opacity:1;transition-delay:calc(var(--i) * 170ms + 200ms)}
.bcl__fenetre.a5 .meuble rect,.bcl__fenetre.a5 .meuble circle{stroke-dasharray:none;fill:url(#bcl-h)}
.bcl__fenetre.a5 g.meuble:first-of-type rect{fill:var(--papier)}
.cad__panneau{display:flex;flex-direction:column;border-left:2px solid var(--bleu);min-width:0}
.cad__panneau .panneau__tete{margin:0}
.cad__panneau-corps{position:relative;flex:1;padding:0.75rem 0.875rem;display:flex;flex-direction:column;gap:0.5625rem}
.cad__src,.cad__fait{margin:0;display:flex;gap:0.5rem;align-items:center;font:400 0.875rem/1.2 var(--serif);color:var(--bleu)}
.cad__fait b{font-weight:600}
.bcl__fenetre .ext{flex:none;font:400 0.5625rem/1 var(--pixel);letter-spacing:.06em;color:var(--bleu);border:1px solid var(--bleu);padding:0.3125rem 0.3125rem 0.25rem}
.cad__codes{list-style:none;margin:0;padding:0;border-top:1px solid var(--bleu)}
.cad__codes li{display:grid;grid-template-columns:2.625rem 1fr 1.5rem;gap:0.375rem;align-items:center;padding:0.25rem 2px;border-bottom:1px dotted var(--bleu);font:400 0.84375rem/1.2 var(--serif);color:var(--bleu);transition:background .2s ease}
.cad__codes .px{font:400 0.59375rem/1 var(--pixel);letter-spacing:.06em}
.cad__codes em{font:400 0.59375rem/1 var(--pixel);font-style:normal;text-align:right}
.bcl__fenetre.a2:not(.a3) .cad__codes li{background:color-mix(in srgb,var(--bleu) 13%,var(--papier));transition-delay:calc(var(--i) * 260ms + 200ms)}
.cad__panneau .bcl__actions{margin-top:auto}
.cad__panneau .bcl__tampon{right:0.75rem;bottom:0.75rem}

/* -- sous la fenêtre : les étapes, la légende, pause, la surface -- */
.bcl__pied{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:1.375rem;align-items:center;margin-top:1.125rem}
.bcl__etapes{display:flex;gap:0.25rem}
.bcl__etapes button{display:flex;flex-direction:column;gap:0.375rem;align-items:flex-start;background:none;border:0;padding:0.25rem 2px;cursor:pointer;font:400 0.625rem/1 var(--pixel);letter-spacing:.12em;color:var(--bleu);opacity:.45}
.bcl__etapes button i{display:block;position:relative;width:2.125rem;height:0.1875rem;border:1px solid var(--bleu)}
.bcl__etapes button.fait,.bcl__etapes button.actif,.bcl__etapes button:hover{opacity:1}
.bcl__etapes button.fait i{background:var(--bleu)}
.bcl__etapes button.actif i::after{content:"";position:absolute;inset:0;background:var(--bleu);transform-origin:left;animation:bcl-barre var(--d) linear forwards}
@keyframes bcl-barre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bcl[data-porte="1"] .bcl__etapes button.actif i::after{animation:none;background:var(--ecarlate)}
.bcl[data-pause="1"] .bcl__etapes button.actif i::after{animation-play-state:paused}
.bcl__legende{margin:0;font:300 clamp(1.375rem,2vw,1.75rem)/1.2 var(--serif);color:var(--bleu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcl__lecture{font:400 0.65625rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);background:var(--papier);border:1px solid var(--bleu);min-height:2.5rem;min-width:6rem;padding:0 0.875rem;cursor:pointer}
.bcl__lecture:hover,.bcl__lecture[data-etat="fin"]{background:var(--bleu);color:var(--papier)}
.bcl__surfaces{display:flex}
.bcl__surfaces button{font:400 0.65625rem/1 var(--pixel);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);background:var(--papier);border:1px solid var(--bleu);min-height:2.5rem;padding:0 0.8125rem;margin-left:-1px;cursor:pointer}
.bcl__surfaces button[aria-pressed="true"]{background:var(--bleu);color:var(--papier)}
@media (prefers-reduced-motion:reduce){.bcl__fenetre *,.bcl__etapes *{transition:none!important;animation:none!important}.bcl__vol,.doc__scan{display:none}}

/* -- après la boucle : l'appel à l'action, les chiffres, tout ce que fait Octavec -- */
.demo__vue[data-vue="ensemble"] .ens__actions{margin:1.625rem 0 1.625rem}
.demo__vue[data-vue="ensemble"] .ens__chiffres b{font-size:1.625rem}
.demo__vue[data-vue="ensemble"] .ens__chiffres span{font-size:0.9375rem}
.tuiles{margin:0.5rem 0 0.375rem}
.tuiles__titre{margin:0 0 0.75rem;font:400 0.75rem/1 var(--pixel);letter-spacing:.16em;text-transform:uppercase;color:var(--bleu)}
.tuiles__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.125rem}
.tuile{display:block;text-align:left;background:var(--papier);border:1px solid var(--bleu);padding:0.625rem 0.625rem 0.75rem;cursor:pointer;transition:box-shadow .2s,transform .2s}
.tuile:hover,.tuile:focus-visible{box-shadow:0.3125rem 0.3125rem 0 var(--ecarlate);transform:translate(-2px,-2px)}
.tuile__scene{display:block;aspect-ratio:640/420;background:var(--papier) url(img/trame-16-claire.svg) 0 0/6rem 6rem repeat;border:1px solid color-mix(in srgb,var(--bleu) 35%,transparent);overflow:hidden}
.tuile__scene svg{display:block;width:100%;height:100%}
.tuile__scene .t-pix{font-family:var(--pixel);letter-spacing:.1em;text-transform:uppercase}
.tuile__scene .t-ser{font-family:var(--serif)}
.tuile__scene .halo{paint-order:stroke;stroke:var(--papier);stroke-width:0.25rem;stroke-linejoin:round}
.tuile b{display:block;margin-top:0.625rem;font:600 1.125rem/1.2 var(--serif);color:var(--bleu)}
.tuile small{display:block;margin-top:0.25rem;font:400 0.625rem/1.3 var(--pixel);letter-spacing:.12em;text-transform:uppercase;color:var(--bleu)}

/* -- la démo complète, allégée : sans l'encadré « sans / avec » -- */
.demo__vue[data-vue="projet"] .avap{display:none!important}
/* corrections : la fenêtre ne défile jamais (un clic sur « Valider » ne doit pas la faire glisser), le plan tient dans sa case */
.bcl__corps{overflow:clip}
.bcl__corps--archicad{grid-template-rows:minmax(0,1fr)}
.cad__plan{min-height:0;overflow:clip}
.cad__plan svg{height:100%;width:100%;max-height:18.5rem}
.cad__panneau .bcl__tampon{right:0.875rem;bottom:3.625rem}
.produit b{line-height:1.35}

/* ================= Typographie, direction A : la section 01 et le démonstrateur ================= */
/* Newsreader : graisse normale pour les légendes et titres de démonstration, corps à 18 px */
.sol__offre{font-size:1.125rem}
.sol__lignes small,.sol__fait{font-size:1rem!important}
.bcl__legende,.demo__phrase,.ens__titre,.demo__titre h4{font-weight:400}
.ens__chiffres span,.demo__vue[data-vue="ensemble"] .ens__chiffres span{font-size:1rem}
/* Plex Mono : libellés en capitales, 12 à 13 px, graisse 500 */
.demo__sommaire h4,.demo__io i,.demo__compte,.demo__correction label,.ens__kicker,.ens__n,.fenetre__barre,.projet__gauche h5,.projet__dossier h5,
.panneau__tete span,.bcl__barre,.prop__tete,.tuiles__titre{font-family:var(--pixel);font-weight:500;font-size:0.75rem;letter-spacing:.04em}
.ens__kicker,.tuiles__titre{font-size:0.8125rem}
.frise small,.fichiers small,.fichier__plus,.tuile small{font-family:var(--pixel);font-weight:500;font-size:0.75rem;letter-spacing:.02em}
.fichiers .ext,.fichier__icone span,.bcl__fenetre .ext,.prop__table td.px,.cad__codes .px,.cad__codes em,.bcl__vol,.produit small,.doc__url,.bcl__etapes button{font-family:var(--pixel);font-weight:500;font-size:0.75rem;letter-spacing:0}
.doc__url{font-weight:400}
.bcl__pastille{font-weight:500}
/* boutons : 14 px, casse normale */
.demo__fermer,.demo__boutons .demo__pause,.demo__boutons .btn,.demo__boutons .btn-ambre,.demo__vues button,.bcl__valider,.bcl__corriger,.bcl__lecture,.bcl__surfaces button{font-family:var(--pixel);font-weight:500;font-size:0.875rem;letter-spacing:0;text-transform:none}
/* le rouge du petit texte et des boutons : #CC1D00 (l'écarlate reste pour les ombres, filets et surfaces) */
.bcl__valider,.bcl--porte .bcl__pastille{background:var(--rouge-texte)}
.frise li.encours small,.fichiers li.attente small{color:var(--rouge-texte)}
/* le tampon « Validé » : un ornement Silkscreen à 24 px (assez grand pour l'écarlate) */
.bcl__fenetre .bcl__tampon{font:400 1.5rem/1 var(--silk);letter-spacing:0;padding:0.5rem 0.75rem 0.375rem}
/* texte des scènes SVG : la police d'interface, sans interlettrage ajouté */
.demo__scene .t-pix,.tuile__scene .t-pix{letter-spacing:.02em}
.meuble text{font:500 10px var(--pixel);letter-spacing:0}

/* =====================================================================================
   SECTION 01 · version du 22 octobre 2026 (favorite 1, illustration A « le moyeu »)
   La carte Octavec devient une porte vers sa page : une promesse, une ligne, le schéma, le bouton.
   Le sur-mesure garde la bande-annonce : schéma, trois étapes, le projet en cours, le bouton.
   Bichromie : bleu = ce qu'Octavec ou l'outil fait, écarlate = votre accord. Logiciels nommés, sans logos.
   ===================================================================================== */
#solutions .sol__head h2{text-wrap:balance}
.pastille{font:500 0.75rem/1 var(--pixel);letter-spacing:.04em;font-style:normal;text-transform:uppercase;color:var(--papier);background:var(--bleu);padding:0.3125rem 0.4375rem 0.25rem}
#solutions .sol__carte > p.promesse{font:400 1.625rem/1.22 var(--serif);margin:0 0 0.75rem;letter-spacing:-.005em;text-wrap:balance}
#solutions .sol__carte > p.promesse em{font-style:italic}
#solutions .sol__carte > p.ligne{font-size:1.0625rem;line-height:1.5;margin:0 0 1.25rem}
#solutions .sol__carte > p.en-cours{display:flex;gap:0.625rem;align-items:baseline;flex-wrap:wrap;font-size:1rem;margin:0 0 1.125rem}
.en-cours span{font:500 0.75rem/1 var(--pixel);text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--bleu);padding:0.25rem 0.375rem 0.1875rem}
/* cadre des schémas */
.apercu{margin:2px 0 1.125rem;border:1px solid var(--bleu);background:var(--papier);box-shadow:0.1875rem 0.1875rem 0 var(--ecarlate)}
#pret-a-lemploi .apercu{margin-top:0.25rem}
@media (min-width:761px){
  #pret-a-lemploi .apercu{margin-top:auto;margin-bottom:auto}   /* la carte Octavec est plus courte : le schéma se centre */
  #pret-a-lemploi .sol__action{margin-top:1.5rem}
}
/* le démonstrateur, tant que la page Octavec n'existe pas : il remplace la promesse, la ligne et le schéma */
#pret-a-lemploi.demo-ouvert > .promesse,#pret-a-lemploi.demo-ouvert > .ligne,#pret-a-lemploi.demo-ouvert > .apercu{display:none}
/* traits et portes du schéma (liens.js) */
.relie{position:relative}
.relie > svg.liens{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.liens line{stroke:var(--bleu);stroke-width:1.3}
.liens .porte{fill:var(--ecarlate)}
.liens .point{fill:var(--bleu)}
.leg-accord{display:flex;align-items:center;gap:0.5rem;margin:0.75rem 0 0;font:500 0.8125rem/1.3 var(--pixel);color:var(--rouge-texte)}
.leg-accord i{width:0.5625rem;height:0.5625rem;background:var(--ecarlate);flex:none}
/* 01.A · le moyeu : Octavec au centre des logiciels de l'agence */
.apercu--hub{padding:1.125rem 1rem 0.875rem}
.hub{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto 1.875rem auto 1.875rem auto;align-items:center}
.hub > *{position:relative;z-index:1}
.hub__n{background:var(--papier);border:1px solid var(--bleu);padding:0.5rem 0.625rem 0.5625rem;justify-self:center;text-align:center;min-width:7rem}
.hub__n b{display:block;font:500 0.8125rem/1.2 var(--pixel)}
.hub__n small{display:block;font:italic 400 0.9375rem/1.2 var(--serif);margin-top:0.1875rem}
.hub__n--1{grid-area:1/1}.hub__n--2{grid-area:1/3}.hub__n--3{grid-area:5/1}.hub__n--4{grid-area:5/3}
.hub__c{grid-area:3/2;background:var(--bleu);color:var(--papier);font:400 1.5rem/1 var(--serif);padding:0.625rem 1.125rem 0.75rem}
/* 01.B · le flux du sur-mesure */
.apercu--flux{padding:1.125rem 1rem}
.fx{display:flex;align-items:center;gap:0}
.fx__logiciels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem;flex:none}
.fx__logiciels li{font:500 0.8125rem/1 var(--pixel);border:1px solid var(--bleu);padding:0.5rem 0.625rem;background:var(--papier);white-space:nowrap}
.fx__fl{flex:1 1 1.125rem;min-width:1.125rem;height:1px;background:var(--bleu);position:relative;margin:0 2px}
.fx__fl::after{content:"";position:absolute;right:-1px;top:-0.25rem;border:0.28125rem solid transparent;border-left:0.4375rem solid var(--bleu);border-right:0}
.fx p{margin:0;font:500 0.8125rem/1.3 var(--pixel);padding:0.75rem 0.75rem;text-align:center;flex:0 1 8.5rem}
.fx__cout{border:2px solid var(--ecarlate);color:var(--rouge-texte);background:var(--papier)}
.fx__outil{background:var(--bleu);color:var(--papier)}
@media (min-width:761px){.apercu--flux{min-height:12.875rem;display:flex;align-items:center}.apercu--flux .fx{width:100%}}
/* les trois étapes, en colonnes */
.verbes{list-style:none;margin:2px 0 1rem;padding:0.75rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.125rem;border-top:1px solid var(--bleu)}
.verbes b{display:block;font-weight:600;font-size:1.1875rem;line-height:1.1;margin-bottom:0.375rem}
.verbes small{display:block;font-size:0.9375rem;line-height:1.4}
/* carte étroite (tablette, téléphone) : le schéma passe à la verticale, les étapes en une colonne */
.sol__carte{container-type:inline-size}
@container (max-width:29.375rem){
  .fx{flex-direction:column;align-items:stretch}
  .fx__logiciels{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .fx__fl{flex:none;width:1px;min-width:0;height:1.125rem;margin:0.25rem auto 0.625rem}
  .fx__fl::after{right:auto;left:-0.25rem;top:auto;bottom:-1px;border:0.28125rem solid transparent;border-top:0.4375rem solid var(--bleu);border-bottom:0}
  .fx p{flex:none}
  .verbes{grid-template-columns:1fr;gap:0.625rem}
}
@media (max-width:760px){
  #solutions .sol__carte > p.promesse{font-size:1.375rem}
  .hub__n{min-width:0;padding:0.4375rem 0.5rem 0.5rem}
  .hub__n small{display:none}
  .hub__c{font-size:1.25rem;padding:0.5rem 0.75rem 0.625rem}
}

/* La page Octavec existe (22 octobre au soir) : « Découvrir Octavec » est un lien vers elle ; le démonstrateur
   s'ouvre par un lien secondaire, sur ordinateur (demo.js n'affiche le bouton que là). */
#pret-a-lemploi button.lien{background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:0.5rem 0;cursor:pointer}

/* =====================================================================================
   SECTION 01 · version du 23 octobre 2026 (décisions de Paul, 10 h 04). Le réglage « la section tient dans un écran »
   (10 h 48 à 12 h 31) est retiré le 23 octobre au soir, à la demande de Paul : les tailles suivent l'écran (échelle continue).
   Octavec : « Le lien entre ArchiCAD, Excel, InDesign et Blender » en grand ; la table de l'agence dessinée comme
   dans le film de la page Octavec ; un seul bouton, centré. Sur mesure : tout besoin, à toute échelle ; trois outils
   de taille croissante, dans le même dessin. Les schémas d'avant (.hub, .fx, .en-cours) ne sont plus dans la page.
   ===================================================================================== */
#solutions .sol__carte > p.promesse{font-size:clamp(1.5625rem,2.1vw,1.875rem);line-height:1.18;margin-bottom:0.625rem}
#solutions .sol__carte > p.ligne{margin-bottom:1.125rem}
/* les dessins : le cadre bleu et le décalage écarlate des schémas, sans marge ; la légende en pied, comme un cartouche.
   Chaque fichier déborde de grille de part et d'autre du dessin : le cadre montre le dessin à sa hauteur, centré
   (object-fit: cover). À la taille normale (rapport du cadre ci-dessous), on voit exactement le dessin. */
.apercu--dessin{padding:0}
.dessin{position:relative;overflow:hidden}
.dessin > img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.dessin--agence{aspect-ratio:835/758}
.dessin--echelles{aspect-ratio:659/283;container-type:size}
.dessin__l{position:absolute;display:flex;align-items:baseline;gap:0.375rem;white-space:nowrap;font:500 0.8125rem/1.2 var(--pixel);color:var(--bleu)}
.dessin__l i{font:italic 400 0.9375rem/1.2 var(--serif)}
/* Octavec : chaque logiciel à son coin du cadre, à côté de son objet */
.dessin__l--ac{left:0.75rem;top:0.625rem}
.dessin__l--bl{right:0.75rem;top:0.625rem}
.dessin__l--xl{left:0.75rem;bottom:0.625rem}
.dessin__l--id{right:0.75rem;bottom:0.625rem}
/* Sur mesure : le nom de chaque taille sous son socle ; écarts au centre en fraction de la hauteur du cadre (gen-sur-mesure.py) */
.dessin--echelles .dessin__l{top:calc(71.73% + 0.375rem);left:calc(50% + var(--dx) * 100cqh);transform:translateX(-50%)}
.dessin__l--e1{--dx:-.8827}.dessin__l--e2{--dx:-.2265}.dessin__l--e3{--dx:.6562}
.apercu--dessin > figcaption{margin:0;padding:0.625rem 0.875rem 0.6875rem;border-top:1px dotted var(--bleu)}
.leg-outil{display:flex;align-items:center;gap:0.5rem;font:500 0.8125rem/1.3 var(--pixel);color:var(--bleu)}
.leg-outil i{width:0.5625rem;height:0.5625rem;background:var(--bleu);flex:none}
/* le dessin suit le texte ; l'espace libre de la carte va au-dessus du bouton */
#pret-a-lemploi .apercu--dessin{margin-top:0.25rem;margin-bottom:1.125rem}
/* un seul bouton par carte, centré */
#solutions .sol__action{justify-content:center}
/* les trois étapes restent sur trois colonnes tant que la carte le permet (avant : une colonne sous 470 px) */
@container (min-width:25rem){
  .verbes{grid-template-columns:repeat(3,1fr);gap:1.125rem}
}
/* carte étroite (tablette, téléphone, petits portables) : les noms seuls, un peu plus petits, calés aux bords */
@container (max-width:27.5rem){
  .dessin__l{font-size:0.75rem}
  .dessin__l i{display:none}
  .dessin__l--ac,.dessin__l--xl{left:0.5rem}
  .dessin__l--bl,.dessin__l--id{right:0.5rem}
  .dessin__l--ac,.dessin__l--bl{top:0.375rem}
  .dessin__l--xl,.dessin__l--id{bottom:0.375rem}
  .dessin--echelles .dessin__l--e1{left:0.375rem;transform:none}
  .dessin--echelles .dessin__l--e3{left:auto;right:0.375rem;transform:none}
}
@container (max-width:17.5rem){
  .dessin--echelles .dessin__l{top:calc(71.73% + 2px);white-space:normal;width:min-content;font-size:0.75rem;line-height:1.1;text-align:center}
  .dessin--echelles .dessin__l--e3{text-align:right}
  #solutions .sol__action .btn-ambre{padding-left:0.875rem;padding-right:0.875rem;gap:0.5rem}
}
@media (max-width:760px){
  #solutions .sol__carte > p.promesse{font-size:1.375rem}
}