/*!
 * Girafe Profile — pages /mon-profil/ et /mon-projet/{id}/ (Phase 3.2bis)
 *
 * Préfixe .gp-* pour éviter collision avec .gpl-* (girafe-planet) et le
 * chatbot. Design system 2.2bis : variables --g-* (palette coral + neutres
 * chauds) héritées de girafe-chatbot.css quand déjà chargé sur la page,
 * fallback inline ici sinon (au cas où la page ne charge pas le chatbot CSS).
 */

:root {
  /* Fallback minimal si le design system 2.2bis n'est pas chargé */
  --g-coral-50: #fff5f6;
  --g-coral-100: #ffe7eb;
  --g-coral-200: #ffd1d9;
  --g-coral-500: #ff7979;
  --g-coral-600: #ff5e5e;
  --g-coral-700: #d94545;
  --g-coral-900: #7a1224;
  --g-ink: #1f2330;
  --g-ink-muted: #5b6172;
  --g-surface: #fefcfa;
  --g-surface-2: #faf6f3;
  --g-line: rgba(31,35,48,0.08);
  --g-space-2: 8px;
  --g-space-3: 12px;
  --g-space-4: 16px;
  --g-space-5: 20px;
  --g-space-6: 24px;
  --g-space-7: 28px;
  --g-space-8: 32px;
  --g-radius-md: 12px;
  --g-radius-lg: 16px;
}

/* Phase 3.2ter Fix #1 — masquer le h1 vide injecté par le template Sage
   page-default sur nos pages dédiées. Pas de display:none (laisser le DOM)
   mais pas d'occupation visuelle. */
body.girafe-dedicated-page .page-default > h1:empty,
body.girafe-dedicated-page .page-default > h1[data-empty="true"] {
  display: none;
}
/* Aussi le wrapper du body de page si présent — fallback */
body.girafe-dedicated-page .page-default > h1 { line-height: 0; }
body.girafe-dedicated-page .page-default > h1:not(:empty) { line-height: 1.2; }

/* Phase 3.2quater — HOTFIX padding/centrage.
   Le template Sage `page-default` wrap le contenu dans
   `<div class="page-default container">` puis `<div class="w-full xl:w-12/24">`.
   La classe Tailwind `xl:w-12/24` limite le contenu à 50% de la largeur sur
   viewports ≥ 1280px et l'aligne à gauche → page collée à gauche au lieu
   d'être centrée. On neutralise ces contraintes UNIQUEMENT pour nos pages
   dédiées (body.girafe-dedicated-page), sans toucher au thème. */
body.girafe-dedicated-page .page-default {
  max-width: 100% !important;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
body.girafe-dedicated-page .page-default > .w-full,
body.girafe-dedicated-page .page-default > [class*="w-12/24"],
body.girafe-dedicated-page .page-default > [class*="xl:w-12/24"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.gp-page {
  max-width: 760px;
  margin: 40px auto;
  padding: 0 var(--g-space-4);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--g-ink);
  line-height: 1.55;
  box-sizing: border-box;
}
.gp-page *,
.gp-page *::before,
.gp-page *::after { box-sizing: border-box; }

/* Phase 3.2quater — re-déclaration explicite avec spécificité augmentée
   pour vaincre tout override hérité de la cascade thème en hard refresh.
   max-width 760px = lisibilité confortable (texte 65-80 char/ligne) ;
   margin auto = centrage horizontal stable. */
body.girafe-dedicated-page .gp-page {
  max-width: 760px;
  width: auto;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Phase 3.2ter Fix #6 — passe légère d'espacements/hiérarchie */
@media (min-width: 760px) {
  .gp-page { margin-top: 56px; margin-bottom: 80px; }
}
@media (max-width: 480px) {
  .gp-page { padding-left: var(--g-space-3); padding-right: var(--g-space-3); }
}

/* Phase 3.2ter Fix #5 — bouton "Retour au chat" en haut à gauche */
.gp-top-actions {
  display: flex;
  align-items: center;
  margin-bottom: var(--g-space-4);
}
.gp-back-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--g-coral-500);
  color: var(--g-coral-700);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.gp-back-top:hover {
  background: var(--g-coral-50);
  color: var(--g-coral-900);
}
.gp-back-top .gp-arrow { font-size: 16px; line-height: 1; }

.gp-card {
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
  padding: var(--g-space-6);
  box-shadow: 0 2px 8px rgba(31,35,48,0.05);
}

.gp-title {
  margin: 0 0 var(--g-space-3) 0;
  font-size: 24px;
  font-weight: 600;
}

/* === Hero === */
.gp-hero {
  margin-bottom: var(--g-space-6);
  padding-bottom: var(--g-space-4);
  border-bottom: 1px solid var(--g-line);
}
/* Phase 3.2ter Fix #2 — hero en ligne (titre à gauche, status badge à droite) */
.gp-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-space-3);
  flex-wrap: wrap;
}
.gp-hero-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--g-ink);
  flex: 1;
  min-width: 0;
}
.gp-hero-status { flex-shrink: 0; }

