/*
 * Demande de retour — formulaire et accusé de réception.
 *
 * Les couleurs viennent des jetons --lupeo-* du thème enfant : si la charte
 * change dans le personnalisateur, cette page suit.
 *
 * ⚠️ Le bouton d'envoi est turquoise, pas orange. L'orange (--lupeo-cta) est
 * réservé au bouton d'achat : l'employer ailleurs lui fait perdre sa force.
 */

.lupeo-retour,
.lupeo-retour-recu{
  --lp-champ-bord:#D8D0C4;
  font-family:var(--lupeo-sans);
  color:var(--lupeo-ink-2);

}

/* Les pages de contenu du site occupent toute la largeur — 1 152 px sur un
   écran de 1 280. C'est bon pour du texte suivi, mauvais pour de la saisie :
   un champ de plus d'un mètre de large donne l'impression qu'on attend un
   roman, et l'œil perd la ligne entre l'intitulé et le champ.

   ⚠️ La largeur n'est PAS posée sur `.lupeo-retour` mais sur ses enfants.
   WordPress centre d'autorité tout enfant direct d'un conteneur
   `is-layout-constrained` — avec un `margin-left:auto !important` qu'aucune
   spécificité ne peut battre. Le formulaire partait alors 140 px à droite du
   titre de la page. En contenant les blocs à l'intérieur du conteneur, la
   règle ne les atteint plus : ils commencent sur la même verticale que le
   titre, comme partout ailleurs sur le site, et sans surenchère de `!important`. */
.lupeo-retour > *{max-width:720px}

/* ── L'encadré « ce formulaire n'est pas obligatoire » ─────────────────
   Ambre, jamais l'orange du bouton d'achat, et jamais rouge : ce n'est pas
   une erreur, c'est un droit rappelé au client.                        */
