@charset "UTF-8";
/* ==========================================================================
   EA-SERVICES — système de design « éditorial affirmé »  (v2, prototype)
   --------------------------------------------------------------------------
   Trois valeurs, pas huit : marine, ivoire, safran. Les cinq teintes de gains
   de la v1 ont été supprimées — c'était la première cause de fadeur : un site
   à huit couleurs n'a pas de couleur.

   Le safran ne sert JAMAIS de fond décoratif. Il ne touche que deux choses :
   les chiffres, et le bouton de l'action unique. C'est ce qui le rend lisible
   comme un signal plutôt que comme une décoration.

   Mobile first, écrit pour 390 px puis élargi. Aucune couleur en dur : le
   thème sombre redéfinit les mêmes jetons.
   ========================================================================== */

/* --- 1. Polices — auto-hébergées ---------------------------------------
   Deux familles variables, 59 Ko au total, servies depuis notre domaine.
   La v1 chargeait Inter depuis le CDN de Google en feuille bloquante : sur un
   réseau ivoirien lent, c'est un aller-retour vers un tiers avant le premier
   pixel — et un appel à un tiers avant tout consentement. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk.woff2') format('woff2-variations');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Jetons ---------------------------------------------------------- */

:root {
  /* Marine — relevé sur le logo, assombri pour tenir en aplat plein écran */
  --encre:        #112849;
  --encre-fond:   #091a32;
  --encre-douce:  #294365;

  /* Papiers — un blanc cassé chaud plutôt qu'un blanc clinique : c'est ce qui
     donne le caractère « imprimé » de la direction retenue. */
  --ivoire:       #f7f4ec;
  --papier:       #fffdf8;
  --sable:        #ebe5d8;

  /* Safran — l'accent unique. Deux valeurs : l'aplat, et la version texte.
     Le safran vif sur ivoire ne fait que 2,1:1 — illisible. Toute mention
     ÉCRITE en safran sur fond clair utilise --safran-encre : 5,96:1 sur
     l'ivoire et 5,22:1 sur le sable, mesurés. (La première valeur essayée,
     #8a5f06, tombait à 4,498:1 sur le sable — sous le seuil AA.) */
  --safran:       #f2b62b;
  --safran-vif:   #ffcc4d;
  --safran-encre: #7d5605;

  --signal:       #128c4a;   /* WhatsApp, et lui seul */

  --texte:        var(--encre);
  --texte-doux:   #5a6577;
  --fond:         var(--ivoire);
  --surface:      var(--papier);
  --trait:        rgba(17, 40, 73, .16);
  --trait-clair:  rgba(255, 255, 255, .20);

  --serif-titre:  'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sans-texte:   'DM Sans', ui-sans-serif, system-ui, sans-serif;

  --largeur:      74rem;
  --gouttiere:    1.25rem;
  --arrondi:      .5rem;
  --arrondi-lg:   1rem;
  --sortie:       cubic-bezier(.23, 1, .32, 1);
  --transition:   200ms var(--sortie);
}

:root[data-theme="sombre"] {
  --ivoire:       #0c1526;
  --papier:       #121e33;
  --sable:        #16233c;
  --texte:        #eef3fb;
  --texte-doux:   #a3b1c9;
  --fond:         var(--ivoire);
  --surface:      var(--papier);
  --trait:        rgba(255, 255, 255, .14);
  --safran-encre: var(--safran-vif);
}

/* --- 3. Base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans-texte);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif-titre);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

/* L'échelle typographique est le cœur de la direction : les titres montent
   très haut sur mobile (13vw) parce qu'un titre timide sur un téléphone ne
   se lit pas comme une prise de parole. */
h1 { font-size: clamp(2.6rem, 12vw, 5.5rem); }
h2 { font-size: clamp(2rem, 8.5vw, 3.5rem); }
h3 { font-size: 1.125rem; letter-spacing: -.01em; }

/* La deuxième moitié du titre, en safran : c'est le geste typographique de la
   direction. Par défaut on prend la version ENCRE — le safran vif sur ivoire
   ou sur sable ne fait que 1,8:1, illisible. Seuls les fonds marine reçoivent
   le safran vif. */
h1 em, h2 span.suite {
  display: block;
  font-style: normal;
  color: var(--safran-encre);
}
/* Sur fond foncé, l'or CLAIR — mesuré : safran sur encre = 6,4:1, alors que
   safran-encre n'y atteint que 2,25:1, très en dessous des 4,5:1 exigés.
   `h1 em` etait absent de cette liste : un titre de page pose sur une section
   encre ressortait donc en or sombre, illisible. Constate sur /pages/services
   en MESURANT le contraste, pas en relisant le CSS. */
.heros h1 em,
.section--encre h1 em,
.diagnostic h1 em,
.section--encre h2 span.suite,
.diagnostic h2 span.suite { color: var(--safran); }

/* Titres de hero : effet machine à écrire (posé par ea-v2.js). Le curseur
   emprunte la couleur du texte qui l'entoure (currentColor) : blanc sur la
   première ligne, safran une fois déplacé dans la seconde (<em>). Sans JS ou
   en mouvement réduit, le titre reste simplement affiché tel quel — l'effet
   ne retape jamais le texte lu par un lecteur d'écran (voir aria-label). */
.titre-machine__curseur {
  display: inline-block;
  width: .05em; height: .82em;
  margin-left: .03em;
  background: currentColor;
  vertical-align: -.08em;
  animation: titre-machine-clignoter 1s step-end infinite;
}
@keyframes titre-machine-clignoter { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .titre-machine__curseur { display: none; }
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--safran); text-underline-offset: .2em; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--safran);
  outline-offset: 3px;
  border-radius: 2px;
}