/* === Badges status === */
.gp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.gp-badge-publish  { background: #d4f4dd; color: #1c6e2e; }
.gp-badge-pending  { background: #fff4d4; color: #876700; }
.gp-badge-rejected { background: #f4d4d4; color: #8a2828; }
.gp-badge-trash    { background: #e0e0e0; color: #5a5a5a; }
.gp-badge-default  { background: #f0f0f0; color: #555; }
/* P4 — brouillon (draft) */
.gp-badge-draft    { background: #e6e9f0; color: #3d4a63; }
/* P5 — bandeau de statut sur /mon-projet */
.gp-status-note {
  margin: 0 0 16px 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.gp-status-note-publish  { background: #d4f4dd; color: #1c6e2e; }
.gp-status-note-pending  { background: #fff4d4; color: #876700; }
.gp-status-note-rejected { background: #f4d4d4; color: #8a2828; }

/* P5 Phase 3 — affordance « Modifier ce projet » / « Reprendre la modification »
   dans le bandeau de statut (réédition d'un publié, copy-on-edit). Cf. ADR-121. */
.gp-status-cta {
  display: inline-block;
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.gp-status-cta:hover { opacity: .8; }
.gp-status-cta[disabled] { opacity: .5; cursor: default; }

/* P2 — toggle newsletter (réglages de compte). */
.gp-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
}
.gp-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--g-coral-500, #ff6b5e);
  cursor: pointer;
}
.gp-toggle input[type="checkbox"]:disabled { opacity: .5; cursor: default; }

/* P6b-fix 3 — badge catégorie sur la page projet publique /pin/ (sur sa ligne). */
.gp-pub-cat { margin: 8px 0 0; }
.gp-pub-cat .gp-cat-badge { margin-left: 0; }

/* === Sections === */
.gp-sections { display: grid; gap: var(--g-space-3); }

.gp-section {
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-md);
  /* Phase 3.2quinquies — padding intérieur respirant.
     Diagnostic : la valeur précédente utilisait `var(--g-space-5)` qui n'était
     pas défini dans :root local → padding latéral résolu à `initial` (=0),
     le texte touchait le bord intérieur. Variable ajoutée + valeurs augmentées. */
  padding: 24px 28px;
}
@media (max-width: 480px) {
  .gp-section { padding: 20px 18px; }
}
/* Phase 3.2ter Fix #6 — un peu plus d'espace entre les cards */
.gp-sections { gap: var(--g-space-4); }
.gp-section-head {
  display: flex;
  align-items: center;
  gap: var(--g-space-2);
  margin-bottom: var(--g-space-3);
}
.gp-section-label {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--g-ink);
  font-weight: 700;
  flex: 1;
  opacity: 0.65;
}
.gp-edit-btn {
  background: transparent;
  border: 1px solid var(--g-line);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--g-coral-700);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.gp-edit-btn:hover {
  background: var(--g-coral-50);
  border-color: var(--g-coral-200);
}
/* Phase 3.2sexies — rythme vertical cohérent entre TOUS les types de contenu
   de card (paragraphes simples / paragraphes multiples / listes). Avant : les
   listes avaient margin-left:18px pour les bullets (cachés par le thème global
   `ul { list-style: none }`) → décalage visuel entre les cards. Les paragraphes
   et items avaient des margins différents → rythme inégal. Maintenant :
   tout est aligné au bord gauche du body et l'espacement vertical est uniforme. */
.gp-section-body { color: var(--g-ink); }
.gp-section-body .gp-text {
  margin: 0 0 8px 0;
  line-height: 1.55;
}
.gp-section-body .gp-text:last-child { margin-bottom: 0; }

.gp-section-list {
  /* P5-P1 #2 — puces restaurées pour les listes besoins/offres en vue owner.
     B-019 n'avait traité que .rev-list/.card-list (récap chatbot) ; cette classe
     (vue /mon-projet & /mon-profil) imposait list-style:none. Cf. ADR-119. */
  list-style: disc outside;
  margin: 0 0 0 1.1em;
  padding: 0;
}
.gp-section-list li {
  margin: 0 0 8px 0;
  line-height: 1.55;
  display: list-item;
}
.gp-section-list li::marker { color: var(--g-coral-500, #e5564a); }
.gp-section-list li:last-child { margin-bottom: 0; }

.gp-section-empty {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: var(--g-ink-muted);
  font-style: italic;
  line-height: 1.5;
}
.gp-section-empty:first-child { margin-top: 0; }

/* === Inline edit === */
.gp-section-body[data-edit-active] {
  background: var(--g-coral-50);
  border-radius: 8px;
  padding: 10px;
  margin: -10px;
}
.gp-inline-edit { display: grid; gap: var(--g-space-3); }
.gp-inline-edit label { display: block; font-size: 13px; font-weight: 500; }
.gp-inline-edit input[type="text"],
.gp-inline-edit input[type="email"] {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--g-line);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  margin-top: 4px;
}
.gp-inline-edit input:focus {
  outline: none;
  border-color: var(--g-coral-500);
  box-shadow: 0 0 0 3px rgba(255,121,121,0.22);
}
.gp-inline-edit .gp-radio,
.gp-inline-edit .gp-checkbox {
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  font-weight: 400;
}
.gp-inline-actions { display: flex; gap: 8px; margin-top: 10px; }
.gp-inline-error {
  background: #fbeaea;
  color: #8a2828;
  border: 1px solid #d6a0a0;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
  font-size: 13px;
}

/* === Boutons (Phase 3.2ter Fix #3) ===
   Le thème Beaucoup applique des règles globales sur `button` qui annulent
   les couleurs Girafe. On gagne en spécificité via classe parent + `button.gp-btn`
   et on force avec !important sur les propriétés critiques de contraste. */
.gp-page button.gp-btn,
.gp-page a.gp-btn,
button.gp-btn,
a.gp-btn,
.gp-modal button.gp-btn,
.gp-modal a.gp-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.2;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.gp-page button.gp-btn-primary,
.gp-page a.gp-btn-primary,
button.gp-btn-primary,
a.gp-btn-primary,
.gp-modal button.gp-btn-primary,
.gp-modal a.gp-btn-primary {
  background: var(--g-coral-500) !important;
  color: #ffffff !important;
  border-color: var(--g-coral-500) !important;
}
.gp-page button.gp-btn-primary:hover,
.gp-page a.gp-btn-primary:hover,
button.gp-btn-primary:hover,
a.gp-btn-primary:hover,
.gp-modal button.gp-btn-primary:hover,
.gp-modal a.gp-btn-primary:hover {
  background: var(--g-coral-600) !important;
  border-color: var(--g-coral-600) !important;
  color: #ffffff !important;
}
.gp-page button.gp-btn-primary:disabled,
button.gp-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Phase 4.2bis — alignement strict du bouton secondary sur le pattern natif
   Girafe `.girafe-btn-outline` (cf. child-beaucoup/style.css). Cohérence
   stricte avec le bouton "DÉCOUVRIR LA COMMUNAUTÉ" /manifeste et "CRÉER MON
   PROFIL" du header global : transparent + bordure 2px coral + texte coral +
   pill (border-radius 999px) + uppercase + font-weight 700 + letter-spacing.
   IMPORTANT : `background-image: none` reset les gradients Tailwind/Beaucoup. */
.gp-page button.gp-btn-secondary,
.gp-page a.gp-btn-secondary,
button.gp-btn-secondary,
a.gp-btn-secondary,
.gp-modal button.gp-btn-secondary,
.gp-modal a.gp-btn-secondary {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--g-coral-500, #ff7979) !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--g-coral-500, #ff7979) !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.gp-page button.gp-btn-secondary:hover,
.gp-page a.gp-btn-secondary:hover,
button.gp-btn-secondary:hover,
a.gp-btn-secondary:hover,
.gp-modal button.gp-btn-secondary:hover,
.gp-modal a.gp-btn-secondary:hover {
  background-color: var(--g-coral-50) !important;
  background-image: none !important;
  color: var(--g-coral-500, #ff7979) !important;
  border-color: var(--g-coral-500, #ff7979) !important;
  opacity: 1 !important;
}
.gp-page button.gp-btn-danger,
button.gp-btn-danger,
.gp-modal button.gp-btn-danger {
  background: transparent !important;
  color: #8a2828 !important;
  border-color: #d6a0a0 !important;
}
.gp-page button.gp-btn-danger:hover,
button.gp-btn-danger:hover,
.gp-modal button.gp-btn-danger:hover {
  background: #fbeaea !important;
  color: #6b1e1e !important;
}

/* Phase 3.2ter Fix #4 — texte des inputs/textareas en noir (le thème
   Beaucoup applique parfois color: var(--g-coral) ou similaire). */
.gp-page input[type="text"],
.gp-page input[type="email"],
.gp-page input[type="tel"],
.gp-page input[type="search"],
.gp-page textarea,
.gp-modal input[type="text"],
.gp-modal input[type="email"],
.gp-modal input[type="tel"],
.gp-modal input[type="search"],
.gp-modal textarea {
  color: var(--g-ink) !important;
  background: #ffffff !important;
  caret-color: var(--g-ink) !important;
}
.gp-page input::placeholder,
.gp-page textarea::placeholder,
.gp-modal input::placeholder,
.gp-modal textarea::placeholder {
  color: rgba(31,35,48,0.42) !important;
  opacity: 1;
}
.gp-page input:focus,
.gp-page textarea:focus,
.gp-modal input:focus,
.gp-modal textarea:focus {
  outline: none;
  border-color: var(--g-coral-500) !important;
  box-shadow: 0 0 0 3px rgba(255,121,121,0.22);
}

/* === Footer + back link === */
.gp-back-link { margin: var(--g-space-6) 0 var(--g-space-3) 0; }
.gp-footer {
  margin-top: var(--g-space-4);
  padding-top: var(--g-space-4);
  border-top: 1px solid var(--g-line);
}
.gp-warn {
  background: #fff8e1;
  border: 1px solid #f0d987;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: var(--g-space-3);
}

/* === Section "Mes projets" === */
.gp-projects-list {
  display: grid;
  gap: var(--g-space-2);
  margin: var(--g-space-2) 0;
}
.gp-project-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-space-2);
  padding: 10px 14px;
  background: var(--g-surface-2);
  border: 1px solid var(--g-line);
  border-radius: 8px;
  color: var(--g-ink);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.gp-project-card:hover {
  background: var(--g-coral-50);
  border-color: var(--g-coral-200);
  color: var(--g-coral-900);
}
.gp-project-title { font-weight: 500; }
/* P3-fix #2 — libellé de catégorie dans la liste « mes projets ». */
.gp-project-cat {
  font-size: var(--g-text-xs, 12px);
  color: var(--g-ink-muted, #6b6b6b);
  margin-left: var(--g-space-2, 8px);
}
/* P6b — badge catégorie coloré (remplace .gp-project-cat texte). Fond posé en
   inline depuis gpl_category_colors (source unique). Texte blanc gras. */
.gp-cat-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--g-space-2, 8px);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--g-text-xs, 12px);
  font-weight: 800;
  line-height: 1.45;
  color: #fff;
  background: #6b7280;
  white-space: nowrap;
}
/* P4 — carte d'un brouillon : appel à reprendre dans le chat. */
.gp-project-resume {
  margin-left: auto;
  font-size: var(--g-text-xs, 12px);
  font-weight: 600;
  color: var(--g-coral-700, #b23a2e);
}
.gp-project-card-draft { border-style: dashed; }

/* === Modale d'édition (sections lourdes + suppression) === */
.gp-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999;
  padding: var(--g-space-4);
  animation: gp-fade-in 140ms ease-out;
}
@keyframes gp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.gp-modal {
  background: white;
  border-radius: var(--g-radius-lg);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
}
.gp-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--g-space-4);
  border-bottom: 1px solid var(--g-line);
}
.gp-modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.gp-modal-close {
  background: transparent; border: 0; font-size: 24px; line-height: 1;
  cursor: pointer; color: var(--g-ink-muted); padding: 4px 8px;
}
.gp-modal-close:hover { color: var(--g-ink); }
.gp-modal-body { padding: var(--g-space-4); }
.gp-modal-body label { display: block; font-weight: 500; margin-bottom: 6px; }
.gp-modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: var(--g-space-4);
  border-top: 1px solid var(--g-line);
}
.gp-modal-error {
  margin: 0 var(--g-space-4) var(--g-space-3);
  background: #fbeaea; color: #8a2828; border: 1px solid #d6a0a0;
  padding: 8px 12px; border-radius: 6px; font-size: 13px;
}
.gp-modal-ta {
  width: 100%;
  min-height: 160px;
  padding: 10px 12px;
  border: 1px solid var(--g-line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  background: #ffffff;
  color: var(--g-ink);
}
/* Phase 4.1bis — variante compacte pour modale Contacter (textarea moins haute) */
.gp-modal .gp-modal-ta-compact {
  min-height: 90px;
}

/* Phase 4.1bis — pattern unifié des champs de formulaire dans les modales,
   cohérence stricte avec les modales d'édition de /mon-profil/.
   Avant : modale Contacter utilisait .gp-inline-edit (pour édition inline)
   qui n'avait ni bordure ni width:100% sur le select. */
.gp-modal .gp-modal-field {
  display: block;
  margin-bottom: var(--g-space-4);
}
.gp-modal .gp-modal-field:last-child { margin-bottom: 0; }
.gp-modal .gp-modal-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--g-ink);
  margin-bottom: 6px;
}
.gp-modal .gp-modal-hint {
  font-weight: 400;
  font-size: 12px;
  color: var(--g-ink-muted);
}
.gp-modal .gp-modal-intro {
  margin: 0 0 var(--g-space-4) 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--g-ink);
}
/* Phase 4.1ter — spécificité augmentée + !important sur les propriétés
   critiques pour vaincre les règles globales du thème Beaucoup/Sage qui
   appliquent color: coral aux selects/inputs via Tailwind utility classes
   et resets globaux. */
.gp-modal-overlay .gp-modal .gp-modal-input,
.gp-modal-overlay .gp-modal .gp-modal-select,
.gp-modal-overlay .gp-modal input[type="text"].gp-modal-input,
.gp-modal-overlay .gp-modal input[type="email"].gp-modal-input,
.gp-modal-overlay .gp-modal select.gp-modal-select {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid var(--g-line) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  color: var(--g-ink) !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  text-transform: none !important;
}
/* Select : flèche dropdown ink (noir) cohérente avec le texte, padding-right pour ne pas chevaucher */
.gp-modal-overlay .gp-modal select.gp-modal-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231f2330' d='M6 8L0 0h12z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 10px 7px !important;
  padding-right: 36px !important;
  cursor: pointer;
}
.gp-modal-overlay .gp-modal .gp-modal-input:focus,
.gp-modal-overlay .gp-modal .gp-modal-select:focus,
.gp-modal-overlay .gp-modal .gp-modal-ta:focus {
  outline: none !important;
  border-color: var(--g-coral-500) !important;
  box-shadow: 0 0 0 3px rgba(255,121,121,0.22) !important;
}

/* Phase 4.1ter — masquer le système de popups du footer Sage (Lorem ipsum
   placeholder) sur les pages publiques pin. Sur /mon-profil/ ce wrapper
   n'est pas inclus car la layout Sage page.blade.php est utilisée
   nativement. Sur /pin/{slug}/, notre template appelle directement
   partials.footer qui contient ce wrapper. */
body.girafe-public-pin .popups-wrapper,
body.girafe-public-pin footer.popups {
  display: none !important;
}

/* === List editor (besoins / offres) === */
.gp-list-editor { display: grid; gap: 6px; margin: 8px 0; }
.gp-list-row { display: flex; gap: 6px; }
.gp-list-row .gp-list-input {
  flex: 1; padding: 6px 10px; border: 1px solid var(--g-line); border-radius: 6px; font-size: 14px;
}
.gp-list-row .gp-list-remove {
  width: 32px; padding: 0;
  background: transparent; border: 1px solid var(--g-line); border-radius: 6px;
  color: #8a2828; font-size: 18px; line-height: 1; cursor: pointer;
}
.gp-list-row .gp-list-remove:hover { background: #fbeaea; }
.gp-list-add { margin-top: 4px; }

/* === Diff blocks === */
.gp-diff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--g-space-3);
  margin: var(--g-space-3) 0;
}
@media (max-width: 580px) {
  .gp-diff-row { grid-template-columns: 1fr; }
}
.gp-diff-block {
  border: 1px solid var(--g-line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--g-surface-2);
}
.gp-diff-block h5 {
  margin: 0 0 6px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-ink-muted);
  font-weight: 600;
}
.gp-diff-list { margin: 4px 0 4px 18px; padding: 0; }
.gp-diff-list li { margin: 3px 0; }

