/* ============================================================
   Cogestim — Widget de contact flottant
   Feuille partagée : intégration vivante (home) + planche d'états.
   Préfixe .cw-  (structure) ; les VALEURS viennent des tokens globaux.

   §8 TRANCHÉ : namespace parallèle --cw-* supprimé. Ce fichier ne définit
   plus aucune couleur/ombre/rayon : il référence cogestim-design-tokens.css
   (chargé par la page). Source unique. Le dégradé du widget est --grad-45 (45°).

   ⭑ AMENDEMENT 29/09 — états fermés & horaires (planche
   design/reference/Contact-widget-etats-fermes.html). Règles touchées,
   toutes repérées « ⭑ 29/09 » ci-dessous :
     1. avatar 50px FAB + panneau, portrait cadré haut (report de l'état réel) ;
     2. mobile : la ligne d'état de la pastille n'est plus masquée ;
     3. .cw-foot sort de l'écran « home » (pied de l'écran d'entrée :
        home en ouvert, message en fermé) et accueille le dépliant horaires ;
     4. .cw-hours-tg / .cw-hours (dépliant + table) — seuls éléments nouveaux ;
     5. .cw-panel plafonné en desktop (défilement interne).
   ⭑ 29/09 (Luis) : rappel retiré du widget — .cw-form__row n'a plus de
   consommateur dans le widget (ex-écran rappel), conservé : utilitaire de
   mise en page, retrait à trancher au prochain nettoyage.
   Aucun token nouveau, aucun rayon nouveau.
   ============================================================ */
.cw{
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
.cw *{box-sizing:border-box}
.cw a{color:inherit;text-decoration:none}
/* ⭑ Passe 8 (fix 2) : PLUS de reset générique `.cw button{...}`. Un
   `:not(.circle-cta):not(.btn)` semblait exclure proprement les composants
   LIBRARY, mais chaque `:not()` AJOUTE un cran de spécificité au sélecteur
   qui le porte — la version "exclusion" finissait donc plus spécifique que
   `.cw button.cw-fab` elle-même et lui écrasait son fond opaque (2e bug,
   même cause profonde). Chaque bouton interne du widget s'auto-suffit
   désormais (font/color/cursor posés sur son propre sélecteur, voir
   .cw-fab / .cw-close / .cw-action / .cw-ghostbtn ci-dessous) : plus
   aucun reset partagé à maintenir en synchronisation avec la LIBRARY. */

/* ====================== ANCRAGE ====================== */
.cw-root{
  position:fixed;right:clamp(18px,2.4vw,34px);bottom:clamp(18px,2.4vw,34px);
  z-index:1200;display:flex;flex-direction:column;align-items:flex-end;gap:16px;
}

/* ====================== BOUTON FLOTTANT (FERMÉ) ====================== */
/* — Direction A : humaine (pilule visage + label) — */
.cw-fab{
  position:relative;display:inline-flex;align-items:center;gap:13px;
  font:inherit;cursor:pointer;
  padding:9px 22px 9px 11px;border-radius:var(--radius-pill);
  background:var(--cog-paper);color:var(--cog-ink);
  box-shadow:var(--shadow-widget-fab);
  border:1px solid rgba(26,26,31,.06);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change:transform;
}
.cw-fab:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(26,26,31,.46),0 4px 12px -4px rgba(26,26,31,.24)}
.cw-fab:focus-visible{outline:2px solid var(--cog-red);outline-offset:3px}
.cw-fab:active{transform:translateY(0)}

.cw-fab__avatars{position:relative;display:flex;flex-shrink:0}
/* ⭑ 29/09 : 38 → 50px (état réel porté) */
.cw-fab__avatars .cw-av{width:50px;height:50px;margin-left:-12px;border:2.5px solid var(--cog-paper)}
.cw-fab__avatars .cw-av:first-child{margin-left:0}
.cw-fab__text{display:flex;flex-direction:column;line-height:1.15;text-align:left;padding-right:4px}
.cw-fab__text .t{font-weight:600;font-size:15px;letter-spacing:-.005em}
.cw-fab__text .s{font-size:12px;color:var(--cog-ink-soft);display:flex;align-items:center;gap:6px;margin-top:1px}