.mesure { max-width: 34ch; }
.mesure-large { max-width: 52ch; }
.doux { color: var(--texte-doux); }

.saut-contenu {
  position: absolute; left: -9999px; z-index: 100;
  padding: .75rem 1rem; background: var(--encre); color: #fff;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* --- 4. Mise en page ---------------------------------------------------- */

.page-large {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { position: relative; overflow: hidden; padding-block: 3.5rem; }
.section--claire { background: var(--ivoire); }
.section--papier { background: var(--surface); }
.section--sable  { background: var(--sable); }
.section--encre  { background: var(--encre); color: #fff; }
.section--encre .doux { color: rgba(255, 255, 255, .72); }
.section--encre a { text-decoration-color: var(--safran); }

/* Fond animé de chaque section : cinq pictos épais — nuage, code, robot,
   croissance, engrenage — plutôt que des vagues abstraites, pour ancrer
   visuellement le métier (dev, IA, cloud, automatisation, résultats
   chiffrés). `currentColor` reprend la couleur de texte déjà posée par
   chaque variante de section (sombre sur fond clair, blanc sur
   `.section--encre`) : le motif reste visible dans les deux thèmes sans
   jeton de couleur séparé à entretenir. Un masque plutôt qu'une image : la
   teinte suit le thème, seule la forme vient du SVG — la tuile (340 × 340)
   se répète à l'identique en largeur ET en hauteur, et se déplace en
   diagonale plutôt qu'en ligne droite. Opacité basse et masquée derrière
   tout élément opaque (cartes, boutons) : jamais sous le texte qui compte. */
.section::before {
  content: "";
  position: absolute; inset: 0;
  background: currentColor;
  opacity: .05;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Cg fill='white'%3E%3Crect x='30' y='70' width='90' height='34' rx='17'/%3E%3Ccircle cx='50' cy='66' r='20'/%3E%3Ccircle cx='78' cy='54' r='26'/%3E%3Ccircle cx='106' cy='66' r='18'/%3E%3Cpolygon points='225,52 195,90 225,128 237,116 211,90 237,64'/%3E%3Cpolygon points='275,52 305,90 275,128 263,116 289,90 263,64'/%3E%3Crect x='242' y='48' width='14' height='84' rx='6' transform='rotate(20 249 90)'/%3E%3Crect x='150' y='195' width='70' height='60' rx='14'/%3E%3Crect x='177' y='170' width='16' height='26' rx='8'/%3E%3Ccircle cx='185' cy='164' r='9'/%3E%3Crect x='130' y='210' width='18' height='30' rx='9'/%3E%3Crect x='222' y='210' width='18' height='30' rx='9'/%3E%3Crect x='16' y='255' width='20' height='35' rx='4'/%3E%3Crect x='42' y='235' width='20' height='55' rx='4'/%3E%3Crect x='68' y='205' width='20' height='85' rx='4'/%3E%3Crect x='-6' y='-46' width='13' height='66' rx='6' transform='translate(80,235) rotate(-35)'/%3E%3Cpolygon points='86,178 112,182 92,202'/%3E%3Cg transform='translate(280,255)'%3E%3Ccircle r='30'/%3E%3Crect x='-7' y='-42' width='14' height='20' rx='4'/%3E%3Crect x='-7' y='22' width='14' height='20' rx='4'/%3E%3Crect x='-42' y='-7' width='20' height='14' rx='4'/%3E%3Crect x='22' y='-7' width='20' height='14' rx='4'/%3E%3Crect x='-7' y='-42' width='14' height='20' rx='4' transform='rotate(45)'/%3E%3Crect x='-7' y='22' width='14' height='20' rx='4' transform='rotate(45)'/%3E%3Crect x='-42' y='-7' width='20' height='14' rx='4' transform='rotate(45)'/%3E%3Crect x='22' y='-7' width='20' height='14' rx='4' transform='rotate(45)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Cg fill='white'%3E%3Crect x='30' y='70' width='90' height='34' rx='17'/%3E%3Ccircle cx='50' cy='66' r='20'/%3E%3Ccircle cx='78' cy='54' r='26'/%3E%3Ccircle cx='106' cy='66' r='18'/%3E%3Cpolygon points='225,52 195,90 225,128 237,116 211,90 237,64'/%3E%3Cpolygon points='275,52 305,90 275,128 263,116 289,90 263,64'/%3E%3Crect x='242' y='48' width='14' height='84' rx='6' transform='rotate(20 249 90)'/%3E%3Crect x='150' y='195' width='70' height='60' rx='14'/%3E%3Crect x='177' y='170' width='16' height='26' rx='8'/%3E%3Ccircle cx='185' cy='164' r='9'/%3E%3Crect x='130' y='210' width='18' height='30' rx='9'/%3E%3Crect x='222' y='210' width='18' height='30' rx='9'/%3E%3Crect x='16' y='255' width='20' height='35' rx='4'/%3E%3Crect x='42' y='235' width='20' height='55' rx='4'/%3E%3Crect x='68' y='205' width='20' height='85' rx='4'/%3E%3Crect x='-6' y='-46' width='13' height='66' rx='6' transform='translate(80,235) rotate(-35)'/%3E%3Cpolygon points='86,178 112,182 92,202'/%3E%3Cg transform='translate(280,255)'%3E%3Ccircle r='30'/%3E%3Crect x='-7' y='-42' width='14' height='20' rx='4'/%3E%3Crect x='-7' y='22' width='14' height='20' rx='4'/%3E%3Crect x='-42' y='-7' width='20' height='14' rx='4'/%3E%3Crect x='22' y='-7' width='20' height='14' rx='4'/%3E%3Crect x='-7' y='-42' width='14' height='20' rx='4' transform='rotate(45)'/%3E%3Crect x='-7' y='22' width='14' height='20' rx='4' transform='rotate(45)'/%3E%3Crect x='-42' y='-7' width='20' height='14' rx='4' transform='rotate(45)'/%3E%3Crect x='22' y='-7' width='20' height='14' rx='4' transform='rotate(45)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: 340px 340px; mask-size: 340px 340px;
  animation: vague-defiler 38s linear infinite;
  pointer-events: none;
}
@keyframes vague-defiler {
  0%   { -webkit-mask-position: 0px 0px;       mask-position: 0px 0px; }
  25%  { -webkit-mask-position: -340px -85px;  mask-position: -340px -85px; }
  50%  { -webkit-mask-position: -85px -340px;  mask-position: -85px -340px; }
  75%  { -webkit-mask-position: 255px -255px;  mask-position: 255px -255px; }
  100% { -webkit-mask-position: 340px -340px;  mask-position: 340px -340px; }
}
@media (prefers-reduced-motion: reduce) {
  .section::before { animation: none; }
}

@media (min-width: 48rem) {
  :root { --gouttiere: 2rem; }
  .section { padding-block: 6rem; }
}

/* --- 5. Étiquette de section -------------------------------------------
   « 02 / LA PERTE ». C'est l'élément qui donne le rythme de lecture d'un
   magazine : le visiteur sait toujours où il en est dans la démonstration. */

/* Sur mobile les deux parties s'empilent, alignées à gauche : côte à côte, le
   descriptif repartait en retrait sous l'index et faisait un pâté illisible. */
.etiquette-section {
  display: grid; gap: .25rem;
  margin-bottom: 1.25rem;
  font-family: var(--serif-titre);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
@media (min-width: 48rem) {
  .etiquette-section {
    display: flex; align-items: baseline; gap: .75rem;
  }
}
.etiquette-section__index { color: var(--safran-encre); white-space: nowrap; }
.section--encre .etiquette-section__index { color: var(--safran); }
.etiquette-section__texte { color: var(--texte-doux); font-weight: 500; letter-spacing: .1em; }
.section--encre .etiquette-section__texte { color: rgba(255, 255, 255, .7); }

/* --- 6. Boutons — cible tactile 48 px ----------------------------------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 3.25rem; padding: .875rem 1.5rem;
  border: 2px solid transparent; border-radius: var(--arrondi);
  font-family: var(--serif-titre); font-size: 1rem; font-weight: 600;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.bouton:active { transform: translateY(1px); }

/* L'unique action principale du site. Safran plein, texte marine. */
.bouton--safran { background: var(--safran); color: var(--encre-fond); }
.bouton--safran:hover { background: var(--safran-vif); }

.bouton--encre { background: var(--encre); color: #fff; }
.bouton--encre:hover { background: var(--encre-douce); }

.bouton--contour { border-color: var(--trait); color: var(--texte); }
.bouton--contour:hover { border-color: var(--safran-encre); }

.bouton--contour-clair { border-color: var(--trait-clair); color: #fff; }
.bouton--contour-clair:hover { border-color: var(--safran); }

.bouton--large { width: 100%; }
@media (min-width: 30rem) { .bouton--large { width: auto; } }

.ico { width: 1.125em; height: 1.125em; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.ico--lg { width: 1.5rem; height: 1.5rem; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--serif-titre); font-weight: 600; font-size: .9375rem;
  text-decoration: none; border-bottom: 2px solid var(--safran);
  padding-bottom: .15rem;
}
.lien-fleche:hover .ico { transform: translateX(3px); }
.lien-fleche .ico { transition: transform var(--transition); }

/* --- 7. En-tête --------------------------------------------------------- */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete__barre {
  display: flex; align-items: center; gap: .75rem;
  min-height: 4.25rem;
}
.marque { display: flex; align-items: center; gap: .625rem; text-decoration: none; margin-right: auto; }
.marque img { width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.marque__nom {
  display: block; font-family: var(--serif-titre); font-weight: 700;
  font-size: 1rem; letter-spacing: -.01em;
}
/* 11 px minimum : la maquette React descendait la signature à 7 px sur
   mobile, ce qui n'est plus lisible — c'est un défaut, pas un détail. */
.marque__ligne {
  display: block; font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux);
}

.nav__liens { display: none; gap: 1.5rem; }
.nav__liens a {
  font-size: .9375rem; font-weight: 500; text-decoration: none;
  color: var(--texte-doux); transition: color var(--transition);
}
.nav__liens a:hover, .nav__liens a[aria-current="page"] { color: var(--texte); }
.nav__liens a[aria-current="page"] { border-bottom: 2px solid var(--safran); }

.entete .bouton--safran { display: none; }

.bouton-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 1px solid var(--trait); border-radius: var(--arrondi);
  color: var(--texte); cursor: pointer;
}

@media (min-width: 64rem) {
  .nav__liens { display: flex; }
  .entete .bouton--safran { display: inline-flex; min-height: 2.75rem; padding: .5rem 1.125rem; font-size: .9375rem; }
  .nav__bascule { display: none; }
}

.nav__panneau { display: none; padding-bottom: 1.25rem; }
.nav__panneau[data-ouvert="oui"] { display: grid; gap: .25rem; }
.nav__panneau a {
  padding: .875rem .25rem; text-decoration: none;
  font-family: var(--serif-titre); font-size: 1.125rem; font-weight: 600;
  border-bottom: 1px solid var(--trait);
}
.nav__panneau .bouton { margin-top: 1rem; }

/* --- 8. Bandeau d'accueil ------------------------------------------------
   La photo pose l'atmosphere, le voile ne doit pas l'etouffer : image
   lumineuse, degrade resserre derriere le titre et le chapo seulement. */

.heros {
  position: relative;
  background: var(--encre-fond);
  color: #fff;
  overflow: hidden;
  padding-block: 3.5rem 2.5rem;
}
.heros__fond { position: absolute; inset: 0; z-index: 0; }
/* Trois photos superposées, une seule opaque a la fois (fondu piloté par
   ea-v2.js). Par defaut la premiere est visible en continu : sans JS, en
   mouvement reduit, ou avant le premier bascule, rien ne casse. */
.heros__fond img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.8s ease;
}
.heros__fond img:first-child { opacity: .85; }
.heros__fond img.est-visible { opacity: .85; }
.heros__fond img.est-cachee { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .heros__fond img { transition: none; }
}
/* Le voile garde 4,5:1 sous le titre et le chapo (bas-gauche) sans assombrir
   le reste de la photo : transparent des le haut, resserre en bas-gauche. */
.heros__voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(9, 26, 50, .28) 0%, rgba(9, 26, 50, .5) 55%, rgba(9, 26, 50, .82) 100%),
    linear-gradient(90deg, rgba(9, 26, 50, .55) 0%, rgba(9, 26, 50, 0) 65%);
}
.heros > .page-large { position: relative; z-index: 2; }

.heros h1 { margin-bottom: 1.25rem; }
.heros__chapo {
  font-size: 1.0625rem; color: rgba(255, 255, 255, .82);
  max-width: 46ch; margin-bottom: 2rem;
}
.heros__actions { display: grid; gap: .75rem; }
@media (min-width: 30rem) { .heros__actions { display: flex; flex-wrap: wrap; } }

.heros__promesse {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 1.25rem; font-size: .875rem; font-weight: 500;
  color: var(--safran);
}
.point-actif {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--safran); flex: none;
}

/* Les quatre chiffres-clés. C'est ici que le safran fait le travail. */
.heros__chiffres {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; margin-top: 3rem;
  background: var(--trait-clair);
  border: 1px solid var(--trait-clair);
}
.heros__chiffre {
  background: var(--encre-fond);
  padding: 1.25rem 1rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.heros__chiffre strong {
  /* « +20 à 40 % » est le libellé le plus long : il doit tenir sur une ligne
     dans une demi-colonne de 390 px. */
  font-family: var(--serif-titre); font-size: clamp(1.4rem, 5.8vw, 2.5rem);
  font-weight: 700; line-height: 1; color: var(--safran);
  font-variant-numeric: tabular-nums;
}
.heros__chiffre span { font-size: .8125rem; color: rgba(255, 255, 255, .68); line-height: 1.35; }

@media (min-width: 48rem) {
  .heros { padding-block: 6rem 3rem; }
  .heros__chiffres { grid-template-columns: repeat(4, 1fr); }
}

.heros__credit {
  position: relative; z-index: 2;
  margin-top: 1rem; font-size: .6875rem;
  color: rgba(255, 255, 255, .45); text-align: right;
}
.heros__credit a { color: inherit; }

/* --- 9. Relevé de pertes ------------------------------------------------
   Le chiffre d'abord, le texte ensuite. Sur mobile le chiffre est au-dessus :
   c'est la seule chose qu'on lit vraiment en défilant. */

.releve { border-top: 1px solid var(--trait); margin-top: 2.5rem; }
.releve__ligne {
  display: grid; gap: .5rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--trait);
}
.releve__chiffre {
  font-family: var(--serif-titre); font-size: clamp(2.75rem, 14vw, 4.5rem);
  font-weight: 700; line-height: .9; letter-spacing: -.04em;
  color: var(--safran-encre); font-variant-numeric: tabular-nums;
}
.releve__bascule {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-doux); font-weight: 500;
}
@media (min-width: 48rem) {
  /**
   * BUG RÉEL CORRIGÉ (2026-08-15) : cette colonne était calée sur « 120 h »
   * (13rem fixes, 4rem de corps fixe, nowrap forcé) — un débordement de
   * texte visible dès que le chiffre est devenu « 420-720 h » (9 caractères
   * contre 5), la valeur ne tenant plus dans la colonne.
   *
   * Corrigé une première fois en élargissant la colonne à la main ; corrigé
   * pour de bon ici en la rendant FLUIDE (clamp avec composante vw) : la
   * colonne et la police suivent la largeur d'écran en continu, au lieu
   * d'un saut brutal figé à un seul point de rupture. Un chiffre plus long
   * demain n'aura pas besoin d'un nouveau correctif — il s'étale sur deux
   * lignes proprement si vraiment nécessaire, jamais hors de sa boîte.
   */
  .releve__ligne { grid-template-columns: clamp(11rem, 8rem + 12vw, 16rem) 1fr clamp(9rem, 6rem + 8vw, 12rem); gap: 2rem; align-items: start; }
  .releve__chiffre { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); white-space: normal; }
  .releve__bascule { text-align: right; }
}

