/* Console de Louis · M&M Décoration
   Charte des trois maquettes présentées le 04/09 (écran de connexion, accueil, console) et effets du labo
   de Neventia. Conception : serveur/docs/console-conception.md, section 6 ; plan D1, écarts 3 et 5.
   Aucune ressource externe, aucune police chargée : Helvetica Neue du système. */

:root {
  --vert: #22372b;
  --orange: #ed6b06;
  --noir: #100b0c;
  --encre: #1b211d;
  --doux: #646f6a;
  --pale: #f4f6f4;
  --filet: #e2e7e3;
  --gris-fort: #56605b;
  --bord-champ: #858f8a;
  --fond: #f6f8f6;
  --souple: cubic-bezier(.32, .72, 0, 1);
  --rebond: cubic-bezier(.34, 1.56, .64, 1);
  --souffle: cubic-bezier(.45, .05, .55, .95);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--encre);
  background: var(--fond);
}
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid #b34f00; outline-offset: 2px; }
.rail :focus-visible, .barre :focus-visible { outline-color: #ffffff; }
[hidden] { display: none !important; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Effets du labo ---------- */
@keyframes apparition { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
/* Salut joué une fois à l'ouverture, sur les écrans sans survol : la main se lève, salue deux fois, puis retourne
   dans la poche. Sur 2,4 s : 0,12 s pour lever, les deux saluts, un temps main levée, 0,24 s pour la baisser. */
@keyframes salut-repos { 0%, 5% { opacity: 1; } 5.1%, 89.9% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes salut-leve { 0%, 100% { opacity: 0; } 5%, 90% { opacity: 1; } }
@keyframes respiration {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(var(--amplitude, -12px)) scale(1.015); }
}
@keyframes coucou {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-9deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(7deg); }
}
@keyframes pouls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 143, 91, .45); }
  50% { box-shadow: 0 0 0 6px rgba(47, 143, 91, 0); }
}
/* backwards et non both : une fois jouée, l'animation rend la main au soulèvement du survol. */
.apparition { animation: apparition .7s var(--souple) backwards; }
.apparition:nth-child(2) { animation-delay: 70ms; }
.apparition:nth-child(3) { animation-delay: 140ms; }
.apparition:nth-child(4) { animation-delay: 210ms; }
.respire { display: block; animation: respiration 6.5s var(--souffle) infinite; transform-origin: 50% 85%; }
.pouls {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2f8f5b;
  animation: pouls 2s var(--souffle) infinite;
}

/* ---------- Écrans en carte : connexion, mot de passe, erreur ---------- */
.page-carte { background: var(--vert); }
.ecran-carte {
  position: relative; overflow: hidden; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 32px 16px;
}
.halo {
  position: absolute; width: 1100px; height: 1100px; border-radius: 50%; top: -330px; right: -300px;
  background: radial-gradient(circle, rgba(237, 107, 6, .13) 0%, rgba(237, 107, 6, 0) 62%); pointer-events: none;
}
.carte {
  position: relative; width: min(470px, 100%); background: #fff; border-radius: 16px; padding: 44px 54px 40px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
}
.carte .sig { width: 200px; height: auto; margin: 0 auto 26px; }
.carte .sig-petite { width: 120px; margin-bottom: 20px; }
.carte h1 { font-size: 25px; font-weight: 700; letter-spacing: -.02em; text-align: center; }
.carte .s { margin-top: 9px; font-size: 14.5px; line-height: 1.5; color: var(--doux); text-align: center; }
.champ { margin-top: 22px; }
.champ label {
  display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--doux);
}
.champ input {
  display: block; width: 100%; padding: 14px 16px; font-size: 16px; color: var(--encre); background: #fdfdfd;
  border: 1px solid #858f8a; border-radius: 9px;
  transition: border-color .2s var(--souple), box-shadow .2s var(--souple);
}
.champ input:focus { border-color: var(--vert); box-shadow: 0 0 0 3px rgba(34, 55, 43, .22); }
.regle { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--doux); }
.message {
  margin-top: 18px; padding: 12px 14px; border-radius: 9px; font-size: 14.5px; line-height: 1.45;
  color: #8a3a00; background: #fdf0e6;
}
.btn {
  display: block; width: 100%; margin-top: 26px; padding: 15px; border: 0; border-radius: 9px;
  font-size: 19px; font-weight: 700; letter-spacing: -.01em; text-align: center; text-decoration: none;
  color: #ffffff; background: #ed6b06;
  transition: transform .22s var(--souple), box-shadow .22s var(--souple);
}
.btn:disabled { opacity: .7; cursor: progress; }
.aide { margin-top: 18px; font-size: 13.5px; color: var(--doux); text-align: center; }
.pied { margin-top: 14px; font-size: 12px; color: var(--doux); text-align: center; }
.lien-sobre {
  display: block; margin: 16px auto 0; padding: 6px 10px; border: 0; background: none; font-size: 13.5px;
  color: var(--doux); text-decoration: underline;
}

