/* Écriture de la bulle : Caveat (SIL Open Font License, voir vendor/fonts/LICENSE-Caveat.txt), manuscrite comme le dessin. */
@font-face { font-family: "Caveat"; src: url("/static/vendor/fonts/caveat-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* Le bonhomme de l'accueil : posé à droite de la carte « Formation IA », avec sa bulle ; un clic ouvre la fenêtre de contact (voir bonhomme.js).
   Placé dans la carte (position relative), donc calé sur elle à toutes les largeurs : sa hauteur vaut 1,9 fois celle de la carte, ses pieds sont au bas de la carte. */
.offres li:last-child { position: relative; }
.bh { position: absolute; z-index: 4; left: calc(100% + 8px); aspect-ratio: 303 / 960; container-type: inline-size;
  /* hauteur = hauteur de la carte / 0,818 (de l'épaule aux pieds, le personnage occupe 81,8 % de sa hauteur) : l'épaule arrive au bord haut de la carte, les pieds au bord bas ; la tête dépasse au-dessus */
  height: 122.3%; top: -22.3%; }
.bh::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -5px; height: 12px; border-radius: 50%; z-index: -1; background: radial-gradient(ellipse at center, rgb(48 73 111 / .26), rgb(48 73 111 / 0) 70%); }
.bh-perso { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.bh-perso img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.bh-perso:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }

/* bulle : le cadre dessiné (trait seul, fond transparent : la vraie couleur du site se voit à l'intérieur), au-dessus et à gauche de la tête, la pointe de la queue tout près de l'oreille */
.bh-bulle { --bw: min(345cqw, calc(64svh - 232px));      /* largeur de la bulle : 3 fois celle du personnage, réduite sur les écrans peu hauts pour qu'elle reste sous la barre */
  position: absolute; z-index: 1; width: var(--bw); aspect-ratio: 499 / 324; cursor: pointer;
  left: calc(17.6cqw - var(--bw) * .806);      /* la pointe de la queue (à 80,6 % de la bulle) arrive à l'oreille gauche, une quinzaine de pixels avant elle */
  bottom: calc(100% + 3.3%);      /* pointe juste au-dessus du sommet de la tête : le bas du cadre passe ainsi au-dessus de la 2e ligne du titre */
  background: url("/static/vitrine/bonhomme/bulle.webp") center / 100% 100% no-repeat; }
.bh-bulle p { position: absolute; left: 17%; top: 21%; width: 68%; height: 46%; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: calc(var(--bw) * .086); font-weight: 600; line-height: 1.04; color: #26262a; text-wrap: balance; }
body.epure .bh-bulle p, body.epure .bh-bulle span, body.epure .bh-bulle b { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; }   /* la règle générale de epure.css vise tous les éléments, pas seulement le paragraphe */
body.epure .bh-bulle b { font-weight: 700; color: var(--bleu); }
.bh:hover .bh-bulle { filter: drop-shadow(0 6px 10px rgb(48 73 111 / .16)); }

/* fenêtre de contact */
.bh-dialogue { width: min(26rem, calc(100% - 2rem)); padding: 1.6rem 1.6rem 1.4rem; border: 1.5px solid var(--filet); border-radius: 24px; color: var(--texte); background: var(--beige-clair); box-shadow: 0 40px 80px -30px rgb(48 73 111 / .55); }
.bh-dialogue::backdrop { background: rgb(48 73 111 / .38); backdrop-filter: blur(3px); }
.bh-dialogue[open] { display: grid; gap: .9rem; }
.bh-fermer { position: absolute; top: .7rem; right: .7rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; font-size: 1.4rem; line-height: 1; color: var(--bleu); background: transparent; cursor: pointer; }
.bh-fermer:hover { background: var(--beige-2); }
.bh-fermer:focus-visible, .bh-coord a:focus-visible, .bh-dialogue .btn:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.bh-tete { width: 4.4rem; height: 4.4rem; border-radius: 50%; overflow: hidden; background: var(--beige-2); border: 1.5px solid var(--filet); }
.bh-tete img { display: block; width: 230%; max-width: none; height: auto; margin: -12% 0 0 -76%; }               /* recadré sur la tête */
.bh-dialogue h2 { margin: 0; font-size: 1.45rem; line-height: 1.15; color: var(--bleu); }
.bh-dialogue p { margin: 0; color: var(--doux); font-size: .96rem; line-height: 1.5; }
.bh-coord { display: grid; gap: .5rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.bh-coord a { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border: 1.5px solid var(--filet); border-radius: 14px; font-weight: 600; color: var(--bleu); text-decoration: none; background: var(--beige); transition: border-color .2s ease, background .2s ease; }
.bh-coord a:hover { border-color: var(--bleu); background: var(--beige-2); }
.bh-coord small { display: block; font-weight: 400; color: var(--doux); }
.bh-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }

/* sous 1240 px la marge à droite des cartes n'existe plus (les cartes passent en colonne) : le bonhomme n'est pas affiché */
@media (max-width: 1239px) { .bh { display: none; } }

/* Dessins au trait de la landing (poignée de main, homme assis, duo, échange) : traits seuls sur fond transparent, dans le bleu du site (--bleu), posés sur le fond de la section.
   Même échelle pour les trois du bas (--e = largeur affichée / largeur du fichier) : les têtes ont la même taille que celle du bonhomme de l'accueil. */
.trait { --e: .5; margin: 0; pointer-events: none; user-select: none; }
.trait img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }

/* 1 · poignée de main : le dessin d'origine, tel quel, dans l'espace libre à gauche du titre ; aucun bout n'est rattaché au titre, à une carte ou au bord de l'écran.
   Elle est centrée sur la hauteur du titre (2 lignes de 1,15 em) et dans l'espace libre (entre 28 et 64 px du titre), sans toucher le bord de l'écran (24 px de marge au moins) ni descendre sur les cartes. */
.titre-ligne { --f: clamp(1.7rem, 3.3vw, 2.7rem); position: relative; width: max-content; max-width: 100%; }
.titre-ligne .titre-partenaire { font-size: var(--f); }
.poignee { --pw: min(340px, calc((100vw - 17.2 * var(--f)) / 2 - 52px));      /* largeur libre à gauche du titre, moins l'écart au titre et la marge au bord de l'écran ; jamais plus grande que l'échelle des autres dessins */
  container-type: inline-size; position: absolute; z-index: 0; right: calc(100% + clamp(28px, ((100vw - 17.2 * var(--f)) / 2 - var(--pw)) / 2, 64px)); width: var(--pw); aspect-ratio: 668 / 325; top: calc(1.15 * var(--f) - var(--pw) * .24325); }
/* animation (poignee.js) : tant que le script n'a pas rendu la main, rien n'est montré (pas de dessin complet qui disparaît puis se redessine) ; l'image d'origine reprend la place à la fin */
html.js .poignee:not(.pret) { visibility: hidden; }
.poignee-toile { position: absolute; inset: 0; width: 100%; height: 100%; }
.poignee.trace:not(.fini) img { visibility: hidden; }
.poignee.fini .poignee-toile { display: none; }
@media (max-width: 1179px) { .poignee { display: none; } }

/* 3 · l'homme est assis sur l'étiquette « Agent IA » : son siège (75 % de la hauteur du dessin) est posé à 8 px au-dessus de l'étiquette */
body.epure #ia-cadre { padding-top: calc(clamp(2.75rem, 5vw, 4rem) + 6.5rem); }
#ia-cadre .etiquette { position: relative; }
.assis { position: absolute; left: .3rem; bottom: calc(100% - 401px * .25 * var(--e) + 8px); width: calc(416px * var(--e)); aspect-ratio: 416 / 401; }

/* 7 · le duo se tient sur le filet de la fiche « Fil de suivi par client » */
.fonctions { position: relative; }
.duo { position: absolute; bottom: 100%; left: calc((100% - 4.8rem) / 3 * 2 + 4.8rem); width: calc(373px * var(--e)); aspect-ratio: 373 / 446; }

/* 8 · l'échange (échelle un peu plus grande : sur ce dessin les personnages sont plus petits, leurs têtes retrouvent ainsi la taille des autres), à droite du titre « Un logiciel web conçu autour de votre façon de travailler » */
#approche .entete-section { position: relative; }
.echange { --e: .62; position: absolute; right: 0; top: 0; width: calc(623px * var(--e)); aspect-ratio: 623 / 262; }

/* sous 1100 px la marge à côté du titre et les colonnes disparaissent : les dessins ne sont pas affichés */
@media (max-width: 1099px) { .trait { display: none; } body.epure #ia-cadre { padding-top: clamp(2.75rem, 5vw, 4rem); } }