/* ==========================================================================
   État des lieux d'équipe Greatly — socle commun
   Mobile d'abord : les règles de base valent pour 390px, les media queries
   min-width montent vers l'ordinateur (référence 1280px).
   Valeurs reprises des maquettes maquette/*.dc.html.
   ========================================================================== */

:root {
  /* Charte */
  --sauge: #6B7D5C;
  --sauge-fonce: #5A6B4D;
  --sauge-clair: #8A9B7A;
  --creme: #F7F4EF;
  --encre: #1A1A1A;
  --taupe: #6B6460;
  --foret: #2D3626;

  /* Déclinaisons utilisées par les maquettes */
  --blanc: #FFFFFF;
  --creme-foret: #E6E1D8;      /* texte sur fond forêt */
  --vert-pale: #EEF1EA;        /* fond des cartes mises en avant */
  --sable-clair: #F6EEDF;      /* fond de la question « J.aimerais… » */
  --texte-doux: #3F3B38;
  --texte-doux-2: #4F4A46;
  --bordure: rgba(138, 155, 122, .18);
  --bordure-forte: rgba(138, 155, 122, .4);
  --bordure-moyenne: rgba(138, 155, 122, .35);
  --voile: rgba(138, 155, 122, .15);
  --voile-leger: rgba(138, 155, 122, .1);
  --ombre: 0 2px 8px rgba(0, 0, 0, .04);
  --ombre-flottante: 0 4px 20px rgba(0, 0, 0, .08);
  --focus: 3px solid rgba(107, 125, 92, .35);

  /* Les 4 niveaux. Chaque couleur est toujours accompagnée de son nom écrit. */
  --enracine: #3F4F35;
  --enracine-texte: #FFFFFF;
  --croissance: #8FA878;
  --croissance-texte: #1A1A1A;
  --germe: #E3CF9E;
  --germe-texte: #1A1A1A;
  --semer: #A9743A;
  --semer-texte: #1A1A1A;

  --rayon-carte: 16px;
  --rayon-bloc: 14px;
  --rayon-champ: 12px;
  --hauteur-bouton: 52px;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

/* L'attribut hidden doit gagner contre un `display` posé par une classe.
   Sans cela, une carte en `display: flex` reste visible malgré `hidden`. */
[hidden] { display: none !important; }

/* Empilement vertical, pour éviter les styles en ligne sur les blocs masquables. */
.pile { display: flex; flex-direction: column; gap: 32px; }

body {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  color: var(--encre);
  background: var(--creme);
  overflow-x: hidden;           /* garde-fou : jamais de défilement horizontal */
}

img { max-width: 100%; display: block; }

a { color: var(--sauge-fonce); }
a:hover { color: var(--foret); }

.serif {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
}

:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* Réservé aux lecteurs d'écran */
.lecteur-ecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- bandeau */

/* Fixé en haut de toutes les pages : il dit qui propose l'état des lieux, et
   doit rester lisible même en bas d'un long questionnaire.
   --hauteur-demo vaut 0 sauf en mode démo explicite, où un bandeau le surmonte. */
:root { --hauteur-bandeau: 40px; }

.bandeau {
  position: fixed;
  top: var(--hauteur-demo, 0px);
  left: 0;
  right: 0;
  z-index: 10;
  min-height: var(--hauteur-bandeau);
  background: var(--foret);
  color: var(--creme-foret);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}

/* La place que le bandeau fixe ne prend plus dans le flux. */
body { padding-top: calc(var(--hauteur-demo, 0px) + var(--hauteur-bandeau)); }

.bandeau__texte {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le texte long est réservé à l'ordinateur ; le mobile lit la version courte. */
.bandeau__long { display: none; }

.bandeau a {
  color: var(--creme);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .bandeau { padding: 0 24px; }
  .bandeau__long { display: inline; }
  .bandeau__court { display: none; }
}

/* ---------------------------------------------------------------- en-tête */

.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

/* Le logo, repris de greatly.club : DM Sans en capitales, interlettrage large,
   suivi d'un rond sauge. Les tailles du site sont reprises et agrandies de 30 %
   (22px devient 29px, le rond 11px devient 14px). */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.logo__texte {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 29px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--encre);
  /* L'interlettrage ajoute une espace après la dernière lettre : on la reprend
     pour que le rond reste à la bonne distance. */
  margin-right: -.3em;
}

.logo__point {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sauge-clair);
  flex-shrink: 0;
}

