:root{
  /* Rouge CGT */
  --brand:     #E2001A;  /* primaire */
  --brand-600: #C70017;  /* un ton plus sombre */
  --brand-700: #A50014;  /* encore plus sombre (icônes/texte) */

  /* Jaune CGT pour les accents positifs / callouts */
  --accent:    #FFD200;

  /* Neutres */
  --muted:     #6B7076;
  --surface:   #FFFFFF;
  --bg:        #FFF7F7;  /* fond très léger, chaud */

  /* Halo de focus (si tu le réactives un jour) */
  --ring: 0 0 0 .25rem rgba(226, 0, 26, .25);
}


html,body{ font-family: "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif; }
body.bg-body{ background: var(--bg); color:#1f262e; }

/* Put this in your CSS */
a, button, [role="button"], .btn {
  touch-action: manipulation; /* allows panning/pinch, disables double-tap zoom */
  -ms-touch-action: manipulation; /* legacy */
}

p a {
  color: var(--brand);
}

/* Cartes “douces” */
.card-soft{
  background: var(--surface);
  border-radius: 1rem;
  padding: 1rem 1rem 1.25rem;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.soft-shadow{ box-shadow: 0 6px 18px rgba(0,0,0,.08) !important; }

/* Progress */
.progress{ height:.6rem; border-radius:999px; overflow:hidden; }
.progress .progress-bar{ background: linear-gradient(90deg, var(--brand), var(--brand-600)); }

/* Fixed progress dock */
:root{ --dock-h: 68px; }
.progress-dock{
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid rgba(0,0,0,.08);
  z-index: 1050;
  padding-bottom: max(env(safe-area-inset-bottom), .25rem);
}
/* Reserve space so content isn't hidden behind the dock */
body{ padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
@media (max-width: 480px){ :root{ --dock-h: 78px; } }

/* Animate.css : adoucir la vitesse globale */
.animate__animated{ --animate-duration: .35s; }
@media (prefers-reduced-motion: reduce){ .animate__animated{ animation: none !important; } }

/* Inputs number : no wheel */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }

/* Input € */
.input-euro .input-group-text{
  background: #FFF0F0;
  border-color: #FFE0E0;
  color: var(--brand-700);
  font-weight: 600;
}

/* Visually hidden */
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }

/* Choice cards (radios) */
.choice-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.75rem; }
.choice-card{ display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; padding:1rem; border-radius:1rem; border:1px solid rgba(0,0,0,.08); background:var(--surface); cursor:pointer; position:relative; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.choice-card:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.choice-card:active{ transform:translateY(0); }
.choice-card .choice-icon{ font-size:1.25rem; color:var(--brand-700); }
.choice-card .choice-title{ font-weight:700; }
.choice-card .choice-helper{ font-size:.9rem; color:var(--muted); }
input[type=radio].visually-hidden:checked + .choice-card{ border-color:var(--brand); box-shadow:var(--ring); }

/* Chips Oui/Non */
.choice-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.choice-chip{ display:inline-flex; align-items:center;font-size: 1.5rem; gap:.14rem; padding:1rem 2rem; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:var(--surface); cursor:pointer; transition: all .12s ease; }
.choice-chip:hover{ box-shadow:0 6px 12px rgba(0,0,0,.06); transform:translateY(-1px); }
input[type=radio].visually-hidden:checked + .choice-chip{ border-color:var(--brand); box-shadow:var(--ring); }

/* Toggle grid (checkbox → cartes) */
.toggle-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.75rem; }
.toggle-item{ display:flex; flex-direction:column; }
/* Carte cliquable + indicateur intégré (pseudo-checkbox) */
.toggle-card{
  display:flex; align-items:center; gap:.5rem; padding:.85rem 1rem; border-radius:.9rem; border:1px solid rgba(0,0,0,.08);
  background: var(--surface); cursor:pointer; transition: border-color .12s, box-shadow .12s, transform .1s;
  position: relative;
}
/* pseudo case à cocher à gauche */
.toggle-card::before{
  content:""; flex:0 0 1.1rem; width:1.1rem; height:1.1rem; border-radius:.25rem; border:2px solid rgba(0,0,0,.25);
  margin-right:.25rem; transition: all .12s ease;
}
/* chevron à droite */
.toggle-card .chev{ margin-left:auto; transition: transform .2s ease; opacity:.7; }
.toggle-card:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.07); }
/* état coché = halo + case remplie + chevron tourné */
input[type=checkbox].visually-hidden:checked + .toggle-card{ border-color: var(--brand); box-shadow: var(--ring); }
input[type=checkbox].visually-hidden:checked + .toggle-card::before{ background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 3px #fff; }
input[type=checkbox].visually-hidden:checked + .toggle-card .chev{ transform: rotate(180deg); }

/* Focus clavier sur l'input → halo sur la carte */
input[type=checkbox].visually-hidden:focus + .toggle-card{ box-shadow: var(--ring); }

/* Collapse doux (Bootstrap .collapse/.show) */ 
.collapse{ transition: height .2s ease; }

.form-label{
  font-size: 1.4rem;
}


/* Stepper (nav d’avancement) */
.stepper { margin-bottom: .75rem; }
.stepper-list {
  display: grid;
  z-index: 0;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: .25rem;
  list-style: none;
  padding-left: 0;
  position: relative;
  counter-reset: step;
}


/* Ligne d’avancement en arrière-plan */
.stepper-list::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 1.25rem;   /* au lieu de .75rem */
  right: 1.25rem;
  top: 21px;
  height: 2px;
  background: linear-gradient(90deg, rgba(68,92,240,.35), rgba(233,236,239,.6));
  opacity: .25;
}

