/* Digitalmuz — éléments communs aux pages intérieures : en-tête des membres, choix de l'offre,
   règles de publication, projets, page de l'offre « Confiez-nous 500 € », page « Comment nous évaluons les sites ». */

/* ---------- En-tête des membres ---------- */
.entete-membre .entete-nav a { padding-inline: 11px; }
.entete-accompagnement { flex: none; }
.entete-credit { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ambre-clair); color: var(--encre); font-size: .8125rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.entete-credit b { font-weight: 700; }
.entete-credit:hover { background: #fbe7a3; color: var(--encre); }
/* Sur grand écran, « Mes favoris » et l'espace éditeur sont rangés dans le menu « Mon compte » et le pied de page. */
@media (min-width: 1321px) { .entete-membre .entete-second { display: none; } }
/* Écran moyen et téléphone : le bouton de l'accompagnement garde sa place, sur une ligne à lui sous l'en-tête. */
@media (max-width: 1320px) {
  .entete-membre .entete-accompagnement { order: 4; width: 100%; min-height: 42px; }
  .entete-membre .entete-nav { order: 5; }
}
@media (max-width: 520px) {
  .entete-membre .entete-compte { display: none; }
}

/* ---------- Cartes : projet ---------- */
.lien-projet { position: relative; z-index: 1; margin-top: 10px; padding: 8px 0 0; width: 100%; border: 0; border-top: 1px dashed var(--trait); background: none; color: var(--azur); font-size: .8125rem; font-weight: 600; text-align: left; }
.lien-projet::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--brume); font-weight: 700; }
.lien-projet:hover { color: var(--azur-fonce); text-decoration: underline; }
.lien-projet-fait { color: #12805a; }
.lien-projet-fait::before { content: "✓"; background: #dff5ec; }
.lien-projet-fiche { margin-top: 14px; padding: 12px 0 0; }
/* Petit écran : dans la barre du bas, le bouton du panier tient sur une ligne et le projet passe dessous, sans trait. */
@media (max-width: 1020px) {
  .commande-carte .lien-projet-fiche { grid-column: 1 / -1; margin: 0; padding: 4px 0 0; border-top: 0; }
  .commande-actions .btn { white-space: nowrap; padding-inline: 16px; min-height: 48px; }
}
.menu-projets { position: absolute; z-index: 60; min-width: 220px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.menu-projets button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: none; text-align: left; font-size: .9375rem; }
.menu-projets button:hover, .menu-projets button:focus-visible { background: var(--brume); }

/* ---------- Fiche : offres, règles ---------- */
.compris b em { font-style: normal; font-weight: 700; color: var(--azur-fonce); margin-left: 6px; white-space: nowrap; }
.regles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.regles > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.regles dt { color: var(--gris); font-size: .875rem; }
.regles dd { font-weight: 500; }
/* Mots-clés classés : le mot-clé d'abord, sa position ensuite. */
.regles-mots > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.regles-mots dt { color: var(--encre); font-size: .9375rem; font-weight: 600; }
.regles-mots dd { color: var(--gris); font-size: .8125rem; text-align: right; }
.regles-mots > div { grid-template-columns: minmax(0, 1fr) minmax(0, 13em); }
.choix-offre { margin-bottom: 26px; }
.choix-titre { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin: 0 0 10px; }
.choix-pages { margin-top: 22px; }
.choix-pages .aide-champ { margin: -4px 0 12px; max-width: 70ch; }
.choix-mois { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--brume); font-size: .875rem; }
@media (max-width: 640px) {
  .regles { grid-template-columns: minmax(0, 1fr); }
  .regles > div { grid-template-columns: 7.5em minmax(0, 1fr); }
}

/* ---------- Page de l'offre « Confiez-nous 500 € » ---------- */
.offre-hero { background: var(--ambre); border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); position: relative; overflow: hidden; isolation: isolate; }
.offre-hero::before { content: ""; position: absolute; z-index: -1; left: -110px; bottom: -130px; width: 420px; height: 420px; opacity: .35; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Crect x='22' y='22' width='76' height='76'/%3E%3Crect x='22' y='22' width='76' height='76' transform='rotate(45 60 60)'/%3E%3Ccircle cx='60' cy='60' r='24'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.offre-hero-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 6vw, 84px); }
.offre-hero h1 { font-size: clamp(2.125rem, 4.6vw, 3.625rem); line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; }
.offre-hero-texte { margin: 20px 0 28px; max-width: 48ch; font-size: 1.125rem; color: #33270a; }
.offre-assurances { display: grid; gap: 8px; margin-top: 24px; font-size: .9375rem; font-weight: 500; }
.offre-assurances li { display: flex; align-items: center; gap: 10px; }
.offre-assurances li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%23f5b301' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain; }
.offre-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: etape; }
.offre-etapes li { counter-increment: etape; padding: 24px; border-radius: var(--rayon-grand); background: var(--brume); }
.offre-etapes li::before { content: counter(etape); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%; background: var(--ambre); font-weight: 700; }
.offre-etapes p { margin-top: 8px; color: #2f4857; }
.page-offre .final-cadre { margin-top: 0; }
@media (max-width: 1020px) {
  .offre-hero-grille { grid-template-columns: minmax(0, 1fr); }
  .offre-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .offre-etapes { grid-template-columns: minmax(0, 1fr); }
  .offre-hero .btn { width: 100%; }
}

/* ---------- Page « Comment nous évaluons les sites » ---------- */
.methode { max-width: calc(980px + 2 * var(--marge)); }
.methode-chapo { max-width: 68ch; font-size: 1.125rem; color: #2f4857; margin-bottom: 32px; }
.methode .bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: 24px; padding: clamp(20px, 2.6vw, 32px); }
.methode .bloc h2 { font-size: 1.375rem; margin-bottom: 12px; }
.methode .bloc p { max-width: 68ch; color: #2f4857; }
.methode .bloc p + p { margin-top: 10px; }
.methode-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.methode-source { font-size: .875rem; color: var(--gris) !important; padding-top: 12px; margin-top: 14px !important; border-top: 1px solid var(--trait); }
.methode-echelle { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .9375rem; }
.methode-echelle caption { text-align: left; font-size: .8125rem; color: var(--gris); padding-bottom: 6px; }
.methode-echelle th, .methode-echelle td { padding: 8px 0; border-bottom: 1px solid var(--trait); text-align: left; font-variant-numeric: tabular-nums; }
.methode-echelle th { font-size: .8125rem; font-weight: 600; color: var(--gris); }
.methode-echelle td:last-child, .methode-echelle th:last-child { text-align: right; font-weight: 600; }
.methode-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-bottom: 20px; }
.methode-score .score-anneau { width: 120px; height: 120px; margin: 0; }
.methode-score .score-anneau b { font-size: 2.25rem; }
.methode > .bloc:last-child .btn { margin-top: 14px; }
body.dmz-page-methode { background: #f6fafc; }
@media (max-width: 760px) {
  .methode-notes { grid-template-columns: minmax(0, 1fr); }
  .methode-score { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Mention visible du seul administrateur en aperçu ---------- */
.note-apercu { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--ambre-clair); font-size: .875rem; }

/* Pages positionnées : 8 visibles, les autres sur demande (la page choisie reste toujours visible). */
.choix-pages .choix-grille:not(.tout) .choix-suite:not(:has(input:checked)) { display: none; }
.choix-plus { margin-top: 12px; }

/* ---------- Découvrir le nom d'un site ---------- */
.reveler-nom { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 8px; padding: 5px 12px; border: 1px solid var(--trait); border-radius: 999px; background: var(--blanc); color: var(--azur); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.reveler-nom span { padding: 1px 8px; border-radius: 999px; background: var(--ambre-clair); color: var(--encre); font-weight: 700; }
.reveler-nom:hover { border-color: var(--azur); }
.reveler-message { margin: 0 0 8px; font-size: .8125rem; color: var(--gris); }
.nom-revele { color: var(--azur-fonce); }

/* ---------- Carte : mot-clé recherché trouvé sur le site ---------- */
.mots-trouves { margin: 6px 0 8px; padding: 8px 12px; list-style: none; border-radius: 12px; background: var(--brume); font-size: .8125rem; color: var(--gris); }
.mots-trouves li + li { margin-top: 4px; }
.mots-trouves b { color: var(--encre); font-weight: 600; }

/* ---------- Page « Recharger mes crédits » ---------- */
.recharge { padding-block: clamp(36px, 6vw, 80px); }
.recharge-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.recharge h1 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -0.03em; margin-bottom: 16px; }
.recharge-texte { font-size: 1.125rem; max-width: 46ch; margin-bottom: 20px; }
.recharge-solde { margin-top: 20px; padding: 12px 16px; border-radius: 14px; background: var(--ambre-clair); display: inline-block; }
.recharge-form { display: grid; gap: 12px; }
.recharge-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.recharge-quantite { font-weight: 600; font-size: .9375rem; }
.recharge-quantite small { font-weight: 400; color: var(--gris); }
.recharge-form .saisie { width: 100%; }
.recharge-form .btn { width: 100%; justify-content: center; }
@media (max-width: 860px) { .recharge-grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pages positionnées (une carte par page) ---------- */
.pages-pos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.page-pos { padding: 16px 18px; border: 1px solid var(--trait); border-radius: 16px; background: #fafcfd; }
.page-pos h3 { font-size: 1rem; margin: 0 0 10px; }
.page-pos ul { margin: 0; padding: 0; list-style: none; }
.page-pos li { display: grid; gap: 2px; padding: 7px 0; border-top: 1px dashed var(--trait); font-size: .875rem; }
.page-pos li b { font-weight: 600; }
.page-pos li span, .page-pos-plus { color: var(--gris); font-size: .8125rem; }
.page-pos-plus { margin: 8px 0 0; }
.page-pos-etat, .choix-etat { margin: 10px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--ambre-clair); color: #6b4e00; font-size: .8125rem; font-weight: 600; }
.page-pos-complete, .page-pos-reservee { opacity: .75; }
.choix-indispo { opacity: .6; cursor: not-allowed; }
.choix-page small { display: block; }
@media (max-width: 720px) { .pages-pos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Demande de lien sur une page : accord de l'éditeur, messages ---------- */
.dmz-validation { margin: 24px 0; padding: 20px 22px; border: 1px solid var(--trait); border-radius: 20px; background: var(--blanc); }
.dmz-validation h3 { font-size: 1.0625rem; margin: 0 0 10px; }
.dmz-validation-etat { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: var(--ambre-clair); font-size: .875rem; }
.dmz-validation-acceptee .dmz-validation-etat { background: #dff5ec; color: #12805a; }
.dmz-validation-refusee .dmz-validation-etat, .dmz-validation-annulee .dmz-validation-etat { background: #fde8e6; color: #b42318; }
.dmz-validation-fil { margin: 12px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dmz-validation-fil li { padding: 10px 14px; border-radius: 14px; background: var(--brume); font-size: .9375rem; }
.dmz-validation-fil .dmz-fil-systeme { background: #f3f5f7; color: var(--gris); font-size: .875rem; }
.dmz-validation-fil small { color: var(--gris); }
.dmz-validation-form label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; }
.dmz-validation-form textarea { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid #b9cedb; border-radius: var(--rayon-petit); font: inherit; }
.dmz-validation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dmz-validation-annuler { background: var(--blanc) !important; color: #b42318 !important; border: 1px solid #f2c4bf !important; }

/* Site masqué du catalogue : mention visible du seul administrateur. */
.note-masque { position: relative; z-index: 1; margin: 0 0 10px; background: #fde8e6; color: #b42318; font-weight: 600; }

/* En-tête des membres sur écran moyen (1321 à 1600 px) : resserré pour tenir sur une ligne avec le lien Contact. */
@media (min-width: 1321px) and (max-width: 1600px) {
  .entete-membre .entete-ligne { gap: 10px; }
  .entete-membre .entete-logo img { width: 118px; height: auto; }
  .entete-membre .entete-nav { gap: 0; }
  .entete-membre .entete-nav a { padding-inline: 8px; font-size: .875rem; }
  .entete-membre .entete-actions { gap: 6px; }
  .entete-membre .entete-lien { padding-inline: 8px; font-size: .875rem; }
  .entete-membre .entete-credit { padding-inline: 9px; font-size: .75rem; }
  .entete-membre .entete-accompagnement { padding-inline: 14px; font-size: .8125rem; }
}