/* — Direction B : sobre (rond compact, icône) — */
.cw-fab--compact{padding:0;width:62px;height:62px;border-radius:var(--radius-full);justify-content:center;background:var(--cog-ink);color:var(--cog-paper)}
.cw-fab--compact:hover{filter:brightness(1.18)}   /* éclaircit --cog-ink au survol — plus de teinte privée en dur */
.cw-fab--compact .cw-fab__icon{width:24px;height:24px;display:block}
.cw-fab--compact .cw-fab__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6}
/* pastille dispo sur la version ronde */
.cw-fab--compact .cw-fab__dot{position:absolute;top:6px;right:6px}

/* pastille de disponibilité (commune) */
.cw-fab__dot,.cw-dot{
  width:9px;height:9px;border-radius:var(--radius-full);background:var(--color-success);flex-shrink:0;
  box-shadow:0 0 0 3px var(--cog-paper);position:relative;
}
.cw-dot--sm{width:8px;height:8px;box-shadow:0 0 0 2px var(--cog-paper-warm)}
.cw-dot--off{background:var(--cog-ink-mute)!important}
.cw-dot--off::after{display:none!important}
.cw-dot::after,.cw-fab__dot::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius-full);background:var(--color-success);
  animation:cw-pulse 2.4s ease-out infinite;
}
.cw-fab--closed .cw-dot,.cw-fab--closed .cw-fab__dot{background:var(--cog-ink-mute);box-shadow:0 0 0 3px var(--cog-paper)}
.cw-fab--closed .cw-dot::after,.cw-fab--closed .cw-fab__dot::after{display:none}
@keyframes cw-pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.cw-dot::after,.cw-fab__dot::after{animation:none}}

/* avatar générique (photo ou initiales) */
.cw-av{
  width:44px;height:44px;border-radius:var(--radius-full);overflow:hidden;flex-shrink:0;
  background:var(--cog-paper-deep);display:flex;align-items:center;justify-content:center;
  position:relative;
}
/* ⭑ 29/09 : portrait cadré haut (précédent .tc .portrait §2.14 : center 14%) */
.cw-av img,.cw-av image-slot{width:100%;height:100%;display:block;border-radius:var(--radius-full);object-fit:cover;object-position:center 14%}
.cw-av--initials{
  font-weight:600;color:var(--cog-white);font-size:15px;letter-spacing:.01em;
  background:var(--cog-ink);
}
.cw-av--initials.t2{background:linear-gradient(145deg,var(--cog-avatar-mauve),var(--cog-ink-soft))}
.cw-av--initials.t3{background:linear-gradient(145deg,var(--cog-rose-deep),var(--cog-red))}
/* silhouette douce pour slot vide */
.cw-av--ghost{background:var(--cog-paper-deep)}
.cw-av--ghost svg{width:58%;height:58%;color:var(--cog-sand)}

/* ====================== PANNEAU ====================== */
.cw-panel{
  width:392px;max-width:calc(100vw - 28px);
  background:var(--cog-paper);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-widget);overflow:hidden;
  border:1px solid rgba(26,26,31,.05);
  transform-origin:bottom right;
  /* ⭑ 29/09 : plafond desktop = fenêtre − 2 marges d'ancrage (.cw-root),
     défilement interne — l'en-tête (réouverture) ne sort jamais par le haut */
  max-height:calc(100vh - 2 * clamp(18px,2.4vw,34px));overflow-y:auto;
}
/* zone humaine (haut) — claire et sobre */
.cw-panel__head{
  position:relative;background:var(--cog-paper);
  padding:20px 50px 18px 22px;border-bottom:1px solid var(--cog-rule-soft);
}
.cw-team{display:flex;align-items:center;gap:0;margin-bottom:14px}
/* ⭑ 29/09 : 46 → 50px (état réel porté) */
.cw-team .cw-av{width:50px;height:50px;margin-left:-14px;border:3px solid var(--cog-paper)}
.cw-team .cw-av:first-child{margin-left:0}
.cw-team__avail{
  margin-left:14px;display:flex;flex-direction:column;gap:3px;line-height:1.3;
}
.cw-team__avail .on{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--cog-ink)}
.cw-team__avail .meta{font-size:11.5px;color:var(--cog-ink-soft)}
.cw-panel__title{font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--cog-ink);margin:0}
.cw-panel__sub{font-size:13.5px;line-height:1.5;color:var(--cog-ink-soft);margin:6px 0 0;max-width:42ch}