/* --- 10. Manifeste des cinq gains --------------------------------------- */

.manifeste { margin-top: 2.5rem; border-top: 1px solid var(--trait-clair); }
.manifeste__ligne {
  display: grid; gap: .5rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--trait-clair);
  grid-template-columns: 2.5rem 1fr;
  align-items: start;
}
.manifeste__num {
  font-family: var(--serif-titre); font-size: clamp(.9375rem, .85rem + .4vw, 1.0625rem); font-weight: 600;
  color: var(--safran); padding-top: .2rem;
}
.manifeste__corps h3 { margin-bottom: .35rem; }
.manifeste__impact {
  grid-column: 2;
  display: inline-block; margin-top: .5rem;
  font-family: var(--serif-titre); font-weight: 600; font-size: .9375rem;
  color: var(--safran); font-variant-numeric: tabular-nums;
}
@media (min-width: 48rem) {
  /* Troisième colonne (l'impact chiffré) fluide plutôt que 16rem figés :
     un libellé plus long (« 420 à 720 heures récupérées par an ») garde de
     la place pour respirer sans jamais forcer la colonne du texte courant. */
  .manifeste__ligne { grid-template-columns: clamp(2.5rem, 2rem + 2vw, 3.5rem) 1fr clamp(12rem, 8rem + 14vw, 18rem); gap: 2rem; align-items: center; }
  .manifeste__impact { grid-column: 3; margin-top: 0; text-align: right; font-size: clamp(.9375rem, .85rem + .3vw, 1.0625rem); }
}

