@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("fonts/barlow-semi-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("fonts/barlow-semi-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --graphite: #2a2b26;      /* noir du logo */
  --gris-texte: #565b57;
  --gris-trait: #8a908d;    /* contour des champs, contraste 3:1 sur blanc */
  --gris-clair: #d5d9d7;
  --acier: #e8ebea;         /* fond de page */
  --blanc: #ffffff;
  --flex: #e95c0c;          /* orange du logo : fluide, raccords, focus */
  --flex-fonce: #bf4a05;    /* orange lisible pour le texte et les boutons */
  --flex-pale: #fdf1e9;
  --erreur: #b3261e;
  --erreur-pale: #fbeeed;
  --titre: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --texte: "Barlow", Arial, sans-serif;
  --progression: 0;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--acier);
  color: var(--graphite);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.5;
}

a { color: var(--flex-fonce); text-underline-offset: 2px; }

:focus-visible { outline: 3px solid var(--flex); outline-offset: 2px; }
h2:focus { outline: none; }

/* Structure */
.page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.rail {
  background: var(--blanc);
  padding: 1rem 1.25rem 0.5rem;
  border-bottom: 1px solid var(--gris-clair);
}

.logo { display: block; width: 168px; height: auto; }

h1 {
  margin: 0.875rem 0 0;
  font-family: var(--titre);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
}

.intro {
  margin: 0.25rem 0 0;
  color: var(--gris-texte);
  font-size: 0.9375rem;
  max-width: 34em;
}

body:not([data-etape-courante="0"]) .intro { display: none; }

.feuille {
  background: var(--blanc);
  padding: 1.5rem 1.25rem 2rem;
  min-width: 0;
}

/* Le flexible */
.flexible { display: block; overflow: visible; }
.flexible-h { width: 100%; max-width: 380px; height: auto; margin: 0.5rem auto 0; }
.flexible-v { display: none; }

.gaine { fill: none; stroke: var(--graphite); stroke-width: 13; stroke-linecap: round; }
.fluide {
  fill: none;
  stroke: var(--flex);
  stroke-width: 6;
  stroke-linecap: butt;
  stroke-dasharray: 100 100;
  stroke-dashoffset: calc(100 - var(--progression));
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.raccord rect { fill: var(--graphite); stroke: var(--blanc); stroke-width: 2; transition: fill 0.25s linear 0.3s; }
.raccord path { fill: none; stroke: var(--blanc); stroke-width: 1.25; opacity: 0.55; }
.raccord.atteint rect { fill: var(--flex); }

.etapes { display: none; }

/* Texte des étapes */
.numero-etape {
  margin: 0;
  color: var(--flex-fonce);
  font-weight: 600;
  font-size: 0.9375rem;
}

h2 {
  margin: 0.125rem 0 1.25rem;
  font-family: var(--titre);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.chapo { margin: -0.5rem 0 1.25rem; color: var(--gris-texte); }

/* Champs */
.champ { margin: 0 0 1.125rem; padding: 0; border: 0; min-width: 0; }

label, .legende-champ {
  display: block;
  margin: 0 0 0.3125rem;
  padding: 0;
  font-weight: 500;
}

.legende-champ { float: none; width: 100%; }

.facultatif { color: var(--gris-texte); font-weight: 400; }

input[type="text"], input[type="tel"], input[type="email"], select {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--gris-trait);
  border-radius: 4px;
  background: var(--blanc);
  color: var(--graphite);
  font: inherit;
  font-size: 1.0625rem;
}

select { appearance: auto; }

input:hover, select:hover { border-color: var(--graphite); }

.champ-invalide input[type="text"],
.champ-invalide input[type="tel"],
.champ-invalide input[type="email"],
.champ-invalide select { border-color: var(--erreur); border-width: 2px; }

.aide-champ { margin: 0.25rem 0 0; color: var(--gris-texte); font-size: 0.9375rem; }

.msg-erreur, .msg-alerte, .msg-info { margin: 0.3125rem 0 0; font-size: 0.9375rem; }
.msg-erreur { color: var(--erreur); font-weight: 500; }
.msg-alerte { color: #7a3a00; padding-left: 0.625rem; border-left: 3px solid var(--flex); }
.msg-info { color: var(--gris-texte); }

.ligne { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }

/* Cases et options */
.case {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-height: 2.75rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0;
  font-weight: 400;
  cursor: pointer;
}
.case input, .option input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1875rem 0 0;
  accent-color: var(--flex-fonce);
}
.case-forte { font-weight: 600; margin-bottom: 0; }

.groupe { margin: 2rem 0 0; padding: 1.5rem 0 0; border: 0; border-top: 1px solid var(--gris-clair); min-width: 0; }
.groupe-premier { margin-top: 0; padding-top: 0; border-top: 0; }
.groupe > legend {
  float: left;
  width: 100%;
  margin: 0 0 0.875rem;
  padding: 0;
  font-family: var(--titre);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}
.groupe > legend + * { clear: both; }

.options { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }

.option {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  padding: 0.6875rem 0.75rem;
  border: 1.5px solid var(--gris-trait);
  border-radius: 4px;
  font-weight: 400;
  cursor: pointer;
}
.option:hover { border-color: var(--graphite); }
.option:has(input:checked) {
  border-color: var(--flex-fonce);
  box-shadow: inset 0 0 0 1px var(--flex-fonce);
  background: var(--flex-pale);
  font-weight: 500;
}
.champ-invalide .option { border-color: var(--erreur); }

/* Dépôt du RIB */
.depot {
  position: relative;
  display: block;
  margin: 0;
  padding: 1rem;
  border: 1.5px dashed var(--gris-trait);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}
.depot:hover, .depot.survol { border-color: var(--flex-fonce); background: var(--flex-pale); }
.depot:focus-within { outline: 3px solid var(--flex); outline-offset: 2px; }
.depot input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.depot-action { display: block; color: var(--flex-fonce); font-weight: 600; }
.depot-aide { display: block; color: var(--gris-texte); font-size: 0.9375rem; font-weight: 400; }
.champ-invalide .depot { border-color: var(--erreur); }

.fichier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1.5px solid var(--flex-fonce);
  border-radius: 4px;
  background: var(--flex-pale);
}
.fichier-nom { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }

