/* ==================================================================
   ECSplicite — Volet lateral repliable (bord droit, toutes pages).
   Charte editoriale : Playfair (titres/marque/offres) + DM Sans (corps),
   rose / noir / beige. Variables de theme avec fallback (fonctionne sur
   tous les modeles : editorial, magazine, IA…). Aucune couleur en dur
   hors fallback. Charge globalement, rendu HTML seulement hors mode edition.

   COMPORTEMENT :
   - Desktop (>=1024px) : volet POUSSEUR, DEPLIE par defaut. Le contenu du site
     est decale a gauche (padding-right sur body). Le repli (classe
     .ecs-side-collapsed sur body) rend toute la largeur au site et fait
     revenir l'onglet.
   - Mobile / tablette (<1024px) : tiroir en SUPERPOSITION, REPLIE par defaut
     (classe .ecs-side-open sur body pour ouvrir), avec fond sombre.
   ================================================================== */
:root { --ecs-side-w: min(400px, 94vw); }
.ecs-side,
.ecs-side-tab,
.ecs-side-backdrop,
.ecs-side-wrap {
  --s-rose: var(--rose, #e91e63);
  --s-rose-f: var(--rose-fonce, #c2185b);
  --s-noir: var(--noir, #0d0d0d);
  --s-blanc: var(--blanc, #f5f2ed);
  --s-blanc-pur: var(--blanc-pur, #fff);
  --s-gris: var(--gris, #5a5a5a);
  --s-gris-clair: var(--gris-clair, #e2ddd5);
  --s-or: var(--or, #c9a84c);
  box-sizing: border-box;
}
.ecs-side *,
.ecs-side *::before,
.ecs-side *::after { box-sizing: border-box; }

/* --- Onglet declencheur : colle au bord droit, centre vertical --- */
.ecs-side-tab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 96;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 18px 9px;
  border: 0;
  cursor: pointer;
  background: var(--s-rose-f);
  color: #fff;
  border-radius: 14px 0 0 14px;
  box-shadow: -4px 8px 26px rgba(194, 24, 91, .34);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .2s, opacity .3s, transform .3s;
}
.ecs-side-tab:hover { background: var(--s-noir); }
.ecs-side-tab svg { width: 22px; height: 22px; display: block; }
.ecs-side-tab-txt { writing-mode: vertical-rl; }
body.ecs-side-open .ecs-side-tab {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(24px);
}

/* --- Wrapper plein ecran : CLIPPE le volet hors-champ (aucun scroll horizontal) --- */
.ecs-side-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 97;
}

/* --- Le volet --- */
.ecs-side {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--ecs-side-w);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background: var(--s-blanc-pur);
  color: var(--s-noir);
  box-shadow: -16px 0 48px rgba(13, 13, 13, .22);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .38s cubic-bezier(.16, .84, .44, 1), visibility .38s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Mobile / tablette : ouverture en superposition via .ecs-side-open sur body. */
body.ecs-side-open .ecs-side { transform: none; visibility: visible; }

/* --- En-tete : titre « Accès rapide » + croix ---
   Bandeau compact (fiche IT du 13/10/2026) : tout tient sans scroll a
   partir de 720px de haut sur ordinateur ; sur mobile, au moins
   l'assistant et les boutons d'action. */
.ecs-side-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 0 20px;
}
.ecs-side-head .ecs-side-h { margin: 0; }
.ecs-side-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--s-gris);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ecs-side-close:hover { background: var(--s-blanc); color: var(--s-noir); }

/* --- Corps --- */
.ecs-side-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 20px 20px;
}

/* --- 1. Assistant en ligne : element le plus visible du volet. Fond rose
   plein, picto casque rose sur rond blanc + pastille verte « en ligne ».
   Ouvre le meme chat que le bouton flottant (data-lt="chat"). --- */
.ecs-side-assist {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 13px 16px;
  background: var(--s-rose-f);
  border: 0;
  border-radius: 14px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background .2s;
}
.ecs-side-assist:hover,
.ecs-side-assist:focus-visible { background: var(--s-rose); }
.ecs-side-assist:focus-visible { outline: 3px solid var(--s-noir); outline-offset: 2px; }
.ecs-side-assist-av {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--s-rose-f);
  background: var(--s-blanc-pur);
}
.ecs-side-assist-av svg { width: 26px; height: 26px; }
.ecs-side-assist-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid var(--s-blanc-pur);
}
.ecs-side-assist-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ecs-side-assist-t {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}
.ecs-side-assist-cta {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  opacity: .9;
}

/* --- 2. Ligne de credibilite --- */
.ecs-side-cred {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--s-gris);
  text-align: center;
}

.ecs-side-sec { margin: 0; }
.ecs-side-h {
  position: relative;
  margin: 0 0 10px;
  padding-left: 34px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s-rose-f);
}
.ecs-side-h::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 2px;
  background: var(--s-rose);
  transform: translateY(-50%);
}

/* --- 3. Boutons d'action : pleine largeur, 44px mini, gris neutres ;
   contour + texte roses au survol / focus clavier seulement.
   « Mis en avant » (option de l'admin, aucun par defaut) = contour rose permanent. --- */
