/* ===========================================================================
   IMX « Sang & Vie » — habillage du générateur de carte de soutien
   Tranche 1. Valeurs relevées dans site/sang-et-vie.html, qui fait foi.
   Écrit par Agent WORDPRESS le 26 août 2026.

   Tout est porté par #imx-carte-sang : le module ne peut rien déborder
   sur le reste de la page.
   =========================================================================== */

#imx-carte-sang{
  /* jetons repris du kit Elementor, pour ne pas dépendre de --e-global-* */
  --imx-navy:#1F2A57;
  --imx-sec:#13154D;
  --imx-acc:#FFA42F;
  --imx-txt:#34354C;
  --imx-cnavy:#182850;
  --imx-rouge:#C02028;
  --imx-bord:#D3D9E4;
  --imx-lab:#7B8497;

  /* §4.1 point 3 : sans cette borne, la colonne des champs s'étire et laisse
     un trou d'environ 350 px entre les champs et l'aperçu au-delà de 1200 px. */
  max-width:980px;
  font-family:'Urbanist',system-ui,sans-serif;
  color:var(--imx-txt);
}

#imx-carte-sang *{box-sizing:border-box}

/* --- l'attribut hidden doit gagner ---------------------------------------
   Sans cette regle, le display:inline-block de .imx-btn (specificite 1 id +
   1 classe) bat le [hidden]{display:none} de la feuille du navigateur :
   l'attribut est pose, stocke, correct -- et sans effet a l'ecran.
   Section 5, piege 4 : la bonne regle, battue en specificite. */
#imx-carte-sang [hidden]{display:none !important}

/* --- le repli, visible tant que le JS n'a pas monté le générateur ---------
   Il n'est PAS masqué par cette feuille : c'est carte.js qui le retire, et
   seulement après avoir monté quelque chose à la place. Si le CSS le
   masquait au chargement et que le JS échouait, le visiteur verrait un trou. */
#imx-carte-sang .imx-repli p{
  margin:0 0 16px;
  font-size:17px;
  line-height:1.6;
}

/* --- structure ----------------------------------------------------------- */
/* Geste E du Message 37 : colonnes DECLAREES. Une colonne declaree ne peut
   pas se replier par accident — c'est le correctif de fond d'A34. */
#imx-carte-sang .imx-gen{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:52px;
  align-items:start;
  margin-top:36px;
}
/* En grille, min-width:auto ferait deborder la colonne 1fr. */
#imx-carte-sang .imx-champs{min-width:0}
#imx-carte-sang .imx-apercu{
  background:#fff;
  border-radius:14px;
  padding:20px;
  box-shadow:0 6px 20px rgba(0,0,0,.1);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
#imx-carte-sang .imx-apercu canvas{
  width:260px;
  height:auto;
  border-radius:9px;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
  display:block;
  background:var(--imx-cnavy);
}

/* --- libellés et champs -------------------------------------------------- */
#imx-carte-sang .imx-lab{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--imx-lab);
  margin-bottom:7px;
}
#imx-carte-sang .imx-lab.imx-serre{margin-bottom:2px}
/* B25. Les etiquettes de GROUPE sont des <div>, donc en bloc. La premiere est
   un <label> — la balise JUSTE, elle associe l'etiquette a la saisie pour un
   lecteur d'ecran — mais un <label> est inline-block par defaut : 106 px
   d'etiquette + 440 px de champ = 546 <= 548 disponibles, donc ils tenaient
   sur une ligne. On corrige le STYLE, jamais la semantique : le <label> reste
   un <label>. NE PAS le remplacer par un <div> pour « uniformiser ». */
#imx-carte-sang .imx-champs label.imx-lab{display:block}
#imx-carte-sang .imx-esp{margin-top:20px}
#imx-carte-sang .imx-esp-l{margin-top:22px}

#imx-carte-sang input[type=text]{
  border:1.5px solid var(--imx-bord);
  border-radius:10px;
  padding:12px 14px;
  font-size:17px;
  color:var(--imx-navy);
  font-weight:600;
  background:#fff;
  width:100%;
  max-width:440px;
  font-family:inherit;
}
#imx-carte-sang input[type=text]:focus-visible,
#imx-carte-sang .imx-btn:focus-visible,
#imx-carte-sang .imx-chip:focus-visible,
#imx-carte-sang input[type=range]:focus-visible{
  outline:3px solid var(--imx-acc);
  outline-offset:2px;
}
#imx-carte-sang .imx-compte{
  font-size:12px;
  color:var(--imx-lab);
  margin-top:6px;
}

