/* ══════════════════════════════════════════════════════════════════════════
   Espace client — le dossier du couple, tel que le studio le tient.

   Les écrans reprennent le vocabulaire du logiciel (cartes, badges, lignes de
   paramètres) pour qu'un devis vu ici ressemble au devis vu là-bas.
   ══════════════════════════════════════════════════════════════════════════ */

/* « svh » et non « vh » : sur téléphone, la barre d'adresse se rétracte au
   défilement et « 100vh » vaut déjà la hauteur sans elle — la page dépasse
   alors d'une centaine de pixels, puis sursaute quand la barre revient. */
.espace{
  padding-top:calc(var(--entete) + var(--sure-h));
  min-height:100svh;
  background:var(--creme);
}

/* ══════════════════════════════════════════════════════════ connexion ══ */

.acces{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:calc(100svh - var(--entete) - var(--sure-h));
}

.acces-visuel{
  position:relative;
  background:var(--vert3);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.acces-visuel img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.5;
}
.acces-visuel-txt{
  position:relative;z-index:1;
  padding:clamp(36px,5vw,64px);
  color:var(--blanc);
}
.acces-visuel h2{color:var(--blanc);max-width:15ch}
.acces-visuel p{
  color:rgba(255,255,255,.78);
  margin-top:20px;
  max-width:42ch;
  font-size:1.02rem;
  line-height:1.8;
}

.acces-liste{margin-top:28px;display:flex;flex-direction:column;gap:13px}
.acces-liste li{display:flex;gap:13px;align-items:flex-start;font-size:.93rem;line-height:1.6}
.acces-liste svg{width:17px;height:17px;color:var(--or);flex-shrink:0;margin-top:4px}

.acces-panneau{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(40px,6vw,72px) var(--marge);
  background:var(--blanc);
}
.acces-form{width:100%;max-width:420px}
.acces-form h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.acces-form .filet{margin-block:22px 30px}

/* Bascule connexion / inscription. */
.acces-onglets{
  display:flex;
  border-bottom:1px solid var(--bord);
  margin-bottom:32px;
}
.acces-onglets button{
  flex:1;
  padding:13px 8px;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gris);
  border-bottom:1px solid transparent;
  margin-bottom:-1px;
  transition:color .3s,border-color .3s;
}
.acces-onglets button:hover{color:var(--encre2)}
.acces-onglets button.actif{color:var(--vert);border-bottom-color:var(--or)}

.acces-pied{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--bord);
  font-size:.86rem;
  line-height:1.7;
  color:var(--gris);
}
.acces-pied button{
  color:var(--vert2);
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:inherit;
}

/* ═══════════════════════════════════════════════════════════ tableau ══ */

.dossier-entete{
  background:var(--vert);
  color:rgba(255,255,255,.8);
  padding-block:clamp(34px,4.4vw,54px);
}
.dossier-entete h1{color:var(--blanc);font-size:clamp(2rem,4vw,2.9rem)}
.dossier-entete .surtitre{color:var(--or)}

.dossier-tete{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.dossier-tete .pousse{margin-left:auto}

.compte-a-rebours{
  text-align:right;
  flex-shrink:0;
}
.compte-a-rebours b{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2.4rem,4.4vw,3.4rem);
  line-height:1;
  color:var(--or);
  font-weight:400;
}
.compte-a-rebours span{
  display:block;
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-top:8px;
}

/* ── avancement du dossier ── */

.avancement{
  display:flex;
  gap:5px;
  margin-top:34px;
}
.avancement-etape{
  flex:1;
  min-width:0;
}
.avancement-barre{
  height:3px;
  background:rgba(255,255,255,.17);
  transition:background .6s;
}
.avancement-etape.faite .avancement-barre{background:var(--or)}
/* L'etape en cours reste doree, comme le chemin deja parcouru : un liseré
   plus epais la distingue, sans surbrillance blanche. */
