/* Charte de l'espace adhérent : planches validées par Guillaume le 27/10/2026 (mobile d'abord). */
@font-face { font-family: Carlito; src: url("../polices/carlito-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Carlito; src: url("../polices/carlito-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
    --fond: #F7F6F4;
    --surface: #FFFFFF;
    --texte: #1F1F1F;
    --texte-doux: #5C5C5C;
    --marque: #4D4D4D;
    --bordure: #E3E1DE;
    --bordure-champ: #C9C6C2;
    --separateur: #EEECE9;
    --rouge: #A31501;
    --rouge-fonce: #7A1001;
    --rouge-doux: #F7E8E5;
    --rouge-texte: #4A0A00;
    --vert: #1E6B3A;
    --vert-doux: #E5F2E9;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: Calibri, Carlito, sans-serif;
    font-size: 17px;
    line-height: 1.45;
}

a { color: var(--rouge); }
a:hover { color: var(--rouge-fonce); }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }

h1 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; }
h2 { margin: 0; font-size: 18px; font-weight: 700; }

.cadre { min-height: 100vh; display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; background: var(--fond); }

/* En-tête et navigation */
.entete { background: var(--surface); border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 1; }
.entete-interieur { height: 68px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; }
.entete-compte { display: flex; align-items: center; gap: 20px; }
.seul-ordinateur { display: none; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 19px; font-weight: 700; color: var(--marque); }
.marque:hover { color: var(--marque); }
.deconnexion { margin: 0; }
.lien { border: 0; background: none; padding: 12px 0; font: inherit; font-size: 16px; color: var(--rouge); cursor: pointer; }
.lien:hover { color: var(--rouge-fonce); }

.contenu { flex-grow: 1; padding: 32px 20px 116px; display: flex; flex-direction: column; gap: 24px; }

/* Sur téléphone, la navigation (dans l'en-tête) est fixée en bas de l'écran, sur la largeur du cadre. */
.navigation {
    height: 76px; background: var(--surface); border-top: 1px solid var(--bordure);
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 720px; margin: 0 auto; z-index: 1;
}
.navigation a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    text-decoration: none; color: var(--texte-doux); font-size: 14px;
}
.navigation a.actif { color: var(--rouge); font-weight: 700; }
.navigation svg, .chevron, .pastille svg {
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Blocs */
.titre-page { display: flex; flex-direction: column; gap: 6px; }
.sous-titre { font-size: 17px; color: var(--texte-doux); line-height: 1.55; }
.groupe { display: flex; flex-direction: column; gap: 14px; }
.intitule { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.texte { margin: 0; font-size: 16px; color: var(--texte-doux); line-height: 1.55; }

.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: 16px; padding: 22px 20px; }
.carte-lien { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--texte); }
.carte-lien:hover { color: var(--texte); border-color: var(--bordure-champ); }
.carte-lien-texte { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; }
.carte-titre { font-size: 18px; font-weight: 700; }
.carte-detail { font-size: 15px; color: var(--texte-doux); }
.chevron { flex-shrink: 0; color: var(--rouge); }
.pastille {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: var(--rouge-doux); color: var(--rouge);
    display: flex; align-items: center; justify-content: center;
}

.liste-liens { padding: 0; overflow: hidden; }
.liste-liens a {
    min-height: 58px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between;
    text-decoration: none; color: var(--texte); font-weight: 700; border-bottom: 1px solid var(--separateur);
}
.liste-liens a:last-child { border-bottom: 0; }

