/* Cadence — direction artistique : sobre & vivant.
   Fond crème, encre vert-nuit, un seul accent vert profond. */

:root{
  --bg:        #FBF9F5;
  --bg-warm:   #F4F0E8;
  --surface:   #FFFFFF;
  --ink:       #14231F;
  --muted:     #5C6B66;
  --line:      #E4DED3;
  --accent:    #1C6B57;
  --accent-dk: #14503F;
  --accent-sf: #E8F1ED;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --s1: 8px;  --s2: 16px; --s3: 24px;
  --s4: 40px; --s5: 64px; --s6: 96px;

  --shadow: 0 1px 2px rgba(20,35,31,.04), 0 8px 30px rgba(20,35,31,.06);
  --maxw: 1100px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 var(--s2);
  text-wrap:balance;
}
h1{ font-size:clamp(38px,6vw,60px); }
h2{ font-size:clamp(28px,4vw,40px); }
h3{ font-size:21px; line-height:1.25; }
p{ margin:0 0 var(--s2); }
a{ color:var(--accent-dk); }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--s3); }
.narrow{ max-width:760px; }

.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 var(--s2);
}
.lead{ font-size:clamp(18px,2.2vw,21px); color:var(--muted); }
.small{ font-size:14px; color:var(--muted); }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(251,249,245,.86);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); min-height:66px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Fraunces",Georgia,serif; font-size:20px; font-weight:600;
  color:var(--ink); text-decoration:none; letter-spacing:-.02em;
}
.brand svg{ display:block; }
.nav{ display:flex; align-items:center; gap:var(--s3); }
.nav a{
  color:var(--muted); text-decoration:none; font-size:15px; font-weight:500;
}
.nav a:hover{ color:var(--ink); }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  font:inherit; font-size:16px; font-weight:600; text-decoration:none;
  cursor:pointer; transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--accent-dk); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-sm{ padding:10px 18px; font-size:15px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }

/* ---------- sections ---------- */
section{ padding:var(--s6) 0; }
section.tight{ padding:var(--s5) 0; }
.band{ background:var(--bg-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ---------- hero ---------- */
.hero{ padding:calc(var(--s6) + 16px) 0 var(--s6); }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s5); align-items:center;
}
.hero p.lead{ max-width:48ch; }
.hero-note{ margin-top:var(--s3); font-size:14px; color:var(--muted); }

.card-demo{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s3); box-shadow:var(--shadow);
}
.card-demo h4{ font-family:"Inter",sans-serif; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 var(--s2); font-weight:600; }
.metric-row{ display:flex; justify-content:space-between; align-items:baseline;
  padding:12px 0; border-bottom:1px dashed var(--line); }
.metric-row:last-of-type{ border-bottom:0; }
.metric-row span{ color:var(--muted); font-size:15px; }
.metric-row b{ font-family:"Fraunces",Georgia,serif; font-size:20px; font-weight:600; }
.bar{ height:7px; border-radius:999px; background:var(--accent-sf); overflow:hidden; margin-top:6px; }
.bar i{ display:block; height:100%; background:var(--accent); border-radius:999px; }

/* ---------- grilles ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s3);
}
.card h3{ margin-bottom:10px; }
.card p:last-child{ margin-bottom:0; }

.icon{
  width:40px; height:40px; border-radius:12px; background:var(--accent-sf);
  display:grid; place-items:center; margin-bottom:var(--s2); color:var(--accent-dk);
}

/* étapes */
.steps{ counter-reset:step; display:grid; gap:var(--s3); grid-template-columns:repeat(3,1fr); }
.step{ position:relative; padding-top:var(--s3); border-top:2px solid var(--accent); }
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:"Fraunces",Georgia,serif; font-size:15px; font-weight:600;
  color:var(--accent); display:block; margin-bottom:8px;
}
.step h3{ font-size:19px; }
.step p{ color:var(--muted); font-size:15px; margin-bottom:0; }

/* ---------- offre ---------- */
.price-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4); box-shadow:var(--shadow); max-width:560px; margin:0 auto;
}
.price{ display:flex; align-items:baseline; gap:10px; margin-bottom:var(--s2); }
.price b{ font-family:"Fraunces",Georgia,serif; font-size:52px; line-height:1; font-weight:600; }
.price span{ color:var(--muted); }
ul.check{ list-style:none; padding:0; margin:0 0 var(--s3); }
ul.check li{ position:relative; padding-left:30px; margin-bottom:12px; }
ul.check li::before{
  content:""; position:absolute; left:0; top:8px; width:16px; height:16px;
  border-radius:50%; background:var(--accent-sf);
  box-shadow:inset 0 0 0 1.5px var(--accent);
}
ul.check li::after{
  content:""; position:absolute; left:5px; top:12.5px; width:6px; height:3px;
  border-left:2px solid var(--accent-dk); border-bottom:2px solid var(--accent-dk);
  transform:rotate(-45deg);
}