.avancement-etape.courante .avancement-barre{background:var(--or);box-shadow:0 0 0 1px var(--or)}
.avancement-etape span{
  display:block;
  margin-top:10px;
  font-size:.63rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.avancement-etape.courante span{color:var(--or)}
.avancement-etape.faite span{color:rgba(255,255,255,.66)}

/* ══════════════════════════════════════════════════════════ navigation ══ */

.espace-nav{
  background:var(--blanc);
  border-bottom:1px solid var(--bord);
  position:sticky;
  top:calc(66px + var(--sure-h));
  z-index:40;
}
.espace-nav-int{
  max-width:var(--largeur);
  margin-inline:auto;
  padding-left:calc(var(--marge) + var(--sure-g));
  padding-right:calc(var(--marge) + var(--sure-d));
  display:flex;
  gap:4px;
  /* Sur mobile, les onglets défilent plutôt que de se replier en pile. */
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.espace-nav-int::-webkit-scrollbar{display:none}

.espace-nav button{
  padding:19px 17px;
  font-size:.73rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris);
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .3s,border-color .3s;
}
.espace-nav button{-webkit-tap-highlight-color:transparent}
.espace-nav button:hover{color:var(--encre2)}
/* L'onglet ouvert reste dore, au toucher comme apres : aucun gris de
   surbrillance du navigateur ne vient le remplacer. */
.espace-nav button.actif,
.espace-nav button.actif:hover,
.espace-nav button.actif:focus{color:var(--or2);border-bottom-color:var(--or)}
.espace-nav button:focus{outline:none}
.espace-nav button:focus-visible{outline:1px solid var(--or);outline-offset:-4px}
.espace-nav .pastille{
  display:inline-block;
  margin-left:7px;
  min-width:17px;
  padding:1px 5px;
  background:var(--or);
  color:var(--blanc);
  border-radius:9px;
  font-size:.62rem;
  letter-spacing:0;
  vertical-align:1px;
}

/* ═══════════════════════════════════════════════════════════════ cartes ══ */

.espace-corps{padding-block:clamp(34px,4.4vw,56px)}

/* En-tête fixe (66 px) + onglets collants : sans cette marge, changer
   d'onglet ferait passer le titre de la carte dessous. */
#espaceCorps{scroll-margin-top:150px}

.carte{
  background:var(--blanc);
  border:1px solid var(--bord);
  margin-bottom:22px;
}
.carte-tete{
  padding:22px 26px;
  border-bottom:1px solid var(--bord);
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.carte-tete h2{font-size:1.35rem}
.carte-tete .pousse{margin-left:auto}
.carte-corps{padding:26px}
.carte-corps.serre{padding:0}

.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}

/* ── ligne d'information ── */

.ligne{
  display:flex;
  gap:18px;
  align-items:baseline;
  padding:14px 0;
  border-bottom:1px solid var(--bord);
}
.ligne:last-child{border-bottom:0;padding-bottom:0}
.ligne:first-child{padding-top:0}
.ligne dt{
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--or2);
  flex-shrink:0;
  width:38%;
}
.ligne dd{flex:1;font-size:.98rem;color:var(--encre)}

/* ── badges ── */

.badge{
  display:inline-block;
  padding:5px 12px;
  font-size:.66rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  border:1px solid;
  white-space:nowrap;
}
.badge.neutre{color:var(--gris);border-color:var(--bord-fonce);background:var(--creme)}
.badge.bleu{color:#3d6f92;border-color:#bcd4e5;background:#eef5fa}
.badge.vert{color:#1f6b4d;border-color:#b6ddcb;background:#eaf6f1}
.badge.jaune{color:#96691a;border-color:#e8d4a8;background:#fbf4e6}
.badge.rouge{color:#96271b;border-color:#e8bcb6;background:#fbeeec}
.badge.or{color:var(--blanc);border-color:var(--or);background:var(--or)}

/* ══════════════════════════════════════════════════════════════ tableau ══ */

.tbl{width:100%;border-collapse:collapse;font-size:.94rem}
.tbl th{
  text-align:left;
  padding:15px 26px;
  font-family:var(--sans);
  font-size:.64rem;
  font-weight:400;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--or2);
  border-bottom:1px solid var(--bord);
  white-space:nowrap;
}
.tbl td{
  padding:17px 26px;
  border-bottom:1px solid var(--bord);
  vertical-align:middle;
}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .principal{
  display:block;
  font-family:var(--serif);
  font-size:1.14rem;
  color:var(--vert);
}
.tbl .secondaire{display:block;font-size:.82rem;color:var(--gris);margin-top:3px}
.tbl tr.cliquable{cursor:pointer;transition:background .2s}
.tbl tr.cliquable:hover{background:var(--creme)}

/* Sous 720 px, le tableau se replie en fiches : quatre colonnes de chiffres
   sur un téléphone deviennent illisibles autrement. */
@media (max-width:720px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border-bottom:1px solid var(--bord);padding:18px 22px}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{padding:5px 0;border:0;display:flex;justify-content:space-between;gap:16px}
  .tbl td::before{
    content:attr(data-col);
    font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--or2);flex-shrink:0;
  }
  .tbl td:first-child{display:block;margin-bottom:8px}
  .tbl td:first-child::before{display:none}
  .tbl .num{text-align:right}
}

/* ═══════════════════════════════════════════════════════════ chiffres ══ */

.tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.tuile{
  background:var(--blanc);
  border:1px solid var(--bord);
  padding:24px;
}
.tuile b{
  display:block;
  font-family:var(--serif);
  font-size:1.95rem;
  line-height:1.1;
  color:var(--vert);
  font-weight:400;
}
.tuile span{
  display:block;
  margin-top:9px;
  font-size:.64rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--or2);
}
.tuile.alerte b{color:var(--danger)}
.tuile.reussi b{color:var(--succes)}

