/* Revue UI/UX : garder l’identité, renforcer la lecture et les interactions. */
:root {
  --error: #a63a24;
  --text-on-dark: #c9c0d4;
  --text-on-light: #645f70;
  --icon-sm: 18px;
  --icon-md: 24px;
  --icon-lg: 32px;
  /* Jetons de mouvement communs, miroir de MOTION dans motion.js. */
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --duration-press: 120ms;
  --duration-feedback: 180ms;
  --duration-ui: 240ms;
  --duration-panel: 400ms;
  --duration-entrance: 600ms;
}
.icon { display: inline-block; width: var(--icon-md); height: var(--icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.button-arrow .icon { width: 24px; height: 24px; }
.header-contact .icon, .text-link .icon { width: 21px; height: 21px; }
.scroll-icon .icon, .small-star .icon { width: var(--icon-sm); height: var(--icon-sm); }
.conviction-icon .icon { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 1.35; }
.method-arrow .icon { width: 68px; height: 68px; stroke-width: 1.5; }
.control-check .icon { width: 17px; height: 17px; }
.motion-toggle .icon { width: 18px; height: 18px; }
:is(button, a, summary) { touch-action: manipulation; }
:is(button, a):focus-visible, summary:focus-visible { outline: 2px solid var(--light); outline-offset: 5px; }
:is(.intro, .approach, .convictions, dialog, .footer) :focus-visible { outline-color: var(--iris); }
/* Sur le shader de l’ouverture, l’anneau Lumière tombe sous 3:1 : Paper (3,65:1 au pire).
   En haut de page, seuls la marque, le contact et le menu changent : la navigation
   garde son anneau Iris sur la pastille Paper (hero.css). */
.opening :focus-visible, .header[data-header="top"] :is(.brand, .header-contact, .menu-toggle):focus-visible { outline-color: var(--paper); }
.motion-toggle, .action-footer button, .dialog-close, .back-top { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.motion-toggle { border-color: #d6cef04d; }
/* Fond indisponible (sans JavaScript ou sans WebGL) : la place reste réservée, sans décaler les actions. */
.motion-toggle.is-unavailable { visibility: hidden; }
.dialog-close { width: 44px; height: 44px; border-radius: 50%; }
.back-top { margin-right: -12px; }
.header-contact { min-height: 44px; }
.footer-right :is(button, a:not(.back-top)) { min-height: 44px; display: inline-flex; align-items: center; }
.desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.text-link { min-height: 44px; }
.scenario-controls button { min-height: 44px; font-size: 12px; color: var(--text-on-dark); }
.scenario-controls button.active { border-color: #aa96ea8c; background: #aa96ea1e; }
/* Un repère unique glisse sous le scénario choisi (app.js) ; .active reste le
   repli sans JavaScript, aria-pressed et la couleur du libellé portent l’état. */
.scenario-controls { position: relative; }
.scenario-controls button { position: relative; z-index: 1; }
.scenario-indicator { position: absolute; left: 0; top: 0; border: 1px solid #aa96ea8c; border-radius: 5px; background: #aa96ea1e; pointer-events: none; }
.scenario-controls.has-indicator button.active { border-color: transparent; background: transparent; }
:is(.motion-toggle, .dialog-close, .action-footer button):hover { background: #aa96ea24; }
:is(.button, .scenario-controls button, .header-contact):active { filter: brightness(.9); }
.node-label, .action-card .node-label { font-size: 11px; color: var(--text-on-dark); }
.context-chips > span { font-size: 11px; line-height: 1.45; }
.context-card { width: 240px; }
.context-card h3 { line-height: 1.3; }
.team-card strong { font-size: 14px; }
.team-card p { font-size: 12px; line-height: 1.5; }
.action-card { width: 265px; }
.action-card p { font-size: 13px; line-height: 1.6; color: var(--text-on-dark); }
.action-footer { gap: 8px; }
.action-footer > span { font-size: 11px; line-height: 1.45; flex: 1; min-width: 0; }
.action-footer button { flex: 0 0 44px; border-color: #aa96ea80; }
/* Proposition validée : le libellé change, la carte prend un contour Sandstone et la pastille passe en Lumière. */
.action-card[data-validated] { border-color: #d98b73a6; }
.action-card[data-validated] .action-footer i { background: var(--light); }
.workspace-top, .demo-badge { font-size: 12px; }
.core-description { font-size: 13px; }
.core-status { font-size: 10px; }
.product-story-narration { font-size: 12px; }
.product-story-phase { color: var(--text-on-dark); }
.node { border-color: #b4a0d24d; transition: border-color var(--duration-ui) var(--ease-standard), box-shadow var(--duration-ui) var(--ease-standard); }
.node { box-shadow: 0 12px 25px #0a070b44, 0 0 0 1px rgb(170 150 234 / calc(var(--node-activation, 1) * .12)); }
.product-bottom p { color: var(--text-on-dark); }
.intro-body > p, .approach-intro > p { max-width: 65ch; }
.conviction-grid p { font-size: 15px; line-height: 1.7; }
/* Cartes 3 et 4 sur fonds teintés (atmosphere.css) : le Secondaire clair y tombe à 4,3:1 ; #575264 donne 5,25:1. */
.conviction-grid article:nth-child(n+3) p { color: #575264; }
/* La mention qui présente la photo comme illustrative est une information : 11 px, Secondaire clair (5,54:1). */
.editorial-image figcaption span { font-size: 11px; color: var(--body); }
.footer-right, .footer-right button { font-size: 12px; }
.form-note { font-size: 12px; }
.form-note a, .contact-noscript a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#contact-form label { display: block; }
#contact-form :is(input,select,textarea) { display: block; margin-top: 8px; min-height: 44px; }
/* Champ actif : bordure Iris et halo de 3 px ; l’anneau clavier se pose juste autour du halo. */
#contact-form :is(input,select,textarea):focus { border-color: var(--iris); box-shadow: 0 0 0 3px #7059cb2e; }
#contact-form :is(input,select,textarea):focus-visible { outline-offset: 3px; }
/* Erreurs du formulaire : grès profond (5,8:1 sur Paper), le texte dit ce qu’il faut corriger. */
#contact-form .field-error { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--error); }
/* Spécificité égale à celle de :focus, et déclarée après : la bordure d’erreur reste visible au focus. */
#contact-form :is(input,select,textarea)[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
#contact-form [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px #a63a2433; }
.required-label { font-size: 10px; font-weight: 400; color: var(--text-on-light); }
.dialog-close:hover { background: #7059cb12; }
@media (min-width: 851px) and (max-width: 1200px) {
  .context-card { width: 210px; left: 3%; padding: 17px; }
  .team-card { width: 214px; left: 3%; }
  .action-card { width: 238px; right: 3%; padding: 17px; }
  .action-card p { font-size: 12px; }
  .control-node { right: 8%; bottom: 25px; }
}
@media (max-width: 850px) {
  .menu-toggle { width: 44px; height: 44px; flex: 0 0 44px; align-items: center; }
  .mobile-menu { gap: 8px; }
  .mobile-menu > a, .mobile-menu > button { min-height: 44px; display: flex; align-items: center; }
  .mobile-menu > button { gap: 16px; }
  .team-card { width: 224px; }
  .action-card { width: 275px; }
  .product-story-narration { font-size: 11px; }
}
@media (max-width: 600px) {
  .hero-kicker { font-size: 11px; }
  .hero-description, .intro-body > p:not(.large-copy), .product-heading > p, .approach-intro > p, .step-body > p, .contact-bottom > p { font-size: 16px; line-height: 1.65; }
  .header-contact { font-size: 11px; }
  .hero-bottom { bottom: 14px; }
  .section-tag { font-size: 11px; }
  .product-heading h2 { font-size: clamp(32px, 9.5vw, 40px); }
  .product-workspace { margin-inline: -8px; }
  .workspace-top { padding: 16px 14px; font-size: 11px; }
  .workspace-top > span:first-child { max-width: 180px; }
  .demo-badge { font-size: 10px; white-space: normal; text-align: right; border: 0; padding: 0; }
  .workflow { display: grid; grid-template-columns: minmax(0,1fr); height: auto; gap: 24px; padding: 26px 16px 22px; }
  .workflow::before { top: 65px; bottom: 52px; left: 50%; right: auto; width: 1px; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
  .workflow > :is(.node,.pendly-core,.control-node) { position: relative; inset: auto; margin: 0; }
  .context-card { width: calc(100% - 24px); max-width: 265px; padding: 20px; justify-self: start; }
  .context-card h3 { font-size: 20px; }
  .node-label, .action-card .node-label { font-size: 12px; }
  .context-chips { gap: 8px; }
  .context-chips > span { font-size: 11px; padding: 5px 7px; }
  .team-card { justify-self: end; width: 230px; max-width: calc(100% - 8px); transform: rotate(2deg); padding: 17px; gap: 12px; }
  .team-card strong { font-size: 14px; }
  .team-card p { font-size: 12px; }
  .pendly-core { justify-self: center; transform: none; width: 182px; height: 208px; }
  .core-word { font-size: 32px; }
  .core-description { font-size: 13px; }
  .core-status { font-size: 10px; }
  .action-card { justify-self: end; width: calc(100% - 16px); max-width: 290px; padding: 20px; }
  .action-card h3 { font-size: 19px; min-height: 0; }
  .action-card p { font-size: 14px; line-height: 1.65; min-height: 0; }
  .action-footer { margin-top: 18px; }
  .action-footer > span { font-size: 12px; }
  .control-node { justify-self: end; font-size: 12px; gap: 10px; padding: 7px 5px; background: #14111e; }
  .control-check { width: 30px; height: 30px; }
  .scenario-controls { gap: 6px; padding: 14px 8px; }
  .scenario-controls button { font-size: 11px; padding: 10px 6px; min-height: 54px; }
  .product-story-narration { font-size: 11px; gap: 12px; }
  .product-bottom p { font-size: 15px; }
  .conviction-grid { column-gap: 24px; row-gap: 36px; }
  .conviction-grid h3 { font-size: 19px; }
  .conviction-grid p { font-size: 14px; line-height: 1.6; }
  /* La légende ne descend pas sous 11 px, ni plus petite que sa mention. */
  .editorial-image figcaption { font-size: 11px; }
  .footer p { font-size: 12px; }
  .footer-right { gap: 12px; flex-wrap: wrap; }
  .footer-right, .footer-right button { font-size: 11px; }
  .form-note, .dialog-intro { font-size: 13px; }
  .dialog-close { top: 8px; right: 8px; }
}
@media (max-width: 360px) {
  .header { gap: 6px; }
  .header-contact { max-width: 95px; text-align: left; line-height: 1.35; }
  .conviction-grid { grid-template-columns: 1fr; }
  .conviction-grid p { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .action-footer i { transition: background-color var(--duration-ui) var(--ease-standard); }
  #contact-form :is(input,select,textarea) { transition: border-color var(--duration-feedback) var(--ease-standard), box-shadow var(--duration-feedback) var(--ease-standard); }
}
@media (prefers-reduced-motion: reduce) {
  .node { transition: none; }
}
/* Couleurs forcées : les fonds disparaissent, le scénario choisi garde un contour système et un soulignement. */
@media (forced-colors: active) {
  .scenario-controls button[aria-pressed="true"], .scenario-controls.has-indicator button[aria-pressed="true"] { border-color: Highlight; text-decoration: underline 2px; text-underline-offset: 4px; }
  /* Les traits du bouton de menu sont dessinés en fond : sans cette couleur système, le bouton paraît vide. */
  .menu-toggle span { background: ButtonText; }
}
@media print {
  .scenario-indicator { display: none; }
  .scenario-controls.has-indicator button.active { border-color: #aa96ea8c; background: #aa96ea1e; }
}
@media (min-width: 851px) { .workflow { height: 490px; } }
@media (min-width: 601px) and (max-width: 850px) { .workflow { height: 820px; } }

/* Grands titres : tous en Figtree 400, y compris les convictions et le dialogue de contact. */
.convictions-top h2, dialog h2 { font-family: Figtree, Arial, sans-serif; font-weight: 400; letter-spacing: -.045em; line-height: 1.08; }
.convictions-top h2 { font-size: clamp(32px, 3.3vw, 52px); }
dialog h2 { font-size: clamp(33px, 4vw, 42px); }

/* Pas de mot orphelin : paragraphes répartis, titres équilibrés. */
p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

/* Ombres teintées Encre, comme le reste du site, au lieu d’un noir générique. */
dialog { box-shadow: 0 24px 90px #0f0e1780; }
.mobile-menu { box-shadow: 0 20px 40px #0f0e1759; }

/* Formulaire à l’échelle « Interface » de la charte (14–16 px) ; bordures et textes indicatifs lisibles. */
#contact-form label { font-size: 14px; }
#contact-form .required-label { font-size: 12px; }
#contact-form :is(input,select,textarea) { font-size: 16px; border-color: #221b348c; }
#contact-form ::placeholder { color: var(--text-on-light); opacity: 1; }
/* Envoi et repli de copie sur une même rangée ; la copie passe dessous sur petit écran. */
#contact-form .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
#contact-form .form-actions .button { flex: 1 1 260px; }
#contact-form .contact-copy { gap: 16px; color: var(--depth); }
#contact-copy-label { font-size: inherit; translate: none; }
/* Statut vide : aucune place, sauf celle réservée par app.js après une saisie. */
#form-status:empty:not([style]) { display: none; }
/* Lien de contact du menu mobile, au même rang que l’ancien bouton. */
.mobile-menu > .mobile-menu-contact { display: inline-flex; align-items: center; gap: 8px; color: var(--mist); }
/* La marque reste une cible de 44 px, même quand elle rétrécit sur mobile. */
.brand { min-height: 44px; justify-content: center; }
/* Sans JavaScript, la ligne de contact se détache du paragraphe qui suit. */
.contact-noscript { margin-bottom: 20px; }
/* Bouton Iris au survol : la pastille de flèche passe en Relief pour rester lisible. */
@media (hover: hover) and (pointer: fine) { .button.button-purple:hover .button-arrow { background: var(--depth); } }