/* Visualiseur de maquettes : l'outil autour est aux couleurs de C&C, le site maquetté est en niveaux de gris. */
html, body { height: 100%; }
body { background: #e7e5ec; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }

/* ---------- barre d'outils ---------- */
.outil { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--nuit); color: #fff; flex-wrap: wrap; z-index: 20; }
.o-logo img { height: 30px; display: block; }
.o-titre { font-weight: 800; font-size: 15px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .2); }
.o-options { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.o-options button { border: 0; background: none; color: #d8cff0; font-weight: 600; font-size: 13.5px; padding: 7px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.o-options button b { font-weight: 800; margin-right: 4px; }
.o-options button[aria-selected="true"] { background: var(--grad); color: #fff; }
.o-droite { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.o-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.o-seg button { display: flex; align-items: center; gap: 6px; border: 0; background: none; color: #d8cff0; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
.o-seg button[aria-pressed="true"] { background: #fff; color: var(--nuit); }
.o-seg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.o-bt { border: 1px solid rgba(255, 255, 255, .22); background: none; color: #e9e2fa; padding: 7px 12px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; }
.o-bt[aria-pressed="false"] { opacity: .55; }
.o-cta { background: var(--grad); border-color: transparent; color: #fff; }

.atelier { display: grid; grid-template-columns: 300px 1fr; min-height: 0; }
body.sans-plan .atelier { grid-template-columns: 1fr; }
body.sans-plan .plan { display: none; }

/* ---------- plan du site ---------- */
.plan { background: #fff; border-right: 1px solid #dcd8e4; overflow-y: auto; padding: 12px 10px 40px; font-size: 13.5px; }
.plan-tete { display: flex; gap: 6px; position: sticky; top: -12px; background: #fff; padding: 4px 0 10px; z-index: 1; }
.plan-tete input { flex: 1; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px; border: 1px solid #dcd8e4; }
.plan-fermer { display: none; border: 0; background: #f1eef6; border-radius: 10px; width: 36px; font-size: 20px; cursor: pointer; }
.plan h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-3); margin: 16px 6px 6px; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan ul ul { padding-left: 14px; border-left: 1px dashed #d9d2e8; margin-left: 10px; }
.plan a { display: flex; gap: 6px; align-items: baseline; padding: 5px 8px; border-radius: 8px; color: var(--texte); text-decoration: none; line-height: 1.3; }
.plan a:hover { background: var(--lilas); }
.plan a.on { background: var(--nuit); color: #fff; }
.plan a small { color: var(--texte-3); font-size: 11px; margin-left: auto; white-space: nowrap; }
.plan a.on small { color: #cfc4ea; }
.plan .vide { padding: 8px; color: var(--texte-3); }

/* ---------- toile ---------- */
.toile { overflow-y: auto; padding: 14px clamp(10px, 2vw, 28px) 60px; min-width: 0; }
.fil { max-width: 1280px; margin: 0 auto 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 13px; color: var(--texte-2); }
.fil b { font-size: 16px; color: var(--texte); }
.fil code { font-size: 12px; background: #fff; padding: 2px 8px; border-radius: 6px; color: var(--texte-2); }
.fil .chip { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--lilas-2); color: var(--violet); }
.cadre { margin: 0 auto; background: #fff; box-shadow: 0 30px 70px -40px rgba(14, 0, 36, .45); transition: max-width .35s ease; }
.cadre.ordi { max-width: 1280px; border-radius: 10px; overflow: clip; }
.cadre.mobile { max-width: 390px; border-radius: 36px; border: 10px solid #1d1b22; overflow: clip; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--nuit); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 50; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ================= LE SITE MAQUETTÉ (niveaux de gris) ================= */
.site { container-type: inline-size; --g0: #ffffff; --g1: #f4f4f5; --g2: #e6e6e8; --g3: #cfcfd3; --g4: #9a9aa1; --g5: #5d5d64; --g6: #2c2c31; --g7: #141416;
  color: var(--g6); font-size: 15px; line-height: 1.55; background: var(--g0); }
.site * { min-width: 0; }
.site h1, .site h2, .site h3 { color: var(--g7); letter-spacing: -0.015em; }
.site a:where(:not(.w-btn)) { color: inherit; }
.w-in { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4cqi, 40px); }
.w-sec { padding: clamp(28px, 5cqi, 56px) 0; border-bottom: 1px dashed var(--g2); position: relative; }
.w-sec.gris { background: var(--g1); }
.w-sec.fonce { background: var(--g6); color: var(--g1); }
.w-sec.fonce h2, .w-sec.fonce h3 { color: #fff; }
.w-type { position: absolute; top: 6px; right: 8px; font-size: 10px; font-family: ui-monospace, Consolas, monospace; color: var(--g4); text-transform: uppercase; letter-spacing: .06em; }
body.sans-notes .w-type { display: none; }
.w-h2 { font-size: clamp(22px, 3.2cqi, 32px); font-weight: 800; margin-bottom: 12px; }
.w-intro { color: var(--g5); max-width: 70ch; margin-bottom: 18px; }
.w-p { max-width: 72ch; margin-bottom: 12px; }
.w-sur { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--g5); margin-bottom: 10px; display: block; }
.w-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.w-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 99px; background: var(--g6); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; border: 2px solid var(--g6); cursor: pointer; }
.w-btn.secondary { background: transparent; color: var(--g6); }
.w-btn.link { background: none; border: 0; padding: 0; color: var(--g6); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.fonce .w-btn { background: #fff; color: var(--g7); border-color: #fff; }
.fonce .w-btn.secondary { background: transparent; color: #fff; }
.fonce .w-btn.link { color: #fff; }
.w-btn[data-to]:hover { outline: 3px solid rgba(128, 43, 255, .45); outline-offset: 2px; }
.w-btn .fl { font-size: 13px; }

/* médias : cadre barré */
.w-media { position: relative; display: grid; place-items: center; text-align: center; padding: 14px; min-height: 160px; border-radius: 10px; color: var(--g5); font-size: 12.5px; line-height: 1.35;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--g3) 50%, transparent calc(50% + 1px)), linear-gradient(to bottom right, transparent calc(50% - 1px), var(--g3) 50%, transparent calc(50% + 1px)), var(--g2); }
.w-media span { background: var(--g2); padding: 6px 10px; border-radius: 8px; max-width: 90%; }
.w-media b { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--g6); margin-bottom: 3px; }
.w-media.video { background: var(--g5); color: #f1f1f2; min-height: 220px; }
.w-media.video span { background: rgba(0, 0, 0, .25); }
.w-media.video b { color: #fff; }
.w-media.video::before { content: "▶"; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--g6); font-size: 22px; margin-bottom: 8px; }
.w-media.portrait { border-radius: 50%; aspect-ratio: 1; min-height: 0; width: 100%; max-width: 220px; justify-self: center; font-size: 11px; }
.w-media.logo { min-height: 60px; border-radius: 6px; }
.w-media.illustration { border-radius: 16px; }
.w-media.cover { min-height: 340px; border-radius: 0; }
.w-avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--g3) 50%, transparent calc(50% + 1px)), linear-gradient(to bottom right, transparent calc(50% - 1px), var(--g3) 50%, transparent calc(50% + 1px)), var(--g2); }

/* hero */
.w-hero .grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 4cqi, 48px); align-items: center; }
.w-hero.center .grille { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.w-hero.center .w-btns { justify-content: center; }
.w-hero h1 { font-size: clamp(28px, 4.6cqi, 50px); font-weight: 800; line-height: 1.08; margin-bottom: 14px; }
.w-hero .txt { font-size: clamp(15px, 1.6cqi, 18px); color: var(--g5); max-width: 60ch; }
.w-aside { padding: 18px; border-radius: 14px; border: 2px solid var(--g3); background: var(--g0); display: grid; gap: 10px; align-content: start; }
.w-aside h3 { font-size: 17px; }

/* listes et cartes */
.w-bullets { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.w-bullets li { padding-left: 26px; position: relative; max-width: 80ch; }
.w-bullets li::before { content: "•"; position: absolute; left: 8px; color: var(--g4); font-weight: 800; }
.w-bullets.check li::before { content: "✓"; left: 4px; color: var(--g6); }
.w-bullets.quote { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.w-bullets.quote li { padding: 14px 16px 14px 34px; background: var(--g0); border: 1px solid var(--g2); border-radius: 12px; font-style: italic; }
.w-sec.gris .w-bullets.quote li { background: #fff; }
.w-bullets.quote li::before { content: "«"; left: 12px; top: 10px; font-size: 22px; font-style: normal; color: var(--g4); }
.w-cards { display: grid; grid-template-columns: repeat(var(--c, 3), 1fr); gap: 14px; }
.w-card { border: 1px solid var(--g3); border-radius: 14px; overflow: hidden; display: grid; align-content: start; background: var(--g0); }
.w-card .w-media { border-radius: 0; min-height: 130px; }
.w-card .c-in { padding: 14px 16px 16px; display: grid; gap: 6px; }
.w-card .eb { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--g5); }
.w-card h3 { font-size: 16.5px; line-height: 1.3; }
.w-card p { font-size: 14px; color: var(--g5); }
.w-card .meta { font-size: 12.5px; color: var(--g5); padding-top: 6px; border-top: 1px dashed var(--g3); }
.w-card .w-btn { justify-self: start; margin-top: 6px; padding: 7px 12px; font-size: 13px; }
.w-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.w-tile { border: 2px solid var(--g6); border-radius: 16px; padding: 18px; display: grid; gap: 6px; align-content: start; text-decoration: none; cursor: pointer; background: var(--g0); }
.w-tile h3 { font-size: 18px; }
.w-tile p { font-size: 14px; color: var(--g5); }
.w-tile .w-btn.link { margin-top: 4px; justify-self: start; }
.w-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4cqi, 48px); align-items: center; }
.w-split.rev > :first-child { order: 2; }
.w-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; counter-reset: s; }
.w-step { counter-increment: s; padding: 16px; border-radius: 14px; background: var(--g0); border: 1px solid var(--g2); display: grid; gap: 6px; align-content: start; }
.w-sec.gris .w-step { background: #fff; }
.w-step::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--g6); color: #fff; font-weight: 800; font-size: 14px; }
.w-step h3 { font-size: 16px; }
.w-step p { font-size: 14px; color: var(--g5); }
.w-timeline { display: grid; gap: 0; border-left: 3px solid var(--g3); margin-left: 8px; }
.w-timeline > div { position: relative; padding: 0 0 18px 22px; }
.w-timeline > div::before { content: ""; position: absolute; left: -9px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--g0); border: 3px solid var(--g6); }
.w-timeline .lb { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--g5); }
.w-timeline h3 { font-size: 16px; }
.w-timeline p { font-size: 14px; color: var(--g5); }
.w-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.w-stats div { padding: 16px; border-radius: 14px; border: 1px solid var(--g3); display: grid; gap: 2px; }
.w-stats b { font-size: clamp(26px, 3.6cqi, 38px); font-weight: 900; color: var(--g7); letter-spacing: -0.03em; }
.w-stats span { font-size: 13.5px; color: var(--g5); }
.w-quote { font-size: clamp(18px, 2.4cqi, 24px); font-weight: 600; line-height: 1.35; padding-left: 26px; border-left: 4px solid var(--g6); max-width: 60ch; }
.w-quote cite { display: block; font-size: 14px; font-style: normal; font-weight: 500; color: var(--g5); margin-top: 10px; }
.w-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.w-person { display: grid; gap: 8px; justify-items: start; padding: 14px; border-radius: 14px; border: 1px solid var(--g2); background: var(--g0); }
.w-person .w-avatar { width: 84px; height: 84px; }
.w-person b { font-size: 15px; }
.w-person span { font-size: 13px; color: var(--g5); }
.w-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.w-logos div { display: grid; place-items: center; text-align: center; padding: 14px 8px; min-height: 64px; border-radius: 10px; border: 1px dashed var(--g4); font-size: 12px; font-weight: 700; color: var(--g5); }
.w-faq { display: grid; gap: 8px; }
.w-faq details { border: 1px solid var(--g3); border-radius: 12px; padding: 12px 16px; background: var(--g0); }
.w-faq summary { cursor: pointer; font-weight: 700; }
.w-faq p { margin-top: 8px; color: var(--g5); font-size: 14px; }
.w-table { overflow-x: auto; }
.w-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.w-table th, .w-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--g3); vertical-align: top; }
.w-table th { background: var(--g2); font-size: 12.5px; }
.w-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.w-filters span { padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--g4); font-size: 13.5px; font-weight: 600; }
.w-filters span:first-child { background: var(--g6); color: #fff; border-color: var(--g6); }
.w-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; max-width: 760px; }
.w-form .f { display: grid; gap: 5px; font-size: 13.5px; font-weight: 600; }
.w-form .f.large { grid-column: 1 / -1; }
.w-form .in { height: 42px; border-radius: 10px; border: 1.5px solid var(--g3); background: var(--g0); }
.w-form .in.ta { height: 96px; }
.w-form .in.sel { display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; color: var(--g4); }
.w-form .opts { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 500; }
.w-form .opts span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--g3); border-radius: 8px; font-size: 13px; }
.w-form .opts span::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--g4); border-radius: 3px; }
.w-form .opts.radio span::before { border-radius: 50%; }
.w-form .chk { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: 13.5px; }
.w-form .chk::before { content: ""; width: 16px; height: 16px; flex: none; border: 1.5px solid var(--g4); border-radius: 4px; margin-top: 2px; }
.w-form .req { color: var(--g4); }
.w-embed { display: grid; place-items: center; text-align: center; gap: 6px; border: 2px dashed var(--g4); border-radius: 14px; padding: 20px; background: repeating-linear-gradient(135deg, var(--g1), var(--g1) 10px, var(--g0) 10px, var(--g0) 20px); }
.w-embed.s { min-height: 140px; } .w-embed.m { min-height: 260px; } .w-embed.l { min-height: 420px; }
.w-embed b { font-size: 15px; color: var(--g6); }
.w-embed span { font-size: 13px; color: var(--g5); max-width: 60ch; }
.w-band { border-radius: 18px; padding: clamp(22px, 4cqi, 40px); background: var(--g2); display: grid; gap: 8px; }
.w-band.dark { background: var(--g6); color: var(--g1); }
.w-band.dark h2 { color: #fff; }
.w-band.dark .w-btn { background: #fff; color: var(--g7); border-color: #fff; }
.w-band.dark .w-btn.secondary { background: transparent; color: #fff; }
.w-contact { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: clamp(18px, 3cqi, 28px); border-radius: 18px; border: 2px solid var(--g6); }
.w-contact .w-avatar { width: 96px; height: 96px; }
.w-contact .tel { font-size: 20px; font-weight: 800; color: var(--g7); }
.w-crumb { font-size: 13px; color: var(--g5); display: flex; gap: 8px; flex-wrap: wrap; }
.w-crumb span:not(:last-child)::after { content: "›"; margin-left: 8px; color: var(--g4); }

/* annotations (hors site) */
.w-note { margin: 0 auto; max-width: 1120px; padding: 10px 14px 10px 40px; position: relative; border: 1.5px dashed var(--violet); border-radius: 12px; background: #faf6ff; color: #4a2d86; font-size: 13.5px; }
.w-note::before { content: "✎"; position: absolute; left: 14px; top: 9px; color: var(--violet); }
.w-note-wrap { padding: 10px clamp(16px, 4cqi, 40px); }
body.sans-notes .w-note-wrap, body.sans-notes .w-purpose { display: none; }
.w-purpose { padding: 10px clamp(16px, 4cqi, 40px); background: #faf6ff; border-bottom: 1.5px dashed var(--violet); color: #4a2d86; font-size: 13.5px; }
.w-purpose b { color: var(--violet); }
.w-instances { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.w-instances span { font-size: 12px; background: #fff; border: 1px solid #e0d2fb; border-radius: 6px; padding: 1px 7px; }
.w-redirect { display: grid; gap: 8px; text-align: center; justify-items: center; }
.w-redirect code { font-size: 15px; background: var(--g1); padding: 6px 12px; border-radius: 8px; }

/* en-tête et pied du site maquetté */
.w-header { position: sticky; top: 0; z-index: 3; background: var(--g0); border-bottom: 2px solid var(--g3); }
.w-header .bar { display: flex; align-items: center; gap: 14px; padding: 10px clamp(12px, 3cqi, 28px); }
.w-logo { display: grid; place-items: center; width: 132px; height: 40px; border-radius: 6px; border: 1.5px dashed var(--g4); font-size: 11px; font-weight: 800; color: var(--g5); letter-spacing: .08em; flex: none; cursor: pointer; }
.w-menu { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.w-menu > .mi { position: relative; }
.w-menu > .mi > a { display: block; padding: 8px 9px; font-size: 13px; font-weight: 700; text-decoration: none; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.w-menu > .mi > a:hover, .w-menu > .mi.open > a { background: var(--g1); }
.w-menu .sous { display: none; position: absolute; top: 100%; left: 0; min-width: 280px; max-width: 360px; padding: 8px; background: var(--g0); border: 1.5px solid var(--g3); border-radius: 12px; box-shadow: 0 16px 36px -20px rgba(0, 0, 0, .35); z-index: 4; }
.w-menu .mi.open .sous { display: grid; }
.w-menu .sous a { padding: 7px 10px; border-radius: 8px; font-size: 13px; text-decoration: none; cursor: pointer; }
.w-menu .sous a:hover { background: var(--g1); }
.w-menu .sous a.inert { color: var(--g4); cursor: default; }
.w-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.w-actions .tel { font-size: 13px; font-weight: 800; white-space: nowrap; }
.w-actions .rappel { font-size: 12.5px; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.w-actions .w-btn { padding: 9px 14px; font-size: 13px; }
.w-burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--g3); background: var(--g0); font-size: 18px; cursor: pointer; }
.w-tiroir { display: none; padding: 8px 16px 16px; border-top: 1px solid var(--g2); }
.w-tiroir.open { display: grid; gap: 2px; }
.w-tiroir a { padding: 9px 4px; font-weight: 700; font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--g1); cursor: pointer; }
.w-tiroir a.sub { font-weight: 500; padding-left: 16px; font-size: 13.5px; color: var(--g5); }
.w-barre-mobile { display: none; position: sticky; bottom: 0; z-index: 3; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; background: var(--g0); border-top: 2px solid var(--g3); }
.w-barre-mobile .w-btn { justify-content: center; }
.w-footer { background: var(--g6); color: var(--g2); padding: 34px 0 20px; font-size: 13px; }
.w-footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.w-footer h4 { color: #fff; font-size: 13px; margin: 0 0 8px; }
.w-footer a { display: block; padding: 2px 0; text-decoration: none; cursor: pointer; color: var(--g2); }
.w-footer .legal { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--g5); display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--g3); }

/* adaptation : la maquette réagit à la largeur du cadre (ordinateur ou mobile) */
@container (max-width: 1080px) {
  .w-actions .rappel { display: none; }
}
@container (max-width: 860px) {
  .w-menu, .w-actions .tel, .w-actions .rappel { display: none; }
  .w-burger { display: block; margin-left: auto; }
  .w-barre-mobile { display: grid; }
  .w-hero .grille, .w-split { grid-template-columns: 1fr; }
  .w-split.rev > :first-child { order: 0; }
  .w-cards { grid-template-columns: 1fr 1fr; }
  .w-footer .cols { grid-template-columns: 1fr 1fr; }
}
@container (max-width: 560px) {
  .w-cards { grid-template-columns: 1fr; }
  .w-form { grid-template-columns: 1fr; }
  .w-contact { grid-template-columns: 1fr; }
  .w-actions .w-btn { display: none; }
  .w-logo { width: 110px; }
  .w-footer .cols { grid-template-columns: 1fr; }
  .w-media.cover { min-height: 220px; }
}

/* ---------- outil sur petit écran ---------- */
@media (max-width: 900px) {
  .atelier { grid-template-columns: 1fr; }
  .plan { position: fixed; inset: 0; z-index: 30; display: none; }
  body.plan-ouvert .plan { display: block; }
  body.sans-plan .plan { display: none; }
  .plan-fermer { display: block; }
  .o-titre, .o-seg span { display: none; }
  .o-options button span { display: none; }
}
@media (max-width: 560px) {
  .outil { gap: 8px; padding: 8px 10px; }
  .o-logo img { height: 24px; }
  .o-droite { margin-left: 0; width: 100%; justify-content: space-between; }
  .o-cta { display: none; }
  .cadre.mobile { border-width: 0; border-radius: 0; }
}

/* ================= V2 : une seule version (ajouts à la feuille de la V1) ================= */
.o-version { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: var(--grad); color: #fff; }
.o-archive { color: #b9addb; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0 4px; }
.o-archive:hover { color: #fff; }
.fil .chip.att { background: #fff3d6; color: #7a4b00; }

/* plan */
.plan a small.att { color: #9a6a00; background: #fff3d6; border-radius: 6px; padding: 0 6px; }
.plan a.on small.att { color: #7a4b00; }
.plan details.regles { margin: 18px 6px 0; font-size: 12.5px; color: var(--texte-2); border-top: 1px solid #ece8f3; padding-top: 10px; }
.plan details.regles summary { cursor: pointer; font-weight: 700; color: var(--texte); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.plan details.regles ul { list-style: disc; padding-left: 18px; margin-top: 8px; display: grid; gap: 6px; }
.plan .archive { margin: 18px 6px 0; font-size: 12.5px; }
.plan .archive a { display: inline; padding: 0; color: var(--texte-3); text-decoration: underline; }

/* ancres : la section visée n'est pas cachée sous l'en-tête collant */
.site [data-ancres] { scroll-margin-top: 78px; }
.w-flash { animation: w-flash 1.6s ease; }
@keyframes w-flash { 0%, 40% { box-shadow: inset 0 0 0 3px rgba(128, 43, 255, .55); } 100% { box-shadow: inset 0 0 0 3px rgba(128, 43, 255, 0); } }

/* en-tête réduit (pages d'envoi des livres blancs) */
.w-header.reduit .bar { justify-content: space-between; }
.w-reduit-note { font-size: 11px; color: #4a2d86; background: #faf6ff; border: 1px dashed var(--violet); border-radius: 8px; padding: 2px 8px; }
body.sans-notes .w-reduit-note { display: none; }

/* menu mobile : sous-liens visibles, puis deux gros boutons */
.w-tiroir .gros { display: grid; gap: 8px; margin-top: 12px; }
.w-tiroir .gros .w-btn { justify-content: center; border-bottom: 2px solid var(--g6); }

/* barre mobile collante : un ou deux boutons selon la page */
.w-barre-mobile { grid-template-columns: repeat(var(--n, 2), 1fr); }

/* pied de page V2 */
.w-pied-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--g5); font-size: 14px; color: #fff; }
.w-pied-contact a { display: inline; color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.w-pied-contact span { color: var(--g4); }
.w-footer .w-annot { display: block; font-size: 11.5px; color: #d9c8ff; font-style: italic; margin: 2px 0 6px; }
.w-pied-contact .w-annot { display: inline; margin: 0; }
body.sans-notes .w-annot { display: none !important; }
.w-preuves { display: flex; gap: 6px; margin-top: 12px; }
.w-preuves span { display: grid; place-items: center; min-width: 52px; height: 30px; padding: 0 8px; border: 1px dashed var(--g4); border-radius: 6px; font-size: 11px; font-weight: 800; color: var(--g3); }
.w-coord { margin-top: 18px; color: var(--g3); font-size: 12.5px; }

@container (max-width: 860px) {
  .site .w-header .w-actions .tel { display: inline; font-size: 12.5px; }
  .site .w-header .w-actions { margin-left: auto; }
  .site .w-header .w-burger { margin-left: 0; }
}
@container (max-width: 560px) {
  .w-pied-contact { font-size: 13px; }
}
@media (max-width: 560px) {
  .o-cta { display: inline-block; }
  .o-archive, .o-version { display: none; }
}

/* en-tête V2 : cinq entrées, le portable, « Être rappelé(e) » et le bouton RDV tiennent sur une ligne */
.site .w-header .bar { gap: 10px; }
.site .w-logo { width: 108px; }
.site .w-menu { flex-wrap: nowrap; gap: 0; }
.site .w-menu > .mi > a { padding: 8px 7px; font-size: 12.5px; }
.site .w-actions { gap: 8px; }
.site .w-actions .w-btn { padding: 8px 12px; font-size: 12.5px; }
@container (max-width: 1080px) { .site .w-header .w-actions .rappel { display: inline; } }
@container (max-width: 1000px) { .site .w-header .w-actions .rappel { display: none; } }

/* « overflow: clip » (et non « hidden ») sur le cadre : il découpe les coins arrondis sans devenir le conteneur
   de défilement, si bien que l'en-tête et la barre mobile du site maquetté restent collés pendant le défilement
   de la toile. Les décalages compensent les marges intérieures de la toile (14 px en haut, 60 px en bas). */
.site .w-header { top: -14px; }
.site .w-barre-mobile { bottom: -60px; }

/* barre d'outils sur téléphone : une seule ligne */
.o-bt .court { display: none; }
@media (max-width: 480px) {
  .outil { flex-wrap: nowrap; gap: 6px; padding: 6px 8px; }
  .o-logo img { height: 20px; }
  .o-droite { width: auto; margin-left: auto; flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
  .o-seg button { padding: 5px 6px; }
  .o-bt { padding: 5px 8px; font-size: 12px; white-space: nowrap; }
  .o-bt .long { display: none; }
  .o-bt .court { display: inline; }
}

/* petit lien téléphone en bas des cartes de situation et de cas : même format sur les pages Manager, Dirigeant et Cas d'usage */
.site .w-btn.w-tel-carte, .w-card .w-btn.w-tel-carte { padding: 0; margin-top: 2px; font-size: 12.5px; font-weight: 700; }

/* ---------- propositions soumises à la commission (hors de l'arbre et du menu) ---------- */
/* Le bandeau et le marquage des blocs proposés restent visibles quand les annotations sont masquées. */
.w-proposition { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 12px clamp(16px, 4cqi, 40px); background: #fff0fe; border-bottom: 2px solid #ff00fb; color: #5c0057; font-size: 13.5px; line-height: 1.45; }
.w-proposition b { color: #8a0085; font-size: 14.5px; }
.w-proposition a { margin-left: auto; color: #8a0085; font-weight: 700; white-space: nowrap; }
.w-sec.w-propose { box-shadow: inset 0 0 0 3px #ff00fb; background: #fff8fe; }
.w-propose-tag { position: absolute; top: 6px; left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a0085; }
.fil .chip.prop { background: #ffe3fd; color: #8a0085; }
.plan a small.prop { color: #8a0085; background: #ffe3fd; border-radius: 6px; padding: 0 6px; }
.plan a.on small.prop { color: #5c0057; }
.plan .prop-note { font-size: 12px; color: var(--texte-3); margin: 0 6px 6px; line-height: 1.4; }