/* Item */
.stepper-item a {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: .5rem;
  text-align: center;
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: inherit;
  padding: .25rem .5rem;
  border-radius: .5rem;
}


/* Pastille */
.stepper-index {
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 999px;
  font-weight: 700;
  border: 2px solid rgba(0,0,0,.15);
  background: var(--surface);
  color: #2a2f36;
  transition: all .15s ease;
  position: relative;
  z-index: 2;
}

/* Libellé */
.stepper-label {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3a4150;
  position: relative;
  z-index: 2;
}

/* États du stepper */
.stepper-item.is-active .stepper-index {
  border-color: var(--brand);
  background: #f3f5ff;
  color: var(--brand-700);
  box-shadow: var(--ring);
}
.stepper-item.is-active .stepper-label {
  color: var(--brand-700);
}

.stepper-item.is-complete .stepper-index {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.stepper-item.is-complete .stepper-label {
  color: var(--brand-600);
}

/* Stepper compact sur petits écrans (labels masqués visuellement) */
@media (max-width: 520px) {
  /* On garde l'accessibilité : texte masqué visuellement, lu par les SR */
  .stepper-label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  /* resserrer la grille et supprimer le padding horizontal inutile */
  .stepper-item a { grid-template-columns: 2rem; padding: .25rem 0; }
  /* réaligner la ligne pour passer par le centre des pastilles */
  .stepper-list::before { top: 20px; }
}

.step-title{
  font-weight: 800;
}

/* (optionnel) petit pop à l’activation */
.stepper-item.is-active .stepper-index { animation: pop .18s ease-out both; }
@keyframes pop { from { transform: scale(.96); } to { transform: scale(1); } }


.stepper-item.is-active .stepper-index { animation: pop .18s ease-out both; }
@keyframes pop { from { transform: scale(.96); } to { transform: scale(1); } }


/* Buttons */
.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-600); border-color:var(--brand-600); }
.btn-outline-primary{ color: var(--brand);border-color:var(--brand); }
.btn-outline-primary:hover{ background: var(--brand-600);border-color:var(--brand-700); }
.btn-success{ background:var(--accent); border-color:var(--accent); }


/* FOCUS */