/* === Access error === */
.gp-access-error { max-width: 520px; }

/* =========================================================
 * Phase 4.3.2 — Section photo (projet) + modale upload
 * ========================================================= */
.gp-photo-wrap {
  width: 100%;
  max-width: 600px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--g-surface-2, #f4f0ec);
  aspect-ratio: 16 / 9;
}
.gp-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gp-photo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--g-coral-200, #ffd1d9);
  border-radius: 12px;
  background: var(--g-coral-50, #fff5f6);
  color: var(--g-coral-700, #d94545);
  cursor: pointer;
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease;
}
.gp-photo-empty:hover {
  background: var(--g-coral-100, #ffe7eb);
  border-color: var(--g-coral-500, #ff7979);
}
.gp-photo-empty-icon { font-size: 28px; line-height: 1; }

/* Modale photo */
.gp-photo-modal { display: flex; flex-direction: column; gap: 12px; }
.gp-photo-preview img,
.gp-photo-newpreview img {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  object-fit: cover;
  max-height: 240px;
}
.gp-photo-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 2px dashed var(--g-coral-200, #ffd1d9);
  border-radius: 8px;
  background: var(--g-coral-50, #fff5f6);
  cursor: pointer;
  text-align: center;
}
.gp-photo-drop-label { color: var(--g-coral-700, #d94545); font-weight: 600; font-size: 14px; }
.gp-photo-input { width: 100%; }
.gp-photo-hint { font-size: 12px; color: var(--g-ink-muted, #5b6172); margin: 0; }
.gp-photo-progress { font-size: 13px; color: var(--g-coral-700, #d94545); font-weight: 600; }

/* =========================================================
 * Phase 4.4 — Refonte UI page publique /pin/{slug}/ (profil + projet)
 * Palette widgets par défaut = "vert sage / bleu poudré" (proposition 1).
 * Pour switcher : modifier les 4 variables ci-dessous.
 * ========================================================= */
:root {
  --gp-needs-bg: #e5ede8;  /* vert sage clair */
  --gp-needs-fg: #3a4d3f;  /* vert foncé lisible */
  --gp-offer-bg: #e5eaf0;  /* bleu poudré clair */
  --gp-offer-fg: #2f4452;  /* bleu ardoise foncé */
}

.gp-pub { max-width: 760px; margin: 0 auto; }

/* Hero projet (photo plein largeur) */
.gp-pub-hero {
  width: 100%;
  height: 320px;
  border-radius: var(--g-radius-lg, 16px);
  background: var(--g-surface-2, #faf6f3) center/cover no-repeat;
  margin-bottom: var(--g-space-6, 24px);
}
@media (max-width: 768px) { .gp-pub-hero { height: 200px; } }

/* Bloc identité */
.gp-pub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--g-space-4, 16px);
  flex-wrap: wrap;
  margin-bottom: var(--g-space-4, 16px);
}
.gp-pub-head-main { flex: 1; min-width: 0; }
.gp-pub-name { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; color: var(--g-ink, #1f2330); line-height: 1.15; }
.gp-pub-sub  { margin: 6px 0 0; font-size: 17px; color: var(--g-ink, #1f2330); line-height: 1.5; }
.gp-pub-city { margin: 4px 0 0; font-size: 14px; color: var(--g-ink-muted, #5b6172); font-weight: 400; }
.gp-pub-head-action { flex-shrink: 0; }
@media (max-width: 768px) {
  .gp-pub-name { font-size: 24px; }
  .gp-pub-head-action { width: 100%; }
}

/* Créé par (projet) */
.gp-pub-creator { margin: 0 0 var(--g-space-4, 16px); font-size: 15px; color: var(--g-ink-muted, #5b6172); }
/* P7-P1 Fix B — nom du créateur en texte simple (plus de lien). La règle
   .gp-pub-creator-link reste, dormante, pour de futures structures liées. */
.gp-pub-creator-name { font-weight: 600; color: var(--g-ink, #1f2937); }
.gp-pub-creator-link { color: var(--g-coral-700, #d94545); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.gp-pub-creator-link:hover { color: var(--g-coral-500, #ff7979); }
.gp-pub-creator-indep { font-style: italic; }

/* Intention */
.gp-pub-intention { margin: 0 0 var(--g-space-5, 20px); font-size: 16px; color: var(--g-ink, #1f2330); }
.gp-pub-intention em { color: var(--g-ink-muted, #5b6172); }

/* Widgets Besoins / Offre */
.gp-io-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-space-4, 16px); margin-bottom: var(--g-space-6, 24px); }
@media (max-width: 768px) { .gp-io-row { grid-template-columns: 1fr; } }
.gp-io-widget { border-radius: var(--g-radius-md, 12px); padding: 18px 20px; }
.gp-io-needs { background: var(--gp-needs-bg); color: var(--gp-needs-fg); }
.gp-io-offer { background: var(--gp-offer-bg); color: var(--gp-offer-fg); }
.gp-io-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.gp-io-list { margin: 0; padding-left: 18px; }
.gp-io-list li { margin: 4px 0; line-height: 1.45; }
.gp-io-empty { margin: 0; opacity: 0.55; font-size: 18px; text-align: center; }

/* Résumé + Projets */
.gp-pub-h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--g-ink, #1f2330); opacity: 0.65; font-weight: 700; margin: 0 0 10px; }
.gp-pub-summary { margin-bottom: var(--g-space-6, 24px); }
.gp-pub-summary-text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--g-ink, #1f2330); }

.gp-pub-projects { margin-bottom: var(--g-space-6, 24px); }
.gp-pub-proj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gp-pub-proj-link { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 8px; border-radius: 8px; transition: background 120ms ease; }
.gp-pub-proj-link:hover { background: var(--g-coral-50, #fff5f6); }
.gp-pub-proj-thumb { width: 48px; height: 48px; border-radius: 8px; background: var(--g-surface-2, #faf6f3) center/cover no-repeat; flex-shrink: 0; }
.gp-pub-proj-title { color: var(--g-coral-700, #d94545); font-weight: 500; }
.gp-pub-proj-link:hover .gp-pub-proj-title { text-decoration: underline; }

/* =========================================================
 * Projet avancé (gproject + kind=avance) — sections additionnelles /pin (ADR-158).
 *  Porté par liste mixte → réutilise .gp-pub-creator / .gp-pub-creator-link.
 *  Projets portés (fiche structure) → réutilise .gp-pub-projects.
 * ========================================================= */
.gp-pub-enjeux { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--g-space-5, 20px); }
.gp-pub-enjeux .gp-cat-badge { margin-left: 0; } /* gap gère l'espacement */
.gp-pub-supported { margin-bottom: var(--g-space-6, 24px); }

/* =========================================================
 * Structure (entity) — fiche publique dédiée (Mission + champs + contact).
 * ========================================================= */
.gp-struct-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--g-space-5, 20px); }
.gp-struct-mission { margin-bottom: var(--g-space-6, 24px); }

/* Tâche finitions — Structure : aérer entre la ligne d'adresse (📍 .gp-pub-loc,
   rendue par girafe-pages) et les pills d'enjeux, et grossir les pills d'un cran.
   Scopé .gp-pub-entity → n'affecte QUE les structures. */
.gp-pub-entity .gp-pub-loc { margin-bottom: 18px; }
.gp-pub-entity .gp-struct-badges { margin-top: 6px; }
.gp-pub-entity .gp-struct-badges .gp-cat-badge { font-size: 14px; padding: 3px 12px; }

.gp-struct-details {
  margin: 0 0 var(--g-space-6, 24px); padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.gp-struct-detail { display: flex; gap: 12px; align-items: baseline; }
.gp-struct-detail dt {
  flex: 0 0 auto; min-width: 140px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--g-ink, #1f2330); opacity: 0.6;
}
.gp-struct-detail dd { margin: 0; font-size: 16px; color: var(--g-ink, #1f2330); }
@media (max-width: 600px) {
  .gp-struct-detail { flex-direction: column; gap: 2px; }
  .gp-struct-detail dt { min-width: 0; }
}

.gp-struct-contact { margin-bottom: var(--g-space-6, 24px); }
.gp-struct-email { margin: 0 0 12px; font-size: 16px; }
.gp-struct-email a { color: var(--g-coral-700, #d94545); text-decoration: underline; text-underline-offset: 3px; }
.gp-struct-email a:hover { color: var(--g-coral-500, #ff7979); }
.gp-struct-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.gp-struct-link {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  background: var(--g-surface-2, #faf6f3); border: 1px solid rgba(0,0,0,0.06);
  color: var(--g-ink, #1f2330); font-weight: 600; font-size: 14px;
  text-decoration: none; transition: background 120ms ease, border-color 120ms ease;
}
.gp-struct-link:hover { background: #fff; border-color: rgba(0,0,0,0.18); }

/* =========================================================
 * Phase 4.4bis — alignement pages owner sur la structure publique
 * ========================================================= */
/* Séparateur "Autres réglages" */
.gp-owner-settings-sep {
  margin: var(--g-space-8, 32px) 0 var(--g-space-3, 12px);
  padding-top: var(--g-space-5, 20px);
  border-top: 1px solid var(--g-line, rgba(31,35,48,0.08));
}
.gp-owner-settings-title {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--g-ink, #1f2330);
  font-weight: 700;
  opacity: 0.65;
}
.gp-owner-settings-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--g-ink-muted, #5b6172);
}

/* Cards Besoins / Offre en mode owner : reprennent les teintes des widgets
   publics (vert sage / bleu poudré) tout en gardant l'éditabilité (bouton Modifier). */
.gp-mode-owner .gp-section[data-section="besoins"] {
  background: var(--gp-needs-bg, #e5ede8);
  border-color: transparent;
}
.gp-mode-owner .gp-section[data-section="offres"] {
  background: var(--gp-offer-bg, #e5eaf0);
  border-color: transparent;
}
.gp-mode-owner .gp-section[data-section="besoins"] .gp-section-label { color: var(--gp-needs-fg, #3a4d3f); opacity: 1; }
.gp-mode-owner .gp-section[data-section="offres"]  .gp-section-label { color: var(--gp-offer-fg, #2f4452); opacity: 1; }