/* 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. */
/* L'en-tete (92 px) est fixe, par-dessus la page : le haut de la carte doit
   passer dessous, pas derriere. Pleine hauteur, carte centree dans le reste. */
.compte-page{position:relative;overflow:hidden;padding:calc(92px + clamp(28px,4vw,64px)) 0 clamp(48px,7vw,110px);
  background:var(--evergreen);color:var(--eggshell);
  min-height:100dvh;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. */
/* flex:0 0 auto : avec flex:1 la coquille s'etirait sur toute la largeur et
   la carte collait aux bords du telephone. */
.compte-shell{position:relative;z-index:4;width:var(--page);margin:0 auto;flex:0 0 auto}

.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){
  /* Au telephone la carte etait « serree serree » : marges, interlignes et
     cibles reprennent de l'air, les liens deviennent des lignes de 44 px. */
  /* L'en-tete est pose par-dessus la page : on lui laisse sa place. */
  .compte-page{padding:104px 0 64px}
  .compte-carte{padding:30px 22px 26px;gap:24px;border-radius:12px}
  .compte-carte h1{font-size:1.9rem}
  .compte-carte .compte-lede{font-size:1rem}
  .compte-champs{gap:20px}
  .compte-champ{gap:9px}
  .compte-champ input{padding:14px 15px;font-size:1rem;min-height:50px}
  .compte-pied{margin-top:4px}
  .compte-pied .button{width:100%;text-align:center;padding:15px;min-height:50px}
  .compte-liens{flex-direction:column;gap:2px;margin-top:2px}
  .compte-liens a{display:inline-flex;align-items:center;min-height:44px}
  .compte-message:empty{display:none}
  .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}
}