/* =====================================================================
   Styles partagés · IDEM CRÉ'ACTIONS
   Langage visuel inspiré de COSS UI / shadcn (coss.com/ui), mappé sur la
   charte du logo : teal #00354f et vert #83ba29.
   ===================================================================== */

/* ---------- Univers : palettes inversées ----------
   Les valeurs sont des triplets RGB (utilisés par tw-config.js). */
:root,
:root[data-univers="portage"] {
  /* uni = teal */
  --uni-50: 238 245 249; --uni-100: 214 230 239; --uni-200: 170 202 220; --uni-300: 117 166 193;
  --uni-400: 63 128 163; --uni-500: 21 97 134; --uni-600: 6 72 106; --uni-700: 0 53 79;
  --uni-800: 0 43 65;   --uni-900: 0 31 48;   --uni-950: 0 21 33;
  /* pop = vert */
  --pop-50: 244 249 234; --pop-100: 230 242 209; --pop-200: 205 229 166; --pop-300: 173 210 109;
  --pop-400: 131 186 41; --pop-500: 110 158 32;  --pop-600: 85 124 24;   --pop-700: 69 100 20;
  --pop-800: 56 79 19;   --pop-900: 47 66 18;    --pop-950: 39 55 15;
  --uni-hex: #00354f;
}
:root[data-univers="formation"] {
  /* uni = vert (700 = #557c18 : contraste AA avec du texte blanc) */
  --uni-50: 244 249 234; --uni-100: 230 242 209; --uni-200: 205 229 166; --uni-300: 173 210 109;
  --uni-400: 131 186 41; --uni-500: 110 158 32;  --uni-600: 85 124 24;   --uni-700: 85 124 24;
  --uni-800: 69 100 20;  --uni-900: 56 79 19;    --uni-950: 47 66 18;
  /* pop = teal */
  --pop-50: 238 245 249; --pop-100: 214 230 239; --pop-200: 170 202 220; --pop-300: 117 166 193;
  --pop-400: 63 128 163; --pop-500: 21 97 134;  --pop-600: 6 72 106;  --pop-700: 0 53 79;
  --pop-800: 0 43 65;   --pop-900: 0 31 48;    --pop-950: 0 21 33;
  --uni-hex: #557c18;
}