.ecs-side-btns { display: flex; flex-direction: column; gap: 8px; }
.ecs-side-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  text-align: left;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--s-gris-clair);
  background: var(--s-blanc);
  color: var(--s-noir);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.ecs-side-btn small {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--s-gris);
}
.ecs-side-btn:hover,
.ecs-side-btn:focus-visible {
  background: transparent;
  border-color: var(--s-rose-f);
  box-shadow: inset 0 0 0 .5px var(--s-rose-f);
  color: var(--s-rose-f);
}
.ecs-side-btn:hover small,
.ecs-side-btn:focus-visible small { color: var(--s-rose-f); }
.ecs-side-btn-primary {
  background: transparent;
  border: 1.5px solid var(--s-rose-f);
  color: var(--s-rose-f);
  font-weight: 700;
}
.ecs-side-btn-primary:hover {
  background: var(--s-rose-f);
  border-color: var(--s-rose-f);
  color: #fff;
}
.ecs-side-btn-primary:hover small { color: #fff; }

/* --- 4. Decouvrez notre offre : etiquettes --- */
.ecs-side-offre { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ecs-side-offre a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--s-gris-clair);
  border-radius: 999px;
  text-decoration: none;
  color: var(--s-noir);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  transition: color .18s, border-color .18s, background .18s;
}
.ecs-side-offre a:hover { border-color: var(--s-gris); background: var(--s-blanc); }

/* --- 5. Une question ? : un seul bouton telephone. Numero en clair sur
   ordinateur (>=1024px) ; sur mobile, le lien tel: suffit. --- */
.ecs-side-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--s-gris-clair);
  background: var(--s-blanc-pur);
  color: var(--s-noir);
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  transition: border-color .18s, background .18s;
}
.ecs-side-tel:hover { border-color: var(--s-gris); background: var(--s-blanc); }
.ecs-side-tel svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--s-rose-f); }
.ecs-side-tel-num { display: none; font-weight: 700; }
@media (min-width: 1024px) {
  .ecs-side-tel-num { display: inline; }
  .ecs-side-tel-num::before { content: '·'; margin-right: 8px; font-weight: 400; color: var(--s-gris); }
}

/* --- Backdrop (mobile / tablette uniquement) --- */
.ecs-side-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  border: 0;
  background: rgba(13, 13, 13, .5);
}
.ecs-side-backdrop[hidden] { display: none; }

/* ================================================================
   DESKTOP >= 1024px : volet POUSSEUR, deplie par defaut.
   Le contenu du site (flux normal + header sticky) est decale a gauche
   par un padding-right sur <body> ; le volet occupe la colonne de droite.
   Repli utilisateur = classe .ecs-side-collapsed sur <body>.
   ================================================================ */
/* Poignee de repli : languette accrochee au bord GAUCHE du volet ouvert
   (fleche vers la droite = "repousser le volet"). Masquee sur mobile. */
.ecs-side-collapse { display: none; }

@media (min-width: 1024px) {
  .ecs-side-backdrop { display: none !important; }

  .ecs-side-collapse {
    position: absolute;
    top: 50%;
    right: var(--ecs-side-w);
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 66px;
    padding: 0;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
    background: var(--s-rose-f);
    color: #fff;
    border-radius: 12px 0 0 12px;
    box-shadow: -6px 6px 18px rgba(194, 24, 91, .28);
    transition: right .38s cubic-bezier(.16, .84, .44, 1), background .2s, opacity .3s;
  }
  .ecs-side-collapse:hover { background: var(--s-noir); }
  .ecs-side-collapse svg { width: 18px; height: 18px; display: block; }
  /* Replie : la poignee glisse avec le volet puis disparait. */
  body.ecs-side-collapsed .ecs-side-collapse { right: 0; opacity: 0; pointer-events: none; }

  /* Transition douce du decalage du contenu, synchronisee avec le volet. */
  body { transition: padding-right .38s cubic-bezier(.16, .84, .44, 1); }

  /* Etat DEPLIE (par defaut) : contenu decale, volet visible, onglet masque. */
  body:not(.ecs-side-collapsed) { padding-right: var(--ecs-side-w); }
  body:not(.ecs-side-collapsed) .ecs-side { transform: none; visibility: visible; }
  body:not(.ecs-side-collapsed) .ecs-side-tab { opacity: 0; pointer-events: none; }

  /* Etat REPLIE : le site reprend toute la largeur, l'onglet revient. */
  body.ecs-side-collapsed { padding-right: 0; }
  body.ecs-side-collapsed .ecs-side { transform: translateX(100%); visibility: hidden; }
  body.ecs-side-collapsed .ecs-side-tab {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
  }
}

@media (max-width: 560px) {
  .ecs-side-tab-txt { display: none; }
  .ecs-side-tab { padding: 15px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecs-side,
  .ecs-side-tab,
  .ecs-side-btn { transition: none; }
}

/* Couleurs de texte posées par l'éditeur riche de l'admin (classes, jamais
   style="" : la CSP les ignore). Variables du thème actif, avec repli pour
   les gabarits qui ne les déclarent pas (landing). Fichier choisi parce qu'il
   est chargé par tous les gabarits du front. */
.txt-accent-fonce { color: var(--rose-fonce, #c2185b); }
.txt-accent { color: var(--rose, #e91e63); }
.txt-gris { color: var(--gris, #5a5a5a); }

/* Alignement posé par la barre d'outils de l'admin. Même raison : les
   commandes justify* du navigateur écrivent style="text-align:…", que la CSP
   du front (style-src 'self') ignore en silence — l'alignement se voyait dans
   l'aperçu et disparaissait en ligne. admin.js les convertit en classes. */
.txt-centre { text-align: center; }
.txt-droite { text-align: right; }
.txt-justifie { text-align: justify; }

/* Un mot en gras DANS une couleur (classe de la charte ou <font color> posé
   par le nuancier de l'admin) garde cette couleur : sans cette règle, les
   « strong { color: noir } » des gabarits l'emportent. <font color> est un
   attribut de présentation, pas du CSS : la CSP ne le bloque pas. */
font[color] :is(strong, b),
:is(.txt-accent-fonce, .txt-accent, .txt-gris) :is(strong, b) { color: inherit; }