/* Heop — « Mon profil » (H-20) et « Mes adresses » (H-24), dans la recette de fusion.
 *
 * UNE SEULE FEUILLE POUR DEUX PAGES, ET C'EST LE POINT DU LOT.
 *
 * Julien a demande les deux « avec les memes elements ». Elles partagent donc
 * leur mobilier — en-tete de page, carte de formulaire, champ, interrupteur,
 * bande de rappel — et ce mobilier est declare ICI une fois. Deux feuilles
 * auraient donne deux verites le jour ou l'une des deux formes bouge, et c'est
 * exactement ce qui rendait le compte incoherent avant sa refonte.
 *
 * POURQUOI PAS DANS users.css. Elle fait 3600 lignes, sert trois espaces plus
 * l'inscription et la connexion, et plusieurs voies y travaillent en meme
 * temps. Les formes de ces deux pages iraient s'y sedimenter au milieu de
 * leurs propres ancetres, avec le risque habituel : deux declarations du meme
 * selecteur a 400 lignes d'ecart, dont une seule gagne.
 *
 * CE QU'ELLE N'INVENTE PAS. La carte, sa bordure, son ombre et son
 * soulevement viennent de `.ui-tile` ; le bouton de `.ui-cta` ; la pastille
 * d'icone de `.ui-ico` ; le badge de `.ui-tag` ; la pastille de choix de
 * `.ui-chip` ; l'entree en cascade de `.ui-cascade`/`.ui-enter`. Tout cela est
 * declare une fois, dans css/ui/fusion.css et css/ui/motion.css. La liste
 * deroulante de l'autocomplete BAN et ses lignes viennent de users.css, ou
 * elles vivent deja. Cette feuille ne pose que la disposition propre aux deux
 * pages.
 *
 * Le degrade de la pastille reprend la borne nommee dans account-dashboard.css
 * (#EFE5D0) : c'est la MEME pastille, agrandie. Une seconde teinte inventee
 * ici aurait fait deux avatars qui se ressemblent presque.
 */

/* --- La colonne des deux pages ------------------------------------------ */

/* LA RESPIRATION LATERALE EST PORTEE ICI, ET C'EST NECESSAIRE.
 *
 * `.account-content` ne pose aucune marge : sur le tableau de bord, c'est
 * `.account-dashboard` qui la porte. Sans equivalent, ces deux pages-ci
 * rendaient leurs cartes BORD A BORD sur 375px — bordure collee au verre,
 * ombre coupee. Le balisage etait irreprochable ; seule la mesure au navigateur
 * l'a montre (cartes a x=0, largeur 375). */
.account-personal {
    width: 100%;
    max-width: 844px;
    margin-inline: auto;
    padding: 16px clamp(14px, 4vw, 24px) 40px;
}

.account-personal__errors {
    margin: 0;
    padding: var(--ui-space-2);
    border-radius: var(--ui-radius-cta, 12px);
    background: #F6E3D6;
    color: var(--ui-color-accent-dark, #A64F31);
    font-size: var(--ui-font-xs);
}

/* --- L'en-tete de page : titre, phrase, et le geste s'il existe ---------- */

.account-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-2);
}