.cw-close{
  position:absolute;top:15px;right:15px;width:30px;height:30px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;color:var(--cog-ink-mute);
  font:inherit;cursor:pointer;padding:0;border:0;
  background:none;transition:color .25s ease,background .25s ease;
}
.cw-close:hover{color:var(--cog-ink);background:var(--cog-paper-warm)}
.cw-close:focus-visible{outline:2px solid var(--cog-red);outline-offset:2px}
.cw-close svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;display:block}

/* ---- corps : actions (liste plate) ---- */
.cw-body{padding:10px 16px 8px}
.cw-actions{display:flex;flex-direction:column;gap:0}

.cw-action{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  font:inherit;color:inherit;cursor:pointer;
  padding:11px 6px;border:0;border-radius:var(--radius-sm);background:none;
  transition:color .25s ease;
}
.cw-action:focus-visible{outline:2px solid var(--cog-red);outline-offset:2px}
.cw-action__chip{
  width:28px;height:24px;flex-shrink:0;
  display:flex;align-items:center;justify-content:flex-start;
  border:0;background:none;color:var(--cog-ink);
  transition:color .25s ease;
}
.cw-action__chip svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4}
.cw-action__body{flex:1;min-width:0}
.cw-action__body .t{display:block;font-size:15px;font-weight:600;color:var(--cog-ink);line-height:1.25;letter-spacing:-.005em;transition:color .25s ease}
.cw-action__body .s{display:none}
.cw-action__arrow{flex-shrink:0;color:var(--cog-ink-mute);transition:transform .3s ease,color .3s ease}
.cw-action__arrow svg{width:18px;height:10px;stroke:currentColor;fill:none;stroke-width:1.4}
.cw-action:hover .cw-action__body .t{color:var(--cog-red)}
.cw-action:hover .cw-action__arrow{transform:translateX(4px);color:var(--cog-red)}

/* action primaire — hiérarchie discrète : icône en couleur charte */
.cw-action--primary .cw-action__chip{color:var(--cog-red)}
.cw-action--primary .cw-action__arrow{color:var(--cog-red)}

/* ---- pied : agence + horaires ----
   ⭑ 29/09 : le pied est désormais un enfant du PANNEAU (après .cw-body),
   affiché sur l'écran d'entrée (home ouvert, message fermé) ; margin 0 16px reproduit exactement
   l'ancien retrait (il vivait dans .cw-body, padding 16px). flex-wrap pour
   laisser la table d'horaires passer à la ligne sous le déclencheur. */
.cw-foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:13px 21px 15px;
  font-size:12px;color:var(--cog-ink-soft);border-top:1px solid var(--cog-rule-soft);
  margin:0 16px;
}
.cw-foot[hidden]{display:none}
.cw-foot .cw-dot{box-shadow:none;width:7px;height:7px}
.cw-foot .cw-dot::after{display:none}
.cw-foot b{font-weight:600;color:var(--cog-ink)}
.cw-foot.is-closed .cw-dot{background:var(--cog-ink-mute)}
/* fermé : la ligne d'état est portée par l'en-tête, le pied ne garde que le dépliant */
.cw-foot.is-closed > .cw-dot,.cw-foot.is-closed > #cwFootTxt{display:none}

/* ⭑ 29/09 — NOUVEAU · déclencheur du dépliant horaires.
   Dérivé de .faq-q §2.24 (texte encre, survol --red, :focus-visible
   --cog-focus-ring) + chevron-down du catalogue (seul glyphe de disclosure
   texte, rotation 180° à l'ouverture comme .readmore). Pas un CTA : aucun
   fond, aucun trait, aucune pilule. */
