/* ============================================================================
   composants.css — Bibliothèque de composants Design system Tierno
   Aligné sur l'écran de référence 6a (hi-fi). Préfixe .ds-* pour cohabiter
   avec l'existant pendant la migration. Ne dépend que de tokens.css.
   ============================================================================ */

/* ---- BOUTONS ---- */
.ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
    font-family:var(--police); font-size:14px; font-weight:var(--fw-fort); line-height:1;
    padding:10px 18px; border-radius:var(--r-btn); border:1px solid transparent; cursor:pointer;
    text-decoration:none; transition:filter var(--t-douce), transform var(--t-rapide), background var(--t-douce); }
.ds-btn--primaire   { background:var(--orange); color:#fff; }
.ds-btn--secondaire { background:var(--blanc); color:var(--brun); border-color:var(--btn-2-bord); }
.ds-btn--brun       { background:var(--brun); color:var(--ivoire); }
.ds-btn--lien       { background:transparent; color:var(--orange-fonce); padding:10px 6px; }
.ds-btn[disabled], .ds-btn--off { background:var(--btn-off-fond); color:var(--btn-off-texte); cursor:not-allowed; }
@media (hover:hover) {
    .ds-btn--primaire:hover, .ds-btn--brun:hover { filter:brightness(1.05); transform:translateY(-1px); }
    .ds-btn--secondaire:hover { background:var(--sable); }
    .ds-btn--lien:hover { color:var(--brun); }
}

/* ---- CHAMPS ---- */
.ds-champ { width:100%; box-sizing:border-box; height:42px; padding:0 14px; font-family:var(--police); font-size:13.5px;
    color:var(--encre); background:var(--champ-fond); border:1px solid var(--champ-bord); border-radius:var(--r-champ); outline:none; }
.ds-champ::placeholder { color:var(--muted); }
.ds-champ:focus { background:var(--blanc); border:1.5px solid var(--orange); box-shadow:0 0 0 3px var(--champ-focus-halo); }
textarea.ds-champ { height:auto; padding:13px 15px; line-height:1.5; resize:vertical; }

/* ---- CHIPS ---- */
.ds-chip { display:inline-flex; align-items:center; gap:.35rem; font-size:13px; font-weight:var(--fw-fort);
    color:var(--brun); background:var(--blanc); border:1px solid var(--chip-bord); border-radius:var(--r-pill); padding:7px 14px; cursor:pointer; }
.ds-chip--actif    { background:var(--brun); color:#fff; border-color:var(--brun); }
.ds-chip--compteur { background:var(--orange-chip); color:var(--orange-fonce); border-color:transparent; }

/* ---- BADGES D'ÉTAT ---- */
.ds-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:12px; font-weight:var(--fw-extra); line-height:1;
    padding:5px 11px; border-radius:var(--r-pill); border:1px solid transparent; white-space:nowrap; }
.ds-badge--valide  { color:var(--succes); background:var(--succes-fond); }
.ds-badge--valide::before  { content:"✓"; font-weight:900; }
.ds-badge--encours { color:var(--orange-fonce); background:var(--orange-chip); }
.ds-badge--encours::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.ds-badge--faire   { color:var(--muted); background:transparent; border:1px dashed #D8CDBF; padding:4px 11px; }

/* ---- ONGLETS SEGMENTÉS ---- */
.ds-segment { display:inline-flex; flex-wrap:wrap; gap:2px; background:var(--sable); padding:4px; border-radius:var(--r-md); }
.ds-segment button, .ds-segment .ds-seg { border:0; background:transparent; cursor:pointer; font-family:var(--police);
    font-size:12.5px; font-weight:var(--fw-fort); color:var(--texte-3); padding:7px 15px; border-radius:9px; transition:background var(--t-douce), color var(--t-douce); }
.ds-segment .actif { background:var(--blanc); color:var(--brun); box-shadow:0 1px 3px rgba(79,50,49,0.12); }

/* ---- BULLES DE CONVERSATION ---- */
.ds-bulle { max-width:80%; padding:9px 13px; font-size:14px; line-height:1.45; color:var(--encre); }
.ds-bulle--recue   { align-self:flex-start; background:var(--blanc); border-radius:14px 14px 14px 4px; box-shadow:var(--ombre-subtile); }
.ds-bulle--envoyee { align-self:flex-end;  background:var(--orange-chip); border-radius:14px 14px 4px 14px; }

/* ---- PASTILLES & NOTIFICATIONS ---- */
.ds-pastille { position:relative; width:36px; height:36px; border-radius:10px; background:var(--sable);
    display:inline-flex; align-items:center; justify-content:center; }
.ds-pastille__badge { position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box;
    border-radius:9px; background:var(--orange); color:#fff; font-size:10px; font-weight:var(--fw-extra); line-height:1;
    display:flex; align-items:center; justify-content:center; border:1.5px solid var(--blanc-casse); }
.ds-point { width:8px; height:8px; border-radius:50%; background:var(--orange); display:inline-block; }
.ds-nouveau { font-size:10.5px; font-weight:var(--fw-extra); letter-spacing:.06em; color:var(--orange-kicker);
    background:var(--nouveau-fond); border-radius:6px; padding:3px 8px; }

/* ---- BANDEAU COMPAGNON — « Tierno vous parle » ---- */
.ds-bandeau { display:flex; align-items:center; gap:15px; background:var(--brun); color:var(--ivoire); padding:20px 22px; border-radius:var(--r-lg); }
.ds-bandeau__avatar { position:relative; flex-shrink:0; width:54px; height:54px; border-radius:50%; background:var(--orange);
    display:flex; align-items:center; justify-content:center; color:var(--ivoire); box-shadow:0 0 0 4px rgba(247,90,0,0.15); }
.ds-bandeau__titre { font-size:20px; font-weight:var(--fw-marque); line-height:1.15; letter-spacing:-.01em; }
.ds-bandeau__sous  { font-size:13px; color:rgba(253,251,247,0.62); margin-top:3px; line-height:1.35; }

/* ---- CARTE DE CONTENU ---- */
.ds-carte { background:var(--blanc); border:1px solid var(--bord); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--ombre-subtile); }
.ds-carte--grande { background:var(--blanc-casse); border:0; border-radius:var(--r-xl); padding:30px 34px; box-shadow:var(--ombre-elevee); }
.ds-carte--active { border:1.5px solid var(--orange); box-shadow:0 10px 26px -12px rgba(247,90,0,0.30); }
.ds-carte__titre { font-family:var(--police); font-weight:var(--fw-marque); font-size:var(--fs-carte); color:var(--brun); margin:0 0 .4rem; }

/* ---- BARRE DE PROGRESSION ---- */
.ds-progress { display:flex; align-items:center; gap:12px; }
.ds-progress__piste { flex:1; height:9px; border-radius:6px; background:#F0EBE3; overflow:hidden; }
.ds-progress__barre { height:100%; border-radius:6px; background:var(--orange); transition:width .5s ease; }
.ds-progress__compteur { font-size:13px; font-weight:var(--fw-fort); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ds-progress__compteur b { color:var(--brun); font-size:20px; font-weight:var(--fw-marque); }

/* ---- TABLE / LISTE ZÉBRÉE ---- */
.ds-table-row { display:flex; align-items:center; padding:13px 14px; background:var(--blanc); cursor:pointer; transition:background var(--t-rapide); }
.ds-table-row:nth-child(even) { background:#FAF5EC; }
.ds-table-row:hover { background:#F3E9DB; }
.ds-table-row .ds-reuse { opacity:.55; transition:opacity var(--t-rapide); color:var(--orange-fonce); font-weight:var(--fw-fort); }
.ds-table-row:hover .ds-reuse { opacity:1; }

/* ---- ENTRÉE WHATSAPP DISCRÈTE ---- */
.ds-wa { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); text-decoration:none; cursor:pointer; }
.ds-wa strong { color:var(--texte-2); font-weight:var(--fw-fort); }

/* ---- BANDEAU D'AVERTISSEMENT IA (conformité) ---- */
.ds-avertissement { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--texte-2);
    background:var(--alerte-fond); border:1px solid var(--alerte-bord); border-left:4px solid var(--orange); border-radius:12px; padding:12px 16px; }
.ds-avertissement strong { color:var(--brun); font-weight:var(--fw-fort); }

/* Accessibilité : mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
    .ds-btn, .ds-progress__barre, .ds-segment button { transition:none !important; }
    .ds-btn:hover { transform:none !important; }
}

/* ===== Motif de page : description centrée + bloc « Comment ça marche » (réutilisable) ===== */
.pas-desc { max-width:760px; margin:.4rem auto 1.5rem; text-align:center; font-size:var(--fs-corps); color:var(--texte-2); line-height:var(--lh-corps); }
.pas-desc strong { color:var(--brun); font-weight:800; }
.pas-desc a { color:var(--orange-fonce); font-weight:700; text-decoration:none; }
.pas-desc a:hover { text-decoration:underline; }
.hub-cta { text-align:center; margin:-.6rem 0 1.6rem; }
.ccm { max-width:940px; margin:0 auto 1.7rem; background:var(--panneau); border:1px solid var(--bord-panneau); border-radius:var(--r-lg); padding:1.4rem 1.5rem; }
.ccm-titre { text-align:center; font-size:1.05rem; font-weight:800; color:var(--brun); margin:0 0 1.2rem; }
.ccm-cols { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.3rem; }
.ccm-col { text-align:center; }
.ccm-ic { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:var(--orange-tint); color:var(--orange-fonce); margin-bottom:.55rem; }
.ccm-ic svg { width:22px; height:22px; display:block; }
.ccm-lab { font-weight:800; color:var(--brun); font-size:var(--fs-corps); margin:0 0 .3rem; }
.ccm-txt { font-size:var(--fs-corps-2); color:var(--texte-3); line-height:1.5; margin:0; }
@media (max-width:700px) { .ccm-cols { grid-template-columns:1fr; gap:1rem; } }

/* ===== Onglets internes de page (« menu » interne, barre soulignée) ===== */
/* Carte enveloppe optionnelle */
.op-carte { background:var(--blanc-casse); border:1px solid var(--bord); border-radius:var(--r-xl); padding:1.4rem 1.5rem 1.6rem; box-shadow:var(--ombre-subtile); }
/* En-tête : titre (+ avatar) à gauche, action à droite (même niveau que les onglets) */
.op-entete { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.op-titre-bloc { display:flex; align-items:center; gap:.8rem; min-width:0; }
.op-avatar { width:48px; height:48px; flex-shrink:0; border-radius:50%; background:var(--orange-tint); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.op-h { font-size:1.4rem; font-weight:900; color:var(--brun); margin:0; letter-spacing:-.01em; }
.op-sous { font-size:var(--fs-corps-2); color:var(--texte-2); margin:.1rem 0 0; }
/* Barre d'onglets soulignés */
.op-tabs { display:flex; gap:1.6rem; align-items:center; border-bottom:1px solid var(--bord); margin:0 0 1.4rem; flex-wrap:wrap; }
.op-tab { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem 0; font-family:inherit; font-weight:700; font-size:var(--fs-corps);
    color:var(--texte-3); text-decoration:none; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.op-tab:hover { color:var(--brun); }
.op-tab.actif { color:var(--brun); border-bottom-color:#F75A00; }
.op-cpt { background:var(--sable); color:var(--texte-2); font-size:var(--fs-micro); font-weight:800; padding:.06rem .5rem; border-radius:var(--r-pill); }
.op-tab.actif .op-cpt { background:var(--orange-tint); color:var(--orange-fonce); }