/* ============================================================================
   cp-ui.css — Bibliothèque visuelle unique « Copains Poilus »
   Source de vérité de la charte graphique. Toute page / refonte DOIT charger
   ce fichier et réutiliser ses composants (.cp-*). Ne pas redéfinir ces
   valeurs ailleurs : on modifie ici, et tout le site suit.

   Référence d'origine : faire-une-demande.html (validée par le client).
   Accent rose UNIQUE. Turquoise réservé au succès. Logo = identité de marque
   (turquoise+orange+rose), non concerné par ces règles d'accent UI.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS
---------------------------------------------------------------------------- */
:root{
  /* Couleurs */
  --cp-accent:#E8264A;                    /* rose — accent unique            */
  --cp-accent-dark:#C91E3C;               /* hover / active                  */
  --cp-accent-tint:#FFF5F8;               /* surface active très claire      */
  --cp-accent-ring:rgba(232,38,74,.12);   /* halo de focus                   */
  --cp-success:#0BB4A0;                    /* turquoise — succès uniquement   */
  --cp-success-tint:#E7F8F4;
  --cp-ink:#14223A;                        /* bleu marine — titres            */
  --cp-text:#3F4756;                       /* corps de texte                  */
  --cp-muted:#6B7280;                      /* gris doux — texte secondaire    */
  --cp-placeholder:#9AA1AC;                /* placeholder des champs          */
  --cp-bg:#FFFBF4;                         /* fond général beige très clair   */
  --cp-surface:#FFFFFF;                    /* cartes / formulaires            */
  --cp-surface-2:#FBFAF7;                  /* surface alternative très douce  */
  --cp-border:rgba(20,34,58,.10);          /* bordure très légère             */
  --cp-border-strong:rgba(20,34,58,.18);   /* bordure au survol               */

  /* Rayons */
  --cp-radius-card:18px;
  --cp-radius-field:12px;
  --cp-radius-pill:999px;

  /* Ombres */
  --cp-shadow-sm:0 2px 10px rgba(20,20,35,.05);
  --cp-shadow-md:0 14px 34px rgba(20,20,35,.08);

  /* Espacement & champs */
  --cp-pad-card:24px;
  --cp-gap:16px;
  --cp-field-h:44px;
  --cp-field-pad:11px 14px;

  /* Typo */
  --cp-font:'Nunito',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}

/* ----------------------------------------------------------------------------
   2. TITRES / TEXTES UTILITAIRES
   (classes opt-in : ne touchent pas les h1/h2 globaux pour migrer sans casse)
---------------------------------------------------------------------------- */
.cp-title{font-family:var(--cp-font);color:var(--cp-ink);font-weight:800;line-height:1.2;letter-spacing:-.01em;margin:0;}
.cp-subtitle{font-family:var(--cp-font);color:var(--cp-muted);font-weight:600;line-height:1.5;margin:0;}
.cp-text{color:var(--cp-text);line-height:1.6;}
.cp-muted{color:var(--cp-muted);}
.cp-accent-text{color:var(--cp-accent);}

/* ----------------------------------------------------------------------------
   3. CARTES / PANNEAUX / FORMULAIRES
---------------------------------------------------------------------------- */
.cp-card{
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:var(--cp-radius-card);
  box-shadow:var(--cp-shadow-sm);
  padding:var(--cp-pad-card);
}
.cp-card--flush{padding:0;overflow:hidden;}      /* carte sans padding (ex. listes) */
.cp-card__head{
  padding:18px 24px;
  border-bottom:1px solid var(--cp-border);
}
.cp-card__body{padding:24px;}

/* ----------------------------------------------------------------------------
   3b. EN-TÊTE DE PAGE — modèle commun de l'espace compte (« Publier une demande »)
   Conteneur blanc, bord rose très clair, ombre légère, icône ronde rose à
   gauche, titre marine + sous-titre gris, pattes décoratives à droite.
   Usage :
     <div class="cp-pagehead">
       <div class="cp-pagehead__icon"><svg…/></div>
       <div class="cp-pagehead__body">
         <h1 class="cp-pagehead__title">Titre</h1>
         <p class="cp-pagehead__sub">Sous-titre…</p>
       </div>
       <div class="cp-pagehead__deco" aria-hidden="true"><svg paw/><svg paw/></div>
     </div>
---------------------------------------------------------------------------- */
.cp-pagehead{display:flex;align-items:center;gap:18px;background:var(--cp-surface);border:1px solid rgba(232,38,74,.12);border-radius:var(--cp-radius-card);box-shadow:var(--cp-shadow-sm);padding:22px 26px;margin-bottom:22px;position:relative;overflow:hidden;}
.cp-pagehead__icon{flex:0 0 auto;width:64px;height:64px;border-radius:50%;background:var(--cp-accent-tint);display:flex;align-items:center;justify-content:center;color:var(--cp-accent);}
.cp-pagehead__icon svg{width:32px;height:32px;}
.cp-pagehead__body{flex:1;min-width:0;}
.cp-pagehead__title{font-family:var(--cp-font);font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:800;color:var(--cp-ink);margin:0;line-height:1.15;letter-spacing:-.01em;}
.cp-pagehead__sub{font-size:.95rem;color:var(--cp-muted);font-weight:600;margin:4px 0 0;line-height:1.45;}
.cp-pagehead__deco{flex:0 0 auto;display:flex;gap:8px;color:var(--cp-accent);opacity:.45;margin-left:auto;}
.cp-pagehead__deco svg{width:30px;height:30px;}
@media(max-width:640px){.cp-pagehead{padding:18px;gap:14px;}.cp-pagehead__icon{width:54px;height:54px;}.cp-pagehead__icon svg{width:27px;height:27px;}.cp-pagehead__deco{display:none;}}