/* ---------- Accueil ---------- */
.page-accueil { background: #f6f8f6; }
.barre {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 88px; padding: 0 44px;
  background: var(--vert);
}
.barre .logo-blanc { width: auto; height: 56px; }
.barre .qui {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 18px;
  font-size: 14.5px; color: rgba(255, 255, 255, .78);
}
.barre .qui b { font-weight: 600; color: #ffffff; }
.lien-deco {
  padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 100px; background: none;
  font-size: 13.5px; color: #ffffff; transition: background .22s var(--souple);
}
.corps { max-width: 1120px; margin: 0 auto; padding: 54px 60px 64px; }
.corps h1 { font-size: 34px; font-weight: 700; letter-spacing: -.028em; }
.corps .s { margin-top: 10px; font-size: 16px; color: var(--doux); }
.cartes { display: grid; grid-template-columns: 1fr 290px; gap: 24px; align-items: start; margin-top: 40px; }
.louis {
  position: relative; display: grid; grid-template-columns: 230px 1fr; gap: 38px; align-items: center;
  padding: 34px 38px; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--filet);
  border-radius: 16px; box-shadow: 0 26px 60px -34px rgba(34, 55, 43, .5);
  transition: transform .22s var(--souple), box-shadow .22s var(--souple);
}
/* Louis en pied, détouré, sans cadre : il flotte sur la carte comme les agents du labo. */
.louis .por { position: relative; width: 230px; }
.louis .por .respire { position: relative; }
.louis .por img { width: 100%; height: auto; transition: opacity .12s var(--souple); }
/* Coucou : la pose main levée remplace la pose de repos, puis le bras salue autour du bord de la manche. */
.louis .por .salut, .louis .por .bras { position: absolute; top: 0; left: 0; opacity: 0; }
/* Le repos reste plein pendant que la pose levée apparaît, puis s'efface d'un coup : pas de silhouette
   fantôme à mi-fondu. En sortie, il revient d'un coup sous la pose levée qui s'efface. */
.louis .por .repos { transition: opacity 0s linear; }
.louis .por .bras { transform-origin: 77.93% 48.02%; }
.louis:focus-visible .por .repos { opacity: 0; transition-delay: .12s; }
.louis:focus-visible .por .salut { opacity: 1; }
.louis:focus-visible .por .bras { opacity: 1; animation: coucou .85s var(--souple) .12s 2; }
.louis .portrait { position: relative; }
.bulle {
  position: absolute; top: -34px; left: 104px; padding: 8px 13px; border-radius: 100px 100px 100px 4px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap; color: #ffffff; background: var(--vert);
  opacity: 0; transform: translateY(6px) scale(.85); transform-origin: 0 100%; pointer-events: none;
  transition: opacity .3s var(--rebond), transform .3s var(--rebond);
}
.etat {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 100px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #1f6b45; background: #e7f2ec;
}
.louis h2 { margin-top: 15px; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.louis .role { margin-top: 8px; font-size: 17px; color: var(--doux); }
.louis .chif { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 24px; }
.louis .chif b { display: block; font-size: 27px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--vert); }
.louis .chif b.bientot { font-size: 17px; font-weight: 600; line-height: 27px; letter-spacing: 0; color: var(--doux); }
.louis .chif span { display: block; margin-top: 5px; font-size: 13px; color: var(--doux); }
.ouvrir {
  display: inline-block; margin-top: 28px; padding: 14px 28px; border-radius: 9px;
  font-size: 19px; font-weight: 700; color: #ffffff; background: #ed6b06;
}
.venir {
  display: flex; flex-direction: column; justify-content: center; min-height: 302px; padding: 30px 28px;
  background: #eef1ee; border: 1px dashed #a9b3ac; border-radius: 16px;
  transition: transform .22s var(--souple), box-shadow .22s var(--souple);
}
.venir .et {
  align-self: flex-start; padding: 5px 11px; border-radius: 100px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #56605b; background: #e2e7e3;
}
.venir h2 { margin-top: 16px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: #56605b; }
.venir p { margin-top: 12px; font-size: 14px; line-height: 1.55; color: #5f6a65; }

/* ---------- Courrier que Louis ne lit pas (lot Tri 1) ---------- */
.exclus { margin-top: 24px; padding: 24px 28px; background: #fff; border: 1px solid var(--filet); border-radius: 16px; }
.cartes > .exclus { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
.exclus h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--vert); }
.exclus-lignes { list-style: none; margin-top: 8px; }
.exclus-ligne {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 10px 0;
  border-top: 1px solid var(--filet); font-size: 15px; line-height: 1.5; color: var(--encre);
}
.exclus-ligne:first-child { border-top: 0; }
.exclus-lien { font-weight: 600; color: #1f6b45; text-underline-offset: 3px; }

/* ---------- Console : rail et zone principale ---------- */
.page-console { background: #fff; }
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.rail {
  position: sticky; top: 0; display: flex; flex-direction: column; overflow-y: auto; height: 100vh;
  height: 100dvh; padding: 26px 0 22px; background: var(--vert);
}
.rail .marque { padding: 0 24px 26px; border-bottom: 1px solid rgba(255, 255, 255, .13); }
.rail .marque img { width: auto; height: 86px; margin: 0 auto; }
.nav { display: flex; flex: 1; flex-direction: column; gap: 3px; padding: 20px 14px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 7px; font-size: 14px;
  text-decoration: none; color: rgba(255, 255, 255, .78); transition: background .22s var(--souple), color .22s var(--souple);
}
.nav a.on { font-weight: 600; color: #ffffff; background: rgba(255, 255, 255, .11); }
.nav a i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.nav a.on i { background: var(--orange); }
.agent { display: flex; align-items: center; gap: 12px; margin: 0 14px; padding: 15px; border-radius: 9px; background: rgba(0, 0, 0, .22); }
.agent img { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #e7f2ec; }
.agent b { display: block; font-size: 14.5px; color: #ffffff; }
.agent span { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(255, 255, 255, .78); }
.agent em { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; font-style: normal; color: #8fd6a2; }
.rail .deco {
  margin: 14px 14px 0; padding: 9px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 7px;
  font-size: 13px; color: rgba(255, 255, 255, .78); background: none;
}
.main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; padding: 28px 34px; }
.tete {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 20px;
  border-bottom: 1px solid var(--filet);
}
.tete h1 { font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.tete p { margin-top: 5px; font-size: 13.5px; color: var(--doux); }
.maj { display: flex; align-items: center; gap: 7px; font-size: 12.5px; white-space: nowrap; color: var(--doux); }
.maj i { width: 7px; height: 7px; border-radius: 50%; background: #3fa96a; }
.alerte {
  margin-top: 16px; padding: 12px 14px; border-radius: 9px; font-size: 14px; color: #8a3a00; background: #fdf0e6;
}
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.k {
  padding: 16px 18px; border: 1px solid var(--filet); border-radius: 9px;
  transition: transform .22s var(--souple), box-shadow .22s var(--souple);
}
.k .v { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--vert); }
.k .v.bientot { font-size: 19px; line-height: 32px; letter-spacing: 0; color: var(--doux); }
.k .l { margin-top: 7px; font-size: 12.5px; line-height: 1.35; color: var(--doux); }
.k.fort { background: var(--vert); border-color: var(--vert); }
.k.fort .v, .k.fort .v.bientot { color: #ffffff; }
.k.fort .l { color: rgba(255, 255, 255, .78); }
.k.fort .sous { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 12.5px; color: #ffffff; }
.section-titre {
  margin-top: 26px; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--doux);
  scroll-margin-top: 20px;
}
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.filtres input, .filtres select, .journal-outils input, .journal-outils select, .journal-outils button, .pages button {
  padding: 9px 12px; font-size: 14px; background: #fff; border: 1px solid #858f8a; border-radius: 7px;
}
.filtres input { flex: 1 1 220px; min-width: 0; }
/* Correctif B3 (justesse M5) : entre 821 et 900 px environ, le tableau excède la place disponible et
   fait déborder la page à l'horizontale ; ce conteneur défile plutôt que de déborder. Positionné (lot R2,
   tâche 10), il retient aussi le texte caché de l'en-tête « Actions », en position absolue, qui sortait sinon
   de la zone qui défile et faisait défiler la page entière à 821 px. */
.tableau { position: relative; overflow-x: auto; }
table.devis { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13.5px; }
.devis th {
  padding: 0 12px 10px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--doux); border-bottom: 1px solid var(--filet);
}
.devis td { padding: 11px 12px; vertical-align: middle; border-bottom: 1px solid var(--pale); }
.devis td.ref { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--doux); white-space: nowrap; }
.devis td.mt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.devis td.efface { font-style: italic; color: var(--doux); }
.pts { display: flex; align-items: center; gap: 5px; }
.pts b {
  display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; font-size: 10.5px;
  font-weight: 700; color: #56605b; background: #f4f6f4;
}
.pts b.ok { color: #1b211d; background: var(--orange); }
.pts span { margin-left: 7px; font-size: 12px; color: var(--doux); }
.et { display: inline-block; padding: 4px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.et.att { color: #56605b; background: #f4f6f4; }
.et.rep { color: #1f6b45; background: #e7f2ec; }
.et.gag { color: #ffffff; background: #22372b; }
.et.refus { color: #8a3a00; background: #f7ece4; }
.et.neutre { color: #56605b; background: #fff; border: 1px dashed #a9b3ac; }
.vide { margin-top: 18px; font-size: 14px; color: var(--doux); }
.pages { display: flex; align-items: center; gap: 12px; margin: 16px 0 28px; font-size: 13px; color: var(--doux); }
.pages button:disabled { opacity: .45; cursor: default; }
.bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--filet);
}
.bas .jour { font-size: 13px; color: var(--doux); }
.bas .sig-console { font-size: 11.5px; color: var(--doux); }

/* ---------- Boutons d'un devis (lot D2) ---------- */
.avis {
  margin-top: 16px; padding: 12px 14px; border-radius: 9px; font-size: 14px; color: #1f6b45; background: #e7f2ec;
}
.boutons-devis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bouton-devis {
  padding: 6px 11px; border: 1px solid #858f8a; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; color: #22372b; background: #ffffff;
  transition: transform .22s var(--souple), box-shadow .22s var(--souple);
}
.bouton-devis.signe { color: #ffffff; background: #22372b; border-color: #22372b; }
.bouton-devis:disabled { opacity: .6; cursor: progress; }
.boutons-devis small { font-size: 11.5px; color: #646f6a; }
.boutons-devis .attente { max-width: 17em; font-size: 12px; font-weight: 700; line-height: 1.35; color: #22372b; }
dialog.confirmation {
  width: min(460px, calc(100% - 32px)); margin: auto; padding: 30px 30px 26px; border: 0; border-radius: 16px;
  color: #1b211d; background: #ffffff; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
}
dialog.confirmation::backdrop { background: rgba(16, 11, 12, .5); }
.confirmation h2 { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.confirmation .detail { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: #646f6a; }
.choix { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.choix .btn { width: auto; margin-top: 0; padding: 12px 20px; }
.bouton-sobre {
  padding: 12px 18px; border: 1px solid #858f8a; border-radius: 9px; font-size: 16px; color: #1b211d; background: #ffffff;
}

/* ---------- Lot R1 : envoi, marque « Pas encore parti », questions d'adresse ---------- */
/* Brun sur crème, le couple de .alerte déjà éprouvé : l'orange reste à l'action et au fait accompli. */
.et.non-parti { margin-left: 6px; color: #8a3a00; background: #fdf0e6; }
/* Lot R2 : marque « Sans nouvelles », le couple de .et.att : une information, pas une alerte. */
.et.sans-nouvelles { margin-left: 6px; color: #56605b; background: #f4f6f4; border: 1px dashed #a9b3ac; }
/* Lot R2 (point 3) : la note qui dit que rien ne part, dans le ton de .vide. */
.note-relances { margin-top: 12px; font-size: 14px; color: var(--doux); }
/* Lot R2, aperçu de la tâche 9 : « Voir dans Gmail », lien texte discret après les boutons, du gris de leur échéance.
   D'un seul tenant, il descend entier sous les boutons sur une fiche étroite ; 6 px de part et d'autre pour le doigt. */
.lien-gmail { padding: 6px 0; font-size: 12px; white-space: nowrap; color: #646f6a; text-underline-offset: 3px; }
.adresses { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--filet); border-radius: 9px; background: #ffffff; }
.titre-adresses { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #646f6a; }
/* Lot C1, point 1 : l'encart replié par défaut, son titre en tête de menu ; trois questions à la fois. */
.adresses-menu > summary { cursor: pointer; list-style-position: inside; }
.adresses-menu > summary .titre-adresses { display: inline; }
.pages-questions { margin: 12px 0 0; }
.adresses-aide { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: #646f6a; }
.adresses-reserve { margin-top: 8px; font-size: 13px; font-weight: 700; color: #56605b; }
ol.questions { margin-top: 12px; list-style: none; }
.question { padding: 12px 0; border-top: 1px solid var(--pale); }
.question fieldset { min-width: 0; border: 0; }
.question-titre, .question legend { font-size: 14px; line-height: 1.45; color: #1b211d; overflow-wrap: anywhere; }
.question label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 14px; overflow-wrap: anywhere; }
.question label span { color: #646f6a; }
.question .reponses { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; }
.question .choix-rappel { margin-top: 4px; font-size: 13px; color: #646f6a; overflow-wrap: anywhere; }
.question small { font-size: 11.5px; color: #646f6a; }

/* ---------- Journal ---------- */
.journal-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.journal-outils button:disabled { opacity: .45; cursor: default; }
ol.journal { margin-top: 16px; list-style: none; }
.journal li {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; gap: 14px; padding: 12px 4px;
  font-size: 14px; border-bottom: 1px solid var(--pale);
}
.journal time { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--doux); }
.journal .type { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.journal li.echec .txt { color: #8a3a00; }
.tronque { margin-top: 12px; font-size: 13px; color: var(--doux); }

/* ---------- Écrans sans survol : Louis salue une fois à l'ouverture ---------- */
@media (hover: none) {
  .louis .por .repos { animation: salut-repos 2.4s var(--souple) .9s; }
  .louis .por .salut { animation: salut-leve 2.4s var(--souple) .9s; }
  .louis .por .bras { animation: salut-leve 2.4s var(--souple) .9s, coucou .85s var(--souple) 1.05s 2; }
}

/* ---------- Survol, appui ---------- */
@media (hover: hover) {
  .louis:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -34px rgba(34, 55, 43, .75); }
  .venir:hover, .k:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -34px rgba(34, 55, 43, .5); }
  .louis:hover .por .repos { opacity: 0; transition-delay: .12s; }
  .louis:hover .por .salut { opacity: 1; }
  .louis:hover .por .bras { opacity: 1; animation: coucou .85s var(--souple) .12s 2; }
  .louis:hover .bulle { opacity: 1; transform: none; }
  .btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(237, 107, 6, .7); }
  .lien-deco:hover { background: rgba(255, 255, 255, .1); }
  .nav a:hover { color: #ffffff; background: rgba(255, 255, 255, .07); }
  .exclus-lien:hover { text-decoration-thickness: 2px; }
  .lien-gmail:hover { text-decoration-thickness: 2px; }
  .bouton-devis:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgba(34, 55, 43, .6); }
}
.louis:focus-visible .bulle { opacity: 1; transform: none; }
.btn:active, .lien-deco:active, .rail .deco:active, .pages button:active, .journal-outils button:active, .bouton-devis:active, .bouton-sobre:active {
  transform: scale(.98);
}

/* ---------- Écran moyen ---------- */
@media (max-width: 1100px) {
  .cartes { grid-template-columns: 1fr; }
  .cartes > .exclus { grid-row: auto; }
  .venir { min-height: 0; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .devis th, .devis td { padding-left: 8px; padding-right: 8px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 820px) {
  .carte { padding: 32px 22px 28px; }
  .carte .sig { width: 168px; }
  .barre { height: auto; padding: 14px 16px; }
  .barre .logo-blanc { height: 44px; }
  .corps { padding: 28px 16px 40px; }
  .corps h1 { font-size: 28px; }
  .cartes { grid-template-columns: 1fr; }
  .louis { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .louis .por { width: 200px; margin: 0 auto; }
  .louis h2 { font-size: 38px; }
  .bulle { display: none; }
  .venir { min-height: 0; }
  .exclus { padding: 20px 16px; }
  .app { grid-template-columns: 1fr; padding-bottom: 76px; }
  .rail {
    position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 10; flex-direction: row; align-items: center;
    height: auto; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .rail .marque, .rail .agent { display: none; }
  .nav { flex-direction: row; gap: 6px; padding: 0; }
  .nav a { flex: 1; justify-content: center; padding: 12px 8px; }
  .rail .deco { margin: 0 0 0 6px; padding: 11px 10px; }
  .main { min-height: 0; padding: 20px 16px; }
  .tete { flex-direction: column; align-items: flex-start; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .k .v { font-size: 26px; }
  table.devis thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.devis, table.devis tbody, table.devis tr { display: block; width: 100%; }
  table.devis tr { margin-top: 10px; padding: 6px 12px; border: 1px solid var(--filet); border-radius: 9px; }
  table.devis td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; text-align: right; }
  table.devis td:last-child { border-bottom: 0; }
  table.devis td::before {
    content: attr(data-titre); flex: none; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-align: left; text-transform: uppercase; color: var(--doux);
  }
  /* Lot R2 : une marque trop large pour la fiche descend sous la pastille d'état, calée à droite, au lieu de déborder. */
  table.devis td:has(> .et) { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  table.devis td:has(> .et)::before { margin-right: auto; }
  .boutons-devis { justify-content: flex-end; }
  .journal li { grid-template-columns: 52px 1fr; }
  .journal .type { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .louis:hover, .venir:hover, .k:hover, .btn:hover { transform: none; }
  .bouton-devis:hover { transform: none; }
}