/* Hey Mika : écrans « Contexte » (maquettes 10 à 14, voir js/pages/contexte.js).
   Toutes les règles sont rangées sous .cx (la page), .cx-modale (ses fenêtres) ou .cx-voile : aucune règle globale.
   Mesures prises sur les maquettes 2880×1800 (fenêtre 1600×1000 à 1,8). Les dégradés des vignettes sont ceux des
   maquettes, relevés au pixel ; tout le reste vient de la palette de base.css. */

/* ---------- commun ---------- */
.cx { --cx-corps: 13.33px; --cx-petit: 12.25px; --cx-label: 14.45px; --cx-puce: 14.75px; --cx-gras: 15.55px; --cx-interligne: 1.44; }
.cx .t-page { letter-spacing: 0; }
.cx .page-entete { margin-bottom: 24px; }
.cx .page-entete .t-sous { max-width: 700px; margin-top: 4.6px; font-size: 15.55px; line-height: 21.7px; }
.cx .cx-h2 { font: 700 20.4px/1.1 var(--titre); color: var(--encre); }
.cx .cx-sous { margin-top: 5px; font-size: var(--cx-corps); line-height: var(--cx-interligne); color: var(--texte); }
.cx .cx-label { display: block; font-size: var(--cx-label); font-weight: 700; line-height: 1.3; color: var(--encre); }
.cx .cx-doux { color: var(--doux); font-weight: 500; }
.cx .cx-sep { height: 1px; background: var(--ligne); }
.cx .cx-sur { font-size: 12.4px; font-weight: 600; text-transform: uppercase; color: var(--texte); }
.cx .cx-champ { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.cx .cx-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.cx .cx-puce { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--champ-bord); background: #fff; font-size: var(--cx-puce); font-weight: 500; line-height: 1; color: var(--encre); white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.cx button.cx-puce { cursor: pointer; }
.cx button.cx-puce:hover:not(:disabled):not([aria-pressed="true"]) { border-color: #D6CEC8; background: #FFFCFA; }
.cx .cx-puce[aria-pressed="true"], .cx .cx-puce-on { background: var(--peche); border-color: #F6A88B; color: var(--orange-texte); }
.cx button.cx-puce[aria-pressed="true"]:hover:not(:disabled) { background: #FCDCCD; }
.cx .cx-puce:disabled { cursor: not-allowed; opacity: .6; }
.cx .cx-puce svg { width: 18px; height: 18px; flex: none; }
.cx .cx-puce-plus { width: 36px; padding: 0; justify-content: center; border: 1.5px dashed #E6C9BA; color: var(--texte); }
.cx .cx-puce-plus svg { width: 16px; height: 16px; }
.cx .cx-puce-saisie { width: 170px; cursor: text; outline: none; border-color: var(--orange); box-shadow: var(--anneau); }
.cx .cx-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 -5px 0 0; border-radius: 50%; color: var(--texte); cursor: pointer; }
.cx .cx-x svg { width: 15px; height: 15px; }
.cx .cx-x:hover { background: rgba(194, 65, 12, .1); color: var(--orange-texte); }
.cx .cx-lien-orange, .cx-modale .cx-lien-orange { display: inline; padding: 0; font: inherit; font-weight: 700; color: var(--orange-texte); cursor: pointer; }
.cx .cx-lien-orange:hover { text-decoration: underline; text-underline-offset: 3px; }
.cx .cx-seg .segment { padding: 5px; max-width: 100%; }
.cx .cx-seg .segment button { height: 35px; padding: 0 19px; font-size: 14.7px; min-width: 0; }
.barre-bas .cx-barre-g { font-size: 13.35px; }
.barre-bas .cx-barre-g .indicateur { gap: 12px; }
.barre-bas .cx-barre-g > svg, .barre-bas .cx-barre-g .indicateur svg { width: 14px; height: 14px; }
.barre-bas .cx-btn-barre { height: 48px; padding: 0 22px; gap: 8px; font-size: 15.6px; }
.barre-bas .cx-btn-barre svg { width: 16px; height: 16px; }
.cx .cx-seg-plein .segment { display: flex; width: 100%; }
.cx .cx-seg-plein .segment button { flex: 1; }

/* dégradés des vignettes (maquettes 11, 12, 14), à 158° */
.cx .cx-deg-1, .cx-modale .cx-deg-1 { background: linear-gradient(158deg, #BCD0E4 0%, #577DA1 52%, #1E3C60 100%); }
.cx .cx-deg-2, .cx-modale .cx-deg-2 { background: linear-gradient(158deg, #C9DFCF 0%, #749F87 52%, #2A4C3C 100%); }
.cx .cx-deg-3, .cx-modale .cx-deg-3 { background: linear-gradient(158deg, #D2CCEC 0%, #8E82C2 52%, #403570 100%); }
.cx .cx-deg-4, .cx-modale .cx-deg-4 { background: linear-gradient(158deg, #E6CFAC 0%, #B28B5E 52%, #553A24 100%); }
.cx .cx-deg-5, .cx-modale .cx-deg-5 { background: linear-gradient(158deg, #F8DD9F 0%, #DDA444 52%, #7A4F14 100%); }

/* ---------- 10 · Client idéal ---------- */
.cx-icp .cx-onglets { display: flex; gap: 4px; padding: 4.2px; border-radius: 99px; background: var(--sable); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cx-icp .cx-onglet { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16.7px; border-radius: 99px; font-size: 14.7px; font-weight: 600; color: var(--texte); white-space: nowrap; transition: background .15s, color .15s; }
.cx-icp .cx-onglet svg { width: 16px; height: 16px; flex: none; }
.cx-icp .cx-onglet:hover:not(:disabled) { color: var(--encre); }
.cx-icp .cx-onglet[aria-selected="true"] { background: #fff; color: var(--encre); font-weight: 700; font-size: 14.3px; box-shadow: 0 1px 2px rgba(44,26,20,.08), 0 2px 8px rgba(44,26,20,.06); }
.cx-icp .cx-onglet-plus:disabled { cursor: not-allowed; opacity: .55; }
/* plusieurs profils aux noms longs (ceux de Mika font 30 caractères) : la bande passe sous le titre et défile, elle n’écrase pas le titre */
.cx-icp .page-entete { flex-wrap: wrap; }
.cx-icp .page-entete > div:first-child { flex: 1 1 360px; min-width: 0; }
.cx-icp .page-entete-droite { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.cx-icp .cx-icp-grille { display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: 25px; align-items: start; }
.cx-icp .cx-icp-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; row-gap: 19px; padding: 25px; }
.cx-icp .cx-icp-cellule { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.cx-icp .cx-icp-large { grid-column: 1 / -1; gap: 9px; }
.cx-icp .cx-icp-pile { gap: 19px; }
.cx-icp .cx-ou { position: relative; display: flex; align-items: center; gap: 8px; min-height: 51px; padding: 4px 8px 4px 16px; border: 1px solid var(--champ-bord); border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cx-icp .cx-ou:focus-within { border-color: var(--orange); box-shadow: var(--anneau); }
.cx-icp .cx-ou > svg { width: 18px; height: 18px; flex: none; color: var(--encre); }
.cx-icp .cx-ou textarea { flex: 1; min-width: 0; height: 21px; padding: 0; border: 0; outline: none; resize: none; overflow: hidden; background: transparent; font-size: 14.45px; line-height: 20.8px; color: var(--encre); }
.cx-icp .cx-ou textarea::placeholder { color: #B5A69D; }
.cx-icp .cx-crayon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--encre); }
.cx-icp .cx-crayon:hover { background: var(--sable); }
.cx-icp .cx-crayon svg { width: 18px; height: 18px; }
.cx-icp .cx-boite-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 8.5px; min-height: 55px; padding: 9px 11.5px; border: 1px solid var(--champ-bord); border-radius: 14px; background: #fff; cursor: text; transition: border-color .15s, box-shadow .15s; }
.cx-icp .cx-boite-puces:focus-within { border-color: var(--orange); box-shadow: var(--anneau); }
.cx-icp .cx-ajout, .cx-modale .cx-ajout { flex: 1; min-width: 110px; height: 35px; padding: 0 2px; border: 0; outline: none; background: transparent; font-size: 13.35px; color: var(--encre); }
.cx-icp .cx-ajout::placeholder, .cx-modale .cx-ajout::placeholder { color: var(--texte); }
.cx-icp .cx-retirable .cx-x { width: 0; margin: 0; overflow: hidden; opacity: 0; transition: width .15s, opacity .15s, margin .15s; }
.cx-icp .cx-retirable:hover .cx-x, .cx-icp .cx-retirable:focus-within .cx-x { width: 18px; margin: 0 -5px 0 0; opacity: 1; }
@media (hover: none) { .cx-icp .cx-retirable .cx-x { width: 18px; margin: 0 -5px 0 0; opacity: 1; } }
.cx-icp .cx-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -2.5px; color: var(--orange-texte); }
.cx-icp .cx-suggestions > svg { width: 18px; height: 18px; flex: none; margin-right: -3px; }
.cx-icp .cx-sugg-titre { font-size: 12.25px; font-weight: 700; color: var(--orange-texte); }
.cx-icp .cx-puce-sugg { height: 30px; padding: 0 11px; font-size: var(--cx-puce); color: var(--orange-texte); }
.cx-icp .cx-lien-mika { padding: 0; font-size: 12.25px; font-weight: 700; color: var(--orange-texte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cx-icp .cx-texte { width: 100%; min-height: 95.5px; padding: 12.5px 16px 10px; border: 1px solid var(--champ-bord); border-radius: 14px; background: #fff; font-size: 14.45px; line-height: 22px; color: var(--encre); resize: none; overflow: hidden; outline: none; transition: border-color .15s, box-shadow .15s; }
.cx-icp .cx-texte:focus { border-color: var(--orange); box-shadow: var(--anneau); }
.cx-icp .cx-texte::placeholder { color: #B5A69D; }
.cx-icp .cx-mot { padding-right: 12px; }
.cx-icp .cx-vide { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 46px 30px 50px; text-align: center; }
.cx-icp .cx-vide p { max-width: 460px; font-size: var(--cx-corps); line-height: var(--cx-interligne); color: var(--texte); }
.cx-icp .cx-vide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

.cx-icp .cx-icp-cote { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cx-icp .cx-persona { padding: 25px; background: linear-gradient(180deg, #FFF3EA 0%, #FFFFFF 62%); transition: opacity .2s; }
.cx-icp .cx-persona.cx-travail { opacity: .6; }
.cx-icp .cx-persona-tete { display: flex; align-items: center; gap: 14px; }
.cx-icp .cx-initiale { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #F8D9CB; color: #7A3418; font: 700 23px/1 var(--corps); }
.cx-icp .cx-initiale svg { width: 24px; height: 24px; color: var(--orange-texte); }
.cx-icp .cx-persona-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
.cx-icp .cx-persona-nom b { font-size: var(--cx-gras); font-weight: 700; line-height: 1.3; }
.cx-icp .cx-persona-nom span { font-size: var(--cx-corps); color: var(--texte); }
.cx-icp .cx-regen { width: 32px; height: 32px; flex: none; align-self: flex-start; display: grid; place-items: center; border-radius: 10px; color: var(--doux); }
.cx-icp .cx-regen:hover:not(:disabled) { background: var(--peche); color: var(--orange-texte); }
.cx-icp .cx-regen svg { width: 16px; height: 16px; }
.cx-icp .cx-regen.cx-perime { color: var(--orange-texte); background: var(--peche); }
.cx-icp .cx-portrait { margin-top: 14px; font-size: var(--cx-corps); line-height: 20.8px; color: var(--encre); }
.cx-icp .cx-portrait.cx-doux { color: var(--texte); }
.cx-icp .cx-dresser { margin-top: 16px; }
.cx-icp .cx-maj { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 0; font-size: 12.25px; font-weight: 700; color: var(--orange-texte); cursor: pointer; text-align: left; }
.cx-icp .cx-maj svg { width: 15px; height: 15px; flex: none; }
.cx-icp .cx-maj:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cx-icp .cx-persona .cx-sep { margin: 16px 0 16px; }
.cx-icp .cx-deduit { list-style: none; margin: 9.5px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cx-icp .cx-deduit li { display: flex; align-items: center; gap: 9.3px; font-size: var(--cx-corps); line-height: 1.2; color: var(--encre); }
.cx-icp .cx-deduit svg { width: 18px; height: 18px; flex: none; }
.cx-icp .cx-precision { padding: 25px 25px 24px; }
.cx-icp .cx-prec-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cx-icp .cx-prec-haut b { font-size: var(--cx-gras); font-weight: 700; }
.cx-icp .cx-pct { font: 700 28.3px/1 var(--titre); font-variant-numeric: lining-nums; color: var(--orange-texte); white-space: nowrap; }
.cx-icp .cx-precision .progres { height: 8px; }
.cx-icp .cx-conseil { margin-top: 12px; font-size: var(--cx-corps); line-height: 18.6px; color: var(--texte); }

/* ---------- 11 · Inspirations & identité ---------- */
.cx-insp .cx-insp-haut { padding: 23.7px 22.7px 18px; }
.cx-insp .cx-insp-haut > .cx-sous { margin-top: 2.2px; }
.cx-insp .cx-insp-grille { display: grid; grid-template-columns: 310px minmax(0, 1fr) 320px; gap: 14px; margin-top: 16px; align-items: stretch; }
.cx-insp .cx-insp-gauche { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.cx-insp .cx-lien { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 18px; border: 1px solid var(--champ-bord); border-radius: 15px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cx-insp .cx-lien:focus-within { border-color: var(--orange); box-shadow: var(--anneau); }
.cx-insp .cx-lien > svg { width: 19px; height: 19px; flex: none; color: var(--encre); }
.cx-insp .cx-lien input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 15.5px; color: var(--encre); }
.cx-insp .cx-lien input::placeholder { color: var(--texte); }
.cx-insp .cx-lien-ok { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--orange); color: #fff; }
.cx-insp .cx-lien-ok svg { width: 17px; height: 17px; }
.cx-insp .cx-depot { flex: 1; min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 20px; border: 2px dashed #F9C2AE; border-radius: 22px; background: #FFF8F2; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.cx-insp .cx-depot:hover, .cx-insp .cx-depot.cx-survol { background: var(--peche-clair); border-color: var(--orange-2); }
.cx-insp .cx-depot.cx-envoi { pointer-events: none; opacity: .8; }
.cx-insp .cx-depot-ico { width: 44px; height: 44px; margin-bottom: 15px; display: grid; place-items: center; border-radius: 12px; background: var(--peche); color: var(--orange-texte); }
.cx-insp .cx-depot-ico svg { width: 20px; height: 20px; }
.cx-insp .cx-depot b { font-size: 13.32px; font-weight: 700; }
.cx-insp .cx-depot span { font-size: var(--cx-corps); color: var(--texte); }
.cx-insp .cx-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; align-content: start; min-width: 0; }
.cx-insp .cx-vcarte { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; text-align: left; cursor: pointer; }
.cx-insp .cx-vignette { position: relative; display: block; width: 100%; aspect-ratio: 166 / 210; border-radius: 20px; overflow: hidden; background-color: var(--sable); }
.cx-insp .cx-vignette img, .cx-insp .cx-vignette video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-insp .cx-vignette.cx-avec-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.28)); }
.cx-insp .cx-badge-pf { position: absolute; z-index: 1; top: 9px; left: 9px; height: 22px; padding: 0 9px; border-radius: 99px; background: rgba(255,255,255,.88); font-size: 12.3px; font-weight: 700; line-height: 22px; color: var(--encre); }
.cx-insp .cx-play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-44%, -50%); color: rgba(255,255,255,.85); stroke-width: 2.2; }
.cx-insp .cx-duree { position: absolute; z-index: 1; right: 9px; bottom: 9px; height: 22px; padding: 0 7px; border-radius: 7px; background: rgba(16, 26, 42, .88); font-size: 12.3px; font-weight: 700; line-height: 22px; color: #fff; }
.cx-insp .cx-vcarte:hover .cx-vignette { box-shadow: 0 8px 22px rgba(44,26,20,.16); }
.cx-insp .cx-vtitre { margin-top: 11.5px; font-size: 12.27px; font-weight: 700; line-height: 17.6px; color: var(--encre); }
.cx-insp .cx-etiquette { margin-top: 9px; display: block; height: 22px; line-height: 20px; padding: 0 9px; border-radius: 99px; border: 1px solid #F6A88B; background: var(--peche); font-size: 12.44px; font-weight: 500; color: var(--orange-texte); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-insp .cx-vcarte-attente { cursor: default; }
.cx-insp .cx-vcarte-attente .cx-vignette { border-radius: 20px; }
.cx-insp .cx-vcarte-attente .cx-vtitre { color: var(--texte); font-weight: 600; }
.cx-insp .cx-cartes-vide { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 230px; padding: 24px; border-radius: 20px; background: var(--fond-2); border: 1px solid var(--ligne); text-align: center; }
.cx-insp .cx-cartes-vide svg { width: 30px; height: 30px; color: var(--doux); }
.cx-insp .cx-cartes-vide p { max-width: 330px; font-size: var(--cx-corps); line-height: var(--cx-interligne); color: var(--texte); }
.cx-insp .cx-retient { padding: 22px 22px 24px; border-radius: 22px; background: var(--sable); }
.cx-insp .cx-retient-tete { display: flex; align-items: center; gap: 11px; }
.cx-insp .cx-retient-tete .mascotte { width: 30px; height: 30px; }
.cx-insp .cx-retient-tete b { font-size: 13.35px; font-weight: 700; }
.cx-insp .cx-retient-liste { margin: 13.5px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3.5px; font-size: 13.39px; line-height: 19.3px; color: var(--encre); }
.cx-insp .cx-retient-liste li::marker { font-size: 13px; }
.cx-insp .cx-retient-aide { margin-top: 13px; font-size: var(--cx-petit); line-height: 17.6px; color: var(--texte); }
.cx-insp .cx-relit { display: flex; align-items: center; gap: 8px; }
.cx-insp .cx-relit svg { width: 15px; height: 15px; }

.cx-insp .cx-insp-bas { display: grid; grid-template-columns: 505px minmax(0, 1fr); gap: 20px; margin-top: 30px; align-items: start; }
.cx-insp .cx-insp-id { display: grid; grid-template-columns: 276px 209px; gap: 20px; align-items: stretch; min-width: 0; }   /* avatar et logo gardent la hauteur l’un de l’autre, comme sur la maquette */
.cx-insp .cx-bas-carte { padding: 21.8px 23.5px 22px; min-width: 0; }
.cx-insp .cx-bas-carte .cx-sous { margin-top: 6px; }
.cx-insp .cx-avatar-ligne { display: flex; align-items: center; gap: 18px; margin-top: 13.3px; }
.cx-insp .cx-avatar-rond { width: 71px; height: 71px; flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: linear-gradient(158deg, #EBC09F 0%, #D39D79 50%, #B9785A 100%); font: 700 26px/1 var(--corps); color: #fff; }
.cx-insp .cx-avatar-rond img { width: 100%; height: 100%; object-fit: cover; }
.cx-insp .cx-btn-depot { height: 38px; padding: 0 13.5px; gap: 9px; font-size: 14.49px; }
.cx-insp .cx-btn-depot svg { width: 18px; height: 18px; }
.cx-insp .cx-avatar .case { align-items: flex-start; margin-top: 14px; font-size: 12.21px; line-height: 17.6px; }
.cx-insp .cx-logo-boite { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: 96px; margin-top: 12.9px; padding: 12px 14px; border-radius: 18px; background: var(--sable); overflow: hidden; }
.cx-insp .cx-logo-boite img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cx-insp .cx-logo-vide svg { width: 28px; height: 28px; color: var(--doux); }
.cx-insp .cx-logo-pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 6px; }
.cx-insp .cx-logo-info { max-width: 96px; font-size: var(--cx-petit); line-height: 18.4px; color: var(--texte); }
.cx-insp .cx-logo-pied .cx-lien-orange { font-size: 12.31px; line-height: 18.4px; }
.cx-insp .cx-visuels-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cx-insp .cx-tuiles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 11px; margin-top: 5.2px; }
.cx-insp .cx-tuile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 87px; cursor: pointer; text-align: left; }
.cx-insp .cx-tuile-img { display: grid; place-items: center; width: 87px; height: 87px; border-radius: 17px; overflow: hidden; background-color: var(--sable); color: rgba(255,255,255,.88); }
.cx-insp .cx-tuile-img img { width: 100%; height: 100%; object-fit: cover; }
.cx-insp .cx-tuile-img svg { width: 29px; height: 29px; }
.cx-insp .cx-tuile:hover .cx-tuile-img { box-shadow: 0 6px 16px rgba(44,26,20,.16); }
.cx-insp .cx-tuile-leg { max-width: 100%; font-size: 12.27px; font-weight: 700; line-height: 1.15; color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-insp .cx-tuile-plus { width: 85px; height: 85px; display: grid; place-items: center; border: 2px dashed #F9C2AE; border-radius: 20px; background: #FFF8F2; color: var(--texte); cursor: pointer; }
.cx-insp .cx-tuile-plus:hover { border-color: var(--orange-2); color: var(--orange-texte); }
.cx-insp .cx-tuile-plus svg { width: 20px; height: 20px; }
.cx-insp .cx-visuels.cx-survol { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(238, 93, 43, .14); }
.cx-insp .cx-visuels { grid-column: 1 / -1; }   /* les visuels ont leur ligne : avatar, logo et style du personnage forment la première */

/* « Style de vos vidéos » (Augustin, 06/11) : quatre choix, un seul actif, puis le personnage que Mika en tire */
.cx-insp .cx-sv-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.cx-insp .cx-sv-opt { display: flex; align-items: center; justify-content: center; gap: 7px; height: 48px; padding: 0 12px; border: 1px solid var(--champ-bord); border-radius: 14px; background: #fff; font-size: 14.3px; font-weight: 600; line-height: 1.2; color: var(--encre); text-align: center; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.cx-insp .cx-sv-opt svg { width: 16px; height: 16px; flex: none; stroke-width: 2.6; }
.cx-insp .cx-sv-opt:hover:not(:disabled):not([aria-pressed="true"]) { border-color: #D6CEC8; background: #FFFCFA; }
.cx-insp .cx-sv-opt[aria-pressed="true"] { border-color: var(--orange); background: var(--peche-clair); box-shadow: inset 0 0 0 1px var(--orange); font-weight: 700; color: var(--orange-texte); }
.cx-insp .cx-sv-opt:disabled { cursor: not-allowed; opacity: .6; }
.cx-insp .cx-perso { display: flex; align-items: flex-start; gap: 18px; margin-top: 18px; }
.cx-insp .cx-perso-cadre { position: relative; flex: none; width: 160px; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; }
.cx-insp .cx-perso-cadre:not(.squelette) { background: var(--sable); }
.cx-insp .cx-perso-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-insp .cx-perso-cadre.cx-perso-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 2px dashed #F9C2AE; background: #FFF8F2; text-align: center; font-size: var(--cx-petit); line-height: 1.4; color: var(--texte); }
.cx-insp .cx-perso-vide svg { width: 26px; height: 26px; color: var(--doux); }
.cx-insp .cx-dessine:not(.squelette)::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .66); }
.cx-insp .cx-perso-attente { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: var(--cx-petit); color: var(--orange-texte); }
.cx-insp .cx-perso-attente b { padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .92); font-weight: 700; color: var(--orange-texte); }   /* lisible sur n’importe quel dessin */
.cx-insp .cx-perso-attente svg { box-sizing: content-box; width: 24px; height: 24px; padding: 8px; border-radius: 50%; background: #fff; box-shadow: var(--ombre-carte); }
.cx-insp .cx-perso-cadre.squelette { border-radius: 20px; }
.cx-insp .cx-perso-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 2px; }
.cx-insp .cx-perso-texte p { font-size: var(--cx-corps); line-height: var(--cx-interligne); color: var(--texte); }
.cx-insp .cx-perso-texte .cx-perso-note { display: flex; align-items: flex-start; gap: 8px; font-size: var(--cx-petit); line-height: 1.4; color: var(--orange-texte); }
.cx-insp .cx-perso-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* ---------- 12 · Apprentissage ---------- */
.cx-appr .cx-appr-grille { display: grid; grid-template-columns: minmax(0, 1fr) 377px; gap: 25px; align-items: start; }
.cx-appr .cx-appr-gauche { display: flex; flex-direction: column; gap: 21.5px; min-width: 0; }
.cx-appr .cx-zone { display: flex; align-items: center; justify-content: center; gap: 18.9px; min-height: 132.3px; padding: 20px 24px; border: 2px dashed #F9C2AE; border-radius: 24px; background: #FFF8F2; cursor: pointer; transition: background .15s, border-color .15s; }
.cx-appr .cx-zone:hover, .cx-appr .cx-zone.cx-survol { background: var(--peche-clair); border-color: var(--orange-2); }
.cx-appr .cx-zone.cx-envoi { opacity: .85; }
.cx-appr .cx-zone-ico { width: 56.7px; height: 56.7px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--peche); color: var(--orange-texte); }
.cx-appr .cx-zone-ico svg { width: 24px; height: 24px; }
.cx-appr .cx-zone-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-top: 5.6px; }
.cx-appr .cx-zone-texte b { font-size: var(--cx-gras); font-weight: 700; line-height: 1.35; }
.cx-appr .cx-zone-texte span { font-size: var(--cx-corps); color: var(--texte); }
.cx-appr .cx-tableau { padding: 0 8px 0; overflow: hidden; }
.cx-appr .cx-tr { display: grid; grid-template-columns: minmax(0, 1fr) 111px 78.6px 172.4px 34px; align-items: center; min-height: 90.6px; padding: 0 12.7px 0 14.7px; border-top: 1px solid var(--ligne); }
.cx-appr .cx-th { min-height: 0; height: 45px; padding-top: 3.4px; border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.cx-appr .cx-th span:first-child { padding-left: 0; }
.cx-appr .cx-td-contenu { display: flex; align-items: center; gap: 12.3px; min-width: 0; padding-right: 14px; }
.cx-appr .cx-mini { width: 48px; height: 61px; flex: none; display: grid; place-items: center; border-radius: 16px; overflow: hidden; color: rgba(255,255,255,.9); }
.cx-appr .cx-mini svg { width: 19px; height: 19px; }
.cx-appr .cx-mini img { width: 100%; height: 100%; object-fit: cover; }
.cx-appr .cx-mini-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.cx-appr .cx-cell-btn { max-width: 100%; padding: 2px 0; border-radius: 6px; font-size: var(--cx-corps); color: var(--encre); text-align: left; cursor: pointer; }
.cx-appr .cx-cell-btn:hover:not(:disabled) { text-decoration: underline; text-decoration-color: var(--orange-pale); text-underline-offset: 4px; }
.cx-appr .cx-ctitre { padding: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-appr .cx-meta { font-size: var(--cx-petit); color: var(--texte); }
.cx-appr .cx-vues { font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-appr .cx-a-remplir { color: var(--doux); }
.cx-appr .cx-td-note { display: flex; align-items: center; gap: 8px; }
.cx-appr .cx-pouce { width: 37px; height: 37px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--champ-bord); background: #fff; color: var(--encre); transition: background .15s, border-color .15s; }
.cx-appr .cx-pouce svg { width: 17px; height: 17px; }
.cx-appr .cx-pouce:hover:not(:disabled) { border-color: #D6CEC8; }
.cx-appr .cx-pouce[data-cx-note="haut"][aria-pressed="true"] { background: var(--vert-fond); border-color: var(--vert-fond); color: var(--vert); }
.cx-appr .cx-pouce[data-cx-note="bas"][aria-pressed="true"] { background: var(--gris-fond); border-color: var(--gris-fond); color: var(--doux); }
.cx-appr .cx-a-noter { margin-left: 1px; font-size: var(--cx-petit); color: var(--doux); white-space: nowrap; }
.cx-appr .cx-td-menu { display: flex; justify-content: flex-end; }
.cx-appr .cx-points { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--encre); }
.cx-appr .cx-points:hover { background: var(--sable); }
.cx-appr .cx-points svg { width: 18px; height: 18px; stroke-width: 2.6; }
.cx-appr .cx-table-vide { display: flex; align-items: center; gap: 14px; padding: 26px 14px 30px; border-top: 1px solid var(--ligne); }
.cx-appr .cx-table-vide svg { width: 24px; height: 24px; flex: none; color: var(--doux); }
.cx-appr .cx-table-vide p { font-size: var(--cx-corps); line-height: var(--cx-interligne); color: var(--texte); }
.cx-appr .cx-appr-droite { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cx-appr .cx-appris { padding: 27.1px 27px 23.5px; background: linear-gradient(180deg, #FFF3EA 0%, #FFFFFF 70%); }
.cx-appr .cx-appris-tete { display: flex; align-items: flex-start; gap: 18.3px; }
.cx-appr .cx-appris-tete .mascotte { width: 41px; height: 41px; }
.cx-appr .cx-appris-tete b { display: block; font-size: var(--cx-gras); font-weight: 700; }
.cx-appr .cx-appris-tete span { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: var(--cx-petit); color: var(--texte); }
.cx-appr .cx-appris-tete span svg { width: 14px; height: 14px; }
.cx-appr .cx-appris-liste { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cx-appr .cx-appris-liste li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--cx-corps); line-height: 20px; color: var(--encre); }
.cx-appr .cx-appris-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--sable); color: var(--orange-texte); }
.cx-appr .cx-appris-ico svg { width: 16px; height: 16px; }
.cx-appr .cx-appris-vide { margin-top: 16px; font-size: var(--cx-corps); line-height: var(--cx-interligne); color: var(--texte); }
.cx-appr .cx-niveau { padding: 25px 25px 21px; }
.cx-appr .cx-niveau-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cx-appr .cx-niveau-haut b { font-size: var(--cx-gras); font-weight: 700; }
.cx-appr .cx-niveau-haut span { font-size: 13.32px; font-weight: 700; color: var(--orange-texte); white-space: nowrap; }
.cx-appr .cx-barres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9.3px; margin-top: 13px; }
.cx-appr .cx-barres i { height: 8px; border-radius: 99px; background: var(--sable-2); }
.cx-appr .cx-barres i.cx-on { background: var(--orange); }
.cx-appr .cx-niveau-aide { margin-top: 12.6px; font-size: var(--cx-corps); color: var(--texte); }

/* ---------- 13 · Fréquence ---------- */
.cx-freq .cx-fcartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cx-freq .cx-fcarte { display: flex; flex-direction: column; align-items: flex-start; min-height: 166px; padding: 26px 26px 24px; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cx-freq .cx-fcarte:hover:not(:disabled), .cx-freq .cx-fcarte.cx-choisie { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 10px 26px rgba(238, 93, 43, .10); }
.cx-freq .cx-fcarte:disabled { cursor: default; }
.cx-freq .cx-fcarte.cx-actuelle { background: var(--fond-2); }
.cx-freq .cx-fhaut { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.cx-freq .cx-fnombre { font: 700 44px/1 var(--titre); font-variant-numeric: lining-nums; color: var(--encre); }
.cx-freq .cx-fbadge { height: 26px; }
.cx-freq .cx-radio { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #D9CFC8; background: #fff; }
.cx-freq .cx-fcarte.cx-choisie .cx-radio { border: 6px solid var(--orange); }
.cx-freq .cx-fcarte.cx-calcul { cursor: progress; }
.cx-freq .cx-fcarte.cx-calcul .cx-radio { border: 3px solid var(--orange-pale); border-top-color: var(--orange); animation: tourne .9s linear infinite; }
.cx-freq .cx-ftitre { margin-top: 20px; font-size: 17px; font-weight: 700; color: var(--encre); }
.cx-freq .cx-fprix { margin-top: 6px; font-size: 14.5px; color: var(--texte); }
.cx-freq .cx-fnote { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14.5px; color: var(--texte); }
.cx-freq .cx-fnote svg { width: 16px; height: 16px; }
.cx-voile { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
@media (min-width: 1081px) { .cx-voile { left: 297px; } }

/* ---------- fenêtres ---------- */
.cx-modale .cx-m-champs { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.cx-modale .cx-m-form { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.cx-modale .cx-m-retirer { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px; font-size: 15px; font-weight: 700; color: var(--orange-texte); cursor: pointer; }
.cx-modale .cx-m-retirer svg { width: 17px; height: 17px; }
.cx-modale .cx-m-retirer:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cx-modale .modale-pied .pousse { flex: 1; }
.cx-modale .cx-m-lecteur { width: 100%; max-height: 300px; margin-top: 20px; border-radius: 16px; background: #000; }
.cx-modale .cx-m-ouvrir { margin-top: 18px; }
.cx-modale .cx-m-ouvrir svg { width: 16px; height: 16px; }
.cx-modale .cx-boite-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 52px; padding: 8px 10px; border: 1px solid var(--champ-bord); border-radius: 12px; background: #fff; }
.cx-modale .cx-boite-puces:focus-within { border-color: var(--orange); box-shadow: var(--anneau); }
.cx-modale .cx-puce { display: inline-flex; align-items: center; gap: 6px; height: 33px; padding: 0 13px; border-radius: 99px; border: 1px solid #F6A88B; background: var(--peche); font-size: 14.5px; font-weight: 500; color: var(--orange-texte); white-space: nowrap; }
.cx-modale .cx-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -5px; border-radius: 50%; color: var(--orange-texte); cursor: pointer; }
.cx-modale .cx-x svg { width: 14px; height: 14px; }
.cx-modale .cx-m-apercu { display: grid; place-items: center; margin-top: 20px; min-height: 120px; padding: 12px; border-radius: 16px; background: var(--sable); }
.cx-modale .cx-m-apercu img { max-height: 260px; border-radius: 12px; }
.cx-modale .cx-m-apercu + .champ { margin-top: 18px; }
.cx-modale .cx-m-mois { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.cx-modale .cx-m-li { display: flex; gap: 16px; align-items: flex-start; margin-top: 20px; padding: 18px; border-radius: 16px; background: var(--sable); }
.cx-modale .cx-m-li-logo { width: 30px; height: 30px; flex: none; color: var(--linkedin); }
.cx-modale .cx-m-li p { font-size: 15px; line-height: 1.5; color: var(--encre); }
.cx-modale .cx-m-pub-ligne { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 22px; }

/* « Passer à la formule … ? » (maquette 13) */
.cx-m-formule .modale-entete h2 { font-size: 27.9px; }
.cx-m-formule .modale-entete p { margin-top: 14px; font-size: var(--cx-corps, 13.33px); }
.cx-m-formule .cx-compare { display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); align-items: center; margin-top: 26px; }
.cx-m-formule .cx-cmp { display: flex; flex-direction: column; min-height: 143.2px; padding: 21px 18px 18px 20px; border-radius: 22px; }
.cx-m-formule .cx-cmp-avant { background: var(--sable); }
.cx-m-formule .cx-cmp-apres { background: var(--peche-clair); border: 1.5px solid var(--orange); }
.cx-m-formule .cx-cmp-sur { font-size: 12.47px; font-weight: 600; line-height: 15px; text-transform: uppercase; color: var(--texte); }
.cx-m-formule .cx-cmp-apres .cx-cmp-sur { color: var(--orange-texte); }
.cx-m-formule .cx-cmp b { margin-top: 8px; font-size: 15.6px; font-weight: 700; line-height: 19.5px; }
.cx-m-formule .cx-cmp > span:not(.cx-cmp-sur) { margin-top: 2px; font-size: 13.33px; line-height: 17.3px; color: var(--encre); }
.cx-m-formule .cx-cmp strong { margin-top: 13px; font: 700 25.1px/1 var(--titre); font-variant-numeric: lining-nums; color: var(--encre); }
.cx-m-formule .cx-euro { font-family: var(--corps); font-weight: 800; }
.cx-m-formule .cx-ht { font: 600 13px/1 var(--corps); color: var(--texte); white-space: nowrap; }
.cx-m-formule .cx-cmp-fleche { display: grid; place-items: center; color: var(--orange); }
.cx-m-formule .cx-cmp-fleche svg { width: 22px; height: 22px; }
.cx-m-formule .cx-lignes { margin: 23px 0 0; display: flex; flex-direction: column; gap: 10px; }
.cx-m-formule .cx-lignes div { display: flex; justify-content: space-between; gap: 16px; font-size: 13.34px; line-height: 18px; }
.cx-m-formule .cx-lignes dt { color: var(--texte); }
.cx-m-formule .cx-lignes dd { margin: 0; font-weight: 700; color: var(--encre); white-space: nowrap; }
.cx-m-formule .cx-puces-cb { letter-spacing: .18em; }
.cx-m-formule .cx-m-erreur { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; padding: 14px 16px; border-radius: 14px; background: var(--jaune-fond); color: var(--jaune); font-size: 14.5px; line-height: 1.45; }
.cx-m-formule .cx-m-erreur svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cx-m-formule .cx-mika-dit { display: flex; align-items: center; gap: 16px; min-height: 68.8px; margin-top: 21px; padding: 12px 20px; border-radius: 22px; border: 1px solid #F8D3C3; background: var(--peche-clair); }
.cx-m-formule .cx-mika-dit .mascotte { width: 31px; height: 31px; }
.cx-m-formule .cx-mika-dit p { font-size: 13.33px; line-height: 19.2px; color: var(--encre); }
.cx-m-formule .cx-m-note { margin-top: 14px; font-size: 14px; color: var(--texte); }
.cx-m-formule .modale-pied { margin-top: 24px; gap: 16px; }
.cx-m-formule .modale-pied .btn { padding: 0 24px; font-size: 15.5px; }

/* ---------- 14 · Planning édito ---------- */
.cx-plan .cx-semaine { padding: 24.6px 22.4px 23px; }
.cx-plan .cx-h2 { font-size: 19.7px; }
.cx-plan .cx-semaine-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cx-plan .cx-resume { font-size: var(--cx-corps); color: var(--texte); white-space: nowrap; }
.cx-plan .cx-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.cx-plan .cx-jour { display: flex; flex-direction: column; gap: 7.8px; min-height: 159px; padding: 11px 11.1px 12px; border-radius: 18px; background: var(--sable); min-width: 0; }
.cx-plan .cx-jour-nom { margin: 0 0 1.5px 1.5px; font-size: 12.45px; font-weight: 600; line-height: 18px; text-transform: uppercase; color: var(--texte); }
.cx-plan .cx-evt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 6px 9px 6.2px 22.2px; border-radius: 12px; text-align: left; cursor: pointer; transition: filter .15s; }
.cx-plan .cx-evt:hover:not(:disabled) { filter: brightness(.97); }
.cx-plan .cx-evt:disabled { cursor: default; }
.cx-plan .cx-evt::before { content: ""; position: absolute; left: 8.1px; top: 7.1px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cx-plan .cx-evt b { font-size: 12.8px; font-weight: 700; line-height: 17.8px; color: inherit; }
.cx-plan .cx-evt span { font-size: 12.45px; font-weight: 600; line-height: 17.8px; }
.cx-plan .cx-evt-storyboard { background: var(--bleu-fond); color: var(--bleu); }
.cx-plan .cx-evt-publication { background: #DDF0E6; color: var(--vert); }
.cx-plan .cx-evt-video { background: var(--peche); color: var(--orange-texte); }
.cx-plan .cx-plan-bas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21.6px; margin-top: 20.5px; align-items: stretch; }
.cx-plan .cx-plan-carte { display: flex; flex-direction: column; gap: 14px; padding: 22.4px 25px 26px; min-width: 0; }
.cx-plan .cx-rdv > .cx-champ:first-of-type { margin-top: 5.4px; }
.cx-plan .cx-duree { gap: 22.2px; padding-top: 21.9px; }
.cx-plan .cx-st-carte { gap: 18px; padding-top: 24px; padding-bottom: 25.9px; }
.cx-plan .cx-seg .segment button { height: 33.3px; }
.cx-plan .cx-plan-carte .cx-h2 { margin-bottom: 2px; }
.cx-plan .cx-rdv-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 106.1px; gap: 11.7px; }
.cx-plan .cx-select { position: relative; display: flex; align-items: center; height: 46px; padding: 0 18px; border: 1px solid var(--champ-bord); border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cx-plan .cx-select:hover { border-color: #D8D0CA; }
.cx-plan .cx-select:focus-within { border-color: var(--orange); box-shadow: var(--anneau); }
.cx-plan .cx-select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.cx-plan .cx-select select:disabled { cursor: not-allowed; }
.cx-plan .cx-select-texte { display: inline-flex; align-items: center; gap: 12px; font-size: 15.55px; color: var(--encre); pointer-events: none; }
.cx-plan .cx-select-texte svg { width: 16px; height: 16px; }
.cx-plan .cx-heure { width: 100%; height: 46px; padding: 0 18px; border: 1px solid var(--champ-bord); border-radius: 14px; background: #fff; font-size: 15.55px; color: var(--encre); outline: none; transition: border-color .15s, box-shadow .15s; }
.cx-plan .cx-heure:focus { border-color: var(--orange); box-shadow: var(--anneau); }
.cx-plan .cx-heure.cx-erreur { border-color: #D9534F; }
.cx-plan .cx-canal { gap: 7px; height: 34px; padding: 0 12px; }
.cx-plan .cx-canal svg { width: 18px; height: 18px; }
.cx-plan .cx-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cx-plan .cx-format { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; min-height: 121.1px; padding: 11px 4px 9.8px; border: 1px solid var(--champ-bord); border-radius: 18px; background: #fff; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.cx-plan .cx-format:hover:not(:disabled) { border-color: #D6CEC8; }
.cx-plan .cx-format[aria-pressed="true"] { border-color: var(--orange); background: var(--peche-clair); }
.cx-plan .cx-format b { margin-top: 7.1px; line-height: 16.1px; font-size: 12.24px; font-weight: 700; color: var(--encre); white-space: nowrap; }
.cx-plan .cx-format span:last-child { margin-top: 8px; line-height: 16.1px; font-size: 12.24px; color: var(--texte); white-space: nowrap; }
.cx-plan .cx-dessin { display: block; border-radius: 6px; background: var(--sable-3); }
.cx-plan .cx-format[aria-pressed="true"] .cx-dessin { background: #F05A2B; }
.cx-plan .cx-dessin-9-16 { width: 30px; height: 51px; }
.cx-plan .cx-dessin-1-1 { width: 43px; height: 43px; }
.cx-plan .cx-dessin-16-9 { width: 60px; height: 33px; }
.cx-plan .cx-st-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cx-plan .cx-st-ligne .cx-label, .cx-plan .cx-st-carte .cx-champ .cx-label { font-size: 13.33px; }
.cx-plan [data-cx-st] { display: flex; flex-direction: column; gap: 9.4px; margin-top: -6px; }
.cx-plan .cx-apercu { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 94.5px; padding: 0 14px 13.4px; border-radius: 16px; overflow: hidden; }
.cx-plan .cx-apercu.cx-sans-st { align-items: center; padding-bottom: 0; }
.cx-plan .cx-st { max-width: 100%; text-align: center; }
.cx-plan .cx-st-bulle { padding: 3.5px 11px; border-radius: 8px; background: #fff; font-size: 13.34px; font-weight: 800; line-height: 19.6px; color: var(--encre); }
.cx-plan .cx-st-karaoke { font-size: 14.5px; font-weight: 800; line-height: 1.35; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.cx-plan .cx-st-karaoke mark { padding: 0 5px; border-radius: 6px; background: var(--orange); color: #fff; text-shadow: none; }
.cx-plan .cx-st-sobre { font-size: 14px; font-weight: 600; line-height: 1.35; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.cx-plan .cx-st-off { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); }
.cx-plan .cx-styles { gap: 9px; }
.cx-plan .cx-style { height: 24.4px; padding: 0 10.5px; font-size: 12.52px; }
.cx-plan .cx-st-carte .cx-sep { margin: -0.8px 0 -2.8px; }
.cx-plan .cx-st-carte .cx-champ { gap: 12px; }

/* ---------- fenêtre moins large que les maquettes (1600 px) ----------
   Mesuré à 1081, 1280, 1366, 1440 et 1536 px : les segmentés (« Type de clientèle » 362 px, « Sans réponse 24 h » 332 px) et les trois cartes du
   planning ne tiennent plus dans leurs colonnes. Le formulaire du client idéal prend d’abord toute la ligne pour ces deux segmentés, puis passe
   à une colonne ; le planning passe à deux cartes puis une. */
@media (max-width: 1580px) {
  .cx-plan .cx-st-carte .cx-seg .segment button { padding: 0 12px; }
}
@media (max-width: 1560px) {
  .cx-icp .cx-icp-form > .cx-icp-cellule:nth-child(-n+2) { grid-column: 1 / -1; }
}
@media (max-width: 1500px) {
  .cx-plan .cx-plan-bas { grid-template-columns: 1fr 1fr; }
  .cx-plan .cx-st-carte { grid-column: 1 / -1; }
  .cx-plan .cx-st-carte [data-cx-st], .cx-plan .cx-st-carte .cx-st-ligne { max-width: 560px; }
}
@media (max-width: 1400px) {
  .cx-insp .cx-insp-bas { grid-template-columns: minmax(0, 1fr); }
  .cx-insp .cx-insp-id { grid-template-columns: 1fr 1fr; }
  .cx-insp .cx-sv-choix { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1370px) {
  .cx-icp .cx-icp-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- petit écran ---------- */
@media (max-width: 1280px) {
  .cx-icp .cx-icp-grille, .cx-appr .cx-appr-grille { grid-template-columns: minmax(0, 1fr) 320px; }
  .cx-icp .cx-seg .segment button { padding: 0 12px; font-size: 14px; }
  .cx-insp .cx-insp-grille { grid-template-columns: 260px minmax(0, 1fr); }
  .cx-insp .cx-retient { grid-column: 1 / -1; }
  .cx-appr .cx-tr { grid-template-columns: minmax(0, 1fr) 96px 66px 170px 34px; }
}
@media (max-width: 1080px) {
  .cx-icp .cx-icp-grille, .cx-appr .cx-appr-grille { grid-template-columns: minmax(0, 1fr); }
  .cx-icp .page-entete { align-items: flex-start; flex-direction: column; }
  .cx-icp .page-entete > div:first-child { flex: none; }   /* en colonne, la hauteur d’origine de 360 px laisserait un grand vide sous le titre */
  .cx-icp .page-entete-droite { flex: none; max-width: 100%; }
}
@media (max-width: 760px) {
  .cx-icp .cx-icp-form { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .cx-icp .cx-seg .segment { display: flex; width: 100%; }
  .cx-icp .cx-seg .segment button { flex: 1; padding: 0 10px; font-size: 14.5px; min-width: 0; }
  .cx-icp .cx-persona, .cx-icp .cx-precision { padding: 20px 18px; }
  .cx-insp .cx-insp-haut { padding: 20px 16px; }
  .cx-insp .cx-insp-grille { grid-template-columns: minmax(0, 1fr); }
  .cx-insp .cx-depot { min-height: 150px; }
  .cx-insp .cx-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-insp .cx-insp-bas { gap: 16px; margin-top: 18px; }
  .cx-insp .cx-insp-id { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cx-insp .cx-visuels { grid-column: auto; }
  .cx-insp .cx-sv-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-insp .cx-perso { flex-direction: column; gap: 16px; }
  .cx-insp .cx-bas-carte { padding: 20px 18px; }
  .cx-insp .cx-visuels-tete { flex-direction: column; }
  .cx-insp .cx-logo-info { max-width: none; }
  .cx-insp .cx-logo-boite img { max-width: 60%; }
  .cx-appr .cx-zone { flex-direction: column; text-align: center; gap: 14px; padding: 20px 16px; }
  .cx-appr .cx-tableau { padding: 0 4px; }
  .cx-appr .cx-th { display: none; }
  .cx-appr .cx-tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "contenu menu" "pub vues" "note note"; row-gap: 8px; padding: 14px 8px 16px; min-height: 0; }
  .cx-appr .cx-tr:first-of-type { border-top: 0; }
  .cx-appr .cx-td-contenu { grid-area: contenu; padding-right: 0; }
  .cx-appr .cx-td-menu { grid-area: menu; align-self: start; }
  .cx-appr .cx-tr > div:nth-child(2) { grid-area: pub; }
  .cx-appr .cx-tr > div:nth-child(3) { grid-area: vues; justify-self: end; }
  .cx-appr .cx-td-note { grid-area: note; }
  .cx-appr .cx-niveau, .cx-appr .cx-appris { padding: 20px 18px; }
  .cx-freq .cx-fcartes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cx-freq .cx-fcarte { min-height: 0; padding: 20px; }
  .cx-plan .cx-semaine { padding: 20px 16px; }
  .cx-plan .cx-semaine-tete { flex-direction: column; gap: 4px; }
  .cx-plan .cx-resume { white-space: normal; }
  .cx-plan .cx-jours { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cx-plan .cx-jour { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; }
  .cx-plan .cx-jour-nom { width: 92px; margin: 0; }
  .cx-plan .cx-evt { width: auto; flex: 1 1 150px; }
  .cx-plan .cx-plan-bas { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cx-plan .cx-st-carte { grid-column: auto; }
  .cx-plan .cx-plan-carte { padding: 20px 18px; }
  .cx-plan .cx-formats { gap: 8px; }
  .cx-plan .cx-format b, .cx-plan .cx-format span:last-child { white-space: normal; }
  /* la fenêtre de changement de formule tient dans un écran de 844 px : « Confirmer » se voit sans défiler (les deux formules côte à côte) */
  .cx-m-formule .modale-entete h2 { font-size: 22px; }
  .cx-m-formule .modale-entete p { margin-top: 8px; }
  .cx-m-formule .cx-compare { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); align-items: stretch; margin-top: 18px; }
  .cx-m-formule .cx-cmp { min-height: 0; padding: 14px 12px 12px 14px; border-radius: 18px; }
  .cx-m-formule .cx-cmp strong { margin-top: 8px; font-size: 22px; }
  .cx-m-formule .cx-cmp-fleche svg { width: 18px; height: 18px; }
  .cx-m-formule .cx-lignes { margin-top: 16px; gap: 8px; }
  .cx-m-formule .cx-lignes div { flex-wrap: wrap; gap: 2px 12px; }
  .cx-m-formule .cx-mika-dit { margin-top: 16px; min-height: 0; padding: 10px 14px; }
  .cx-m-formule .modale-pied { margin-top: 16px; }
  .cx-m-formule .modale-pied { flex-wrap: wrap; }
  .cx-m-formule .modale-pied .btn { flex: 1 1 100%; }
  .cx-modale .cx-m-mois, .cx-modale .cx-m-pub-ligne { grid-template-columns: minmax(0, 1fr); }
  .cx-appr .cx-vues:not(.cx-vues-vide)::after { content: " vues"; font-weight: 500; color: var(--texte); }   /* sans en-têtes de colonnes, le nombre dit ce qu’il compte */
}
@media (max-width: 400px) {
  .cx-icp .cx-seg .segment button, .cx-plan .cx-seg .segment button { padding: 0 6px; font-size: 13.5px; }
}
.cx-canaux-note { margin: 8px 0 0; }