/* ── Bouton retour unifié (utilisé sur toutes les sous-pages) ──────────────── */
/* Bouton « Retour » — pilule premium unifiée (source : .cp-back de la vitrine). */
.cp-back-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--cp-border);color:var(--cp-ink);font-family:inherit;font-weight:800;font-size:.9rem;padding:9px 16px 9px 12px;border-radius:999px;text-decoration:none;cursor:pointer;box-shadow:0 2px 8px rgba(20,20,35,.05);transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s;margin-bottom:6px;line-height:1;}
.cp-back-btn:hover,.cp-back-btn:focus-visible{color:var(--cp-ink);transform:translateX(-2px);box-shadow:0 8px 18px rgba(20,20,35,.10);outline:none;}
.cp-back-btn:active{transform:translateX(-1px) scale(.99);}
.cp-back-btn svg{flex-shrink:0;width:18px;height:18px;}

/* ----------------------------------------------------------------------------
   4. CHAMPS DE FORMULAIRE
---------------------------------------------------------------------------- */
.cp-label{
  display:block;
  font-family:var(--cp-font);
  font-weight:700;
  color:var(--cp-ink);
  font-size:.92rem;
  margin-bottom:6px;
}
.cp-label .cp-req{color:var(--cp-accent);}      /* astérisque obligatoire */

.cp-input,
.cp-textarea,
.cp-select{
  width:100%;
  font-family:var(--cp-font);
  font-size:.95rem;
  color:var(--cp-ink);
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:var(--cp-radius-field);
  padding:var(--cp-field-pad);
  transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none;appearance:none;
}
.cp-input,
.cp-select{min-height:var(--cp-field-h);}
.cp-textarea{min-height:120px;resize:vertical;line-height:1.5;}

.cp-input::placeholder,
.cp-textarea::placeholder{color:var(--cp-placeholder);opacity:1;}

.cp-input:focus,
.cp-textarea:focus,
.cp-select:focus{
  outline:none;
  border-color:var(--cp-accent);
  box-shadow:0 0 0 3px var(--cp-accent-ring);
}
.cp-input:disabled,
.cp-textarea:disabled,
.cp-select:disabled{background:var(--cp-surface-2);color:var(--cp-muted);cursor:not-allowed;}

.cp-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}

.cp-field{margin-bottom:var(--cp-gap);}
.cp-hint{font-size:.82rem;color:var(--cp-muted);margin-top:6px;line-height:1.4;}
.cp-field--error .cp-input,
.cp-field--error .cp-textarea,
.cp-field--error .cp-select{border-color:var(--cp-accent);}
.cp-error{font-size:.82rem;color:var(--cp-accent);margin-top:6px;font-weight:600;}

/* cases / radios : accent rose */
.cp-input[type=checkbox],
.cp-input[type=radio],
.cp-check{accent-color:var(--cp-accent);width:auto;min-height:0;}

/* ----------------------------------------------------------------------------
   5. BOUTONS — un style principal, un style secondaire
---------------------------------------------------------------------------- */
.cp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:var(--cp-field-h);
  padding:0 22px;
  font-family:var(--cp-font);
  font-size:.95rem;
  font-weight:800;
  line-height:1;
  border-radius:var(--cp-radius-pill);
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cp-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--cp-accent-ring);}
.cp-btn:disabled,.cp-btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none;}

/* Principal */
.cp-btn--primary{
  background:var(--cp-accent);
  color:#fff;
  box-shadow:0 8px 22px rgba(232,38,74,.24);
}
.cp-btn--primary:hover{background:var(--cp-accent-dark);transform:translateY(-1px);box-shadow:0 10px 26px rgba(232,38,74,.30);}
.cp-btn--primary:active{transform:translateY(0);}

/* Secondaire */
.cp-btn--secondary{
  background:var(--cp-surface);
  color:var(--cp-ink);
  border-color:var(--cp-border);
}
.cp-btn--secondary:hover{border-color:var(--cp-ink);transform:translateY(-1px);}

/* Variantes utilitaires de taille / largeur */
.cp-btn--sm{height:36px;padding:0 16px;font-size:.86rem;}
.cp-btn--lg{height:52px;padding:0 30px;font-size:1.02rem;}
.cp-btn--block{display:flex;width:100%;}