/* ══════════════════════════════════════════════════════════════ document ══ */

.doc{background:var(--blanc);border:1px solid var(--bord);padding:clamp(26px,4vw,52px)}
.doc-tete{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;margin-bottom:34px}
.doc-tete .pousse{margin-left:auto}
.doc h2{font-size:1.9rem}
.doc-numero{
  font-family:var(--mono);
  font-size:.86rem;
  color:var(--gris);
  margin-top:6px;
  display:block;
}

.doc-lignes{width:100%;border-collapse:collapse;margin-block:26px;font-size:.94rem}
.doc-lignes th{
  text-align:left;padding:11px 0;
  font-size:.64rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--or2);font-weight:400;
  border-bottom:1px solid var(--vert);
}
.doc-lignes td{padding:15px 0;border-bottom:1px solid var(--bord);vertical-align:top}
.doc-lignes .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-lignes .desc{display:block;font-size:.84rem;color:var(--gris);margin-top:4px}

.doc-totaux{margin-left:auto;max-width:340px;margin-top:22px}
.doc-totaux .ligne{padding:9px 0}
.doc-totaux .ligne dt{width:auto;flex:1;letter-spacing:.13em}
.doc-totaux .ligne dd{flex:0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-totaux .total{
  border-top:1px solid var(--vert);
  border-bottom:0;
  margin-top:8px;
  padding-top:16px;
}
.doc-totaux .total dt{
  font-family:var(--serif);
  font-size:1.2rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--vert);
}
.doc-totaux .total dd{
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--vert);
}

.doc-clauses{margin-top:38px;padding-top:30px;border-top:1px solid var(--bord)}
.doc-clauses h4{
  font-family:var(--sans);
  font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--or2);margin-bottom:8px;font-weight:400;
}
.doc-clauses article{margin-bottom:22px}
.doc-clauses p{font-size:.9rem;line-height:1.75}

/* Bandeau d'acceptation d'un devis : c'est l'action principale de la page. */
.doc-accepter{
  margin-top:34px;
  padding:26px;
  background:var(--or-clair);
  border-left:2px solid var(--or);
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap;
}
.doc-accepter p{font-size:.94rem;line-height:1.7;flex:1;min-width:260px}
.doc-accepter strong{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--vert);margin-bottom:6px}

/* ═══════════════════════════════════════════════════════════════ échanges ══ */

.fil{display:flex;flex-direction:column;gap:18px;max-height:520px;overflow-y:auto;padding-right:6px}

.bulle{max-width:78%;padding:16px 20px;font-size:.95rem;line-height:1.7}
.bulle-date{
  display:block;
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--gris);
  margin-top:9px;
}
.bulle.studio{
  background:var(--creme2);
  border-left:2px solid var(--or);
  align-self:flex-start;
}
.bulle.moi{
  background:var(--vert);
  color:rgba(255,255,255,.9);
  align-self:flex-end;
}
.bulle.moi .bulle-date{color:rgba(255,255,255,.5)}
.bulle strong{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:5px}
.bulle.studio strong{color:var(--vert)}
.bulle.moi strong{color:var(--blanc)}

/* ═══════════════════════════════════════════════════════════════ fichiers ══ */

.fichiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.fichier{
  border:1px solid var(--bord);
  padding:18px 20px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  transition:border-color .3s;
  width:100%;
  text-align:left;
}
.fichier:hover{border-color:var(--or)}
.fichier svg{width:21px;height:21px;color:var(--or);flex-shrink:0;margin-top:2px}
.fichier b{
  display:block;
  font-weight:400;
  font-size:.94rem;
  color:var(--encre);
  word-break:break-word;
}
.fichier span{display:block;font-size:.76rem;color:var(--gris);margin-top:4px}

