@font-face{font-family:'Literata';font-style:normal;font-weight:400 600;font-display:swap;src:url(literata.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(ibm-plex-mono.woff2) format('woff2')}
:root{--prune-900:#2a1526;--prune-300:#c99bb4;--papier:#fdfaf9;--or-300:#f2a118;--or-200:#f5d27a}
*{box-sizing:border-box}html,body{margin:0;background:var(--prune-900)}
.hero{min-height:100vh;min-height:100svh;background:var(--prune-900);color:var(--papier);padding:clamp(24px,4vw,48px) clamp(24px,6vw,96px);display:flex;flex-direction:column;justify-content:space-between;gap:64px}
/* Accueil : photo sous un voile prune uni (60 %), qui garde le titre lisible. */
.accueil{background:linear-gradient(rgb(42 21 38/.6),rgb(42 21 38/.6)),var(--prune-900) image-set(url(hero-prune-1280.webp) 1x,url(hero-prune-2560.webp) 2x) center/cover no-repeat}
@media (min-width:1400px){.accueil{background:linear-gradient(rgb(42 21 38/.6),rgb(42 21 38/.6)),var(--prune-900) url(hero-prune-2560.webp) center/cover no-repeat}}
.logo{display:block;align-self:flex-start;height:clamp(28px,3.2vw,42px);width:auto}
.logo img{display:block;height:100%;width:auto}
.main{display:flex;flex-direction:column;gap:clamp(32px,4vw,48px);max-width:1100px}
h1{margin:0;font-family:'Literata',Georgia,serif;font-weight:600;font-size:clamp(36px,5.6vw,84px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.mail{align-self:flex-start;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:clamp(16px,1.4vw,20px);color:var(--or-300);text-decoration:none}
.mail:hover,.mail:focus-visible{color:var(--or-200)}
/* Appel de l'accueil : bouton or du design system (texte #241700 sur or, 9:1), vers le rendez-vous Cal.com. */
.appel{align-self:flex-start;padding:14px 24px;background:var(--or-300);color:#241700;font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:600;font-size:clamp(16px,1.3vw,18px);text-decoration:none}
.appel:hover,.appel:focus-visible{background:var(--or-200)}
.mail:focus-visible,.appel:focus-visible,.foot a:focus-visible,.logo:focus-visible{outline:2px solid var(--or-300);outline-offset:4px;border-radius:2px}
.foot{display:flex;flex-wrap:wrap;gap:6px 20px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--prune-300)}
.foot>*{flex:none;white-space:nowrap}
.foot a{color:var(--prune-300);text-decoration:underline;text-underline-offset:3px}.foot a:hover{color:var(--papier)}

/* Mentions légales : même fond, même typographie, texte courant Literata 18 px sur 70 caractères au plus. */
.legal{max-width:70ch;font-family:'Literata',Georgia,serif;font-size:18px;line-height:1.5}
.legal h1{font-size:clamp(36px,4.5vw,56px);margin-bottom:clamp(32px,4vw,48px)}
.legal dl{margin:0;display:grid;gap:20px}
.legal dt{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--prune-300)}
.legal dd{margin:2px 0 0}
.legal p{margin:clamp(32px,4vw,48px) 0 0}

/* Ressources (objets métier et workflows) : pages claires du design system (page #f7f2ee, cartes #fdfaf9, filets #e6d3de),
   bandeaux prune en tête et en pied. Literata pour les titres seulement, IBM Plex Sans pour le texte, IBM Plex Mono pour dates et durées. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(ibm-plex-sans.woff2) format('woff2')}
.clair{--page:#f7f2ee;--carte:#fdfaf9;--filet:#e6d3de;--texte:#4a3343;--encre:#2a1526;--lien:#5a2549;--focus:#8c4472;--secondaire:#7a6070;--or-texte:#8a5a00;--sur-or:#241700;
  background:var(--page);color:var(--texte);font-family:'IBM Plex Sans',system-ui,sans-serif}
.clair a:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
/* Même marge latérale pour bandeaux et contenu : 96 px au plus, puis colonne de 1128 px centrée sur grand écran. */
.barre,.bandeau,.contenu{padding-inline:max(clamp(24px,6vw,96px),calc((100% - 1128px)/2))}
.bandeau{background:var(--prune-900);color:var(--papier);padding-block:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:clamp(40px,6vw,80px)}
.bandeau a:focus-visible{outline-color:var(--or-300)}
.bandeau .tete{display:flex;flex-direction:column;gap:20px;max-width:900px}
.bandeau h1{font-size:clamp(36px,4.5vw,56px);line-height:1.08}
.surtitre{margin:0;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--or-300)}
.chapeau-prune{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#e6d3de;max-width:62ch}
.ariane,.meta{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--prune-300)}
.ariane a{color:var(--prune-300);text-underline-offset:3px}.ariane a:hover{color:var(--papier)}
.contenu{padding-block:clamp(40px,6vw,80px)}
/* Grille de cartes : les filets naissent de l'écart de 1 px sur fond filet ; 12 cartes remplissent 1, 2 ou 3 colonnes sans trou. */
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filet);border:1px solid var(--filet)}
@media (max-width:1080px){.cartes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cartes{grid-template-columns:1fr}}
.carte{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,40px);background:var(--carte);color:inherit;text-decoration:none}
.carte-haut,.carte-bas{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.carte-type{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondaire)}
.carte-duree,.carte-date{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--secondaire)}
.carte h2,.carte h3{margin:8px 0 0;font-family:'Literata',Georgia,serif;font-weight:600;font-size:clamp(22px,1.9vw,26px);line-height:1.22;letter-spacing:-.015em;color:var(--encre);text-wrap:balance}
.carte p{margin:0;font-size:16px;line-height:1.62;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.carte-bas{margin-top:auto;padding-top:20px;border-top:1px solid var(--filet)}
.carte-lire{font-weight:600;font-size:14px;color:var(--lien)}
.carte:hover h2,.carte:hover h3{color:var(--lien)}.carte:hover .carte-lire{color:var(--or-texte)}
/* Article : sommaire à droite sur grand écran, au-dessus du texte sinon ; texte courant 18 px sur 68 caractères au plus. */
.article{display:grid;grid-template-columns:minmax(0,68ch) minmax(200px,280px);grid-template-areas:'texte sommaire';justify-content:space-between;gap:clamp(40px,6vw,96px);align-items:start}
.texte{grid-area:texte}.sommaire{grid-area:sommaire}
@media (max-width:980px){.article{grid-template-columns:minmax(0,68ch);grid-template-areas:'sommaire' 'texte'}}
.sommaire{position:sticky;top:32px;font-size:14px;line-height:1.5}
@media (max-width:980px){.sommaire{position:static}}
.sommaire ol{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px;border-left:1px solid var(--filet)}
.sommaire li a{display:block;padding-left:16px;color:var(--lien);text-decoration:none}.sommaire li a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:3px}
.etiquette{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondaire)}
.texte{font-size:18px;line-height:1.62}
.texte .reponse{margin:0;font-size:clamp(19px,1.6vw,21px);line-height:1.55;color:var(--encre)}
.texte h2{margin:clamp(40px,5vw,56px) 0 0;font-family:'Literata',Georgia,serif;font-weight:600;font-size:clamp(24px,2.2vw,30px);line-height:1.18;letter-spacing:-.015em;color:var(--encre);scroll-margin-top:32px}
.texte p{margin:16px 0 0}
.texte a{color:var(--lien);text-underline-offset:3px}
.encart{margin:clamp(40px,5vw,56px) 0 0;padding:clamp(24px,3vw,32px);background:var(--carte);border:1px solid var(--filet);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.encart h3{margin:0;font-size:18px;font-weight:600;color:var(--encre)}
.encart p{margin:0;font-size:16px}
.bouton{display:inline-block;margin-top:8px;padding:12px 20px;background:var(--or-300);color:var(--sur-or);font-weight:600;font-size:15px;text-decoration:none}
.bouton:hover{background:var(--or-200)}
.suite{margin-top:clamp(64px,8vw,112px)}
.suite>h2{margin:0 0 24px;font-family:'Literata',Georgia,serif;font-weight:600;font-size:clamp(24px,2.2vw,30px);color:var(--encre)}
.suite .cartes{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.suite .cartes{grid-template-columns:1fr}}
.bandeau .appel{display:flex;flex-direction:column;gap:20px;max-width:900px}
.bandeau .appel h2{margin:0;font-family:'Literata',Georgia,serif;font-weight:600;font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.02em}
/* Barre du haut : logo et menu restent visibles pendant le défilement ; le sommaire et les ancres se calent sous elle (72 px). */
.barre{position:sticky;top:0;z-index:1;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--prune-900);border-bottom:1px solid #3f1d36}
.barre .logo{height:26px;align-self:center}
.menu{display:flex;gap:clamp(16px,3vw,40px);font-size:15px}
.menu a{color:#e6d3de;text-decoration:none;white-space:nowrap}.menu a:hover,.menu a[aria-current]{color:var(--papier)}
.barre a:focus-visible{outline-color:var(--or-300)}
@media (max-width:560px){.menu a:first-child{display:none}}
.clair .bandeau{padding-top:clamp(32px,5vw,64px)}
.clair .sommaire{top:104px}.clair .texte h2{scroll-margin-top:104px}
/* Fiche d'un objet métier (champs) ou d'un workflow (étapes) : ce qu'on verra, puis importera, dans Sinfonia.
   Bouton d'import inactif en gris de repos, contour tireté (« en attente ») ; chiffres et noms de champs en Plex Mono. */
.fiche{margin:clamp(32px,4vw,48px) 0 0;padding:clamp(20px,3vw,32px);background:var(--carte);border:1px solid var(--filet);font-size:16px;line-height:1.5}
.fiche-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px}
.utiliser{font:600 15px 'IBM Plex Sans',system-ui,sans-serif;padding:10px 16px;background:#eee9eb;color:#5b5257;border:1px dashed #beb2b8;cursor:not-allowed}
.utiliser span{font-weight:400;font-size:13px;margin-left:6px}
.fiche-resume{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:12px 40px}
.fiche-resume dt{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondaire)}
.fiche-resume dd{margin:4px 0 0;color:var(--encre)}
.fiche a{color:var(--lien);text-underline-offset:3px}
.nombre{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.92em}
.etapes{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--filet)}
.etapes li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--filet)}
.etapes .nombre{color:var(--or-texte);padding-top:2px}
.etapes strong{color:var(--encre);font-weight:600}
.etapes p{margin:4px 0 0}
.champs-defile{margin:24px 0 0;overflow-x:auto}
.champs{width:100%;border-collapse:collapse;font-size:15px}
.champs th{text-align:left;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondaire);padding:0 16px 10px 0;border-bottom:1px solid var(--filet)}
.champs td{padding:12px 16px 12px 0;border-bottom:1px solid var(--filet);vertical-align:top}
.champs td.nombre{color:var(--encre);white-space:nowrap}