/* ----------------------------------------------------------------------------
   6. ÉTAPES / ONGLETS (stepper) — repris de la page de référence
---------------------------------------------------------------------------- */
.cp-steps{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;}
.cp-step{
  flex:1;min-width:90px;
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  border-radius:var(--cp-radius-field);
  cursor:pointer;transition:.15s;
}
.cp-step__num{
  width:24px;height:24px;border-radius:50%;
  background:#EDEFF2;color:var(--cp-muted);
  font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.cp-step__label{font-size:12px;font-weight:800;color:var(--cp-muted);white-space:nowrap;}
.cp-step.is-active{border-color:var(--cp-accent);background:var(--cp-accent-tint);}
.cp-step.is-active .cp-step__num{background:var(--cp-accent);color:#fff;}
.cp-step.is-active .cp-step__label{color:var(--cp-accent);}
.cp-step.is-done .cp-step__num{background:var(--cp-success);color:#fff;}
@media(max-width:680px){.cp-step__label{display:none;}.cp-step{flex:0 0 auto;min-width:0;padding:9px;}}

/* ----------------------------------------------------------------------------
   7. BADGES / PASTILLES
---------------------------------------------------------------------------- */
.cp-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--cp-font);
  font-size:.74rem;font-weight:800;
  padding:3px 10px;border-radius:var(--cp-radius-pill);
  background:#F1F2F4;color:var(--cp-muted);
  line-height:1.4;
}
.cp-badge--accent{background:var(--cp-accent-tint);color:var(--cp-accent);}
.cp-badge--success{background:var(--cp-success-tint);color:var(--cp-success);}

/* Badges de STATUT de rôle (source : cp-badges.js) — owner / provider / pro */
.cp-rolebadge{display:inline-flex;align-items:center;gap:5px;font-family:var(--cp-font);font-size:.74rem;font-weight:800;padding:4px 11px;border-radius:var(--cp-radius-pill);line-height:1.4;white-space:nowrap;}
.cp-rolebadge--owner{background:#EEF2F7;color:var(--cp-muted);}
.cp-rolebadge--provider{background:var(--cp-accent-tint);color:var(--cp-accent);}
.cp-rolebadge--pro{background:#EDE9FE;color:#6D28D9;}
.cp-rolebadge--pending{background:#FEF3C7;color:#92400E;}
.cp-rolebadge--verified{background:var(--cp-success-tint);color:#0A6B5F;}
.cp-rolebadge--accent{background:var(--cp-accent-tint);color:var(--cp-accent);}
.cp-rolebadge--osm{background:#EAF1EC;color:#3A7D5B;}
/* Badge de source cliquable (ouvre la localisation sur OpenStreetMap) */
.cp-rolebadge--link{cursor:pointer;transition:filter .15s,transform .15s,box-shadow .15s;text-decoration:none;}
.cp-rolebadge--link:hover{filter:brightness(.96);transform:translateY(-1px);box-shadow:0 3px 8px rgba(20,34,58,.12);}
.cp-rolebadge--link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--cp-accent-ring);}

/* ----------------------------------------------------------------------------
   8. DIVERS
---------------------------------------------------------------------------- */
.cp-divider{height:1px;background:var(--cp-border);border:0;margin:20px 0;}
.cp-link{color:var(--cp-accent);font-weight:700;text-decoration:none;}
.cp-link:hover{text-decoration:underline;}

/* ----------------------------------------------------------------------------
   9. ANNUAIRE — correctif responsif du header (partagé, 737 pages)
   ----------------------------------------------------------------------------
   Les pages annuaire ont leur <style> inline dans le <head> ET chargent
   cp-ui.css APRÈS (dans le <body>) : cette règle gagne donc la cascade et
   corrige les 737 pages existantes + futures sans régénération.
   À ≤360px, le header (logo + « 🛍️ Boutique » + « ← Annuaire ») débordait
   d'une vingtaine de px. On compacte padding/gap/boutons sur ces écrans.
---------------------------------------------------------------------------- */
@media(max-width:360px){
  .ann-header{padding-left:12px;padding-right:12px;gap:8px;}
  .ann-header__back{padding-left:11px;padding-right:11px;font-size:.78rem;}
}

/* ----------------------------------------------------------------------------
   10. SÉLECTEUR DE LANGUE (header annuaire / agenda) — anti « FR FR »
   ----------------------------------------------------------------------------
   Le trigger affiche l'emoji drapeau 🇫🇷 + le code « FR ». Sur Windows/Chrome
   les emojis drapeaux ne sont pas rendus → 🇫🇷 s'affiche « FR », d'où le doublon
   « FR FR ». On masque l'emoji redondant (le code « FR » est fiable cross-OS).
   Spécificité .annh__lang-btn .annh__lang-flag (0,2,0) → bat la règle inline.
   Les drapeaux du menu déroulant (accompagnés du nom de langue) restent.
---------------------------------------------------------------------------- */
.annh__lang-btn .annh__lang-flag{display:none;}