.depot{
  border:1px dashed var(--bord-fonce);
  padding:34px;
  text-align:center;
  transition:border-color .3s,background .3s;
  cursor:pointer;
  width:100%;
}
.depot:hover,.depot.survol{border-color:var(--or);background:var(--or-clair)}
.depot svg{width:28px;height:28px;color:var(--or);margin-inline:auto}
.depot b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--vert);margin-top:14px}
.depot span{display:block;font-size:.84rem;color:var(--gris);margin-top:6px}

/* ══════════════════════════════════════════════════════════════ planning ══ */

.jalons{position:relative;padding-left:30px}
.jalons::before{
  content:"";
  position:absolute;left:5px;top:8px;bottom:8px;
  width:1px;background:var(--bord);
}
.jalon{position:relative;padding-bottom:28px}
.jalon:last-child{padding-bottom:0}
.jalon::before{
  content:"";
  position:absolute;left:-30px;top:6px;
  width:11px;height:11px;border-radius:50%;
  background:var(--blanc);
  border:2px solid var(--or);
}
.jalon.passe::before{background:var(--or)}
.jalon b{
  display:block;
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--vert);
}
.jalon time{
  display:block;
  font-size:.7rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--or2);
  margin-block:4px 7px;
}
.jalon p{font-size:.9rem;line-height:1.65}

/* ══════════════════════════════════════════════════════════════ divers ══ */

.vide{text-align:center;padding:52px 26px}
.vide svg{width:34px;height:34px;color:var(--bord-fonce);margin-inline:auto}
.vide b{display:block;font-family:var(--serif);font-size:1.35rem;color:var(--vert);margin-top:18px}
.vide p{font-size:.94rem;margin-top:8px;max-width:42ch;margin-inline:auto;line-height:1.7}

.chargement{text-align:center;padding:80px 26px;color:var(--gris)}
.chargement::after{
  content:"";
  display:block;
  width:26px;height:26px;
  margin:20px auto 0;
  border:2px solid var(--bord-fonce);
  border-top-color:var(--or);
  border-radius:50%;
  animation:tourner .8s linear infinite;
}
@keyframes tourner{to{transform:rotate(360deg)}}