/* Formulaires */
.formulaire { display: flex; flex-direction: column; gap: 22px; }
.formulaire h1 { font-size: 24px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label { font-size: 16px; font-weight: 700; }
.champ input {
    height: 50px; border: 1px solid var(--bordure-champ); border-radius: 10px; padding: 0 14px;
    font: inherit; font-size: 17px; color: var(--texte); background: var(--surface); width: 100%;
}
.champ input:focus { border-color: var(--rouge); }
.lien-secondaire { font-size: 16px; align-self: flex-end; padding: 8px 0; }
.bouton {
    height: 54px; border: 0; border-radius: 10px; background: var(--rouge); color: #FFFFFF;
    font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
.bouton:hover { background: var(--rouge-fonce); }
.alerte { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--rouge-doux); color: var(--rouge-texte); font-size: 16px; }
.succes { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--vert-doux); color: var(--vert); font-size: 17px; font-weight: 700; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); border: 0; padding: 0; }

/* Page de connexion */
.cadre-connexion { padding-bottom: 8px; }
.cadre-connexion > .carte { margin: 0 20px; padding: 28px 22px; }
.accueil-marque { padding: 56px 24px 36px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.accueil-marque img { margin-bottom: 10px; }
.accueil-titre { font-size: 26px; font-weight: 700; color: var(--marque); }
.accueil-sous-titre { font-size: 17px; color: var(--texte-doux); }
.encart { margin: 24px 20px 0; padding: 18px; border-radius: 12px; background: var(--rouge-doux); font-size: 16px; line-height: 1.55; color: var(--rouge-texte); }
.pied { margin-top: auto; padding: 24px; text-align: center; font-size: 15px; color: var(--texte-doux); line-height: 1.6; }

.page-seule { max-width: 520px; margin: 0 auto; padding: 56px 20px; }

@media (min-width: 760px) {
    .cadre { border-left: 1px solid var(--bordure); border-right: 1px solid var(--bordure); }
    .navigation { border-left: 1px solid var(--bordure); border-right: 1px solid var(--bordure); }
    .cadre-connexion { border: 0; max-width: 480px; }
}

/* Mes contrats (étape 3) */
.choix-exercice { display: flex; flex-direction: column; gap: 8px; }
.choix-exercice label { font-size: 16px; font-weight: 700; }
.choix-exercice-ligne { display: flex; gap: 10px; }
.choix-exercice select {
    flex-grow: 1; min-width: 0; height: 50px; border: 1px solid var(--bordure-champ); border-radius: 10px; padding: 0 12px;
    font: inherit; font-size: 17px; font-weight: 700; background: var(--surface); color: var(--texte);
}
.bouton-secondaire {
    height: 50px; padding: 0 16px; border: 1px solid var(--bordure-champ); border-radius: 10px; background: var(--surface);
    font: inherit; font-size: 16px; font-weight: 700; color: var(--rouge); cursor: pointer;
}
.contrat { background: var(--surface); border: 1px solid var(--bordure); border-radius: 16px; overflow: hidden; }
.contrat-entete { padding: 22px 20px; display: flex; flex-direction: column; gap: 18px; border-bottom: 1px solid var(--separateur); }
.contrat-entete h2 { font-size: 21px; line-height: 1.25; }
.contrat-pastilles { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge { font-size: 15px; font-weight: 700; border-radius: 999px; padding: 5px 12px; }
.badge-rcp { color: #1D4F8C; background: #E6EEF8; }
.badge-mrp { color: #8C2E57; background: #F8E8EF; }
.statut-encours { color: var(--vert); background: var(--vert-doux); }
.statut-avenir { color: #1D4F8C; background: #E6EEF8; }
.statut-reglementattendu, .statut-resiliationdemandee { color: #7A4B00; background: #FBF0DA; }
.statut-resiliee { color: var(--rouge-texte); background: var(--rouge-doux); }
.statut-terminee { color: var(--texte-doux); background: #F3F2F0; }
.contrat-infos { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.contrat-infos div { display: flex; flex-direction: column; gap: 4px; }
.contrat-infos dt { font-size: 14px; color: var(--texte-doux); }
.contrat-infos dd { margin: 0; font-size: 17px; line-height: 1.4; }
.contrat-infos .fort { font-weight: 700; }
.activites { display: flex; flex-wrap: wrap; gap: 8px; }
.activite { font-size: 15px; background: #F3F2F0; border-radius: 8px; padding: 6px 10px; }
.contrat-documents-titre { margin: 0; padding: 20px 20px 4px; font-weight: 700; }
.documents { list-style: none; margin: 0; padding: 4px 0 12px; }
.documents li { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.document-texte { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; }
.document-titre { font-size: 17px; font-weight: 700; }
.document-titre.grise { color: var(--texte-doux); }
.document-detail { font-size: 15px; color: var(--texte-doux); }
.document-detail.attente { color: #7A4B00; font-weight: 700; }
.bouton-pdf {
    height: 44px; padding: 0 14px; display: flex; align-items: center; flex-shrink: 0; border: 1px solid var(--bordure);
    border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 700;
}
.document-icone { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.document-icone svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.document-regle { color: var(--vert); }
.document-attente { color: #858585; }
.document-indisponible { flex-shrink: 0; max-width: 110px; text-align: right; font-size: 14px; color: var(--texte-doux); }
.note { margin: 0; font-size: 15px; color: var(--texte-doux); line-height: 1.6; padding: 0 4px; }

/* Ordinateur : planche « 3. Mes contrats (ordinateur) » du 27/10/2026, demandée à l'identique par Guillaume le
   28/10/2026. Menu dans l'en-tête, contenu sur 1 160 px, contrats sur deux colonnes. Le téléphone ne change pas. */
.liste-contrats { display: flex; flex-direction: column; gap: 24px; }
.tete-contrats { display: flex; flex-direction: column; gap: 24px; }

@media (min-width: 1024px) {
    .seul-telephone { display: none; }
    .seul-ordinateur { display: revert; }
    .cadre:not(.cadre-connexion) { max-width: none; border: 0; }

    .entete { position: static; }
    .entete-interieur {
        max-width: 1160px; margin: 0 auto; height: auto; min-height: 80px; padding: 0 32px;
        flex-wrap: wrap; justify-content: flex-start; gap: 12px 40px;
    }
    .marque { gap: 12px; font-size: 22px; }
    .marque img { width: 48px; height: 48px; }
    .navigation {
        position: static; height: auto; width: auto; max-width: none; margin: 0; border: 0; background: none;
        display: flex; flex-wrap: wrap; gap: 8px; flex-grow: 1;
    }
    .navigation a {
        display: block; padding: 14px 16px; font-size: 17px; color: var(--texte-doux);
        border-bottom: 3px solid transparent;
    }
    .navigation a:hover { color: var(--rouge); }
    .navigation a.actif { border-bottom-color: var(--rouge); }
    .navigation svg { display: none; }
    .entete-compte { font-size: 16px; }
    .nom-client { color: var(--texte-doux); }

    .contenu { width: 100%; max-width: 1160px; margin: 0 auto; padding: 48px 32px 64px; gap: 36px; }
    h1 { font-size: 36px; }
    .contenu > .carte-lien, .contenu > .liste-liens, .groupe { max-width: 560px; }

    .tete-contrats { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
    .choix-exercice { flex-direction: row; align-items: center; gap: 12px; }
    .choix-exercice select { flex-grow: 0; min-width: 240px; height: 48px; }
    .bouton-secondaire { height: 48px; }
    .liste-contrats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 28px; align-items: start; }
    .contrat-entete { padding: 28px 28px 24px; gap: 20px; }
    .contrat-entete h2 { font-size: 23px; }
    .contrat-infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
    .contrat-infos .pleine-largeur { grid-column: 1 / -1; }
    .contrat-documents-titre { padding: 22px 28px 6px; }
    .documents { padding: 4px 0 14px; }
    .documents li { gap: 16px; padding: 12px 28px; }
    .document-texte { gap: 2px; }
    .document-detail.regle { color: var(--vert); }
    .document-regle { display: none; }
    .bouton-pdf { height: 42px; padding: 0 16px; }
    .note { font-size: 16px; padding: 0; }
}