.cw-hours-tg{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font:inherit;font-size:12px;font-weight:600;color:var(--cog-ink);
  background:none;border:0;padding:4px 0;cursor:pointer;border-radius:2px;
  transition:color .25s ease;
}
.cw-foot.is-closed .cw-hours-tg{margin-left:0}
.cw-hours-tg:hover{color:var(--cog-red)}
.cw-hours-tg:focus-visible{outline:none;box-shadow:var(--cog-focus-ring)}
.cw-hours-tg svg{width:var(--icon-sm);height:var(--icon-sm);stroke:currentColor;fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.cw-hours-tg[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ⭑ 29/09 — NOUVEAU · table d'horaires de la semaine.
   Anatomie .ag-hours §2.16 (jours en encre 500, plages --ink-soft, format
   canonique §5 : jours abrégés, plages au slash, notation « h »), portée à
   la taille légende du pied (12.5px = .tel-block .hours). Jour courant :
   pastille .cw-dot du pied (vert = ouvert maintenant, gris = fermé) +
   abréviation du jour en 600. Exception du jour (férié / fermeture) en
   première rangée, la grille régulière n'est alors pas surlignée. */
.cw-hours{flex-basis:100%;margin:6px 0 0;border-collapse:collapse;font-size:12.5px;line-height:1.6;color:var(--cog-ink-soft)}
.cw-hours[hidden]{display:none}
.cw-root .cw-hours:not([hidden]){animation:cw-fadein .3s ease}
.cw-hours caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cw-hours td,.cw-hours th{padding:2px 0;vertical-align:baseline;text-align:left}
.cw-hours .d{width:7px;padding-right:10px}
.cw-hours .d .cw-dot{display:inline-block;vertical-align:1px}
.cw-hours th{font-weight:500;color:var(--cog-ink);white-space:nowrap;padding-right:16px}
.cw-hours th b{font-weight:600}
.cw-hours tr.is-today td{color:var(--cog-ink)}
.cw-hours tr.is-exc th,.cw-hours tr.is-exc td{color:var(--cog-ink);font-weight:600}
.cw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ====================== CHAMPS DE FORMULAIRE ======================
   ⭑ Passe 8 : .cw-fld / .cw-fld__lab / .cw-fld__in / .cw-fld-row et le
   paradigme mort .cw-field (jamais rendu par le JS) sont SUPPRIMÉS —
   remplacés par .field--boxed / .field-lab / .field-in (LIBRARY,
   cogestim-components.css §L1/L4). Le widget ne définit plus aucun style
   de champ localement. */

/* ====================== FORMULAIRE RAPPEL / MESSAGE ====================== */
.cw-form{display:none;flex-direction:column;gap:11px;padding:4px 1px 6px}
.cw-action.is-open + .cw-form,.cw-form.is-open{display:flex}
.cw-root .cw-form.is-open{animation:cw-slidein .35s ease}
@keyframes cw-slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* rangée 2 colonnes (ex-écran rappel, retiré 29/09) — utilitaire de mise
   en page uniquement, les champs eux-mêmes sont .field--boxed */
.cw-form__row{display:flex;gap:10px}
.cw-form__row > *{flex:1}

/* chips créneau : texte léger, souligné fin à l'actif */
.cw-slots{display:flex;flex-wrap:wrap;gap:4px 18px}
.cw-slot{
  position:relative;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--cog-ink-mute);white-space:nowrap;padding:3px 0 5px;background:none;border:0;
  transition:color .2s ease;
}
.cw-slot::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;
  background:var(--cog-red);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.cw-slot:hover{color:var(--cog-ink-soft)}
.cw-slot.is-active{color:var(--cog-ink)}
.cw-slot.is-active::after{transform:scaleX(1)}

/* ⭑ Passe 9 (03/07, correctif fermeture) : plus aucune navigation retour
   dans la popup — la seule sortie est la fermeture (✕ / clic hors carte /
   Échap, câblés en JS). Le pied de formulaire ne porte donc que l'envoi
   (.btn LIBRARY, pleine largeur) et la ligne de réassurance, centrée en
   dessous, avec un padding bas propre pour ne pas coller au bord de carte. */
.cw-form__foot{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px;padding-bottom:4px}
/* .btn (LIBRARY) posé pleine largeur en contexte panneau — comme la fiche.
   Aucun style de .btn ici (règle library) : uniquement la mise en page. */
.cw-form__foot .btn{width:100%}
.cw-form__rea{text-align:center;font-size:11.5px;color:var(--cog-ink-mute);line-height:1.4;margin:0}

/* ====================== ÉTATS (chargement / envoyé / erreur) ====================== */
.cw-state{display:none;flex-direction:column;align-items:center;text-align:center;padding:30px 26px 34px}
.cw-state.is-on{display:flex}
.cw-root .cw-state.is-on{animation:cw-fadein .35s ease}
@keyframes cw-fadein{from{opacity:0}to{opacity:1}}
.cw-state__ic{width:58px;height:58px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cw-state__ic svg{width:26px;height:26px;stroke-width:1.8;fill:none}
.cw-state__t{font-size:18px;font-weight:600;color:var(--cog-ink);letter-spacing:-.01em;line-height:1.25}
.cw-state__s{font-size:13.5px;color:var(--cog-ink-soft);line-height:1.5;margin-top:8px;max-width:32ch}
.cw-state__act{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* envoyé */
.cw-state--sent .cw-state__ic{background:var(--color-success-soft);color:var(--color-success);stroke:var(--color-success)}
/* erreur */
.cw-state--error .cw-state__ic{background:var(--cog-rose-soft);color:var(--cog-red);stroke:var(--cog-red)}
/* chargement */
.cw-state--loading .cw-spin{
  width:42px;height:42px;border-radius:var(--radius-full);
  border:2.5px solid var(--cog-rule);border-top-color:var(--cog-red);
  animation:cw-rot .8s linear infinite;margin-bottom:18px;
}
@keyframes cw-rot{to{transform:rotate(360deg)}}
/* (l'écran « envoi en cours » garde le titre en heading par défaut) */

.cw-ghostbtn{
  font-family:inherit;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--cog-ink);padding:10px 18px;border-radius:var(--radius-sm);
  background:none;border:1px solid var(--cog-rule);transition:border-color .2s ease,background .2s ease;
}
.cw-ghostbtn:hover{border-color:var(--cog-ink);background:var(--cog-white)}
.cw-ghostbtn.is-tel{border-color:rgba(168,10,46,.4);color:var(--cog-red)}
.cw-ghostbtn.is-tel:hover{background:var(--cog-rose-soft);border-color:var(--cog-red)}

/* ====================== ANIMATION OUVERTURE ====================== */
.cw-panel{display:none}
.cw-root.is-open .cw-panel{display:block;animation:cw-pop .4s cubic-bezier(.2,.85,.25,1)}
.cw-root.is-open .cw-fab{display:none}
@keyframes cw-pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
/* ⭑ 29/09 : reduced-motion étendu au dépliant, au chevron et aux formulaires */
@media (prefers-reduced-motion:reduce){
  .cw-root.is-open .cw-panel,.cw-root .cw-hours:not([hidden]),.cw-root .cw-form.is-open,.cw-root .cw-state.is-on{animation:none}
  .cw-hours-tg svg,.cw-fab{transition:none}
}

/* scrim (mobile bottom sheet) */
.cw-scrim{
  position:fixed;inset:0;background:rgba(20,20,24,.42);z-index:1190;
  opacity:0;pointer-events:none;transition:opacity .35s ease;backdrop-filter:blur(1.5px);
}
.cw-root.is-open ~ .cw-scrim,.cw-scrim.is-on{opacity:1;pointer-events:auto}

/* ====================== MOBILE — BOTTOM SHEET ====================== */
@media (max-width:560px){
  .cw-root{left:0;right:0;bottom:0;align-items:stretch;gap:0;padding:0}
  .cw-fab{position:fixed;right:16px;bottom:16px}
  /* ⭑ 29/09 : la ligne d'état n'est PLUS masquée sur mobile. L'avatar 50px
     fixe déjà la hauteur de la pilule (68px) : la 2ᵉ ligne ne coûte aucune
     hauteur, et c'est la seule information de réouverture avant ouverture. */
  .cw-panel{
    width:100%;max-width:100%;
    border-radius:var(--radius-sm) var(--radius-sm) 0 0;
    transform-origin:bottom center;
    max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .cw-root.is-open .cw-panel{animation:cw-sheet .42s cubic-bezier(.2,.85,.25,1)}
  @keyframes cw-sheet{from{transform:translateY(100%)}to{transform:none}}
  .cw-panel__head{padding-top:26px}
  /* poignée bottom sheet */
  .cw-grip{display:block;position:absolute;top:9px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:var(--radius-pill);background:rgba(26,26,31,.16)}
  /* ⭑ 29/09 : cible tactile 44px pour le déclencheur horaires */
  .cw-hours-tg{min-height:44px}
  .cw-foot{padding-top:6px;padding-bottom:10px}
}
.cw-grip{display:none}

/* ====================== PLANCHE (mise en page maquette) ====================== */
/* styles utilisés uniquement par le fichier planche ; sans effet sur la home */
.cw-stage{position:relative}