/* HelloDepann — demande de rappel.
   Consomme les variables globales Elementor du site : aucune couleur ni police inventée.
   Les valeurs après la virgule ne servent que de repli (préprod, ou variable absente). */
.hdr{
  --c-navy: var(--e-global-color-primary,   #001F53);
  --c-red:  var(--e-global-color-secondary, #BE092F);
  --c-text: var(--e-global-color-text,      #131313);
  --c-soft: var(--e-global-color-4e4f094,   #F4F6F8);
  --c-line: var(--e-global-color-3b8016a,   #001F5326);
  --c-redw: var(--e-global-color-45e7e6d,   #BE092F17);
  --f-head: var(--e-global-typography-primary-font-family, "DM Sans"), sans-serif;
  --f-body: var(--e-global-typography-text-font-family,   "Raleway"), sans-serif;
  font-family:var(--f-body); color:var(--c-text);
  max-width:540px; margin:0 auto; background:#fff;
  border:1px solid var(--c-line); border-radius:8px; overflow:hidden;
}
.hdr *{box-sizing:border-box}
/* champ piege anti-robot : le style en ligne du markup reste le filet de securite */
.hdr__hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}

/* En-tête : sobre, aligné à gauche, pas de dégradé ni de pastille */
.hdr__head{padding:26px 26px 20px;border-bottom:1px solid var(--c-line)}
.hdr__title{margin:0 0 7px;font-family:var(--f-head);font-weight:600;font-size:22px;
  line-height:1.24;color:var(--c-navy);letter-spacing:-.01em}
.hdr .hdr__eyebrow{display:block;margin:0 0 6px;padding:0;font-family:var(--f-head);font-size:12px;
  font-weight:600;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-red)}
.hdr__sub{margin:0;font-size:15px;line-height:1.55;color:rgba(19,19,19,.72)}

.hdr__body{padding:22px 26px 26px}
.hdr__field{margin-bottom:16px}
.hdr__field label{display:block;font-family:var(--f-head);font-size:13px;font-weight:600;
  margin-bottom:7px;color:var(--c-navy)}
.hdr__field label span{font-family:var(--f-body);font-weight:500;color:rgba(19,19,19,.62)}
.hdr__wrap{position:relative;display:flex;align-items:center}
.hdr__wrap svg{position:absolute;left:14px;width:18px;height:18px;
  color:rgba(0,31,83,.58);pointer-events:none;transition:color .16s ease}
.hdr input[type=tel],.hdr input[type=text],.hdr textarea{
  width:100%;padding:14px 14px 14px 42px;font-family:var(--f-body);font-size:16px;
  color:var(--c-text);background:#fff;border:1px solid var(--c-line);border-radius:6px;
  -webkit-appearance:none;appearance:none;transition:border-color .16s ease,box-shadow .16s ease}
.hdr textarea{padding-left:14px;min-height:72px;resize:vertical;font-size:15px}
.hdr input::placeholder,.hdr textarea::placeholder{color:rgba(19,19,19,.58)}
.hdr input:focus,.hdr textarea:focus{outline:none;border-color:var(--c-navy);
  box-shadow:0 0 0 3px var(--c-line)}
.hdr__wrap:focus-within svg{color:var(--c-navy)}
.hdr [aria-invalid="true"]{border-color:var(--c-red);background:var(--c-redw)}

/* Photos */
.hdr__drop{display:block;border:1px dashed rgba(0,31,83,.28);border-radius:6px;
  padding:18px 14px;text-align:center;background:var(--c-soft);cursor:pointer;
  transition:border-color .16s ease,background .16s ease}
.hdr__drop:hover{border-color:var(--c-navy);background:#fff}
.hdr__drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hdr__drop svg{width:24px;height:24px;color:var(--c-navy);opacity:.75;margin-bottom:7px}
.hdr__drop strong{display:block;font-family:var(--f-head);font-size:14.5px;font-weight:600;
  color:var(--c-navy);margin-bottom:4px}
.hdr__drop strong span{font-family:var(--f-body);font-weight:500;color:rgba(19,19,19,.62)}
.hdr__drop em{display:block;font-family:var(--f-body);font-style:normal;font-weight:500;font-size:13.5px;line-height:1.5;color:rgba(19,19,19,.66)}
.hdr__thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hdr__thumb{position:relative;width:84px;height:84px;border-radius:6px;overflow:hidden;
  border:1px solid var(--c-line);background:var(--c-soft);animation:hdrPop .22s ease-out}
.hdr__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hdr__thumb em{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:10px;
  text-align:center;color:#fff;background:rgba(0,31,83,.78);padding:2px 0}
.hdr__thumb button{position:absolute;top:3px;right:3px;width:30px;height:30px;padding:0;border:0;
  border-radius:50%;background:rgba(0,31,83,.82);color:#fff;font-size:17px;line-height:30px;
  cursor:pointer;transition:background .15s ease}
.hdr__thumb button::before{content:"";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px}
.hdr__thumb button:hover{background:var(--c-red)}
@keyframes hdrPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.hdr__photonote{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--c-red)}
.hdr__photonote[hidden]{display:none}

/* Bouton : rouge de marque, la couleur d'action du site */
.hdr__submit{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 20px;margin-top:6px;font-family:var(--f-head);font-size:16.5px;font-weight:600;
  color:#fff;background:var(--c-red);border:0;border-radius:6px;cursor:pointer;
  transition:filter .16s ease,transform .1s ease}
.hdr__submit svg{width:17px;height:17px;transition:transform .16s ease}
.hdr__submit:hover:not(:disabled){filter:brightness(1.08)}
.hdr__submit:hover:not(:disabled) svg{transform:translateX(3px)}
.hdr__submit:active:not(:disabled){transform:translateY(1px)}
.hdr__submit:disabled{opacity:.7;cursor:default}
.hdr__submit.is-busy::before{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:hdrSpin .7s linear infinite}
.hdr__submit.is-busy svg{display:none}
@keyframes hdrSpin{to{transform:rotate(360deg)}}

/* Suivi de l'envoi des photos : progression réelle, jamais une animation décorative */
.hdr__progress{margin-top:12px}
.hdr__progress[hidden]{display:none}
.hdr__bar{height:8px;border-radius:4px;background:var(--c-soft);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--c-line)}
.hdr__bar i{display:block;width:3%;height:100%;border-radius:4px;background:var(--c-navy);
  transition:width .2s linear}
.hdr__progress-txt{margin:8px 0 0;font-size:13.5px;line-height:1.5;text-align:center;
  color:rgba(19,19,19,.72)}

/* Réassurance : une seule ligne de texte, sans pastilles ni icônes colorées */
.hdr__trust{margin:14px 0 0;font-size:13px;line-height:1.6;text-align:center;
  color:rgba(19,19,19,.66)}
.hdr__trust b{font-weight:600;color:var(--c-navy)}
.hdr__legal{margin:9px 0 0;font-size:12.5px;line-height:1.55;color:rgba(19,19,19,.62);text-align:center}
.hdr__call{display:block;text-align:center;margin-top:16px;padding-top:15px;
  border-top:1px solid var(--c-line);font-size:15px;color:rgba(19,19,19,.72)}
.hdr__call a{display:inline-block;min-height:44px;line-height:44px;padding:0 10px;
  color:var(--c-red);font-family:var(--f-head);font-weight:600;font-size:17px;
  text-decoration:none;white-space:nowrap}
.hdr__call a:hover{text-decoration:underline}

/* Messages et succès */
.hdr__msg{display:none;align-items:center;gap:9px;padding:12px 14px;margin-bottom:16px;
  border-radius:6px;font-size:14px;font-weight:500;
  background:var(--c-redw);color:var(--c-red);border:1px solid var(--c-redw)}
.hdr__msg svg{width:17px;height:17px;flex:0 0 auto}
.hdr__msg.is-on{display:flex;animation:hdrShake .3s ease}
@keyframes hdrShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.hdr__done{padding:42px 26px 34px;text-align:center}
.hdr__check{display:block;width:62px;height:62px;margin:0 auto 20px}
.hdr__check circle{stroke:var(--c-navy);stroke-width:4;fill:none;stroke-dasharray:170;
  stroke-dashoffset:170;animation:hdrDraw .5s ease forwards}
.hdr__check path{stroke:var(--c-navy);stroke-width:5;fill:none;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:hdrDraw .3s .42s ease forwards}
@keyframes hdrDraw{to{stroke-dashoffset:0}}
.hdr__done h3{margin:0 0 12px;font-family:var(--f-head);font-size:21px;font-weight:600;
  color:var(--c-navy);line-height:1.3}
.hdr__done-lead{margin:0 0 10px;font-size:16px;line-height:1.55;color:rgba(19,19,19,.82)}
.hdr__done-lead b{font-family:var(--f-head);font-weight:600;color:var(--c-navy);white-space:nowrap}
.hdr__done-note{margin:0 auto;max-width:400px;font-size:13.5px;line-height:1.6;color:rgba(19,19,19,.66)}
.hdr__done-photos{margin-bottom:10px;color:var(--c-red)}
.hdr__done-urgent{margin:24px 0 0;padding:16px;border-radius:6px;background:var(--c-soft)}
.hdr__done-urgent span{display:block;font-size:13.5px;color:rgba(19,19,19,.66);margin-bottom:2px}
.hdr__done-call{display:inline-block;min-height:44px;line-height:44px;padding:0 10px;
  font-family:var(--f-head);font-size:21px;font-weight:600;color:var(--c-red);text-decoration:none;
  white-space:nowrap}
.hdr__done-call:hover{text-decoration:underline}
.hdr__done-back{display:inline-block;margin-top:18px;min-height:44px;line-height:44px;padding:0 14px;
  font-size:14.5px;color:rgba(19,19,19,.66);text-decoration:underline;text-underline-offset:3px}
.hdr__done-back:hover{color:var(--c-navy)}

@media (max-width:480px){
  .hdr__head{padding:20px 18px 16px}.hdr__body{padding:18px 18px 22px}
  .hdr__title{font-size:19.5px}.hdr__done{padding:38px 18px}
}
@media (prefers-reduced-motion:reduce){
  .hdr *,.hdr *::before{animation:none!important;transition:none!important}
}