/* ===== Reset global du focus visuel (générique) ===== */
*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Renfort pour les composants Bootstrap */
.btn:focus, .btn:focus-visible,
.form-control:focus, .form-select:focus,
.form-check-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important; /* évite la bordure bleue */
}

/* Si un input masqué prend le focus, ne pas mettre de halo sur son label stylé */
input.visually-hidden:focus + .choice-card,
input.visually-hidden:focus + .choice-chip,
input.visually-hidden:focus + .toggle-card {
  outline: none !important;
  box-shadow: none !important;
}


/*Labels forfaits */

/* Ligne compacte : label à gauche, petit input à droite */
.inline-field{
  display: grid;
  grid-template-columns: 1fr auto;  /* label prend la place, input à droite */
  align-items: center;
  gap: .75rem;
}

.inline-label{
  margin: 0;
  font-weight: 600;
  color: #1f262e;
}

.inline-input{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.inline-input .form-control{
  width: clamp(72px, 9vw, 110px);   /* petit champ à droite */
  padding-right: .5rem;
}

.inline-input .unit{
  color: var(--muted);
  font-size: .9rem;
}

/* Mobile : empilement propre si l’espace manque */
@media (max-width: 520px){
  .inline-field{
    grid-template-columns: 1fr;   /* empile label puis input */
    gap: .35rem;
  }
  .inline-input{ justify-content: flex-start; }
}

/* Stepper numérique ± compact (à droite du label) */
.inline-input.qty {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: .35rem;
}

.inline-input .qty-input {
  width: clamp(64px, 8vw, 96px);
  text-align: right;
  padding-right: .5rem;
}

/* Boutons ronds compacts */
.qty-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  border-color: rgba(0,0,0,.12);
}
.qty-btn:hover { color: var(--brand); border-color: var(--brand); }

/* Pastille unité */
.inline-input .unit { color: var(--muted); font-size: .9rem; }

/* Mobile : garde les boutons à côté de l'input */
@media (max-width: 520px){
  .inline-input.qty { justify-content: flex-start; }
}


/** RESUME ****/

#resume_out{
  width: 1080px;
  height: 1350px;
  margin: 10px auto;
  border-radius: 0px;
  background-color: #FE5F54 !important;
  color: #fff;
    display: flex;
    flex-direction: column;
  place-content: center space-around;
  max-width: 100%;
}

#resume_out h2.post-title{
  font-weight: 800;
  text-align: center;
  font-size: 60px;
}
#resume_out h3.post-subtitle{
  font-weight: 800;
  text-align: center;
  font-size: 34px;
  display: block;
  margin: 0 auto;
  max-width: 900px;
}

/* Sous-titres internes */
#resume-inner h6{
  font-size: 25px;
  font-weight: 700;
  margin: .75rem 0 .25rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#resume-inner p{
  font-size:18px;
    display: flex;
    justify-content: space-between;
    align-items: self-end;
}
#resume-inner p.lead{
  font-size: 22px;
}


/* ===== Ticket de caisse (receipt) — appliqué à #resume-inner ===== */
#resume-inner{
  width: min(420px, 100%);
  margin: 0 auto;
  background: #fffdfa;                 
  color: #222;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  transform: rotate(-1.3deg);
  border-radius: 1px;
  font-family: monospace;
  font-variant-numeric: tabular-nums lining-nums; /* chiffres alignés façon caisse */
  position: relative;
  overflow: hidden;                       /* nécessaire pour les perforations */
  padding: 1rem 1rem 1.25rem;
}

/* Subtile "banding" thermique */
#resume-inner::before{
  content:"";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0 24px,
    rgba(0,0,0,.03) 24px 25px);
  pointer-events: none;
}

