/*!
 * JustiComm · boutons « juridiques » · v2 (13/10/2026), proposés avec l’en-tête « coup de marteau » (v5 : retours d’Octave et de Pauline)
 *   .btn-plaque        plaque gravée (la plaque en laiton à l’entrée d’un cabinet) : action principale
 *   .btn-cartouche     cartouche (le cadre d’un acte officiel) : action secondaire
 *   .btn-plaque-petite petite plaque au trait : barre du haut
 * Sur fond clair (crème, papier) : poser la classe .sur-clair sur la section (ou sur le bouton).
 * Aucune image externe : les filets sont des SVG en ligne, découpés en neuf (border-image),
 * pour que les coins gardent leur dessin exact quelle que soit la largeur du bouton.
 * Le contour de focus est un pseudo-élément qui suit la forme, hors de toute découpe (clip-path).
 * États forcés pour la planche : .est-survol, .est-focus, .est-appui, .est-reflet (reflet figé à mi-course).
 */
:root {
  /* Plaque gravée */
  --plaque-hauteur: 52px;
  --plaque-pan: 10px;                                  /* coins coupés à 45° */
  --plaque-fond: #E0BD8E;                              /* or */
  --plaque-fond-survol: #F2D9AC;                       /* or plus clair */
  --plaque-fond-appui: #D6B080;
  --plaque-texte: #0A393A;                             /* pétrole : 7,1:1 sur l’or */
  --plaque-reflet: rgba(255, 251, 242, .62);
  --plaque-reflet-a: 40%;                              /* bande du reflet (sur clair, plus étroite) */
  --plaque-reflet-b: 60%;
  --plaque-appui-ombre: rgba(6, 42, 43, .18);         /* appui : légère ombre en haut, découpée comme la plaque */
  /* filet intérieur 0,9 px à 4 px du bord, qui suit les pans coupés (pétrole) */
  --plaque-filet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M11.86 4.5H28.14L35.5 11.86V28.14L28.14 35.5H11.86L4.5 28.14V11.86Z' fill='none' stroke='%230A393A' stroke-width='.9'/%3E%3C/svg%3E");

  /* Cartouche */
  --cartouche-hauteur: 52px;
  --cartouche-texte: #E0BD8E;                          /* or : 7,1:1 sur le pétrole */
  --cartouche-texte-survol: #F2D9AC;                   /* or plus clair */
  --cartouche-survol: rgba(238, 234, 225, .05);        /* v5 : fond neutre (l’or à 8 % virait au kaki sur le pétrole) */
  --cartouche-appui: rgba(238, 234, 225, .09);
  /* double filet : 1,4 px, puis 0,6 px à 60 % d’opacité 4 px plus à l’intérieur ; coins en quart de cercle rentrant (r 10) */
  --cartouche-filets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23E0BD8E'%3E%3Cpath d='M9.98 .7H38.02A10 10 0 0 0 47.3 9.98V38.02A10 10 0 0 0 38.02 47.3H9.98A10 10 0 0 0 .7 38.02V9.98A10 10 0 0 0 9.98 .7Z' stroke-width='1.4'/%3E%3Cpath d='M13.19 4.7H34.81A14 14 0 0 0 43.3 13.19V34.81A14 14 0 0 0 34.81 43.3H13.19A14 14 0 0 0 4.7 34.81V13.19A14 14 0 0 0 13.19 4.7Z' stroke-width='.6' stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");

  /* Petite plaque (barre du haut) : au trait */
  --petite-hauteur: 44px;
  --petite-pan: 8px;
  --petite-texte: #E0BD8E;
  --petite-texte-survol: #F2D9AC;
  --petite-survol: rgba(238, 234, 225, .05);           /* v5 : neutre, trait à 100 % */
  --petite-appui: rgba(238, 234, 225, .09);
  --petite-trait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M8.21 .5H23.79L31.5 8.21V23.79L23.79 31.5H8.21L.5 23.79V8.21Z' fill='none' stroke='%23E0BD8E' stroke-opacity='.62'/%3E%3C/svg%3E");
  --petite-trait-survol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M8.21 .5H23.79L31.5 8.21V23.79L23.79 31.5H8.21L.5 23.79V8.21Z' fill='none' stroke='%23E0BD8E'/%3E%3C/svg%3E");

  /* Contours de focus (2 px, 4 px d’écart), or plus clair sur fond foncé : plus de 8:1 sur le pétrole */
  --focus-plaque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M14.93 2H25.07L38 14.93V25.07L25.07 38H14.93L2 25.07V14.93Z' fill='none' stroke='%23F2D9AC' stroke-width='2'/%3E%3C/svg%3E");
  --focus-cartouche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M12 2H28A10 10 0 0 0 38 12V28A10 10 0 0 0 28 38H12A10 10 0 0 0 2 28V12A10 10 0 0 0 12 2Z' fill='none' stroke='%23F2D9AC' stroke-width='2'/%3E%3C/svg%3E");
  --focus-petite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M12.34 2H19.66L30 12.34V19.66L19.66 30H12.34L2 19.66V12.34Z' fill='none' stroke='%23F2D9AC' stroke-width='2'/%3E%3C/svg%3E");
}

