/* Bandeau « Write to me » et section Contact, dans l'esprit du reste du site : laque verte, or et vermillon */
:root { --c-or: #c9a45c; --c-or-vif: #e2c27a; --c-vermillon: #a52a1d; }

/* Bandeau */
.bandeau .voile { background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(18, 38, 26, .55), rgba(10, 20, 14, .88) 75%); }
.bandeau .contenu { display: flex; flex-direction: column; align-items: center; }
.bandeau .contenu::before { content: "文"; display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px;
  font-family: var(--f-jp); font-size-adjust: none; font-size: 1.6rem; color: #f3e3b5;
  background: linear-gradient(180deg, #a52a1d, #7f170f); box-shadow: inset 0 0 0 2px #7f170f, inset 0 0 0 3px rgba(214,180,94,.7), 0 0 22px rgba(200,40,30,.45); transform: rotate(-3deg); }
.bandeau h2 { color: var(--creme); }
.bandeau p { color: #cfd3c2; }
.bandeau .contenu::after { content: ""; width: min(360px, 70%); height: 9px; margin-top: 40px;
  background: linear-gradient(var(--c-or), var(--c-or)) center / 100% 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 0 9 4.5 4.5 9 0 4.5z' fill='%23c9a45c'/%3E%3C/svg%3E") center / 9px 9px no-repeat; opacity: .8; }

/* Boutons : vermillon cerclé d'or, comme « Enter » dans la popup du dé */
.bandeau .bouton, .formulaire .bouton { position: relative; color: #f3e3b5; border: 1px solid #d6b45e; background: linear-gradient(180deg, #a52a1d, #7f170f);
  box-shadow: inset 0 0 0 2px #7f170f, inset 0 0 0 3px rgba(214,180,94,.6), 0 10px 24px rgba(0,0,0,.35); font-weight: 600; letter-spacing: .2em;
  transition: background .3s, box-shadow .3s, transform .3s; }
.bandeau .bouton:hover, .formulaire .bouton:hover { color: #fff3d0; border-color: #e2c27a; background: linear-gradient(180deg, #bb3324, #8f1c12);
  box-shadow: inset 0 0 0 2px #8f1c12, inset 0 0 0 3px rgba(226,194,122,.8), 0 0 24px rgba(200,40,30,.45); transform: translateY(-1px); }

/* Colonne de gauche */
#contact .surtitre { color: #d0533f; }
.contact h2 { color: var(--creme); }
.contact h2::after { content: ""; display: block; width: 120px; height: 9px; margin-top: 1.2rem;
  background: linear-gradient(var(--c-or), var(--c-or)) left center / 100% 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 0 9 4.5 4.5 9 0 4.5z' fill='%23c9a45c'/%3E%3C/svg%3E") right center / 9px 9px no-repeat; }
.coordonnees li { padding: 10px 14px; border: 1px solid rgba(201,164,92,.22); background: linear-gradient(90deg, rgba(26,42,31,.75), rgba(13,22,16,.35)); color: #d6d8cc; }
.coordonnees svg { stroke: var(--c-or); }
.copier { color: var(--c-or); border-color: rgba(201,164,92,.45); }
.copier:hover { color: var(--c-or-vif); border-color: var(--c-or-vif); }

/* Le formulaire dans un panneau laqué, double filet d'or et coins */
.formulaire { position: relative; padding: clamp(22px, 3vw, 36px); gap: 12px;
  background: linear-gradient(180deg, rgba(26, 42, 31, .95), rgba(13, 22, 16, .97));
  border: 1px solid rgba(201,164,92,.55); box-shadow: inset 0 0 0 4px #0d1610, inset 0 0 0 5px rgba(201,164,92,.28), 0 24px 50px rgba(0,0,0,.45); }
.formulaire::before { content: "書状 · Letter"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 2px 14px;
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--c-or-vif); background: #0f1913; border: 1px solid rgba(201,164,92,.55); white-space: nowrap; }
.formulaire::after { content: ""; position: absolute; inset: 9px; pointer-events: none;
  background:
    linear-gradient(var(--c-or), var(--c-or)) left top / 18px 1px no-repeat, linear-gradient(var(--c-or), var(--c-or)) left top / 1px 18px no-repeat,
    linear-gradient(var(--c-or), var(--c-or)) right top / 18px 1px no-repeat, linear-gradient(var(--c-or), var(--c-or)) right top / 1px 18px no-repeat,
    linear-gradient(var(--c-or), var(--c-or)) left bottom / 18px 1px no-repeat, linear-gradient(var(--c-or), var(--c-or)) left bottom / 1px 18px no-repeat,
    linear-gradient(var(--c-or), var(--c-or)) right bottom / 18px 1px no-repeat, linear-gradient(var(--c-or), var(--c-or)) right bottom / 1px 18px no-repeat; }
.formulaire input, .formulaire textarea, .formulaire select { position: relative; z-index: 1; padding: 13px 14px; background: rgba(8, 15, 10, .6);
  border: 1px solid rgba(201,164,92,.2); border-bottom: 1px solid rgba(201,164,92,.55); color: var(--creme); transition: border-color .3s, box-shadow .3s, background .3s; }
.formulaire ::placeholder { color: #9aa294; }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus { border-color: #d0533f; background: rgba(8, 15, 10, .85);
  box-shadow: 0 0 0 1px rgba(208,83,63,.35), 0 0 18px rgba(200,40,30,.25); }
.formulaire select { appearance: none; -webkit-appearance: none; color: var(--creme); padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a45c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.formulaire select option { background: #13201a; color: var(--creme); }
.formulaire .bouton { z-index: 1; margin-top: 10px; }
.formulaire .message { position: relative; z-index: 1; color: var(--c-or-vif); }