.lupeo-retour__note{
  display:flex;gap:12px;align-items:flex-start;
  margin:0 0 28px;padding:14px 16px;
  background:var(--lupeo-warn-soft);
  border:1px solid var(--lupeo-warn-line);
  border-radius:10px;
}
.lupeo-retour__note .lupeo-i{
  flex:0 0 auto;width:20px;height:20px;margin-top:2px;
  fill:none;stroke:var(--lupeo-warn);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.lupeo-retour__note p{margin:0;font-size:.95rem;line-height:1.6;color:#6B4A16}
.lupeo-retour__note :where(a){color:var(--lupeo-warn);font-weight:500}

/* ── Le rappel d'erreurs ───────────────────────────────────────────── */
.lupeo-retour__erreurs{
  margin:0 0 22px;padding:14px 16px;
  background:#FDF2F2;border:1px solid #E7C3C3;border-radius:10px;
  color:#8C2A2A;
}
.lupeo-retour__erreurs p{margin:0 0 6px}
.lupeo-retour__erreurs ul{margin:0;padding-left:20px}
.lupeo-retour__erreurs li{margin:3px 0}

/* ── La carte de formulaire ────────────────────────────────────────── */
.lupeo-retour__form{
  display:flex;flex-direction:column;gap:26px;
  padding:26px 24px;
  background:#fff;
  border:1px solid var(--lupeo-line);
  border-radius:14px;
}

.lupeo-retour__grp{
  display:flex;flex-direction:column;gap:14px;
  margin:0;padding:0;border:0;
}
.lupeo-retour__grp legend{
  width:100%;padding:0 0 10px;margin:0 0 2px;
  border-bottom:1px solid var(--lupeo-line);
  font-family:var(--lupeo-display);font-weight:700;font-size:1rem;
  color:var(--lupeo-ink);
}
.lupeo-retour__grp legend em{
  font-style:normal;font-family:var(--lupeo-sans);font-weight:400;
  font-size:.83rem;color:var(--lupeo-mute);margin-left:8px;
}

.lupeo-retour__champ{display:flex;flex-direction:column;gap:5px;margin:0}
.lupeo-retour__champ label{font-weight:500;font-size:.92rem;color:var(--lupeo-ink)}
.lupeo-retour__req{color:var(--lupeo-teal);font-weight:600}
.lupeo-retour__opt{font-weight:400;color:var(--lupeo-mute)}
.lupeo-retour__aide{font-size:.87rem;line-height:1.5;color:var(--lupeo-mute)}

/* ⚠️ Piège : la feuille de Blocksy (main.min.css) est imprimée APRÈS celle de
   l'extension, et elle habille les champs par des sélecteurs du type
   `input[type="text"]` — un élément + un attribut, soit une spécificité de
   (0,1,1) qui bat une classe seule (0,1,0). Sans le nom d'élément et le
   conteneur devant, le champ garde le fond transparent et les angles à 3 px
   de Blocksy. Mesuré avant correction : fond `rgba(0,0,0,0)`, rayon 3 px,
   remplissage `0 15px`. Aucun `!important` n'est nécessaire — le bon niveau
   de spécificité suffit. */
.lupeo-retour input.lupeo-retour__saisie,
.lupeo-retour select.lupeo-retour__saisie,
.lupeo-retour textarea.lupeo-retour__saisie{
  width:100%;padding:11px 13px;min-height:0;
  font-family:var(--lupeo-sans);font-size:1rem;line-height:1.4;
  color:var(--lupeo-ink);background:#fff;
  border:1px solid var(--lp-champ-bord);border-radius:9px;
  appearance:none;
}
.lupeo-retour input.lupeo-retour__saisie:focus-visible,
.lupeo-retour select.lupeo-retour__saisie:focus-visible,
.lupeo-retour textarea.lupeo-retour__saisie:focus-visible{
  outline:2px solid var(--lupeo-teal);outline-offset:1px;
  border-color:var(--lupeo-teal);
}
.lupeo-retour select.lupeo-retour__saisie{
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234A453E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.lupeo-retour textarea.lupeo-retour__saisie{min-height:118px;resize:vertical}

.lupeo-retour__duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── Le dépôt de photos ────────────────────────────────────────────── */
.lupeo-retour__depot{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px 16px;text-align:center;
  background:#FCFAF7;
  border:1.5px dashed #CDC4B6;border-radius:11px;
}
.lupeo-retour__depot .lupeo-i{
  width:26px;height:26px;fill:none;stroke:var(--lupeo-teal);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.lupeo-retour__depot-t{font-weight:500;color:var(--lupeo-ink);cursor:pointer}

/* ⚠️ Le thème pose `appearance:none` sur tous les champs. Sur un champ de type
   « fichier », cela efface le bouton natif et il ne reste qu'une case vide :
   personne ne devine qu'il faut cliquer. Mesuré avant correction : 273 × 22 px,
   fond transparent, aucun libellé. Rétablir `appearance:auto` ne suffit pas —
   le libellé du bouton natif est resté vide au contrôle.
   On ne dépend donc plus du rendu natif : le champ est étendu sur tout le
   cadre en transparence, ce qui rend le bloc entier cliquable, et le texte
   visible est le nôtre. Le champ garde le focus clavier ; le cadre le montre
   par `:focus-within`. */
.lupeo-retour__depot input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;
  font-size:0;color:transparent;
}
.lupeo-retour__depot:focus-within{
  border-color:var(--lupeo-teal);border-style:solid;
  box-shadow:0 0 0 3px rgba(0,124,117,.18);
}
.lupeo-retour__depot:hover{border-color:var(--lupeo-teal)}

/* La liste des fichiers choisis — remplie par lupeo-retour.js. Sans
   JavaScript, elle reste vide et le formulaire fonctionne quand même :
   le client ne voit simplement pas le rappel de ce qu'il a joint. */
.lupeo-retour__fichiers{
  display:none;margin:2px 0 0;
  font-size:.87rem;font-weight:500;color:var(--lupeo-teal-deep);
}
.lupeo-retour__fichiers:not(:empty){display:block}
.lupeo-retour__fichiers[data-trop="1"]{color:#B32D2E;font-weight:600}
.lupeo-retour__depot .lupeo-retour__aide{max-width:52ch}

/* Le champ leurre : hors écran, mais lisible par un robot qui remplit
   tout ce qu'il trouve. `display:none` serait détecté ; ceci ne l'est pas. */
.lupeo-retour__leurre{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

/* ── Le pied du formulaire ─────────────────────────────────────────── */
.lupeo-retour__pied{display:flex;flex-direction:column;gap:14px}
.lupeo-retour__rgpd{margin:0;font-size:.85rem;line-height:1.55;color:var(--lupeo-mute)}
.lupeo-retour__rgpd :where(a){color:var(--lupeo-teal)}

/* Même piège que pour les champs, en pire : Blocksy peint tout `[type=submit]`
   avec `--theme-button-background-initial-color`, qui vaut #EA580C. Sans le
   nom d'élément devant, le bouton d'envoi ressortait ORANGE — la couleur
   réservée au bouton d'achat. Mesuré avant correction : `rgb(234,88,12)`,
   309 px de large au lieu de la pleine largeur, 40 px de haut. */
.lupeo-retour button.lupeo-retour__envoyer{
  display:block;width:100%;padding:15px 20px;min-height:0;
  font-family:var(--lupeo-sans);font-weight:600;font-size:1rem;line-height:1;
  color:#fff;background:var(--lupeo-teal);
  border:0;border-radius:10px;cursor:pointer;
  transition:background .15s ease;
}
.lupeo-retour button.lupeo-retour__envoyer:hover{background:var(--lupeo-teal-deep)}
.lupeo-retour button.lupeo-retour__envoyer:focus-visible{outline:2px solid var(--lupeo-teal-deep);outline-offset:2px}

.lupeo-retour__secours{margin:0;text-align:center;font-size:.9rem;color:var(--lupeo-mute)}
.lupeo-retour__secours :where(a){color:var(--lupeo-teal);font-weight:500}

/* ── L'accusé de réception ─────────────────────────────────────────── */
.lupeo-retour-recu{
  display:flex;flex-direction:column;gap:20px;
  padding:30px 26px;
  background:#fff;border:1px solid var(--lupeo-line);border-radius:14px;
}
.lupeo-retour-recu__coche{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:#EAF5EF;
}
.lupeo-retour-recu__coche .lupeo-i{
  width:24px;height:24px;fill:none;stroke:var(--lupeo-ok);
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}
.lupeo-retour-recu h2{margin:0 0 8px;font-family:var(--lupeo-display);font-weight:700}
.lupeo-retour-recu p{margin:0}
.lupeo-retour-recu__num{
  align-self:flex-start;padding:9px 15px;
  background:var(--lupeo-teal-soft);color:var(--lupeo-teal-deep);
  border-radius:9px;
  font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.lupeo-retour-recu__rappel{
  padding:13px 15px;
  background:var(--lupeo-cream);border:1px solid var(--lupeo-line);
  border-radius:10px;font-size:.93rem;
}
.lupeo-retour-recu__rappel :where(a){color:var(--lupeo-teal);font-weight:500}
/* Un numéro de dossier coupé en fin de ligne se recopie de travers. */
.lupeo-retour-recu__rappel strong{white-space:nowrap}

.lupeo-retour-suite{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.lupeo-retour-suite li{display:flex;gap:13px;align-items:flex-start}
.lupeo-retour-suite__n{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:var(--lupeo-teal);color:#fff;
  font-size:.78rem;font-weight:600;line-height:24px;text-align:center;
}
.lupeo-retour-suite p{margin:0}
.lupeo-retour-suite strong{color:var(--lupeo-ink)}

/* ── Téléphone ─────────────────────────────────────────────────────── */
@media (max-width:560px){
  .lupeo-retour__duo{grid-template-columns:1fr}
  .lupeo-retour__form{padding:20px 16px}
  .lupeo-retour-recu{padding:24px 18px}
}

@media (prefers-reduced-motion:reduce){
  .lupeo-retour button.lupeo-retour__envoyer{transition:none}
}