/* Fond clair (crème #EEEAE1, papier #F6F2EA) : plaque pétrole, texte crème, filet or ;
   cartouche en filets bronze, texte pétrole (le bronze n’est pas lisible en petit texte) */
.sur-clair {
  --plaque-fond: #0A393A;
  --plaque-fond-survol: #205051;                       /* nuance 600 du pétrole : crème dessus 7,6:1 */
  --plaque-fond-appui: #062A2B;
  --plaque-texte: #EEEAE1;                             /* crème : 10,5:1 sur le pétrole */
  --plaque-reflet: rgba(242, 217, 172, .22);           /* v5 : bande étroite ; crème sur le reflet ≥ 4,5:1 */
  --plaque-reflet-a: 45%;
  --plaque-reflet-b: 55%;
  --plaque-appui-ombre: rgba(0, 0, 0, .22);
  --plaque-filet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M11.86 4.5H28.14L35.5 11.86V28.14L28.14 35.5H11.86L4.5 28.14V11.86Z' fill='none' stroke='%23E0BD8E' stroke-width='.9'/%3E%3C/svg%3E");
  --cartouche-texte: #0A393A;                          /* pétrole : 11,3:1 sur le papier */
  --cartouche-texte-survol: #0A393A;
  --cartouche-survol: rgba(156, 121, 82, .1);
  --cartouche-appui: rgba(156, 121, 82, .17);
  --cartouche-filets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%239C7952'%3E%3Cpath d='M9.98 .7H38.02A10 10 0 0 0 47.3 9.98V38.02A10 10 0 0 0 38.02 47.3H9.98A10 10 0 0 0 .7 38.02V9.98A10 10 0 0 0 9.98 .7Z' stroke-width='1.4'/%3E%3Cpath d='M13.19 4.7H34.81A14 14 0 0 0 43.3 13.19V34.81A14 14 0 0 0 34.81 43.3H13.19A14 14 0 0 0 4.7 34.81V13.19A14 14 0 0 0 13.19 4.7Z' stroke-width='.6' stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  --petite-texte: #0A393A;
  --petite-texte-survol: #0A393A;
  --petite-survol: rgba(156, 121, 82, .08);            /* v5 : chaud (le pétrole à 7 % virait au gris froid) */
  --petite-appui: rgba(156, 121, 82, .14);
  --petite-trait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M8.21 .5H23.79L31.5 8.21V23.79L23.79 31.5H8.21L.5 23.79V8.21Z' fill='none' stroke='%230A393A' stroke-opacity='.55'/%3E%3C/svg%3E");
  --petite-trait-survol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M8.21 .5H23.79L31.5 8.21V23.79L23.79 31.5H8.21L.5 23.79V8.21Z' fill='none' stroke='%230A393A'/%3E%3C/svg%3E");
  --focus-plaque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M14.93 2H25.07L38 14.93V25.07L25.07 38H14.93L2 25.07V14.93Z' fill='none' stroke='%230A393A' stroke-width='2'/%3E%3C/svg%3E");
  --focus-cartouche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M12 2H28A10 10 0 0 0 38 12V28A10 10 0 0 0 28 38H12A10 10 0 0 0 2 28V12A10 10 0 0 0 12 2Z' fill='none' stroke='%230A393A' stroke-width='2'/%3E%3C/svg%3E");
  --focus-petite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M12.34 2H19.66L30 12.34V19.66L19.66 30H12.34L2 19.66V12.34Z' fill='none' stroke='%230A393A' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- Socle commun ---------- */
.btn-plaque, .btn-cartouche, .btn-plaque-petite {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; margin: 0; border: 0; background: none; cursor: pointer;
  text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform .14s cubic-bezier(.22, 1, .36, 1), color .16s ease;
}
.btn-plaque::before, .btn-cartouche::before, .btn-plaque-petite::before,
.btn-plaque::after, .btn-cartouche::after, .btn-plaque-petite::after {
  content: ""; position: absolute; box-sizing: border-box; border-style: solid; border-color: transparent; pointer-events: none;
}
/* Contour de focus : suit la forme, 4 px d’écart, jamais découpé */
.btn-plaque::after, .btn-cartouche::after, .btn-plaque-petite::after {
  inset: -7px; z-index: 1; opacity: 0; border-width: 18px;
  transition: opacity .12s ease;
}
.btn-plaque:focus-visible, .btn-cartouche:focus-visible, .btn-plaque-petite:focus-visible { outline: none; }
.btn-plaque:focus-visible::after, .btn-plaque.est-focus::after,
.btn-cartouche:focus-visible::after, .btn-cartouche.est-focus::after,
.btn-plaque-petite:focus-visible::after, .btn-plaque-petite.est-focus::after { opacity: 1; }

/* ---------- Plaque gravée ---------- */
.btn-plaque {
  min-height: var(--plaque-hauteur); padding: 1px 30px 0;
  color: var(--plaque-texte);
  font-family: "Jost", "Futura", "Avenir Next", system-ui, sans-serif; font-weight: 500;
  font-size: 14.5px; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}
.btn-plaque::before {
  inset: 0; z-index: -1;
  border-width: 16px; border-image: var(--plaque-filet) 16 / 16px stretch;
  background-color: var(--plaque-fond);
  /* reflet diagonal : hors champ au repos (à gauche), traverse une fois au survol */
  background-image: linear-gradient(105deg, transparent 0 var(--plaque-reflet-a), var(--plaque-reflet) 50%, transparent var(--plaque-reflet-b) 100%);
  background-size: 250% 100%; background-repeat: no-repeat; background-position: 100% 0; background-origin: border-box;
  clip-path: polygon(var(--plaque-pan) 0, calc(100% - var(--plaque-pan)) 0, 100% var(--plaque-pan), 100% calc(100% - var(--plaque-pan)),
                     calc(100% - var(--plaque-pan)) 100%, var(--plaque-pan) 100%, 0 calc(100% - var(--plaque-pan)), 0 var(--plaque-pan));
  transition: background-color .18s ease, background-position 0s;
}
.btn-plaque:hover::before, .btn-plaque.est-survol::before {
  background-color: var(--plaque-fond-survol); background-position: 0 0;
  transition: background-color .18s ease, background-position .8s cubic-bezier(.3, .1, .25, 1);
}
.btn-plaque.est-reflet::before { background-color: var(--plaque-fond-survol); background-position: 50% 0; transition: none; }
.btn-plaque:active, .btn-plaque.est-appui { transform: translateY(1px) scale(.988); }
/* Appui : plus d’ombre intérieure (elle dessinait un rectangle sur la boîte du border-image) ;
   un dégradé dans le fond, découpé par le même clip-path, qui suit donc les pans coupés */
.btn-plaque:active::before, .btn-plaque.est-appui::before {
  background-color: var(--plaque-fond-appui);
  background-image: linear-gradient(180deg, var(--plaque-appui-ombre) 0, transparent 45%);
  background-size: 100% 100%; background-position: 0 0;
}
.btn-plaque::after { border-image: var(--focus-plaque) 18 / 18px stretch; }

/* ---------- Cartouche ---------- */
.btn-cartouche {
  min-height: var(--cartouche-hauteur); padding: 0 30px 2px;
  color: var(--cartouche-texte);
  font-family: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif; font-style: italic; font-weight: 500;
  font-size: 20px; line-height: 1; letter-spacing: .005em;
}
.btn-cartouche::before {
  inset: 0; z-index: -1;
  border-width: 18px; border-image: var(--cartouche-filets) 18 / 18px stretch;
  background-color: transparent;
  /* fond rentré aux quatre coins, comme le filet (le filet extérieur reste entier) */
  -webkit-mask: radial-gradient(circle at 0 0, transparent 9.2px, #000 9.7px) 0 0 / 51% 51% no-repeat,
                radial-gradient(circle at 100% 0, transparent 9.2px, #000 9.7px) 100% 0 / 51% 51% no-repeat,
                radial-gradient(circle at 0 100%, transparent 9.2px, #000 9.7px) 0 100% / 51% 51% no-repeat,
                radial-gradient(circle at 100% 100%, transparent 9.2px, #000 9.7px) 100% 100% / 51% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent 9.2px, #000 9.7px) 0 0 / 51% 51% no-repeat,
                radial-gradient(circle at 100% 0, transparent 9.2px, #000 9.7px) 100% 0 / 51% 51% no-repeat,
                radial-gradient(circle at 0 100%, transparent 9.2px, #000 9.7px) 0 100% / 51% 51% no-repeat,
                radial-gradient(circle at 100% 100%, transparent 9.2px, #000 9.7px) 100% 100% / 51% 51% no-repeat;
  transition: background-color .18s ease;
}
.btn-cartouche:hover, .btn-cartouche.est-survol { color: var(--cartouche-texte-survol); }
.btn-cartouche:hover::before, .btn-cartouche.est-survol::before { background-color: var(--cartouche-survol); }
.btn-cartouche:active, .btn-cartouche.est-appui { transform: translateY(1px); }
.btn-cartouche:active::before, .btn-cartouche.est-appui::before { background-color: var(--cartouche-appui); }
.btn-cartouche::after { border-image: var(--focus-cartouche) 18 / 18px stretch; }

/* ---------- Petite plaque au trait (barre du haut) ---------- */
.btn-plaque-petite {
  min-height: var(--petite-hauteur); padding: 1px 20px 0;
  color: var(--petite-texte);
  font-family: "Jost", "Futura", "Avenir Next", system-ui, sans-serif; font-weight: 500;
  font-size: 12.5px; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
}
.btn-plaque-petite::before {
  inset: 0; z-index: -1;
  border-width: 12px; border-image: var(--petite-trait) 12 / 12px stretch;
  background-color: transparent;
  clip-path: polygon(var(--petite-pan) 0, calc(100% - var(--petite-pan)) 0, 100% var(--petite-pan), 100% calc(100% - var(--petite-pan)),
                     calc(100% - var(--petite-pan)) 100%, var(--petite-pan) 100%, 0 calc(100% - var(--petite-pan)), 0 var(--petite-pan));
  transition: background-color .18s ease;
}
.btn-plaque-petite:hover, .btn-plaque-petite.est-survol { color: var(--petite-texte-survol); }
.btn-plaque-petite:hover::before, .btn-plaque-petite.est-survol::before {
  background-color: var(--petite-survol); border-image-source: var(--petite-trait-survol);
}
.btn-plaque-petite:active, .btn-plaque-petite.est-appui { transform: translateY(1px); }
.btn-plaque-petite:active::before, .btn-plaque-petite.est-appui::before { background-color: var(--petite-appui); border-image-source: var(--petite-trait-survol); }
.btn-plaque-petite::after { inset: -6px; border-width: 14px; border-image: var(--focus-petite) 14 / 14px stretch; }

/* ---------- Variantes crème (10/11/2026) : « Réserver un créneau » (Cal.com), à côté d’« Audit offert » ---------- */
/* Petite plaque pleine crème, texte pétrole (10,5:1) : se distingue d’« Audit offert », au trait or */
.btn-plaque-petite--plein,
.btn-plaque-petite--plein:hover, .btn-plaque-petite--plein.est-survol { color: #0A393A; }
.btn-plaque-petite--plein::before { background-color: #EEEAE1; }
.btn-plaque-petite--plein:hover::before, .btn-plaque-petite--plein.est-survol::before { background-color: #FFFFFF; }
.btn-plaque-petite--plein:active::before, .btn-plaque-petite--plein.est-appui::before { background-color: #E2DCD0; }
/* Plaque gravée crème (menu mobile) : filet pétrole, texte pétrole */
.btn-plaque--creme {
  --plaque-fond: #EEEAE1;
  --plaque-fond-survol: #FFFFFF;
  --plaque-fond-appui: #E2DCD0;
  --plaque-texte: #0A393A;
}

/* Mouvement réduit : pas de reflet, pas d’enfoncement animé */
@media (prefers-reduced-motion: reduce) {
  .btn-plaque::before { background-image: none; }
  .btn-plaque, .btn-cartouche, .btn-plaque-petite { transition: none; }
}
/* Contraste élevé (Windows) : les couleurs imposées remplacent les filets dessinés */
@media (forced-colors: active) {
  .btn-plaque, .btn-cartouche, .btn-plaque-petite { border: 1px solid ButtonText; color: ButtonText; }
  .btn-plaque::before, .btn-cartouche::before, .btn-plaque-petite::before, .btn-plaque::after, .btn-cartouche::after, .btn-plaque-petite::after { display: none; }
  .btn-plaque:focus-visible, .btn-cartouche:focus-visible, .btn-plaque-petite:focus-visible { outline: 2px solid Highlight; outline-offset: 4px; }
}