/* --- boutons — ombre dure 2px 2px 0 0, rayon 50px (signature du kit) ------ */
#imx-carte-sang .imx-btn{
  border-radius:50px;
  font-weight:600;
  display:inline-block;
  text-decoration:none;
  box-shadow:2px 2px 0 0 var(--imx-sec);
  padding:13px 26px;
  font-size:15px;
  border:0;
  cursor:pointer;
  font-family:inherit;
  line-height:1.3;
}
#imx-carte-sang .imx-btn.imx-or{background:var(--imx-acc);color:#fff}
#imx-carte-sang .imx-btn.imx-bl{
  background:#fff;
  color:var(--imx-navy);
  border:1.5px solid var(--imx-navy);
}
#imx-carte-sang .imx-btn.imx-sm{padding:9px 18px;font-size:13px}
#imx-carte-sang .imx-btn[disabled]{opacity:.45;cursor:not-allowed}

/* --- pastilles de format ------------------------------------------------- */
#imx-carte-sang .imx-chip{
  border:1.5px solid var(--imx-bord);
  border-radius:50px;
  padding:9px 18px;
  font-size:14px;
  font-weight:600;
  color:#6C7689;
  background:#fff;
  display:inline-block;
  cursor:pointer;
  font-family:inherit;
  margin-right:8px;
}
#imx-carte-sang .imx-chip[aria-pressed=true]{
  background:var(--imx-navy);
  color:#fff;
  border-color:var(--imx-navy);
}

/* --- curseur de zoom : un input range habillé comme .curs de la maquette -- */
#imx-carte-sang input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;max-width:440px;
  height:5px;border-radius:3px;background:var(--imx-bord);
  margin-top:7px;outline:none;
}
#imx-carte-sang input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:17px;height:17px;border-radius:50%;
  background:var(--imx-navy);cursor:pointer;border:0;
}
#imx-carte-sang input[type=range]::-moz-range-thumb{
  width:17px;height:17px;border-radius:50%;
  background:var(--imx-navy);cursor:pointer;border:0;
}

/* --- messages ------------------------------------------------------------ */
#imx-carte-sang .imx-msg{
  margin-top:12px;font-size:15px;line-height:1.5;
  border-radius:10px;padding:11px 14px;display:none;
}
#imx-carte-sang .imx-msg.imx-on{display:block}
#imx-carte-sang .imx-msg.imx-err{background:#FCE4E0;color:var(--imx-rouge)}
#imx-carte-sang .imx-msg.imx-info{background:#E6E6F9;color:var(--imx-navy)}

/* --- repli de téléchargement iOS (§8) ------------------------------------ */
#imx-carte-sang .imx-ios{display:none;margin-top:18px;text-align:center}
#imx-carte-sang .imx-ios.imx-on{display:block}
#imx-carte-sang .imx-ios img{
  width:230px;max-width:100%;margin:0 auto 12px;
  border-radius:9px;box-shadow:0 8px 22px rgba(0,0,0,.24);display:block;
}

#imx-carte-sang .imx-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- paliers : ceux du kit Elementor, relevés actifs le 26 août 2026 ------
   1366 laptop · 1024 tablet · 880 mobile_extra · 767 mobile.
   La feuille de la maquette n'en pose que deux (1024 et 767) ; les deux
   autres héritent, et c'est écrit ainsi plutôt que deviné. */
@media (max-width:1024px){
  #imx-carte-sang .imx-gen{grid-template-columns:1fr 320px;gap:36px}
}

/* §4.3 : sur téléphone, l'aperçu passe AU-DESSUS des champs. */
@media (max-width:880px){
  /* Palier 880 : le generateur passe sur une colonne. Table du Message 37. */
  #imx-carte-sang .imx-gen{grid-template-columns:1fr;gap:34px}
  #imx-carte-sang .imx-apercu{width:100%}
  #imx-carte-sang .imx-apercu canvas{width:min(420px,80vw)}
  /* Une seule colonne : l'apercu passe AU-DESSUS des champs, comme sous 767.
     Les deux paliers a une colonne se comportent donc pareil. */
  #imx-carte-sang .imx-apercu{order:-1}
}
@media (max-width:767px){
  /* La grille ignore flex-direction : l'ordre inverse (apercu AU-DESSUS des
     champs sur telephone) est retabli par 'order', pour ne pas perdre un
     comportement deja en production. */
  #imx-carte-sang .imx-gen{gap:34px;margin-top:24px}
  #imx-carte-sang .imx-apercu{order:-1}
  #imx-carte-sang .imx-apercu{width:100%}
  #imx-carte-sang .imx-apercu canvas{width:min(260px,70vw)}
  #imx-carte-sang input[type=text],
  #imx-carte-sang input[type=range]{max-width:100%}
  #imx-carte-sang .imx-repli p{font-size:16px}
}