/* Pages de compte et espace personnel.
   Le langage visuel vient du bloc contact de l'accueil : fond vert sapin,
   carte creme posee dessus, accents pollen. Ces pages doivent sembler avoir
   toujours ete la. */

/* La hauteur etait calculee en retirant 400 px fixes : une fois le
   formulaire remplace par le message de confirmation, la carte retrecit et
   la section verte ne remplissait plus l'ecran. On centre le contenu dans
   une section qui occupe toujours la fenetre, moins l'en-tete. */
.compte-page{position:relative;overflow:hidden;padding:clamp(48px,7vw,110px) 0;
  background:var(--evergreen);color:var(--eggshell);
  min-height:calc(100dvh - 84px);display:flex;align-items:center}
/* Le champ de lumiere (hero-light) vit en z-index 3 : le contenu passe devant.
   Le selecteur de hero-light.css ne connait que .shell, d'ou cette regle. */
.compte-shell{position:relative;z-index:4;width:var(--page);margin:0 auto;flex:1}

.compte-carte{max-width:600px;margin:0 auto;display:grid;gap:22px;
  padding:clamp(30px,4.5vw,50px);border-radius:10px;background:var(--eggshell);
  color:var(--evergreen);box-shadow:var(--shadow)}
.compte-carte h1{margin:0;font-size:clamp(2rem,4.5vw,3rem);line-height:1.02;letter-spacing:-.05em}
.compte-carte .compte-lede{margin:0;font-size:1.04rem;line-height:1.66;color:rgba(12,29,21,.78)}

.compte-champs{display:grid;gap:17px}
.compte-champ{display:grid;gap:8px}
.compte-champ label{font-size:.8rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:rgba(12,29,21,.6)}
.compte-champ input{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:7px;
  background:var(--white);color:var(--evergreen);font:inherit;transition:border-color .15s}
.compte-champ input:hover{border-color:rgba(12,29,21,.34)}
.compte-champ input:focus-visible{outline:3px solid var(--pollen);outline-offset:0;border-color:var(--evergreen)}
.compte-aide{margin:0;font-size:.86rem;line-height:1.5;color:rgba(12,29,21,.58)}

.compte-consent{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.5}
.compte-consent input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--evergreen)}