/* Sur fond forêt, en pied de page. */
.logo--clair .logo__texte { color: var(--creme); }

.entete__nav {
  display: flex;
  gap: 16px;
  font-size: 14px;
}

@media (min-width: 900px) {
  .entete { padding: 28px 80px; }
  .entete__nav { gap: 32px; font-size: 15px; }
}

/* ------------------------------------------------------- fil des étapes */

.etapes {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.etape {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--taupe);
}

.etape__point {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--voile);
  flex-shrink: 0;
}

.etape--active { color: var(--foret); font-weight: 500; }
.etape--active .etape__point { background: var(--sauge-fonce); }

/* Sur mobile, seule l'étape en cours est nommée : les trois ne tiennent pas. */
.etape:not(.etape--active) .etape__nom { display: none; }

@media (min-width: 900px) {
  .etapes { gap: 28px; }
  .etape { font-size: 14px; }
  .etape:not(.etape--active) .etape__nom { display: inline; }
}

/* -------------------------------------------------------------- éléments */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hauteur-bouton);
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--sauge-fonce);
  color: var(--blanc);
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover { background: var(--foret); color: var(--blanc); }

.btn:disabled,
.btn[aria-disabled='true'] {
  background: var(--sauge-clair);
  cursor: not-allowed;
  opacity: .65;
}

/* Une action de même famille, mais secondaire : le contour sans le plein.
   Les trois boutons côte à côte seraient trop lourds tous en vert. */
.btn--doux {
  background: transparent;
  color: var(--foret);
  border: 1px solid var(--foret);
}

.btn--doux:hover { background: var(--foret); color: var(--blanc); }

.btn--clair {
  background: var(--creme);
  color: var(--foret);
}
.btn--clair:hover { background: var(--blanc); color: var(--foret); }

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre);
}

.carte--avant {
  background: var(--vert-pale);
  border-color: rgba(107, 125, 92, .25);
}

.carte--creme { background: var(--creme); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--voile);
  color: var(--foret);
  font-size: 13px;
  font-weight: 500;
}

/* Pastille de niveau : la couleur porte toujours le nom du niveau. */
.pastille {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.pastille--enracine { background: var(--enracine); color: var(--enracine-texte); }
.pastille--croissance { background: var(--croissance); color: var(--croissance-texte); }
.pastille--germe { background: var(--germe); color: var(--germe-texte); }
.pastille--semer { background: var(--semer); color: var(--semer-texte); }

/* Un nom de niveau ne doit jamais se casser en deux. */
.pastille { white-space: nowrap; }

.temoin {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------- structure */

.centre {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

.centre--large { max-width: 1080px; }
.centre--etroit { max-width: 760px; }

@media (min-width: 900px) {
  .centre { padding: 0 24px; }
}

.titre-page {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
}

.intro {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--taupe);
}

@media (min-width: 900px) {
  .titre-page { font-size: 44px; }
}

/* ------------------------------------------------------------ pied de page */

.pied {
  margin-top: 48px;
  background: var(--foret);
  color: var(--creme);
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.pied .logo__texte { font-size: 22px; }
.pied .logo__point { width: 11px; height: 11px; }

.pied p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 640px;
  color: var(--creme-foret);
}

.pied a { color: var(--creme); }

@media (min-width: 900px) {
  .pied {
    padding: 40px 80px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }
}

/* Bandeau de mode démo, jamais affiché en production.
   En mode explicite il coiffe le bandeau Greatly, lui aussi fixé. */
.demo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
  margin: 0;
  background: var(--germe);
  color: var(--encre);
  font-size: 13px;
  text-align: center;
  padding: 8px 16px;
}

/* En local sans API : une mention discrète en bas, qui ne vole pas la place. */
.demo--pied {
  position: static;
  background: none;
  color: var(--taupe);
  font-size: 12px;
  padding: 12px 16px 24px;
}