#case-rib-mail { margin-top: 0.5rem; margin-bottom: 0; }

.lien {
  flex: none;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--flex-fonce);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Récapitulatif */
.recap-section { padding: 1rem 0; border-top: 1px solid var(--gris-clair); }
.recap-section:first-child { border-top: 2px solid var(--graphite); }
.recap-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.recap-entete h3 { margin: 0; font-family: var(--titre); font-size: 1.1875rem; font-weight: 600; }
.recap dl { margin: 0.25rem 0 0; }
.recap dt { color: var(--gris-texte); font-size: 0.9375rem; }
.recap dd { margin: 0 0 0.5rem; overflow-wrap: anywhere; font-weight: 500; }

.rappel {
  margin: 0.5rem 0 0;
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--graphite);
  background: var(--acier);
  font-size: 0.9375rem;
}

/* Signature */
.zone-signature {
  position: relative;
  height: 180px;
  border: 1.5px solid var(--gris-trait);
  border-radius: 4px;
  background: var(--blanc);
}
.zone-signature canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.trait-signature {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 2.25rem;
  border-bottom: 1px solid var(--gris-clair);
}
.champ-invalide .zone-signature { border-color: var(--erreur); border-width: 2px; }
.sous-signature { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sous-signature .aide-champ { margin: 0; }

/* Boutons */
.navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 2rem;
}

.bouton-principal {
  flex: 1 1 auto;
  min-height: 3.25rem;
  padding: 0.5rem 1.75rem;
  border: 0;
  border-radius: 4px;
  background: var(--flex-fonce);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}
.bouton-principal:hover { background: #a63f03; }
.bouton-principal:disabled { background: var(--gris-texte); cursor: progress; }

.bouton-retour {
  flex: none;
  min-height: 3.25rem;
  padding: 0.5rem 1.25rem;
  border: 1.5px solid var(--graphite);
  border-radius: 4px;
  background: var(--blanc);
  color: var(--graphite);
  font-family: var(--titre);
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
}
.bouton-retour:hover { background: var(--acier); }

/* Messages généraux */
.bandeau-erreur {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--erreur);
  background: var(--erreur-pale);
  color: var(--erreur);
  font-weight: 500;
}
#erreur-envoi { margin: 1.5rem 0 0; }

.merci h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.merci p { max-width: 34em; }

.pied {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gris-clair);
  color: var(--gris-texte);
  font-size: 0.9375rem;
}
.pied p { margin: 0 0 0.5rem; }
.pied summary { min-height: 2.75rem; padding: 0.5rem 0; cursor: pointer; }

/* Piège à robots, invisible pour les personnes */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tablette et plus */
@media (min-width: 560px) {
  .ligne { grid-template-columns: 1fr 1fr; }
  .ligne-siret { grid-template-columns: 2fr 1fr; }
  .ligne-cp { grid-template-columns: 1fr 2fr; }
  .options { grid-template-columns: 1fr 1fr; }
  .bouton-principal { flex: 0 0 auto; }
  .recap dl { display: grid; grid-template-columns: 15em 1fr; gap: 0.25rem 1rem; }
  .recap dd { margin: 0; }
  .navigation .bouton-retour { margin-right: auto; }
}

/* Ordinateur : le flexible descend dans une colonne fixe */
@media (min-width: 960px) {
  body { font-size: 1.0625rem; }

  .page {
    grid-template-columns: minmax(320px, 1fr) minmax(0, 760px) minmax(0, 0.6fr);
    grid-template-rows: auto;
  }

  .rail {
    justify-self: end;
    position: sticky;
    top: 0;
    align-self: start;
    width: 100%;
    max-width: 420px;
    min-height: 100vh;
    padding: 2.5rem 2.5rem 2rem;
    border-bottom: 0;
    background: transparent;
  }

  .logo { width: 240px; }
  h1 { margin-top: 2rem; font-size: 2rem; }
  .intro { margin-top: 0.5rem; font-size: 1rem; }
  body:not([data-etape-courante="0"]) .intro { display: block; }

  .flexible-h { display: none; }

  .etapes {
    position: relative;
    display: block;
    margin: 1.25rem 0 0 -0.25rem;
    height: 384px;
  }
  .flexible-v {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 384px;
  }
  .raccord rect { stroke: var(--acier); }
  .etapes ol { list-style: none; margin: 0; padding: 0; }
  .etapes li { display: flex; align-items: center; height: 96px; padding-left: 68px; }
  .etapes button {
    min-height: 2.75rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 3px;
    background: none;
    color: var(--gris-texte);
    font: inherit;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
  }
  .etapes button:disabled { cursor: default; }
  .etapes button:not(:disabled) { color: var(--graphite); cursor: pointer; }
  .etapes button:not(:disabled):hover { text-decoration: underline; text-underline-offset: 3px; }
  .etapes button[aria-current="step"] { color: var(--graphite); font-weight: 600; }

  .feuille { padding: 3rem 3.5rem 2.5rem; min-height: 100vh; }
  .numero-etape { display: block; }
  h2 { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fluide, .raccord rect { transition: none; }
}

@media print {
  .rail, .navigation, .pied { display: none; }
}