/* ---------- FAQ ---------- */
details.faq{ border-bottom:1px solid var(--line); padding:var(--s2) 0; }
details.faq summary{
  cursor:pointer; font-weight:600; font-size:17px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:var(--s2);
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:"+"; color:var(--accent); font-size:22px; line-height:1; }
details.faq[open] summary::after{ content:"–"; }
details.faq p{ margin:12px 0 0; color:var(--muted); }

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--line); background:var(--bg-warm);
  padding:var(--s4) 0; font-size:14px; color:var(--muted);
}
.site-foot .wrap{ display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.site-foot a{ color:var(--muted); text-decoration:none; margin-right:var(--s2); }
.site-foot a:hover{ color:var(--ink); }

.disclaimer{
  background:var(--accent-sf); border:1px solid #CBDFD7; border-radius:var(--r-md);
  padding:var(--s3); font-size:14px; color:#22453B;
}
.disclaimer p:last-child{ margin-bottom:0; }

/* ---------- formulaire / bilan ---------- */
.form-shell{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4); box-shadow:var(--shadow);
}
.progress{ height:5px; background:var(--bg-warm); border-radius:999px; overflow:hidden; margin-bottom:var(--s4); }
.progress i{ display:block; height:100%; width:0; background:var(--accent); transition:width .3s ease; }
fieldset{ border:0; padding:0; margin:0; }
legend{ font-family:"Fraunces",Georgia,serif; font-size:26px; font-weight:600; margin-bottom:6px; }
.field{ margin-bottom:var(--s3); }
.field > label{ display:block; font-weight:600; font-size:15px; margin-bottom:8px; }
.field .hint{ font-size:13.5px; color:var(--muted); margin:-4px 0 8px; }
input[type=number], input[type=text], input[type=email], input[type=time],
input[type=password], input[type=date], select, textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:16px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;
}
.opts{ display:grid; gap:10px; }
.opts.two{ grid-template-columns:repeat(2,1fr); }
.opt{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg);
  cursor:pointer; transition:border-color .12s ease, background .12s ease;
}
.opt:hover{ border-color:var(--accent); }
.opt input{ margin:4px 0 0; accent-color:var(--accent); flex:none; }
.opt strong{ display:block; font-size:15.5px; }
.opt em{ display:block; font-style:normal; font-size:13.5px; color:var(--muted); }
.opt:has(input:checked){ border-color:var(--accent); background:var(--accent-sf); }
.row-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); }
.nav-btns{ display:flex; justify-content:space-between; gap:var(--s2); margin-top:var(--s4); }
.err{ color:#98341F; font-size:14px; margin-top:var(--s2); }

/* résultats */
.res-head{ border-bottom:1px solid var(--line); padding-bottom:var(--s3); margin-bottom:var(--s3); }
.res-block{ margin-bottom:var(--s4); }
.res-block h3{ display:flex; align-items:center; gap:10px; }
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin:var(--s3) 0; }
.kpi{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s2); }
.kpi b{ display:block; font-family:"Fraunces",Georgia,serif; font-size:26px; font-weight:600; line-height:1.1; }
.kpi span{ display:block; font-size:12.5px; color:var(--muted); margin-top:4px; }
.actions{ list-style:none; padding:0; margin:0; counter-reset:a; }
.actions li{
  counter-increment:a; position:relative; padding:var(--s2) 0 var(--s2) 44px;
  border-bottom:1px solid var(--line);
}
.actions li:last-child{ border-bottom:0; }
.actions li::before{
  content:counter(a); position:absolute; left:0; top:var(--s2);
  width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:14px; font-weight:600;
}
.actions strong{ display:block; }
.actions span{ font-size:14.5px; color:var(--muted); }
.hidden{ display:none !important; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--s4); }
  .grid-3, .steps{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  body{ font-size:16px; }
  section{ padding:var(--s5) 0; }
  .grid-2, .opts.two, .row-2{ grid-template-columns:1fr; }
  .nav{ gap:var(--s2); }
  .nav a.hide-sm{ display:none; }
  .form-shell, .price-card{ padding:var(--s3); }
  .btn{ width:100%; }
  .btn-row .btn{ width:auto; }
  .nav-btns .btn{ width:auto; }
}