/* --- 11. Cartes et preuve ----------------------------------------------- */

.grille { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 48rem) { .grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .grille--3 { grid-template-columns: repeat(3, 1fr); } }

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi-lg);
  padding: 1.5rem;
}
.carte h3 { margin-bottom: .5rem; }

.chapeau {
  display: inline-block; margin-bottom: .75rem;
  font-family: var(--serif-titre); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--safran-encre);
}

/* Rangée de pastilles — les six familles de prestations sur l'accueil, ou un
   mot-clé public par gain sur /pages/services : un repère de vocabulaire,
   pas un lien de plus à cliquer. */
.marqueurs { display: flex; flex-wrap: wrap; gap: .5rem; }
.marqueur {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .375rem .75rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--trait);
  font-size: .8125rem; font-weight: 600; color: var(--texte-doux);
}
.marqueur .ico { width: 1rem; height: 1rem; color: var(--safran-encre); }

/* Avant → après : le tableau de la v1 devient une paire de chiffres. Un
   tableau à trois colonnes sur 390 px se lit mal ; deux chiffres et une
   flèche se lisent d'un coup d'œil. */
.bascules { display: grid; gap: .75rem; margin-top: 1.25rem; }
.bascule {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: .75rem;
  padding-block: .625rem;
  border-bottom: 1px solid var(--trait);
}
.bascule:last-child { border-bottom: 0; }
.bascule span { font-size: .875rem; color: var(--texte-doux); }
.bascule strong {
  font-family: var(--serif-titre); font-size: 1.125rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bascule strong b { color: var(--safran-encre); font-weight: 600; margin-inline: .2rem; }

.investissement {
  display: block; margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--trait);
  font-size: .8125rem; color: var(--texte-doux);
}

