/* ==================================================================
   compte.css — création de compte et connexion

   Aucun filet, aucun cadre : la hiérarchie est portée par la
   typographie et l'espace. Trois traits seulement sur toute la page,
   le soulignement des deux champs et celui des liens.

   Deux colonnes sur écran large : le formulaire à gauche, ce que le
   compte change à droite. Cette marge répond aux deux questions que
   l'on se pose avant de remplir un formulaire, à quoi cela sert et ce
   que devient l'adresse donnée.

   À charger après style.css.
   ================================================================== */

.page-compte{
  --pierre:#f4f2ed;--pierre2:#e6e2da;--pierre3:#d9d3c8;
  --encre:#1c1a17;--encre2:#4a4540;--sourd:#8c857c;
  --bronze:#8b7355;--bronzef:#6b5745;
  background:var(--pierre);color:var(--encre2);
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:18px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
.page-compte h1,.page-compte h2{font-family:'Playfair Display',Georgia,serif;
  font-weight:500;color:var(--encre);line-height:1.2}
.page-compte a{color:inherit;text-decoration:none}
.page-compte p{margin:0}

.cp-wrap{max-width:1000px;margin:0 auto;padding:0 1.5rem 5rem}

.cp-fil{padding:1.2rem 0 0;font-size:.8rem;color:var(--sourd)}
.cp-fil a{border-bottom:1px solid var(--pierre2)}
.cp-fil a:hover{border-bottom-color:var(--bronze)}

/* ---------- En-tête ---------- */
.cp-tete{padding:2.4rem 0 0;max-width:52ch}
.cp-tete h1{font-size:clamp(1.6rem,3.2vw,2.1rem);letter-spacing:-.008em}
.cp-chapeau{margin-top:1rem;font-size:1rem}
.cp-chapeau b{font-family:'Playfair Display',Georgia,serif;font-weight:500;color:var(--encre)}

/* ---------- Deux colonnes ---------- */
.cp-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:4.5rem;padding:2.6rem 0 0;align-items:start}

/* ---------- Formulaire ----------
   Les champs sont des lignes et non des boîtes : un trait sous chaque
   champ suffit à dire où écrire, et il passe au bronze à la saisie. */
.cp-form .formulaire_spip{background:transparent;border:0;padding:0}
.cp-form fieldset{border:0;padding:0;margin:0}
.cp-form legend{display:none}
.cp-form .editer-groupe{list-style:none;margin:0;padding:0}
.cp-form .editer{margin-bottom:1.8rem;list-style:none}
.cp-form label{display:block;font-size:.84rem;color:var(--sourd);margin-bottom:.3rem}
.cp-form .obligatoire{color:var(--bronzef);font-size:.78rem}
.cp-form input[type="text"],
.cp-form input[type="email"],
.cp-form input[type="password"]{
  width:100%;font-family:inherit;font-size:1.06rem;color:var(--encre);
  background:transparent;border:0;border-bottom:1px solid var(--encre);
  border-radius:0;padding:.55rem 0;box-shadow:none}
.cp-form input:focus{outline:none;border-bottom-color:var(--bronze)}
.cp-form .explication{font-size:.82rem;color:var(--sourd);margin:.3rem 0 0}
.cp-form .erreur input{border-bottom-color:#a33}
.cp-form .erreur_message{display:block;font-size:.82rem;color:#a33;margin-top:.3rem}
.cp-form .boutons{margin-top:1.2rem}
.cp-form button,.cp-form input[type="submit"]{border:0;background:var(--encre);
  color:var(--pierre);font-family:inherit;font-size:.98rem;padding:.9rem 2.2rem;
  border-radius:2px;cursor:pointer}
.cp-form button:hover{background:var(--bronzef)}
.cp-form .reponse_formulaire{padding:.85rem 1rem;border-radius:2px;
  margin-bottom:1.4rem;font-size:.93rem}
.cp-form .reponse_formulaire_ok{background:#f2f8f3;color:#255f31}
.cp-form .reponse_formulaire_erreur{background:#fdf2f0;color:#8a2b22}

/* ---------- Marge explicative ---------- */
.cp-marge h2{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  font-family:'Montserrat',sans-serif;font-weight:600;color:var(--sourd);
  margin-bottom:1.1rem}
.cp-marge dl{margin:0 0 2.2rem}
.cp-marge dl div{margin-bottom:1.1rem}
.cp-marge dl div:last-child{margin-bottom:0}
.cp-marge dt{font-family:'Playfair Display',Georgia,serif;font-size:1rem;
  color:var(--encre);margin-bottom:.15rem}
.cp-marge dd{margin:0;font-size:.88rem;color:var(--encre2)}
.cp-note{font-size:.88rem;color:var(--sourd);margin-bottom:1.1rem;max-width:44ch}
.cp-note a{color:var(--bronzef);border-bottom:1px solid var(--pierre2)}
.cp-note a:hover{border-bottom-color:var(--bronze)}

.cp-deja{margin-top:3.4rem;font-size:.94rem;color:var(--sourd)}
.cp-deja a{color:var(--bronzef);border-bottom:1px solid var(--pierre2)}
.cp-deja a:hover{border-bottom-color:var(--bronze)}

/* ---------- Déjà connecté ---------- */
.cp-portes{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:2.6rem}
.cp-porte{display:flex;flex-direction:column}
.cp-porte b{font-family:'Playfair Display',Georgia,serif;font-weight:500;
  font-size:1.12rem;color:var(--encre)}
.cp-porte span{font-size:.85rem;color:var(--sourd);margin-top:.25rem}
.cp-porte:hover b{color:var(--bronzef)}

/* ---------- Masquage accessible ---------- */
.page-compte .skip-link{position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden}
.page-compte .skip-link:focus{position:fixed;left:1rem;top:1rem;
  width:auto;height:auto;z-index:200;background:#fff;color:var(--encre);
  padding:.7rem 1.2rem;border:2px solid var(--bronze);border-radius:2px}

/* ==================================================================
   Points de rupture
   ================================================================== */

@media (max-width:820px){
  .cp-grille{grid-template-columns:1fr;gap:3rem}
}

@media (max-width:640px){
  .page-compte{font-size:17px}
  .cp-wrap{padding:0 1.1rem 3.5rem}
  .cp-portes{grid-template-columns:1fr;gap:1.8rem}
  .cp-form button,.cp-form input[type="submit"]{width:100%}
}