.compte-pied{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.compte-pied .button{border:0;cursor:pointer}
.compte-message{margin:0;font-size:.94rem;line-height:1.5;min-height:1.4em}
.compte-message.error{color:var(--tangerine-ink);font-weight:680}
.compte-liens{display:flex;gap:20px;flex-wrap:wrap;font-size:.92rem}
.compte-liens a{color:inherit;font-weight:700;text-decoration-color:var(--pollen);
  text-decoration-thickness:2px;text-underline-offset:4px}
.compte-note{font-size:.84rem;line-height:1.55;color:rgba(12,29,21,.56)}
.compte-note a{color:inherit;text-decoration-color:var(--pollen);text-decoration-thickness:2px;text-underline-offset:3px}

/* Le pot de miel : invisible a l'oeil et au lecteur d'ecran, atteignable par
   un robot qui remplit tout ce qu'il trouve. */
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Espace ------------------------------------------------------------- */
/* L'espace est une page de travail : il reste sur fond sombre, et ce sont
   les cartes qui portent la lumiere. */

.espace-entete{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:38px}
.espace-entete h1{margin:0;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1;letter-spacing:-.05em;color:var(--eggshell)}
.espace-identite{font-size:.95rem;color:rgba(245,242,225,.75)}
.espace-identite a{color:inherit;font-weight:700;text-decoration-color:var(--pollen);
  text-decoration-thickness:2px;text-underline-offset:4px}

.espace-section{margin-bottom:60px}
.espace-section h2{margin:0 0 22px;font-size:1.55rem;letter-spacing:-.02em;color:var(--eggshell)}
.espace-grille{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}

.espace-carte{padding:26px;border-radius:10px;background:var(--eggshell);color:var(--evergreen);box-shadow:var(--shadow)}
.espace-carte h3{margin:0 0 14px;font-size:1.1rem;letter-spacing:-.01em}
.espace-carte--en_attente,.espace-carte--en_cours{outline:2px solid var(--pollen);outline-offset:-2px}

.espace-chiffres{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin:0 0 16px}
.espace-chiffres dt{font-size:.72rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:rgba(12,29,21,.55)}
.espace-chiffres dd{margin:3px 0 0;font-size:1.08rem;font-weight:700}

.espace-etat{margin:0 0 12px;font-size:.9rem;font-weight:680}
.espace-etat[data-etat="en_attente"],.espace-etat[data-etat="en_cours"]{color:var(--tangerine-ink)}
.espace-etat[data-etat="echec"]{color:var(--tangerine)}
.espace-attente-note{margin:0 0 12px;font-size:.84rem;line-height:1.5;color:rgba(12,29,21,.6)}

/* Points de respiration pendant le calcul, et halo doux sur la carte. */
.espace-points::after{content:"";display:inline-block;width:1.4em;text-align:left;
  animation:espace-points 1.4s steps(4,end) infinite}
@keyframes espace-points{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.espace-carte--en_attente,.espace-carte--en_cours{animation:espace-halo 2.4s ease-in-out infinite}
@keyframes espace-halo{0%,100%{outline-color:var(--pollen)}50%{outline-color:rgba(255,206,59,.35)}}
@media(prefers-reduced-motion:reduce){
  .espace-points::after,.espace-carte--en_attente,.espace-carte--en_cours{animation:none}
}

.espace-vide{margin:0;color:rgba(245,242,225,.7);line-height:1.65}
.espace-carte .espace-vide{color:rgba(12,29,21,.62)}
.espace-avertissement{margin:0;font-size:.78rem;line-height:1.5;color:rgba(12,29,21,.55)}
.espace-message{margin:0 0 26px;font-size:.95rem;min-height:1.4em;color:var(--eggshell)}
.espace-message.error{color:var(--pollen);font-weight:680}

.espace-form{display:grid;gap:18px;max-width:640px;padding:clamp(24px,3.5vw,36px);border-radius:10px;
  background:var(--eggshell);color:var(--evergreen);box-shadow:var(--shadow)}
.espace-form .compte-champs{grid-template-columns:1fr 1fr}
@media(max-width:640px){.espace-form .compte-champs{grid-template-columns:1fr}}

/* --- Graphique avant/apres ---------------------------------------------- */
/* Barres fines, extremites arrondies, etiquettes en encre du site. La grille
   est absente a dessein : deux barres par ligne, les valeurs sont ecrites. */

.espace-graphique{margin:4px 0 16px;padding:14px 14px 10px;border-radius:8px;background:var(--white)}
.espace-graphique figcaption{font-size:.78rem;font-weight:750;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(12,29,21,.6);margin-bottom:8px}
.espace-graphique .graph-unite{font-weight:600;text-transform:none;letter-spacing:0;color:rgba(12,29,21,.45)}
.graph-legende{display:flex;gap:16px;margin-bottom:10px;font-size:.82rem;color:rgba(12,29,21,.75)}
.graph-legende span{display:inline-flex;align-items:center;gap:6px}
.graph-legende i{width:11px;height:11px;border-radius:3px;display:inline-block}
.espace-graphique svg{display:block;width:100%;height:auto}
.espace-graphique .graph-nom{font:750 11px var(--font-body);fill:rgba(12,29,21,.62);
  letter-spacing:.04em;text-transform:uppercase}
.espace-graphique .graph-valeur{font:700 11px var(--font-body);fill:var(--evergreen)}

/* Le bouton fantome des cartes, sur fond creme. */
.button--ghost{display:inline-block;padding:11px 20px;border:1.5px solid var(--evergreen);border-radius:999px;
  background:transparent;color:var(--evergreen);font:inherit;font-weight:750;cursor:pointer;transition:background .15s,color .15s;text-decoration:none}
.button--ghost:hover{background:var(--evergreen);color:var(--eggshell)}
.espace-outils{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

/* --- Telephone ----------------------------------------------------------- */
/* Les grilles retombent en une colonne, les cibles tactiles restent >= 44px,
   et la carte colle aux bords avec une marge respirable. */
@media(max-width:640px){
  .compte-page{padding:34px 0 56px}
  .compte-carte{padding:24px 18px;gap:18px}
  .compte-carte h1{font-size:1.75rem}
  .compte-champ input{padding:13px 14px;font-size:1rem}
  .compte-pied .button{width:100%;text-align:center;padding:14px}
  .compte-liens{gap:12px 18px}
  .espace-entete{margin-bottom:26px}
  .espace-section{margin-bottom:40px}
  .espace-grille{grid-template-columns:1fr}
  .espace-form{padding:20px 16px}
  .espace-form .compte-pied .button{width:100%;padding:14px}
  .espace-chiffres dd{font-size:1rem}
}