/* Découpe en dents (haut + bas) via mask ; fonctionne Chrome/Edge/Firefox/Safari */
#resume-inner{
  -webkit-mask:
    radial-gradient(circle 7px at 12px -1px, transparent 98%, #000 99%) left   top    / 24px 8px repeat-x,
    radial-gradient(circle 7px at 12px calc(100% + 1px), transparent 98%, #000 99%) left bottom / 24px 8px repeat-x,
    linear-gradient(#000 0 0);
          mask:
    radial-gradient(circle 7px at 12px -1px, transparent 98%, #000 99%) left   top    / 24px 8px repeat-x,
    radial-gradient(circle 7px at 12px calc(100% + 1px), transparent 98%, #000 99%) left bottom / 24px 8px repeat-x,
    linear-gradient(#000 0 0);
}




/* Séparateurs façon caisse */
#resume-inner hr{
  border: 0;
  border-top: 1px dashed rgba(0,0,0,.25);
  margin: .75rem 0;
}

/* Lignes "libellé ....... prix" (dot leaders) */
#resume-inner .receipt-line{
  display: flex; align-items: baseline;
  gap: .5rem;
  line-height: 1.4;
}
#resume-inner .receipt-line .label{
  flex: 1 1 auto; position: relative; white-space: nowrap;
}
#resume-inner .label::after{
  content: "................................................................";
  position: absolute; 
  left: 0;
  bottom: 0;
  letter-spacing: .15em;
  color: rgba(0,0,0,.25);
  font-size: 10px;
  line-height: ;
  overflow: hidden; display: inline-block; width: 100%;
}
#resume-inner .price{
  flex: 0 0 auto; font-weight: 700;
  margin-left: .25rem;
}

/* Liste type ticket */
#resume-inner ul{ list-style: none; padding-left: 0; margin: .25rem 0 .5rem; }
#resume-inner ul li{ margin: .125rem 0; }

/* Sous-totaux et total */
#resume-inner .subtotal{
  display:flex; justify-content:space-between; margin:.25rem 0 .5rem;
}
#resume-inner .grand-total{
  display:flex; justify-content:space-between;
  border-top: 2px dashed rgba(0,0,0,.35);
  padding-top: .5rem; margin-top:.5rem;
  font-weight: 800; font-size: 1.05rem;
}

/* "Barcode" décoratif (optionnel) */
#resume-inner .barcode{
  height: 44px; margin-top: .5rem;
  background:
    repeating-linear-gradient(90deg,
      #111 0 2px, transparent 2px 4px,
      #111 4px 6px, transparent 6px 9px);
  opacity: .3; border-radius: 4px;
}

/* Micro-texte (date, ticket id, hashtags) */
#resume-inner .meta{
  font-size: .75rem; color: #444; text-align: center;
  margin-top: .25rem;
}

@media (max-width: 380px){
  #resume-inner{ padding: .75rem .75rem 1rem; }
}

/* caché par défaut */
#step2 .btn-next-guard{ display:none; }

/* s'affiche si un input numérique du même bloc n'est plus vide */
#step2 .card-soft:has(input[type="number"]:not(:placeholder-shown)) .btn-next-guard{
  display:inline-flex;
}

/* Hide the dock when step 5 is the visible step (not [hidden]) */
body:has(#step5:not([hidden])) .progress-dock {
  display: none !important;
}
/* Action titles: clean, subtle, consistent with the rest */
.action-title{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; line-height:1.1;
  color:#1f262e;                                 /* same base text tone as body */
  font-size:clamp(1.4rem, 1.1rem + 1.4vw, 2rem); /* slightly smaller than h1 */
  margin:.5rem 0 1rem;
}

.action-title .num{
  min-width: 1.25em; text-align: right;
  letter-spacing:.2px;
}

.action-title .verb{
  position: relative; padding-bottom:.08em;
}
.action-title .verb::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em;
  height:.18rem; border-radius:2px;
  background: var(--brand);        /* subtle brand underline */
  opacity:.6;
}