body { font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, .font-display { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.text-balance { text-wrap: balance; }

/* ---------- Accessibilité ---------- */
:focus-visible { outline: 2px solid rgb(var(--uni-500)); outline-offset: 2px; border-radius: .3rem; }
[id] { scroll-margin-top: 6rem; }
.skip-link { position: absolute; left: 1rem; top: -3.5rem; z-index: 90; background: #00354f; color: #fff; padding: .6rem 1rem; border-radius: .5rem; font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 1rem; }

/* ---------- Apparition au défilement ---------- */
.fade-up { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.in { opacity: 1; transform: none; }

/* ---------- Tokens COSS UI ---------- */
:root {
  --radius: .625rem;
  --radius-lg: 1rem;
  --ds-border: rgba(0, 31, 48, .10);
  --ds-muted: #f4f8fa;
  --ds-muted-fg: #5a7484;
}
.ds-card { background: #fff; border: 1px solid var(--ds-border); border-radius: var(--radius-lg); }
.ds-hover { transition: border-color .2s, box-shadow .2s, transform .2s; }
.ds-hover:hover { border-color: rgb(var(--pop-300)); box-shadow: 0 10px 32px rgba(0, 31, 48, .08); transform: translateY(-2px); }
.ds-badge { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--ds-border); background: #fff; border-radius: 999px; padding: .3rem .75rem; font-size: .75rem; font-weight: 600; color: #00354f; }
.ds-chip { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--ds-border); background: #fff; border-radius: var(--radius); padding: .55rem .85rem; font-size: .875rem; font-weight: 500; color: #002b41; transition: border-color .18s, background .18s, transform .18s; }
.ds-chip:hover { border-color: rgb(var(--pop-300)); background: rgb(var(--pop-50)); transform: translateY(-1px); }
.ds-seg { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--ds-border); background: var(--ds-muted); border-radius: calc(var(--radius) + .25rem); }
.ds-seg button { border-radius: var(--radius); padding: .55rem 1.1rem; font-size: .875rem; font-weight: 600; color: var(--ds-muted-fg); transition: background .18s, color .18s, box-shadow .18s; }
.ds-seg button[aria-selected="true"] { background: #fff; color: #00354f; box-shadow: 0 1px 2px rgba(0, 31, 48, .10); }

/* Champs de formulaire */
.ds-label { display: block; font-size: .875rem; font-weight: 500; color: #002b41; margin-bottom: .375rem; }
.ds-input { width: 100%; border-radius: .5rem; border: 1px solid #aacadc; background: #fff; padding: .625rem .9rem; color: #001f30; outline: none; transition: border-color .15s, box-shadow .15s; }
.ds-input:focus { border-color: rgb(var(--uni-500)); box-shadow: 0 0 0 3px rgb(var(--uni-200) / .7); }
.ds-input[aria-invalid="true"] { border-color: #c2410c; }
.ds-hint { font-size: .75rem; color: #5a7484; margin-top: .3rem; }
/* Choix en pastilles (radio / checkbox) */
.ds-choice { position: relative; display: inline-flex; }
.ds-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ds-choice span { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--ds-border); background: #fff; border-radius: 999px; padding: .5rem .9rem; font-size: .875rem; font-weight: 500; color: #002b41; transition: all .15s; }
.ds-choice input:checked + span { border-color: rgb(var(--uni-600)); background: rgb(var(--uni-50)); color: rgb(var(--uni-900)); box-shadow: inset 0 0 0 1px rgb(var(--uni-600)); }
.ds-choice input:focus-visible + span { outline: 2px solid rgb(var(--uni-500)); outline-offset: 2px; }

/* ---------- FAQ ---------- */
details.faq > summary { list-style: none; cursor: pointer; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq[open] .faq-plus { transform: rotate(45deg); }

/* ---------- Schéma « relation à trois » ---------- */
.flow-node, .flow-edge { transition: opacity .25s ease; }
.flow.dim .flow-edge:not(.on), .flow.dim .flow-node:not(.on) { opacity: .22; }
.flow-dash { stroke-dasharray: 8 8; animation: flowdash 1.8s linear infinite; }
@keyframes flowdash { to { stroke-dashoffset: -32; } }
.flow-step[aria-current="true"] { border-color: #add26d; background: #f4f9ea; }
.step-num { box-shadow: 0 0 0 6px #fff; }
.myth[data-open="true"] .myth-toggle svg { transform: rotate(45deg); }
.myth-toggle svg { transition: transform .25s; }

/* =====================================================================
   SÉLECTEUR D'UNIVERS (toggle Portage / Formations)
   ===================================================================== */
/* Trois entrées de largeur égale : Portage salarial · Formations · À propos */
.uni-switch { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px; background: #eef3f6; border: 1px solid var(--ds-border); isolation: isolate; }
.uni-switch a { --seg: rgba(0, 53, 79, .10); --seg-fg: #00354f; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .5rem .95rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: #3a5a6b; white-space: nowrap; transition: color .25s ease; }
.uni-switch a[data-uni="formation"] { --seg: rgba(85, 124, 24, .14); --seg-fg: #456414; }
.uni-switch a[data-uni="apropos"] { --seg: rgba(0, 31, 48, .09); --seg-fg: #001f30; }
.uni-switch a svg { position: relative; width: 1rem; height: 1rem; transition: transform .25s ease; }
.uni-switch a span { position: relative; }
/* survol : pastille teintée dans la couleur de l'espace visé */
.uni-switch a::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--seg); opacity: 0; transform: scale(.9); transition: opacity .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1); }
.uni-switch a:not([aria-current="page"]):hover { color: var(--seg-fg); }
.uni-switch a:not([aria-current="page"]):hover::before { opacity: 1; transform: none; }
.uni-switch a:not([aria-current="page"]):hover svg { transform: translateY(-1px) scale(1.08); }
.uni-switch a[aria-current="page"] { color: #fff; }
.uni-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: #00354f; box-shadow: 0 2px 8px rgba(0, 31, 48, .25); transition: transform .38s cubic-bezier(.65, 0, .35, 1), background-color .38s ease; }
:root[data-univers="formation"] .uni-thumb { transform: translateX(100%); background: #557c18; }
:root[data-univers="apropos"] .uni-thumb { transform: translateX(200%); background: #001f30; }
:root:not([data-univers]) .uni-thumb { opacity: 0; }
/* état « en partance » posé par le script au clic */
.uni-switch[data-going="portage"] .uni-thumb { transform: none; background: #00354f; }
.uni-switch[data-going="formation"] .uni-thumb { transform: translateX(100%); background: #557c18; }
.uni-switch[data-going="apropos"] .uni-thumb { transform: translateX(200%); background: #001f30; }
.uni-switch[data-going] a { color: #3a5a6b; }
.uni-switch[data-going] a::before { opacity: 0 !important; }
.uni-switch[data-going="portage"] a[data-uni="portage"],
.uni-switch[data-going="formation"] a[data-uni="formation"],
.uni-switch[data-going="apropos"] a[data-uni="apropos"] { color: #fff; }

/* Changement d'univers : le contenu s'efface puis réapparaît en fondu,
   l'en-tête reste immobile (aucun aplat de couleur plein écran). */
main, body > footer { transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
html.is-leaving main, html.is-leaving body > footer { opacity: 0; transform: translateY(-6px); }
html.is-entering main, html.is-entering body > footer { opacity: 0; transform: translateY(12px); transition: none; }
html.is-leaving #chat-ph, html.is-entering #chat-ph { opacity: 0; }


/* =====================================================================
   VOLET CONTACT (sheet latéral) et MODALES (dialog natif)
   ===================================================================== */
dialog.sheet, dialog.modal { padding: 0; border: 0; max-width: none; max-height: none; background: transparent; color: inherit; }
dialog.sheet::backdrop, dialog.modal::backdrop { background: rgba(0, 21, 33, .45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
dialog.sheet[open]::backdrop, dialog.modal[open]::backdrop { opacity: 1; }
dialog.sheet { margin: 0 0 0 auto; height: 100dvh; width: min(30rem, 100vw); }
dialog.sheet .sheet-panel { height: 100%; transform: translateX(100%); transition: transform .38s cubic-bezier(.32, .72, 0, 1); }
dialog.sheet.is-open .sheet-panel { transform: none; }
dialog.modal { margin: auto; width: min(46rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); }
dialog.modal .modal-panel { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .25s ease, transform .3s cubic-bezier(.32, .72, 0, 1); max-height: calc(100dvh - 1.5rem); }
dialog.modal.is-open .modal-panel { opacity: 1; transform: none; }
html.has-dialog { overflow: hidden; }

/* Stepper du formulaire d'inscription */
.stepper li { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; color: #7493a3; }
.stepper li .dot { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 1.5px solid #c9dae3; background: #fff; font-size: .75rem; transition: all .2s; }
.stepper li[data-state="current"] { color: #001f30; }
.stepper li[data-state="current"] .dot { border-color: rgb(var(--uni-700)); color: rgb(var(--uni-700)); box-shadow: 0 0 0 3px rgb(var(--uni-100)); }
.stepper li[data-state="done"] .dot { background: rgb(var(--uni-700)); border-color: rgb(var(--uni-700)); color: #fff; }

/* =====================================================================
   PORTE D'ENTRÉE (index) : écran partagé en deux
   ===================================================================== */
.gate { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .gate-screen { height: calc(100dvh - 5rem); min-height: 40rem; }
  .gate { flex: 1 1 auto; min-height: 0; flex-direction: row; }
  .gate > a { flex: 1 1 0; transition: flex-grow .55s cubic-bezier(.65, 0, .35, 1); }
  .gate:hover > a { flex-grow: .8; }
  .gate > a:hover, .gate > a:focus-visible { flex-grow: 1.25; }
}
.gate-arrow { transition: transform .3s ease; }
.gate > a:hover .gate-arrow { transform: translateX(6px); }

/* ---------- Catalogue ---------- */
.f-card[hidden] { display: none; }
.filter-chip[aria-pressed="true"] { background: rgb(var(--uni-700)); border-color: rgb(var(--uni-700)); color: #fff; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .flow-dash { animation: none; }
  .ds-hover:hover { transform: none; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  .uni-thumb, main, body > footer, dialog .sheet-panel, dialog .modal-panel, .gate > a { transition: none !important; }
}
.uni-switch[data-going] .uni-thumb { opacity: 1; }

/* =====================================================================
   LANDING (trame commune Portage / Formations)
   ===================================================================== */
.lp-dots { background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 22px 22px; }
.glass { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); }
/* Carte d'orientation du hero (quiz / recherche) */
.orient-opt { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; border-radius: .75rem; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); padding: .8rem 1rem; color: #fff; font-weight: 600; font-size: .9rem; transition: background .18s, border-color .18s, transform .18s; }
.orient-opt:hover { background: rgba(255,255,255,.14); transform: translateX(3px); }
.orient-opt[aria-pressed="true"] { background: #fff; color: #001f30; border-color: #fff; }
.yn button { border-radius: .55rem; padding: .4rem .9rem; font-size: .8rem; font-weight: 700; border: 1px solid rgba(255,255,255,.25); color: #fff; transition: all .15s; }
.yn button:hover { background: rgba(255,255,255,.12); }
.yn button[aria-pressed="true"] { background: #fff; color: #001f30; border-color: #fff; }
.progress-bar { transition: width .4s cubic-bezier(.65, 0, .35, 1); }
/* Barre de sommaire collante sous l'en-tête */
.lp-toc { position: sticky; top: 5rem; z-index: 40; }
@media (max-width: 767px) { .lp-toc { top: calc(5rem + 3.6rem); } }
.lp-toc a[aria-current="true"] { background: rgb(var(--uni-700)); border-color: rgb(var(--uni-700)); color: #fff; }
.lp-toc a[aria-current="true"] svg { color: #fff; }
/* Étapes sur fond coloré */
.step-card { position: relative; border-radius: 1rem; background: #fff; padding: 1.5rem; color: #001f30; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.step-card .n { position: absolute; top: -1.1rem; left: 1.25rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.18); }
html[data-univers] [id] { scroll-margin-top: 6rem; }

/* ---------- Témoignages : cartes à largeur fixe, un avis seul est mis en avant ---------- */
.tm-card { width: 100%; }
@media (min-width: 768px) { .tm-card { width: calc(50% - .625rem); } }
@media (min-width: 1024px) { .tm-card { width: calc(33.333% - .84rem); } }
[data-count="1"] .tm-card { width: 100%; max-width: 46rem; padding: 2.25rem; }
[data-count="1"] .tm-text { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.25rem; line-height: 1.6; font-weight: 500; color: #001f30; }
@media (min-width: 768px) { [data-count="1"] .tm-text { font-size: 1.4rem; } }

/* Sélecteur sur mobile : libellés seuls, sur une ligne */
.uni-switch.uni-compact { padding: 3px; }
.uni-switch.uni-compact a { padding: .5rem .25rem; font-size: .78rem; gap: 0; }
.uni-switch.uni-compact a svg { display: none; }
.uni-switch.uni-compact .uni-thumb { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); }

/* En-tête mobile : la ligne du sélecteur se replie au défilement */
.hdr-sub { max-height: 4rem; overflow: hidden; transition: max-height .3s ease, opacity .25s ease, padding .3s ease; }
#entete.is-compact .hdr-sub { max-height: 0; opacity: 0; padding-bottom: 0; }

/* Menu mobile : panneau latéral */
.mm { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.mm.is-open { visibility: visible; }
.mm-fond { position: absolute; inset: 0; background: rgba(0, 21, 33, .45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
.mm.is-open .mm-fond { opacity: 1; }
.mm-panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(24rem, 92vw); display: flex; flex-direction: column; background: #fff; box-shadow: -10px 0 40px rgba(0, 21, 33, .18); transform: translateX(100%); transition: transform .35s cubic-bezier(.32, .72, 0, 1); }
.mm.is-open .mm-panneau { transform: none; }
@media (prefers-reduced-motion: reduce) { .mm-fond, .mm-panneau, .hdr-sub { transition: none; } }

/* Mobile et tablette : en-tête fixe au-dessus de la page */
@media (max-width: 1023.98px) {
  #entete { position: fixed; top: 0; left: 0; right: 0; }
  .entete-espace { height: 7.4rem; }
}