/* ------------------------------------------------------------------
   MADEGEECO — portes d'entrée des espaces : connexion et inscription.

   Écran scindé : à gauche la photographie et ce que le propriétaire y
   gagne, à droite la carte du formulaire. La structure est celle
   demandée ; la charte reste celle du site — Cormorant et Manrope, la
   palette du kit — pour ne pas faire cohabiter deux typographies.
   ------------------------------------------------------------------ */

.mgc-porte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--app-bg, #f5f6f4);
}

/* ---- Volet gauche : la photographie et l'argument ----------------- */

.mgc-porte-visuel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  padding: clamp(40px, 5vw, 74px);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #102522;
}

.mgc-porte-visuel img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sans ce voile, un titre clair sur un ciel clair disparaît. Il est
   volontairement dense et régulier plutôt que dégressif : le mot en
   accent tombe vers le tiers supérieur, là où la photographie est la
   plus lumineuse, et s'y effaçait. */
.mgc-porte-visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(6, 22, 21, 0.8) 0%,
    rgba(6, 22, 21, 0.68) 42%,
    rgba(4, 16, 15, 0.86) 100%
  );
}

.mgc-porte-retour {
  position: absolute;
  top: clamp(24px, 3vw, 40px);
  left: clamp(40px, 5vw, 74px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--app-sans, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.mgc-porte-retour:hover {
  color: #fff;
}

.mgc-porte-surtitre {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--app-accent, #58b8b2);
}

.mgc-porte-surtitre::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}

.mgc-porte-visuel h1 {
  margin: 0;
  max-width: 17ch;
  font-family: var(--app-serif, Georgia, serif);
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 500;
  line-height: 1.04;
  color: #fff;
}

/* Le mot en accent passe à la ligne d'un bloc : « Confiez votre bien à »
   puis « MADEGEECO », plutôt qu'une coupure au milieu du nom. */
.mgc-porte-visuel h1 em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  color: #7fd3cd;
}