.rangee{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.rangee .pousse{margin-left:auto}
.petit{font-size:.84rem}
.muted{color:var(--gris)}

/* ════════════════════════════════════════════════════════════ responsive ══ */

@media (max-width:1000px){
  .acces{grid-template-columns:1fr}

  /* Le formulaire passe devant l'argumentaire. Côte à côte, l'un n'attend pas
     l'autre ; empilés, l'ordre de la maquette obligeait à franchir un écran
     entier de texte de présentation avant d'atteindre le champ « e-mail » —
     alors que l'on vient ici pour ouvrir son dossier, pas pour lire ce qu'il
     contient. */
  .acces-panneau{order:-1}
  .acces-visuel{min-height:0;padding-block:8px}
  .acces-visuel-txt{padding-block:clamp(34px,7vw,56px)}

  .tuiles{grid-template-columns:1fr 1fr}
  .grille-3{grid-template-columns:1fr}
}

@media (max-width:760px){
  .espace-nav{top:var(--sure-h)}

  /* Sept onglets pour une largeur de téléphone : la rangée défile. Rien ne le
     disait — le dernier onglet visible tombait net au bord de l'écran, et
     l'on pouvait croire la liste finie. Ce dégradé montre qu'elle continue. */
  .espace-nav{position:sticky}
  .espace-nav::after{
    content:"";
    position:absolute;top:0;bottom:1px;right:0;
    width:38px;
    background:linear-gradient(to right,rgba(255,255,255,0),var(--blanc) 72%);
    pointer-events:none;
  }
  .espace-nav-int{-webkit-overflow-scrolling:touch}

  /* Le fil d'avancement perdait ses libellés : six barres sans un mot, on
     voit qu'il se passe quelque chose sans savoir quoi. On ne garde que
     l'étape en cours, posée sous la rangée où elle a la place de s'écrire. */
  .avancement{position:relative;padding-bottom:30px;gap:4px}
  .avancement-etape span{display:none}
  .avancement-etape.courante span{
    display:block;
    position:absolute;
    left:0;right:0;top:15px;
    margin-top:0;
    /* Seul libellé restant, il porte à lui seul le sens de la rangée : il ne
       peut pas rester à la taille qu'il avait quand ils étaient six. */
    font-size:.76rem;
    letter-spacing:.16em;
    color:var(--or);
  }

  .tuiles{gap:12px}
  .tuile{padding:20px}
  .tuile b{font-size:1.7rem}
  .carte-tete{padding:20px}
  .carte-corps{padding:20px}
  .tbl th,.tbl td{padding-inline:20px}
  /* Le bandeau d'acceptation posait son texte et son bouton côte à côte, le
     texte gardant 260 px pour lui. Sur un téléphone, les deux ne tiennent pas
     sur une ligne : ils s'empilent, et le plancher de 260 px doit tomber avec
     eux — sinon le paragraphe le réclame en largeur et déborde du cadre. */
  .doc-accepter{
    flex-direction:column;
    align-items:stretch;
    padding:22px;gap:18px;
  }
  .doc-accepter p{min-width:0}
  .doc-accepter .btn{width:100%}
  .fil{max-height:none}
  .grille-2{grid-template-columns:1fr}
  .avancement-etape span{display:none}
  .dossier-tete .pousse{margin-left:0;width:100%}
  .compte-a-rebours{text-align:left}
  .ligne{flex-direction:column;gap:5px}
  .ligne dt{width:auto}
  .bulle{max-width:92%}
  .doc-totaux{max-width:none}

  /* Un jalon indenté de trente pixels ampute la ligne de texte d'un dixième
     de la largeur utile. */
  .jalons{padding-left:24px}
  .jalon::before{left:-24px}

  /* Même plancher de lisibilité que sur les pages vitrine : ces libellés en
     petites capitales tombaient entre 10,2 et 11,2 px. */
  .compte-a-rebours span{font-size:.76rem;letter-spacing:.18em}
  .tuile span{font-size:.72rem;letter-spacing:.15em}
  .ligne dt,
  .doc-totaux .ligne dt{font-size:.74rem;letter-spacing:.14em}
  .jalon time{font-size:.76rem;letter-spacing:.13em}
  .badge{font-size:.72rem;letter-spacing:.11em;padding:5px 11px}
  .doc-lignes th{font-size:.72rem;letter-spacing:.15em}
  .bulle-date{font-size:.76rem}
  .doc-clauses h4{font-size:.76rem;letter-spacing:.15em}
  .espace-nav button{font-size:.78rem;letter-spacing:.12em}
}

/* ══════════════════════════════════════════════════ cibles au doigt ══ */

@media (pointer:coarse){
  .acces-onglets button{padding-block:16px}
  .acces-pied button{
    display:inline-flex;align-items:center;
    min-height:44px;
  }
  .espace-nav button{padding-block:21px}
  .fichier{padding-block:20px}
}

/* ═════════════════════════════════════════════════════ espace invité ══ */

.invite-intro{color:var(--encre2);line-height:1.75;margin-bottom:26px}
.champ-code{
  font-family:var(--sans);font-size:1.3rem !important;letter-spacing:.24em;
  text-transform:uppercase;text-align:center;
}
.invite-titre{font-size:clamp(2rem,3.8vw,2.8rem);line-height:1.15}
.invite-date{
  margin-top:10px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or2);
}
.invite-message{
  font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.7;
  color:var(--encre2);border-left:2px solid var(--or);padding:4px 0 4px 20px;margin:0 0 30px;
  white-space:pre-line;
}
.invite-liens{display:flex;flex-direction:column;gap:12px}
.invite-lien svg{width:18px;height:18px;flex-shrink:0}
.invite-note{margin-top:22px;font-size:.84rem;line-height:1.7;color:var(--gris)}
.acces-pied a{color:var(--vert2);text-decoration:underline;text-underline-offset:3px}

/* Encart de l'espace client : le code a partager avec les invites. */
.bandeau-invites{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.bandeau-invites > div{flex:1 1 260px}
.bandeau-invites b{font-family:var(--serif);font-size:1.25rem;font-weight:400;color:var(--vert)}
.bandeau-invites p{margin-top:6px}
.code-invites{
  font-family:var(--sans);font-size:1.15rem;letter-spacing:.22em;color:var(--vert);
  background:var(--creme);border:1px dashed var(--or);padding:10px 16px;
}