.account-page-header__copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.account-page-header__copy h1 {
    margin: 0;
    color: var(--ui-color-ink, #241D16);
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: clamp(1.3rem, 5.6vw, 1.7rem);
    font-weight: 600;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

/* La phrase d'intro porte la PROMESSE sur « Mes adresses ». Elle est bornee en
   ch et non en px : c'est la longueur de ligne qui fait qu'on la lit, et une
   promesse qu'on ne lit pas ne protege personne. */
.account-page-header__copy p {
    max-width: 56ch;
    margin: 0;
    color: var(--ui-color-muted, #6E6252);
    font-size: var(--ui-font-xs);
    line-height: 1.45;
}

/* Le geste ne se comprime jamais : sur 375px il passe a la ligne entier
   plutot que de se laisser reduire a trois lettres et des points. */
.account-page-header__cta {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- La carte de formulaire, partagee par les quatre sections ------------ */

.account-panel {
    display: grid;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3);
    border-radius: var(--ui-radius-hero, 18px);
}

/* L'en-tete de section gagne son pictogramme SANS toucher aux six autres
   surfaces qui l'emploient : la regle est portee par le modificateur, qui
   n'existe que lorsqu'une icone est passee. */
.account-section-heading--icone h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-section-heading--icone h2 .ui-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--ui-color-accent, #C86138);
}

.account-panel__intro {
    margin: 0;
    color: var(--ui-color-muted, #6E6252);
    font-size: var(--ui-font-xs);
    line-height: 1.45;
}

.account-panel__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ui-space-2);
}

/* --- Les champs, dans la recette ---------------------------------------- */

/* `align-content: start` N'EST PAS COSMETIQUE.
 *
 * Deux champs cote a cote sont des cellules de grille, donc etirees a la meme
 * hauteur. Celui qui porte une phrase d'aide en a trois lignes, l'autre deux :
 * les rangees du plus court s'ecartaient pour remplir la cellule, et son champ
 * de saisie descendait de 25 px sous celui d'a cote. « Prenom » et « Nom » ne
 * partageaient plus la meme ligne de base.
 *
 * Les rangees gardent donc leur hauteur naturelle et se tassent en haut. Le
 * defaut ne se lisait dans aucun balisage — les deux champs sont identiques —
 * et c'est la capture desktop qui l'a montre.
 */
.account-panel .form-field {
    gap: 6px;
    align-content: start;
}

.account-panel .form-field label {
    color: var(--ui-color-muted, #6E6252);
    font-size: .82rem;
    font-weight: 600;
}

.account-panel .form-field input,
.account-panel .form-field select,
.account-panel .form-field textarea {
    min-height: var(--tap-size, 44px);
    padding: 12px 14px;
    border: 1.5px solid var(--ui-color-sable, #E7DCC6);
    border-radius: var(--ui-radius-cta, 12px);
    background: var(--ui-plan-sunk, #F4EBD9);
    color: var(--ui-color-ink, #241D16);
}

.account-panel .form-field input:focus-visible,
.account-panel .form-field select:focus-visible,
.account-panel .form-field textarea:focus-visible {
    outline: 2px solid var(--ui-color-brand, #245A3B);
    outline-offset: 1px;
}

.account-panel .form-field small {
    color: var(--ui-color-muted, #6E6252);
    font-size: .76rem;
    line-height: 1.3;
}

/* --- L'identite : la pastille et le nom --------------------------------- */

.account-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--ui-space-2);
}

/* La MEME pastille que le « Bonjour » du tableau de bord, agrandie. Jamais un
   visage par defaut : photo absente -> initiales, initiales absentes -> la
   feuille de la marque. Le gabarit partage tient la regle ; la feuille ne fait
   que l'habiller. */
.account-identity__avatar {
    display: grid;
    place-items: center;
    width: clamp(56px, 16vw, 72px);
    height: clamp(56px, 16vw, 72px);
    border: 1px solid var(--ui-color-sable, #E7DCC6);
    border-radius: 50%;
    background: linear-gradient(150deg, #EFE5D0, var(--ui-plan-sunk, #F4EBD9));
    color: var(--ui-color-accent, #C86138);
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: clamp(1.05rem, 4.2vw, 1.45rem);
    font-weight: 600;
    line-height: 1;
}

.account-identity__avatar .ui-icon {
    width: 26px;
    height: 26px;
    color: var(--ui-color-accent, #C86138);
}

.account-identity__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.account-identity__copy strong {
    color: var(--ui-color-ink, #241D16);
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: var(--ui-font-sm);
    font-weight: 600;
    line-height: 1.2;
}

/* L'adresse courriel : une information qu'on VIENT CHERCHER, pas un titre
   qu'on subit. Elle se coupe plutot que de pousser la carte hors de l'ecran. */
.account-identity__copy small {
    overflow: hidden;
    color: var(--ui-color-muted, #6E6252);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-identity__copy span {
    color: var(--ui-color-sable-fort, #9B8B6E);
    font-size: .74rem;
    line-height: 1.3;
}

/* --- L'interrupteur : une vraie case a cocher, sans une ligne de script --- */

.account-toggle__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    min-height: var(--tap-size, 44px);
    cursor: pointer;
}

.account-toggle__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.account-toggle__copy strong {
    color: var(--ui-color-ink, #241D16);
    font-size: var(--ui-font-xs);
    font-weight: 600;
    line-height: 1.25;
}

.account-toggle__copy small {
    color: var(--ui-color-muted, #6E6252);
    font-size: .76rem;
    line-height: 1.3;
}

.account-toggle__switch {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 27px;
}

/* La case reste ATTEIGNABLE : elle couvre le rail, elle n'est pas
   `display: none`. Un interrupteur qu'on ne peut pas tabuler n'est pas un
   interrupteur, c'est un dessin. */
.account-toggle__switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.account-toggle__track {
    position: absolute;
    inset: 0;
    border-radius: var(--ui-radius-pill, 999px);
    background: var(--ui-color-sable, #E7DCC6);
    pointer-events: none;
    transition: background var(--ui-motion-response, 220ms) var(--ui-motion-ease, ease);
}

.account-toggle__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #FFFFFF;
    transition: transform var(--ui-motion-response, 220ms) var(--ui-motion-ease, ease);
}

.account-toggle__switch input:checked + .account-toggle__track {
    background: var(--ui-color-brand, #245A3B);
}

.account-toggle__switch input:checked + .account-toggle__track::after {
    transform: translateX(19px);
}

.account-toggle__switch input:focus-visible + .account-toggle__track {
    outline: 2px solid var(--ui-color-brand, #245A3B);
    outline-offset: 2px;
}

/* --- Les deux boutons de bas de formulaire ------------------------------- */

.account-personal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

.account-personal__actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-size, 44px);
    padding: 13px 22px;
    border: 0;
    border-radius: var(--ui-radius-cta, 12px);
    font-family: inherit;
    font-size: var(--ui-font-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.account-personal__actions .button-primary {
    background: var(--ui-color-brand, #245A3B);
    color: var(--ui-color-cream, #FFF8EC);
}

/* UN SEUL APLAT PLEIN PAR ECRAN : deux boutons pleins cote a cote se lisent
   comme une hesitation, et l'oeil ne sait plus lequel est le geste principal. */
.account-personal__actions .button-secondary {
    background: transparent;
    color: var(--ui-color-muted, #6E6252);
    box-shadow: inset 0 0 0 1.5px var(--ui-color-sable, #E7DCC6);
}

.account-personal__actions .button-danger {
    background: var(--ui-color-accent-dark, #A64F31);
    color: #FFFFFF;
}

/* --- La bande de rappel — dont la promesse produit ----------------------- */

.account-note {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-2);
    margin: 0;
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-color-sable, #E7DCC6);
    border-radius: var(--ui-radius-cta, 12px);
    background: var(--ui-plan-sunk, #F4EBD9);
    color: var(--ui-color-muted, #6E6252);
    font-size: .8rem;
    line-height: 1.45;
}

.account-note__ico {
    flex: 0 0 auto;
}

.account-note__copy strong {
    color: var(--ui-color-ink, #241D16);
}

/* --- Le carnet d'adresses ------------------------------------------------ */

.address-book {
    display: grid;
    gap: var(--ui-space-2);
}

.address-book__workspace:empty {
    display: none;
}

.address-book__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ui-space-2);
}

.address-card {
    position: relative;
    display: grid;
    gap: 4px;
    align-content: start;
    padding: var(--ui-space-3);
    border-radius: var(--ui-radius-hero, 18px);
}

/* La carte par defaut se distingue par son TRAIT, pas par un fond : un aplat
   de plus dans une grille de cartes ferait deux niveaux de lecture pour une
   seule information. */
.address-card--default {
    border-color: var(--ui-color-brand, #245A3B);
}

.address-card__badge {
    position: absolute;
    top: var(--ui-space-2);
    right: var(--ui-space-2);
}

.address-card__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ui-color-brand, #245A3B);
    font-size: .85rem;
    font-weight: 600;
}

.address-card__ico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

.address-card__name {
    margin: 6px 0 0;
    color: var(--ui-color-ink, #241D16);
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: var(--ui-font-sm);
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.address-card__lines,
.address-card__phone {
    margin: 0;
    color: var(--ui-color-muted, #6E6252);
    font-size: .86rem;
    line-height: 1.45;
}

.address-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-2);
}

.address-card__form {
    display: contents;
}

/* Les trois gestes d'une fiche : meme taille de frappe, que ce soit un lien ou
   un bouton de formulaire. « Par defaut » ECRIT en base, il ne pouvait donc pas
   etre un lien — mais rien ne doit le montrer a l'oeil. */
.address-card__action {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ui-color-brand, #245A3B);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.address-card__action--default {
    color: var(--ui-color-muted, #6E6252);
}

.address-card__action--danger {
    color: var(--ui-color-accent-dark, #A64F31);
}

.address-card__action:hover,
.address-card__action:focus-visible {
    text-decoration: underline;
}

/* La carte d'ajout : trait DISCONTINU, comme l'etat vide. Il dit « il n'y a
   rien ici, pour l'instant » — une bordure pleine dessinerait un contenu. */
.address-book__add {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 148px;
    padding: var(--ui-space-3);
    border: 1.5px dashed var(--ui-color-sable, #E7DCC6);
    border-radius: var(--ui-radius-hero, 18px);
    color: var(--ui-color-muted, #6E6252);
    font-size: .86rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.address-book__add:hover,
.address-book__add:focus-visible {
    border-color: var(--ui-color-brand, #245A3B);
    color: var(--ui-color-brand, #245A3B);
}

.address-book__plus {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ui-plan-sunk, #F4EBD9);
}

.address-book__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    color: var(--ui-color-muted, #6E6252);
    font-size: var(--ui-font-xs);
}

/* --- Le formulaire d'adresse -------------------------------------------- */

.address-form__labels {
    margin: 0;
    padding: 0;
    border: 0;
}

.address-form__labels legend {
    padding: 0 0 6px;
    color: var(--ui-color-muted, #6E6252);
    font-size: .82rem;
    font-weight: 600;
}

.address-form__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* La pastille EST un bouton radio. La case reste dans le flux et couvre la
   pastille, invisible mais atteignable : la tabulation entre dans le groupe,
   les fleches changent le choix, et l'etat se peint par `:checked`. */
.address-form__chip {
    position: relative;
    cursor: pointer;
}

.address-form__chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.address-form__chip:has(input:checked) {
    border-color: transparent;
    background: var(--ui-color-brand, #245A3B);
    color: var(--ui-color-cream, #FFF8EC);
}

.address-form__chip:has(input:focus-visible) {
    outline: 2px solid var(--ui-color-brand, #245A3B);
    outline-offset: 2px;
}

/* UN CONTENEUR CACHE QUI PRENAIT DE LA PLACE.
 *
 * `.address-autocomplete__results` porte `hidden` tant qu'aucune suggestion
 * n'est arrivee — mais users.css lui pose `display: grid`, et une declaration
 * de `display` bat toujours le `display: none` que l'agent utilisateur attache
 * a `[hidden]`. La liste vide se dessinait donc par-dessus le champ suivant :
 * un rectangle clair en travers du libelle « Complement ».
 *
 * Le defaut est invisible dans le balisage — l'attribut EST la — et invisible
 * pour un contrat calcule. Seule la capture l'a montre.
 */
.address-autocomplete__results[hidden] {
    display: none;
}

/* Le repli, replie. Il n'est pas cache : `<details>` est une divulgation
   native — atteignable au clavier, annoncee par le lecteur d'ecran, et
   fonctionnelle sans une ligne de script. Le chemin principal reste net, et
   celui qui en a besoin le trouve a sa place, sous le champ d'adresse. */
.address-form__repli {
    display: grid;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2);
    border: 1px dashed var(--ui-color-sable, #E7DCC6);
    border-radius: var(--ui-radius-cta, 12px);
    background: var(--ui-plan-sunk, #F4EBD9);
}

.address-form__repli summary {
    min-height: var(--tap-size, 44px);
    display: flex;
    align-items: center;
    color: var(--ui-color-brand, #245A3B);
    font-size: var(--ui-font-xs);
    font-weight: 600;
    cursor: pointer;
}

.address-form__repli[open] summary {
    margin-bottom: 2px;
}

/* --- Au-dela du telephone ------------------------------------------------ */

@media (min-width: 560px) {
    /* Deux champs par ligne, comme la cible. En dessous, une colonne : deux
       champs cote a cote sur 375px donnent 160px chacun, ou « 06 12 34 56 78 »
       ne tient plus. */
    .account-panel__fields--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 600px) {
    .address-book__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* LES CONDITIONS DU MOT DE PASSE.
   Elles se lisent d un coup d oeil avant la saisie : corps reduit, encre
   attenuee, puces posees sur la meme gouttiere que les champs de la carte.
   Elles ne crient pas — ce sont des conditions, pas des erreurs ; l erreur a
   deja sa couleur, et deux rouges dans la meme carte ne se distinguent plus. */
.account-password-rules {
    margin: 0 0 var(--ui-space-2);
    padding-left: 1.15rem;
    display: grid;
    gap: .3rem;
    font-size: var(--ui-font-sm, .875rem);
    line-height: 1.45;
    color: var(--ui-color-muted, #6E6252);
}

.account-password-rules li {
    text-wrap: pretty;
}