/* Emplacement réservé — jamais un témoignage inventé (règle du projet). */
.reserve {
  margin-top: 2rem; padding: 2rem 1.5rem;
  border: 2px dashed var(--trait); border-radius: var(--arrondi-lg);
  text-align: center; color: var(--texte-doux);
}

/* Variante "preuve à venir" : un vrai bloc éditorial, pas un placeholder qui
   se voit — le fond plein et l'icône lui donnent la même intention visuelle
   que les cartes de cas chiffrés juste au-dessus. */
.reserve--avis {
  border-style: solid; background: var(--papier);
  max-width: 34rem; margin-left: auto; margin-right: auto;
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.reserve__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
  border-radius: 50%; background: color-mix(in srgb, var(--safran) 20%, transparent);
  color: var(--safran-encre);
}
.reserve__icone .ico { width: 1.375rem; height: 1.375rem; }
.reserve__titre {
  margin: 0 0 .5rem; font-family: var(--serif-titre);
  font-size: 1.0625rem; color: var(--encre);
}
.reserve__texte { margin: 0; font-size: .9375rem; }

/* --- 12. Méthode -------------------------------------------------------- */

.etapes { list-style: none; margin: 2.5rem 0 0; padding: 0; counter-reset: etape; }
.etape {
  position: relative;
  display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem;
  padding-bottom: 2rem;
}
.etape::before {
  counter-increment: etape; content: "0" counter(etape);
  font-family: var(--serif-titre); font-weight: 700; font-size: .9375rem;
  color: var(--safran-encre);
  padding-top: .15rem;
}
/* Le filet vertical qui relie les étapes : c'est lui qui dit « il y a une
   suite », sans qu'on ait à l'écrire. */
.etape::after {
  content: ""; position: absolute; left: .9rem; top: 1.75rem; bottom: .25rem;
  width: 1px; background: var(--trait);
}
.etape:last-child { padding-bottom: 0; }
.etape:last-child::after { display: none; }
.etape h3 { margin-bottom: .25rem; }

/* --- 13. Bandeau diagnostic --------------------------------------------- */

/* Le bouton WhatsApp flottant est fixé en bas à droite : sans cette réserve,
   il recouvre en permanence la dernière ligne du site. */