/* ---------- impression du bilan ---------- */
@media print{
  .site-head,.site-foot,.nav-btns,#print,#restart,.btn,.progress,.pay-note{ display:none !important; }
  body{ background:#fff; font-size:12pt; }
  .form-shell{ border:0; box-shadow:none; padding:0; }
  .res-block{ break-inside:avoid; }
}

/* ---------- articles / ressources ---------- */
.prose{ padding:var(--s5) 0 var(--s6); }
.prose h1{ margin-bottom:var(--s3); }
.prose h2{ font-size:clamp(24px,3vw,31px); margin:var(--s5) 0 var(--s2); }
.prose h3{ font-size:19px; margin:var(--s4) 0 10px; }
.prose p{ line-height:1.72; }
.prose > .wrap > p:not(.small):not(.eyebrow):not(.lead):not(.formula){ font-size:17.5px; }
.byline{ margin:0 0 var(--s3); }
.rule{ border:0; border-top:1px solid var(--line); margin:var(--s4) 0; }

.formula{
  background:var(--accent-sf); border-left:3px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:16px 20px; font-family:"Fraunces",Georgia,serif; font-size:19px;
  color:#17453A; margin:var(--s3) 0;
}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14.5px;
  background:var(--bg-warm); border:1px solid var(--line);
  border-radius:5px; padding:2px 6px; white-space:nowrap;
}