/* Neutral chip for the icon (no big red fill) */
.action-title .icon-badge{
  display:inline-grid; place-items:center;
  width:2rem; height:2rem; border-radius:999px;
  background: var(--brand);
  color: #fff;
  border:1px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: transform .12s ease, border-color .12s ease, color .12s ease;
}
.action-title:hover .icon-badge{
  transform: translateY(-1px);
}

.action-title .icon-badge i{ font-size:1rem; line-height:1; }

/* Compact on very small screens */
@media (max-width:380px){
  .action-title{ gap:.4rem; }
  .action-title .icon-badge{ width:1.8rem; height:1.8rem; }
}

/* ===== Partage (sobre & cohérent) ===== */
.share { margin-top: .5rem; }
.share-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
}

.share-btn{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem;
  border-radius: .75rem;
  background: var(--surface);
  color: #1f262e;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  text-decoration: none;
  transition: transform .12s ease, border-color .12s ease, color .12s ease, background-color .12s ease;
  font-weight: 600;
}
.share-btn i{ font-size: 1.05rem; line-height: 1; }
.share-btn .label{ font-size: .95rem; }

/* Hover/focus sobres (brand) */
.share-btn:hover,
.share-btn:focus-visible{
  transform: translateY(-1px);
  border-color: var(--brand);
  color: var(--brand-700);
  background: #fff;
  outline: none;
}

/* H1 is present but visually hidden by default */
#sim-h1{
  visibility: hidden;          /* keeps layout space */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  pointer-events: none;
}

/* Show ONLY when step 1 is the visible step (not [hidden]) */
body:has(#step1:not([hidden])) #sim-h1{
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
  pointer-events: auto;
}

/* Accessibility: no motion for users who prefer reduced animation */
@media (prefers-reduced-motion: reduce){
  #sim-h1{ transition: none; transform: none; }
}


/* Couleurs discrètes par plateforme (au hover uniquement) */
.share-whatsapp:hover{ color:#25D366; border-color:#25D366; }
.share-x:hover{ color:#111; border-color:#111; }
.share-facebook:hover{ color:#1877F2; border-color:#1877F2; }
.share-linkedin:hover{ color:#0A66C2; border-color:#0A66C2; }
.share-telegram:hover{ color:#26A5E4; border-color:#26A5E4; }
.share-email:hover{ color:var(--muted); border-color:var(--muted); }

/* Compact mobile */
@media (max-width: 420px){
  .share-btn{ padding: .45rem .7rem; border-radius: .6rem; }
  .share-btn .label{ font-size: .9rem; }
}



/* Header shell */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.site-header__inner{
  max-width: 1120px; margin: 0 auto; padding: .6rem 1rem;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
}

/* Brand */
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand-mark{ display:block; width:28px; height:28px; }
.brand-title{
  font-weight: 800; color: #1f262e;
  font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
}

/* Socials */
.social-list{ list-style:none; margin:0; padding:0; display:flex; gap:.6rem; }
.social{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:50%;
  background: var(--surface);
  color: #1f262e;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  text-decoration:none;
  transition: transform .12s ease, border-color .12s ease, color .12s ease, background-color .12s ease;
}
.social i{ font-size:1rem; line-height:1; }
.social:hover{ transform: translateY(-1px); border-color: var(--brand); color: var(--brand-700); background: #fff; }

/* Subtle brand tints on hover (optional) */
.social--fb:hover{ color:#1877F2; border-color:#1877F2; }
.social--x:hover { color:#111;    border-color:#111; }
.social--yt:hover{ color:#FF0000; border-color:#FF0000; }
.social--ig:hover{ color:#E1306C; border-color:#E1306C; }
.social--tw:hover{ color:#9146FF; border-color:#9146FF; }
.social--tg:hover{ color:#26A5E4; border-color:#26A5E4; }
.social--in:hover{ color:#0A66C2; border-color:#0A66C2; }

/* Compact on mobile */
@media (max-width: 600px){
  .site-header__inner{ padding:.5rem .75rem; }
  .brand-title{ font-size: 1rem; font-weight: 700; }
  .social{ width:34px; height:34px; }
}