.mgc-porte-visuel > p {
  margin: -14px 0 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

/* ---- Les arguments ------------------------------------------------ */

.mgc-porte-atouts {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mgc-porte-atouts li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.mgc-porte-atouts i {
  font-size: 20px;
  color: var(--app-accent, #58b8b2);
}

.mgc-porte-atouts strong {
  display: block;
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 600;
}

.mgc-porte-atouts span {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* ---- Volet droit : la carte du formulaire ------------------------- */

.mgc-porte-panneau {
  display: grid;
  place-items: center;
  padding: clamp(32px, 4vw, 64px) clamp(24px, 4vw, 64px);
}

.mgc-porte-carte {
  width: min(100%, 440px);
  padding: clamp(30px, 3.4vw, 46px);
  border: 1px solid var(--app-line, #e4e7e4);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20, 35, 30, 0.06);
}

.mgc-porte-carte h2 {
  margin: 14px 0 6px;
  font-family: var(--app-serif, Georgia, serif);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.05;
}

.mgc-porte-carte > p {
  margin: 0 0 26px;
  color: var(--app-muted, #6b716c);
  font-size: 14px;
  line-height: 1.6;
}

.mgc-porte-carte .app-field {
  margin-bottom: 16px;
}

.mgc-porte-carte .app-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.mgc-porte-carte .app-button {
  width: 100%;
  margin-top: 10px;
  justify-content: center;
  padding-block: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: 12px;
}

/* « Se souvenir de moi » et « Mot de passe oublié » sur une ligne. */
.mgc-porte-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 6px;
  font-size: 13px;
}

.mgc-porte-options label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.mgc-porte-options a {
  color: var(--app-accent-deep, #2f8f8a);
}

.mgc-porte-pied {
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--app-line, #e4e7e4);
  font-size: 13px;
  color: var(--app-muted, #6b716c);
  text-align: center;
}

.mgc-porte-pied a {
  font-weight: 600;
  color: var(--app-accent-deep, #2f8f8a);
}

.mgc-porte-message {
  margin: 0 0 20px;
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.mgc-porte-message.erreur {
  background: #fdecec;
  border: 1px solid #f0c4c4;
  color: #9c3535;
}

.mgc-porte-message.note {
  background: #fdf3e3;
  border: 1px solid #efd8ae;
  color: #7a5a12;
}

/* Le piège à robots : hors écran, jamais réduit à 1 px avec overflow
   caché — ce montage-là provoque un débordement horizontal. */
.mgc-piege {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
}

.mgc-aide {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--app-muted, #6b716c);
}

.consent-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 4px;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.consent-chip input {
  margin-top: 3px;
  flex: 0 0 auto;
}

/* ---- Sous 900 px : la photographie passe en bandeau --------------- */

@media (max-width: 900px) {
  .mgc-porte {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .mgc-porte-visuel {
    gap: 24px;
    padding: 84px clamp(24px, 6vw, 44px) clamp(34px, 6vw, 50px);
  }
  /* Les quatre arguments occuperaient tout l'écran avant le formulaire :
     on n'en garde que la promesse. */
  .mgc-porte-atouts {
    display: none;
  }
  .mgc-porte-panneau {
    padding: clamp(26px, 6vw, 44px) clamp(20px, 6vw, 44px) 54px;
  }
  .mgc-porte-carte {
    border: 0;
    box-shadow: none;
    padding: 0;
    background: none;
  }
}

/* ---- Sortie de l'espace ------------------------------------------- */

/* La maquette ne prévoyait pas de déconnexion. L'entrée est ajoutée aux
   liens secondaires ; un filet la sépare des deux autres pour qu'on ne
   clique pas « Se déconnecter » en visant « Besoin d'aide ». */
.sidebar-footer .dashboard-nav .mgc-sortie {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--app-line, #e4e7e4);
}

.sidebar-footer .dashboard-nav .mgc-sortie:hover {
  color: #9c3535;
}

/* Le chevron du profil promettait un menu qui n'existe pas : il a été
   retiré, la grille repasse donc à deux colonnes. */
.sidebar-profile {
  grid-template-columns: 34px 1fr;
}

/* ---- Bandeau d'appel sur la page Propriétaire --------------------- */

.mgc-appel-espace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ---- Réglages du compte ------------------------------------------- */

/* .notice-strip est vert : pour une erreur, il faut le contraire d'un
   accusé de réception. */
.notice-strip.mgc-alerte {
  border-color: #f0c4c4;
  background: #fdecec;
  color: #9c3535;
}

/* Le panneau est un formulaire, pas un tableau : sur grand écran les
   champs s'étireraient sur toute la largeur et deviendraient pénibles à
   parcourir. */
[data-panel="compte"] .dashboard-card {
  max-width: 620px;
}

[data-panel="compte"] .app-button {
  margin-top: 18px;
}

[data-panel="compte"] .card-header .app-button {
  margin-top: 0;
}

/* ---- La barre latérale doit pouvoir défiler ----------------------- */

/* .dashboard-sidebar est en position fixe, du haut au bas de l'écran,
   sans débordement déclaré : la barre latérale ne défile pas, et tout
   ce qui dépasse est simplement invisible — y compris le pied, donc la
   déconnexion. La maquette tenait de justesse ; une entrée de plus, un
   écran de portable un peu court, et le bas disparaît. C'est la
   navigation qui prend le défilement, pour que la marque et le pied
   restent en place. */
.dashboard-sidebar > .dashboard-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Le pied reste collé en bas, même quand la navigation est courte. */
.dashboard-sidebar .sidebar-footer {
  flex: 0 0 auto;
}

/* Filet de sécurité : sur un écran vraiment bas, marque et pied seuls
   peuvent déjà déborder. */
.dashboard-sidebar {
  overflow-y: auto;
}

/* .mgc-aide est dimensionnée pour les portes d'entrée, où le texte est
   plus grand. Dans les espaces, elle passait devant les libellés
   qu'elle est censée commenter. */
[data-panel="compte"] .mgc-aide,
[data-panel="compte"] p.mgc-aide {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--app-muted);
}

/* ---- Fiche d'un bien ---------------------------------------------- */

/* Les filtres du site sont des cases : alignées en ligne, elles se
   lisent d'un coup d'œil. */
.mgc-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 4px;
}

.mgc-case {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  cursor: pointer;
}

/* .app-field input met tout à 100 % : une case à cocher n'a pas à
   s'étirer sur la largeur du formulaire. */
.mgc-case input[type="checkbox"] {
  width: 15px;
  min-height: 0;
  height: 15px;
  padding: 0;
  margin: 0;
  flex: 0 0 15px;
}

/* Le champ fichier garde la hauteur des autres, sans le cadre qui
   ferait croire à une zone de saisie. */
[data-panel="bien"] input[type="file"] {
  padding: 9px 11px;
  background: var(--app-surface-soft, #f5f6f4);
  font-size: 11px;
}

.mgc-apercu {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
}

/* Retirer un bien n'est pas une action ordinaire : le bouton le dit. */
.app-button.mgc-danger {
  border-color: #f0c4c4;
  color: #9c3535;
}

.app-button.mgc-danger:hover {
  border-color: #d99b9b;
  background: #fdecec;
}

[data-panel="bien"] .mgc-aide {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--app-muted, #6b716c);
}

/* ---- Le planning : même calendrier que le site public --------------
   Le fichier complements.css n'est pas chargé dans les espaces : les
   règles sont reprises ici, ajustées à la densité du back-office. */

.mgc-dispo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
  margin-top: 6px;
}

.mgc-dispo-titre {
  margin: 0 0 10px;
  font-family: var(--app-serif, Georgia, serif);
  font-size: 15px;
  font-weight: 500;
  text-transform: capitalize;
}

.mgc-dispo-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.mgc-dispo-jour {
  padding-bottom: 6px;
  color: var(--app-muted, #6b716c);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.mgc-dispo-case,
.mgc-dispo-vide {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.mgc-dispo-case {
  background: rgba(47, 143, 138, 0.09);
  color: var(--app-ink, #1d2320);
}

.mgc-dispo-case.est-pris {
  background: transparent;
  color: rgba(29, 35, 32, 0.3);
  text-decoration: line-through;
}

.mgc-dispo-case.est-passe {
  background: transparent;
  color: rgba(29, 35, 32, 0.16);
}

.mgc-dispo-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: 16px 0 0;
  color: var(--app-muted, #6b716c);
  font-size: 11px;
}

.mgc-dispo-legende span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mgc-pastille {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.mgc-pastille.libre { background: rgba(47, 143, 138, 0.24); }
.mgc-pastille.pris { background: transparent; border: 1px solid rgba(29, 35, 32, 0.22); }

.mgc-dispo-suivante { margin-left: auto; color: var(--app-accent-deep, #2f8f8a); font-weight: 600; }

/* ---- Poser et retirer une indisponibilité -------------------------- */

.mgc-blocages { margin-top: 18px; }

/* Le formulaire tient sur une ligne : trois champs et un bouton. */
.mgc-blocage-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--app-line, #e4e7e4);
  border-radius: 12px;
  background: var(--app-surface-soft, #f5f6f4);
}

.mgc-blocage-form .app-field { margin: 0; }
.mgc-blocage-form .app-button { white-space: nowrap; }

@media (max-width: 640px) {
  .mgc-blocage-form { grid-template-columns: 1fr; }
}

.mgc-blocage-liste {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.mgc-blocage-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid var(--app-line, #e4e7e4);
  border-radius: 9px;
}

.mgc-blocage-liste strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.mgc-blocage-liste em {
  display: block;
  margin-top: 2px;
  color: var(--app-muted, #6b716c);
  font-size: 11px;
  font-style: normal;
}

/* Retirer est un geste discret : une croix, pas un bouton rouge —
   mais elle se signale au survol. */
.mgc-blocage-liste button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--app-muted, #6b716c);
  cursor: pointer;
}

.mgc-blocage-liste button:hover { background: #fdecec; color: #9c3535; }

.mgc-blocage-alerte {
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid #f0c4c4;
  border-radius: 9px;
  background: #fdecec;
  color: #9c3535;
  font-size: 12px;
  line-height: 1.5;
}

.mgc-blocage-bien {
  margin: 22px 0 0;
  font-weight: 600;
  font-size: 12px;
}

/* ==================================================================
   Dossier d'une maison — mgc-510
   ================================================================== */

/* L'état du dossier ouvre l'écran : il porte la seule réponse à
   « pourquoi ma maison n'est pas encore en ligne ». */
.mgc-dossier-etat { margin-bottom: 14px; }

.mgc-jauge {
  height: 8px;
  margin: 4px 0 8px;
  border-radius: 999px;
  background: #e7eae7;
  overflow: hidden;
}

.mgc-jauge-barre {
  height: 100%;
  border-radius: 999px;
  background: var(--app-accent-deep, #2f8f8a);
  transition: width .3s ease;
}

/* Les manques se lisent comme une liste de courses, pas comme une
   liste d'erreurs : on n'a rien fait de mal, il reste à faire. */
.mgc-manquants {
  margin: 6px 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}

.mgc-manquants li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--app-muted, #6b716c);
}

.mgc-manquants li i {
  flex: none;
  font-size: 14px;
  color: var(--app-accent-deep, #2f8f8a);
}

/* Sur la fiche à valider, la même liste sert d'explication au bouton
   « Mettre en ligne » absent. */
.property-card .mgc-manquants { margin-top: 4px; }

/* Le rappel des fiches retouchées après validation : chaque ligne porte
   deux actions, elles ne doivent pas se coller au texte. */
.activity-item form { margin: 0; }
.activity-item .app-button { flex: none; }

/* La grille de tarifs d'un service tient sous son prix. */
.data-table td small { display:block; margin-top:2px; font-size:11.5px; opacity:.7; }

/* Devis : la saisie ligne à ligne dans la fiche d'une demande. */
.mgc-devis-saisie input {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}

.mgc-devis-saisie td { padding: 6px 5px; }

/* Les colonnes chiffrées n'ont pas besoin de la largeur d'un libellé. */
.mgc-devis-saisie td:nth-child(3) input,
.mgc-devis-saisie td:nth-child(5) input { max-width: 110px; }
.mgc-devis-saisie td:nth-child(4) input { max-width: 130px; }

.mgc-devis-agence { margin-top: 6px; }

/* ------------------------------------------------------------------
   Les douze mois du calendrier, dont neuf replies.

   La fiche montre trois mois et garde les neuf autres dans la page.
   Le repli est pose PAR LE SCRIPT, pas ici en dur : sans JavaScript,
   aucune classe n'est ajoutee, le bouton reste `hidden`, et les douze
   mois s'affichent a la suite. On ne cache jamais ce qu'on ne saurait
   rouvrir.

   La grille des mois est deja en auto-fit minmax(240px, 1fr) : douze
   mois se rangent d'eux-memes en trois rangees de quatre sur un grand
   ecran, et en colonne sur un telephone. Rien a redire ici.
   ------------------------------------------------------------------ */
.mgc-dispo-suite.est-repliee {
  display: none;
}

.mgc-dispo-suite {
  margin-top: clamp(24px, 3vw, 44px);
}

/* Le bouton reprend le trait discret des liens de la maquette plutot
   que l'aplat d'un bouton d'appel : il ouvre une liste, il ne vend
   rien. */
.mgc-dispo-plus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 2.5vw, 30px);
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 200ms var(--ease-ui), border-color 200ms var(--ease-ui);
}

.mgc-dispo-plus:hover {
  background: var(--paper);
  border-color: var(--turquoise-deep);
  color: var(--turquoise-deep);
}

.mgc-dispo-plus::after {
  content: "\2193";
  font-size: 14px;
}

/* ------------------------------------------------------------------
   L'echelle du taux d'occupation : mois, trimestre, annee.

   Des liens deguises en onglets. Ils changent l'adresse (?occ=annee),
   donc ils se copient, s'ouvrent dans un onglet et se mettent en
   favori — ce qu'un bouton piloté par script ne sait pas faire.
   ------------------------------------------------------------------ */
.mgc-periodes {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 14px;
  padding: 3px;
  border: 1px solid var(--app-line, #e2e6e2);
  border-radius: 999px;
  background: var(--app-surface, #fff);
}

.mgc-periode {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--app-muted, #6b746e);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease;
}

.mgc-periode:hover {
  color: var(--app-ink, #1d2320);
  background: var(--app-bg, #f4f6f4);
}

/* L'echelle active se lit sans avoir a comparer les trois : fond plein,
   texte inverse. Un simple gras ne suffit pas sur trois mots courts. */
.mgc-periode.est-active {
  background: var(--app-accent, #2f6f5e);
  color: #fff;
}

/* Le nom du bien au-dessus de ses douze mois, quand il y en a plusieurs. */
.mgc-dispo-bien {
  margin: 22px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--app-ink, #1d2320);
}

.mgc-dispo-bien:first-child {
  margin-top: 0;
}

/* ------------------------------------------------------------------
   Fiche bien (CRM) : remises longue durée, un palier par ligne.
   Retour du gérant (24/09/2026) : la règle générale .app-field select
   { width: 100% } (dashboard.css) étirait le menu sur toute la ligne et
   écrasait la case de la valeur à quelques pixels, si bien que la valeur
   enregistrée — pourtant présente — n'était plus visible. Le menu prend
   ici la place restante, la valeur une largeur fixe lisible, suivie de
   son unité, qui suit le choix du menu (% ou €).
   ------------------------------------------------------------------ */
.app-field .mgc-palier-saisie {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.app-field .mgc-palier-saisie select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.mgc-palier-valeur {
  position: relative;
  flex: 0 0 104px;
  display: block;
}

.app-field .mgc-palier-valeur input {
  width: 100%;
  padding-right: 26px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mgc-palier-unite {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--app-muted);
  font-size: 11px;
  pointer-events: none;
}

.mgc-palier-unite::after { content: "%"; }

.mgc-palier-saisie:has(option[value="prix"]:checked) .mgc-palier-unite::after { content: "€"; }

/* Très petit écran : le menu au-dessus, la valeur dessous, pleine largeur. */
@media (max-width: 420px) {
  .app-field .mgc-palier-saisie { flex-wrap: wrap; }
  .app-field .mgc-palier-saisie select,
  .mgc-palier-valeur { flex: 1 1 100%; }
}