.table-scroll{ overflow-x:auto; margin:var(--s3) 0; -webkit-overflow-scrolling:touch; }
table.tbl{
  width:100%; min-width:460px; border-collapse:collapse;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; font-size:15.5px;
}
table.tbl th{
  text-align:left; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; background:var(--bg-warm);
  padding:12px 16px; border-bottom:1px solid var(--line);
}
table.tbl td{ padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
table.tbl tr:last-child td{ border-bottom:0; }
table.tbl th:not(:first-child), table.tbl td:not(:first-child){ text-align:right; white-space:nowrap; }
table.tbl .small{ display:block; font-weight:400; }

.callout{
  background:var(--accent-sf); border:1px solid #CBDFD7; border-left:3px solid var(--accent);
  border-radius:var(--r-md); padding:var(--s3); margin:var(--s3) 0;
}
.callout.warn{ background:#FDF3EE; border-color:#F0D9CB; border-left-color:#B8542F; }
.callout p{ margin-bottom:0; font-size:16px; }

ul.bullets{ padding-left:0; list-style:none; margin:var(--s2) 0 var(--s3); }
ul.bullets li{ position:relative; padding-left:22px; margin-bottom:14px; line-height:1.7; }
ul.bullets li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
ol.steps-list{ counter-reset:s; list-style:none; padding:0; margin:var(--s3) 0; }
ol.steps-list li{
  counter-increment:s; position:relative; padding:0 0 var(--s3) 46px; line-height:1.7;
}
ol.steps-list li::before{
  content:counter(s); position:absolute; left:0; top:0;
  width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  font-size:14px; font-weight:600;
}
ol.steps-list li:last-child{ padding-bottom:0; }

ul.sources{ padding-left:0; list-style:none; margin:var(--s2) 0 var(--s3); }
ul.sources li{
  font-size:14.5px; color:var(--muted); line-height:1.6;
  padding:12px 0; border-bottom:1px solid var(--line);
}
ul.sources li:last-child{ border-bottom:0; }

.ressource-box{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4); box-shadow:var(--shadow); margin:var(--s4) 0;
}
.ressource-box h3{ margin:0 0 var(--s2); font-size:23px; }
.ressource-box .btn-row{ margin-top:var(--s3); }

/* liste des ressources */
.res-list{ display:grid; gap:var(--s3); }
.res-item{
  display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s3); text-decoration:none; color:inherit;
  transition:border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.res-item:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.res-item h3{ margin:6px 0 8px; font-size:22px; }
.res-item p{ color:var(--muted); margin:0; font-size:16px; }
.res-item .tag{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; color:var(--accent);
}
.res-item .more{ display:inline-block; margin-top:14px; font-weight:600; color:var(--accent-dk); font-size:15px; }

@media (max-width:640px){
  .prose{ padding:var(--s4) 0 var(--s5); }
  .ressource-box{ padding:var(--s3); }
  .formula{ font-size:16px; padding:14px 16px; }
}

/* ---------- tunnel de commande : filet de secours si mailto échoue ---------- */
.order-fallback{
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px dashed var(--line);
}
.order-fallback textarea{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; line-height:1.5;
  resize:vertical; background:var(--bg);
}
.mail-plain{ font-weight:600; word-break:break-all; }
@media print{ .order-fallback{ display:none !important; } }

/* ---------- paiement en ligne (actif quand un lien Stripe est configuré) ---------- */
[hidden]{ display:none !important; }
.pay-note{
  margin:var(--s2) 0 0; padding-left:22px; position:relative;
  color:var(--muted); font-size:14px; line-height:1.6;
}
.pay-note::before{
  content:""; position:absolute; left:0; top:3px; width:14px; height:14px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C6B57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* ---------- suivi ---------- */
.verdict{ border:1px solid var(--line); border-left-width:4px; border-radius:var(--r-md); padding:var(--s3); background:var(--surface); }
.verdict h3{ margin-bottom:8px; }
.verdict p:last-child{ margin-bottom:0; }
.v-ok{ border-left-color:var(--accent); background:var(--accent-sf); }
.v-warn{ border-left-color:#B4802A; background:#FBF5E9; }
.v-alert{ border-left-color:#9B3A22; background:#FBEDE9; }
.v-neutre{ border-left-color:var(--muted); }
.causes{ margin:var(--s2) 0 0; padding-left:20px; }
.causes li{ margin-bottom:12px; font-size:15.5px; line-height:1.6; }
.causes li:last-child{ margin-bottom:0; }
.verdict .alerte{ margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid rgba(0,0,0,.08); font-weight:600; font-size:15px; }

.graphe{ width:100%; height:auto; display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:8px; }
.g-line{ fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.g-dot{ fill:var(--surface); stroke:var(--accent); stroke-width:2.5; }
.g-grid{ stroke:var(--line); stroke-width:1; }
.g-lab{ font-family:Inter,sans-serif; font-size:11px; fill:var(--muted); }

table.releves{ width:100%; border-collapse:collapse; font-size:15px; }
table.releves th{ text-align:left; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:0 10px 10px 0; border-bottom:1px solid var(--line); }
table.releves td{ padding:12px 10px 12px 0; border-bottom:1px solid var(--line); }
table.releves tr:last-child td{ border-bottom:0; }
.lien-sup{ background:none; border:0; padding:0; font:inherit; font-size:13px; color:var(--muted); text-decoration:underline; cursor:pointer; }
.lien-sup:hover{ color:#9B3A22; }
@media (max-width:640px){
  table.releves{ font-size:14px; }
  table.releves th:nth-child(3), table.releves td:nth-child(3),
  table.releves th:nth-child(4), table.releves td:nth-child(4){ display:none; }
}

/* la cause principale porte l'action ; les autres sont repliées */
.cause-une{ margin-top:var(--s2); padding:var(--s2); background:rgba(255,255,255,.55);
  border-radius:var(--r-sm); font-size:15.5px; line-height:1.6; }
details.autres-causes{ border-bottom:0; padding:var(--s2) 0 0; }
details.autres-causes summary{ font-size:15px; font-weight:600; }
details.autres-causes .causes{ margin-top:var(--s2); }

/* le header collant ne doit jamais recouvrir une cible de défilement */
#verdict, #results, .res-block, .form-shell{ scroll-margin-top:84px; }

/* ---------- application ---------- */
.app-head{ position:sticky; top:0; z-index:40; background:rgba(251,249,245,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); }
.app-head .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:var(--s2); }
.app-user{ display:flex; align-items:center; gap:var(--s2); font-size:14px; color:var(--muted); }
.app-user b{ color:var(--ink); font-weight:600; }
.lien-nu{ background:none; border:0; padding:0; font:inherit; font-size:14px;
  color:var(--muted); text-decoration:underline; cursor:pointer; }
.lien-nu:hover{ color:var(--ink); }
.onglets{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:var(--s4); overflow-x:auto; }
.onglet{ background:none; border:0; border-bottom:2px solid transparent; padding:12px 16px;
  font:inherit; font-size:15px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; }
.onglet[aria-selected="true"]{ color:var(--accent-dk); border-bottom-color:var(--accent); }
.centre{ max-width:440px; margin:0 auto; }
.bandeau{ background:var(--accent-sf); border:1px solid #CBDFD7; border-radius:var(--r-md);
  padding:var(--s2) var(--s3); font-size:14.5px; margin-bottom:var(--s3); }
.chargement{ text-align:center; padding:var(--s6) 0; color:var(--muted); }
@media (max-width:640px){ .app-head .wrap{ flex-wrap:wrap; padding-top:8px; padding-bottom:8px; } }

/* --- récupération de compte & rappel hebdomadaire (v1.1) --- */
.code-secours{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:clamp(15px,4vw,24px); font-weight:600; letter-spacing:.04em;
  background:var(--accent-sf); border:1px solid #CBDFD7; border-radius:var(--r-md);
  padding:var(--s3) var(--s2); text-align:center; word-break:break-all;
  margin:0 0 var(--s2); user-select:all;
}
.rappel-band{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  background:var(--accent-sf); border:1px solid #CBDFD7; border-left:3px solid var(--accent);
  border-radius:var(--r-md); padding:var(--s2) var(--s3); margin-bottom:var(--s3);
  font-size:16px;
}
.rappel-band.retard{ background:#FBF5E9; border-color:#EBDCBC; border-left-color:#B4802A; }
.rappel-band strong{ display:block; }
.rappel-band .btn{ margin-left:auto; }
@media (max-width:560px){ .rappel-band .btn{ margin-left:0; width:100%; } }