.diagnostic { background: var(--encre); color: #fff; padding-block: 3.5rem 6rem; }
.diagnostic h2 { margin-bottom: 1rem; }
.diagnostic__actions { display: grid; gap: .75rem; margin-top: 2rem; }
@media (min-width: 30rem) { .diagnostic__actions { display: flex; flex-wrap: wrap; align-items: center; } }
.diagnostic__note { font-size: .875rem; color: rgba(255, 255, 255, .65); }
@media (min-width: 60rem) {
  /**
   * BUG RÉEL CORRIGÉ (2026-08-15) : `auto` se dimensionne sur le contenu
   * NON replié (max-content) même quand ce contenu a `flex-wrap: wrap` —
   * la colonne des boutons+note réclamait donc toute sa largeur sur une
   * seule ligne (756px mesurés), écrasant la colonne de texte à 316px et
   * forçant le titre à se replier mot par mot. `minmax(0, …)` sur les deux
   * pistes autorise chacune à rétrécir sous son contenu naturel, ce qui
   * laisse `flex-wrap` faire son travail normalement.
   */
  .diagnostic__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 3rem; align-items: end; }
  .diagnostic__actions { margin-top: 0; }
}

/* --- 14. Pied de page --------------------------------------------------- */

.pied { background: var(--encre-fond); color: rgba(255, 255, 255, .78); padding-block: 3.5rem 2rem; }
.pied h4 {
  font-family: var(--serif-titre); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--safran); margin-bottom: 1rem;
}
.pied__grille { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 64rem) { .pied__grille { grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; } }
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.pied__liste a, .pied__liste li { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.pied__liste a { text-decoration: none; }
.pied__liste a:hover { color: #fff; text-decoration: underline; }
.pied__bas {
  display: grid; gap: .5rem; margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--trait-clair);
  font-size: .8125rem; color: rgba(255, 255, 255, .5);
}
@media (min-width: 48rem) { .pied__bas { display: flex; justify-content: space-between; } }

/* --- 15. WhatsApp flottant ---------------------------------------------- */

.flottant {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 55;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3.25rem; padding: 0 1.125rem;
  background: var(--signal); color: #fff;
  border-radius: 999px; text-decoration: none;
  font-family: var(--serif-titre); font-weight: 600;
  box-shadow: 0 10px 30px rgba(18, 140, 74, .45);
}
.flottant span { display: none; }
@media (min-width: 30rem) { .flottant span { display: inline; } }

/* --- 16. Mouvement ------------------------------------------------------
   Un seul mouvement, et il est signé : les chiffres se posent. Pas de fondu
   générique appliqué à toutes les cartes — c'était la signature « gabarit
   rempli » de la v1. Tout est visible par défaut : sans JavaScript, ou en
   cas de préférence « mouvement réduit », il ne manque rien. */

.pose { opacity: 0; transform: translateY(14px); }
.pose--visible {
  opacity: 1; transform: none;
  transition: opacity .7s var(--sortie), transform .7s var(--sortie);
}

@media (prefers-reduced-motion: reduce) {
  .pose, .pose--visible { opacity: 1; transform: none; transition: none; }
  .bouton, .lien-fleche .ico { transition: none; }
}

/* --- Bandeau de consentement -----------------------------------------------
   RÉGRESSION ÉVITÉE (2026-08-13) : en basculant l'accueil sur cette feuille,
   le bandeau s'est retrouvé SANS AUCUN STYLE — `.cookies`, `.rangee` et le
   modificateur `.bouton--marine` n'existaient que dans ea.css. Le bandeau
   retombait donc en fin de document, en texte brut : le consentement devenait
   inatteignable là où il est légalement requis.

   Les règles sont reprises ici avec les jetons de CETTE feuille, jamais des
   couleurs en dur — sinon le bandeau devient illisible dans l'autre thème. */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: none; gap: var(--gouttiere); align-items: center; flex-wrap: wrap;
  padding: 1rem; margin: .75rem;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--trait); border-radius: var(--arrondi-lg);
  box-shadow: 0 12px 32px rgba(17, 40, 73, .18);
  font-size: .9375rem;
}
.cookies[data-visible="oui"] { display: flex; }
.cookies p { margin: 0; flex: 1 1 16rem; color: var(--texte-doux); }
.cookies .rangee { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Le partial est commun aux deux gabarits et demande `bouton--marine`, qui
   n'existe pas ici : on l'aligne sur le bouton foncé de cette direction
   plutôt que de modifier le partial, qui doit rester valable des deux côtés. */
.bouton--marine { background: var(--encre); color: #fff; }
.bouton--marine:hover { background: var(--encre-douce); }

/* Même compaction mobile que sur l'autre feuille : à 390 px le bandeau
   recouvrait les chiffres du héros, c'est-à-dire la preuve. Texte inchangé
   (explication honnête de l'IP), seule la densité change. Boutons à 44 px,
   cible tactile minimale du système de design. */
@media (max-width: 34rem) {
  .cookies {
    margin: .5rem; padding: .8125rem .875rem;
    gap: .625rem; font-size: .8125rem;
  }
  .cookies p       { flex: 1 1 100%; line-height: 1.5; }
  .cookies .rangee { width: 100%; flex-wrap: nowrap; }
  .cookies .rangee .bouton { flex: 1; min-height: 2.75rem; padding: .5rem .75rem; }
}

/* --- Liste à puces fléchées ------------------------------------------------
   Reprise de l'intention de la v1 (une flèche plutôt qu'une puce : on annonce
   un mouvement, pas un inventaire), avec les jetons de cette feuille.
   `--safran-encre` et non `--safran` : l'or clair sur fond papier plafonne
   autour de 2:1, très en dessous du 4,5:1 exigé par le système de design. */
.liste-cochee { list-style: none; padding: 0; display: grid; gap: .625rem; }
.liste-cochee li {
  display: grid; grid-template-columns: auto 1fr;
  gap: .625rem; align-items: start;
  color: var(--texte-doux);
}
.liste-cochee li::before {
  content: "→";
  color: var(--safran-encre);
  font-weight: 700;
  line-height: 1.7;
}

/* --- Formulaire, alertes, FAQ ----------------------------------------------
   Portés depuis la v1 pour la page contact. Intention conservée, jetons de
   CETTE feuille — jamais de couleur en dur, sinon illisible dans l'autre
   thème (piège déjà rencontré sur ce dépôt).

   Champs à 3rem de haut : au-dessus des 44 px de cible tactile exigés par le
   système de design, et confortable au pouce sur un formulaire long. */
.champ { display: grid; gap: .375rem; margin-bottom: 1.25rem; }
.champ label { font-weight: 600; font-size: .9375rem; color: var(--texte); }
.champ input, .champ textarea, .champ select {
  width: 100%; min-height: 3rem; padding: .75rem;
  font: inherit; color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--arrondi);
  transition: border-color .2s var(--sortie);
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: 2px solid var(--safran-encre); outline-offset: 1px;
  border-color: var(--safran-encre);
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ__aide { font-size: .8125rem; color: var(--texte-doux); }

/* Piège à robots : retiré de l'écran sans `display:none`, que certains
   remplisseurs automatiques ignorent — il doit rester dans le flux. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alerte {
  padding: .75rem 1rem; border-radius: var(--arrondi);
  border-left: 4px solid; margin-bottom: 1.25rem;
}
.alerte--ok     { border-color: var(--signal); background: rgba(18, 140, 74, .08);  color: var(--texte); }
.alerte--erreur { border-color: #b3261e;       background: rgba(179, 38, 30, .08);  color: var(--texte); }

.pile { display: flex; flex-direction: column; gap: 1rem; }
.entete-section { margin-bottom: 2.5rem; }

.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 700; cursor: pointer; list-style: none; color: var(--texte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__fleche { transition: transform .2s var(--sortie); flex: none; color: var(--safran-encre); }
.faq[open] .faq__fleche { transform: rotate(90deg); }
.faq p { margin: .875rem 0 0; }

/* WhatsApp garde sa couleur propre : c'est le seul usage de --signal, et le
   canal est identifie par sa teinte dans tout le marche vise. */
.bouton--whatsapp { background: var(--signal); color: #fff; }

/* --- 17. Modale (diagnostic rapide) --------------------------------------
   Le diagnostic (5 questions, calcul honnête déjà en place sur /diagnostic)
   se charge ici en fragment, sans jamais quitter la page où le visiteur se
   trouvait. `<dialog>` natif : gestion clavier (Échap), calque, et focus de
   base fournis par le navigateur — pas besoin de les recoder à la main. */
dialog.modale {
  padding: 0; border: 0; border-radius: var(--arrondi-lg);
  width: min(100% - 2rem, 40rem);
  max-height: min(100dvh - 3rem, 46rem);
  background: var(--surface); color: var(--texte);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
/* La boîte s'élargit avec l'écran plutôt que de rester figée à 40rem : sur
   un grand moniteur, une largeur fixe laisse un pavé étroit perdu au milieu
   d'un calque sombre. Le contenu (une seule colonne de questions) reste
   confortable à lire à chaque palier — voir .modale__corps ci-dessous pour
   la marge intérieure qui grandit avec la boîte. */
@media (min-width: 48rem) {
  dialog.modale { width: min(100% - 3rem, 46rem); }
}
@media (min-width: 64rem) {
  dialog.modale { width: min(100% - 4rem, 54rem); max-height: min(100dvh - 5rem, 50rem); }
}
@media (min-width: 90rem) {
  dialog.modale { width: min(100% - 4rem, 62rem); }
}
dialog.modale::backdrop { background: rgba(11, 12, 16, .6); backdrop-filter: blur(2px); }
dialog.modale[open] { display: flex; flex-direction: column; }

.modale__barre {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: flex-end;
  padding: .75rem .75rem 0; background: var(--surface);
}
.modale__fermer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 0;
  background: var(--sable); color: var(--texte); cursor: pointer;
}
.modale__fermer:hover { background: var(--trait); }

.modale__corps { overflow-y: auto; padding: 0 0 1.5rem; }
/* Les sections du fragment /diagnostic sont pensées pleine page (page-large,
   grandes marges) : resserrées ici pour tenir dans une boîte de dialogue.
   La marge intérieure grandit avec la boîte (voir dialog.modale plus haut) :
   sinon la largeur gagnée sur grand écran ne fait qu'élargir les champs sans
   respirer, et un formulaire d'une seule colonne devient difficile à suivre. */
.modale__corps .section { padding-block: 1.5rem; }
.modale__corps .page-large { padding-inline: 1.5rem; max-width: none; }
@media (min-width: 48rem) {
  .modale__corps .page-large { padding-inline: 2.25rem; }
}
@media (min-width: 64rem) {
  .modale__corps .page-large { padding-inline: 3rem; }
}
.modale__corps .section--encre { margin: 0 0 1rem; border-radius: var(--arrondi-lg) var(--arrondi-lg) 0 0; }

.modale__attente {
  display: flex; align-items: center; justify-content: center;
  min-height: 16rem; color: var(--texte-doux);
}

@media (prefers-reduced-motion: no-preference) {
  dialog.modale {
    transition: opacity .2s var(--sortie), transform .2s var(--sortie), overlay .2s allow-discrete, display .2s allow-discrete;
    opacity: 0; transform: translateY(.75rem) scale(.98);
  }
  dialog.modale[open] { opacity: 1; transform: none; }
  @starting-style { dialog.modale[open] { opacity: 0; transform: translateY(.75rem) scale(.98); } }
  dialog.modale::backdrop {
    transition: opacity .2s var(--sortie), overlay .2s allow-discrete, display .2s allow-discrete;
    opacity: 0;
  }
  dialog.modale[open]::backdrop { opacity: 1; }
  @starting-style { dialog.modale[open]::backdrop { opacity: 0; } }
}

/* --- 18. Agent de conversation --------------------------------------------
   Bouton empilé au-dessus du bouton WhatsApp (même colonne, jamais les deux
   à la même hauteur). La fenêtre est un <dialog> non modal : elle reste à
   l'écran pendant qu'on continue de lire la page, contrairement à la modale
   diagnostic qui, elle, bloque volontairement le reste. */
.chat-bulle {
  position: fixed; right: 1rem; bottom: calc(1rem + 3.25rem + .75rem); z-index: 55;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border: 0; border-radius: 999px;
  background: var(--encre); color: #fff; cursor: pointer;
  box-shadow: 0 10px 30px rgba(17, 40, 73, .35);
}
.chat-bulle:hover { background: var(--encre-douce); }

dialog.chat-fenetre {
  /**
   * BUG RÉEL CORRIGÉ (2026-08-15) : aucun z-index n'était posé ici. Un
   * <dialog> non modal (ouvert via .show(), pas .showModal()) ne passe pas
   * forcément dans la « couche supérieure » du navigateur — sur mobile, où
   * la fenêtre se repositionne en bas de l'écran (juste en dessous), le
   * bouton WhatsApp (z-index:55, plus loin dans le DOM) passait PAR-DESSUS
   * le bas de la fenêtre et bloquait le clic sur le bouton d'envoi. Un
   * z-index explicite, plus haut que les boutons flottants, referme le cas
   * sans dépendre de l'ordre du DOM. Les boutons flottants sont en plus
   * masqués pendant que la fenêtre est ouverte (voir ea-v2.js) : aucun
   * chevauchement possible, quel que soit le navigateur.
   */
  position: fixed; right: 1rem; bottom: calc(1rem + 3.25rem + .75rem + 3.25rem + .75rem);
  left: auto; top: auto; margin: 0; padding: 0; border: 0; border-radius: var(--arrondi-lg);
  z-index: 60;
  width: min(23rem, calc(100vw - 2rem));
  height: min(32rem, calc(100dvh - 8rem));
  background: var(--surface); color: var(--texte);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  display: none; flex-direction: column; overflow: hidden;
}
dialog.chat-fenetre[open] { display: flex; }
dialog.chat-fenetre::backdrop { background: transparent; } /* non modale : la page reste utilisable */

/* Masqués pendant que la fenêtre de chat est ouverte — posé par ea-v2.js. */
body.chat-ouverte .chat-bulle,
body.chat-ouverte .flottant { display: none; }

@media (max-width: 26rem) {
  /* Plein écran sur mobile : une fenêtre de discussion à moitié visible ne
     sert à rien sur un petit téléphone. */
  dialog.chat-fenetre {
    right: .5rem; bottom: .5rem;
    width: calc(100vw - 1rem); height: min(calc(100dvh - 6rem), 34rem);
  }
}

.chat-entete {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .875rem 1rem; background: var(--encre); color: #fff; flex: none;
}
.chat-entete strong { font-family: var(--serif-titre); }
.chat-entete span { display: block; font-size: .75rem; color: rgba(255, 255, 255, .65); }
.chat-entete button {
  border: 0; background: rgba(255, 255, 255, .12); color: #fff;
  width: 2.25rem; height: 2.25rem; border-radius: 999px; cursor: pointer; flex: none;
}
.chat-entete button:hover { background: rgba(255, 255, 255, .22); }

.chat-messages {
  flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .625rem;
}
.chat-bulle-msg {
  max-width: 85%; padding: .625rem .875rem; border-radius: .875rem; line-height: 1.5;
  font-size: .9375rem; white-space: pre-wrap;
}
.chat-bulle-msg--agent {
  align-self: flex-start; background: var(--sable); color: var(--texte);
  border-bottom-left-radius: .25rem;
}
.chat-bulle-msg--client {
  align-self: flex-end; background: var(--encre); color: #fff;
  border-bottom-right-radius: .25rem;
}
.chat-bulle-msg--systeme {
  align-self: center; background: none; color: var(--texte-doux); font-size: .8125rem; text-align: center;
}

.chat-attente { align-self: flex-start; display: flex; gap: .25rem; padding: .5rem .875rem; }
.chat-attente span {
  width: .4rem; height: .4rem; border-radius: 999px; background: var(--texte-doux);
  animation: chat-rebond 1.2s infinite ease-in-out;
}
.chat-attente span:nth-child(2) { animation-delay: .15s; }
.chat-attente span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-rebond { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-.15rem); } }
@media (prefers-reduced-motion: reduce) { .chat-attente span { animation: none; opacity: .7; } }

.chat-formulaire {
  display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--trait); flex: none;
}
.chat-formulaire input {
  flex: 1; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--trait);
  border-radius: var(--arrondi); background: var(--fond); color: var(--texte); font: inherit;
}
.chat-formulaire input:focus { outline: 2px solid var(--safran); outline-offset: 1px; }
.chat-formulaire button {
  width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--arrondi);
  background: var(--safran); color: var(--encre); cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-formulaire button:disabled { opacity: .5; cursor: default; }