/* ==========================================================================
   DUOLOGUE — Design system
   Dérivé du thème Aleric (ThemeForest) : typographie Space Grotesk / Kanit,
   boutons pill, rayons généreux. Pigmentation « Prune & ardoise ».
   Les tokens reprennent la nomenclature --tp-* du thème quand elle existe,
   pour que le portage sur main.css se fasse par simple surcharge.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* encre & texte */
  --duo-ink:        #241B2E;
  --duo-ink-2:      #3E3350;
  --duo-muted:      #6E6479;
  --duo-muted-2:    #938BA0;

  /* primaire — prune */
  --duo-pri:        #5B3E8C;
  --duo-pri-700:    #4A3173;
  --duo-pri-100:    #E7DFF2;
  --duo-pri-50:     #F0EBF6;

  /* partenaires : A = prune, B = ardoise. Jamais genré. */
  --duo-a:          #5B3E8C;
  --duo-a-50:       #F0EBF6;
  --duo-b:          #2E7D8F;
  --duo-b-50:       #EBF2F4;

  /* écart — ambre. Signale sans alarmer. */
  --duo-gap:        #D98324;
  --duo-gap-50:     #FAF0E2;
  --duo-gap-ink:    #9A5714;

  /* alerte clinique — la SEULE chose rouge de l'interface */
  --duo-alert:      #B3403A;
  --duo-alert-50:   #F9EBEA;
  --duo-alert-ink:  #832B26;

  /* accord / aligné */
  --duo-ok:         #2A6675;
  --duo-ok-50:      #EBF2F4;

  /* surfaces */
  --duo-surface:    #FFFFFF;
  --duo-bg:         #F8F6FB;
  --duo-bg-2:       #F3F1F8;
  --duo-line:       #E9E4F0;
  --duo-line-2:     #CFC5DE;
  --duo-rail:       #EEEAF3;
  --duo-rail-ok:    #D3CCDE;

  /* dégradé signature (recette du thème medical, repigmentée) */
  --duo-wash: linear-gradient(135deg,#F0EBF6 0%,#F3F1F8 48%,#FAF9FC 100%);

  /* typo */
  --duo-display: 'Space Grotesk', sans-serif;
  --duo-body:    'Kanit', sans-serif;

  /* rayons & ombres */
  --duo-r-sm: 10px;
  --duo-r:    14px;
  --duo-r-lg: 20px;
  --duo-r-xl: 24px;
  --duo-r-pill: 100px;
  --duo-sh-sm: 0 1px 2px rgba(36,27,46,.05);
  --duo-sh:    0 4px 16px rgba(36,27,46,.06);
  --duo-sh-lg: 0 18px 48px rgba(36,27,46,.10);
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--duo-body);font-weight:300;
  font-size:15px;line-height:1.7;color:var(--duo-muted);background:var(--duo-bg);
}
h1,h2,h3,h4,h5{font-family:var(--duo-display);font-weight:700;color:var(--duo-ink);
  letter-spacing:-.025em;line-height:1.12;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}

/* ---------- 3. Layout ---------- */
.duo-container{max-width:1200px;margin:0 auto;padding:0 28px}
.duo-container-sm{max-width:900px;margin:0 auto;padding:0 28px}
.duo-section{padding:100px 0}
.duo-section-sm{padding:68px 0}
@media(max-width:768px){
  .duo-section{padding:64px 0}
  .duo-section-sm{padding:44px 0}
  .duo-container,.duo-container-sm{padding:0 20px}
}

/* ---------- 4. Typographie utilitaire ---------- */
.duo-eyebrow{
  font-family:var(--duo-body);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--duo-pri);margin-bottom:16px;
  display:inline-flex;align-items:center;gap:9px;
}
.duo-eyebrow::before{content:'';width:22px;height:1px;background:var(--duo-pri);opacity:.5}
.duo-h1{font-size:clamp(38px,5.2vw,62px);letter-spacing:-.035em}
.duo-h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.03em}
.duo-h3{font-size:22px}
.duo-h4{font-size:17px;font-weight:600;letter-spacing:-.01em}
.duo-lead{font-size:17px;line-height:1.7;color:var(--duo-muted);font-weight:300}
.duo-small{font-size:13px;line-height:1.6}
.duo-tiny{font-size:12px;line-height:1.55}
.duo-accent{color:var(--duo-pri)}
.duo-ink{color:var(--duo-ink)}
.duo-mono-num{font-family:var(--duo-display);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- 5. Boutons ---------- */
.duo-btn{
  font-family:var(--duo-display);font-weight:600;font-size:14.5px;line-height:1;
  border-radius:var(--duo-r-pill);padding:15px 28px;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;
}
.duo-btn:hover{transform:translateY(-1px)}
.duo-btn svg{width:14px;height:14px;flex:none}
.duo-btn-pri{background:var(--duo-pri);color:#fff}
.duo-btn-pri:hover{background:var(--duo-pri-700)}
.duo-btn-ghost{color:var(--duo-ink);border-color:var(--duo-line-2);background:transparent}
.duo-btn-ghost:hover{border-color:var(--duo-ink);background:#fff}
.duo-btn-soft{background:var(--duo-pri-50);color:var(--duo-pri)}
.duo-btn-soft:hover{background:var(--duo-pri-100)}
.duo-btn-sm{padding:10px 18px;font-size:13px}
.duo-btn-block{width:100%;justify-content:center}

/* ---------- 6. Cartes ---------- */
.duo-card{
  background:var(--duo-surface);border:1px solid var(--duo-line);
  border-radius:var(--duo-r-xl);padding:28px;
}
.duo-card-flat{box-shadow:none}
.duo-card-raised{box-shadow:var(--duo-sh-lg);border-color:transparent}
.duo-card-wash{background:var(--duo-wash);border-color:var(--duo-line)}

/* ---------- 7. Chips & badges ---------- */
.duo-chip{
  font-family:var(--duo-display);font-size:11.5px;font-weight:600;letter-spacing:.03em;
  padding:5px 12px;border-radius:var(--duo-r-pill);display:inline-flex;align-items:center;
  gap:6px;white-space:nowrap;
}
.duo-chip-gap-hi{background:var(--duo-gap);color:#fff}
.duo-chip-gap-md{background:var(--duo-gap-50);color:var(--duo-gap-ink)}
.duo-chip-ok{background:var(--duo-ok-50);color:var(--duo-ok)}
.duo-chip-alert{background:var(--duo-alert-50);color:var(--duo-alert-ink)}
.duo-chip-neutral{background:var(--duo-bg-2);color:var(--duo-muted)}
.duo-chip-a{background:var(--duo-a-50);color:var(--duo-a)}
.duo-chip-b{background:var(--duo-b-50);color:var(--duo-b)}
.duo-chip-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}

/* statuts de dossier — vocabulaire produit */
.duo-status{font-family:var(--duo-display);font-size:11.5px;font-weight:600;
  padding:5px 12px;border-radius:var(--duo-r-pill);display:inline-flex;align-items:center;gap:7px}
.duo-status::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.duo-status-wait{background:var(--duo-bg-2);color:var(--duo-muted)}
.duo-status-half{background:var(--duo-gap-50);color:var(--duo-gap-ink)}
.duo-status-both{background:var(--duo-b-50);color:var(--duo-b)}
.duo-status-done{background:var(--duo-pri-50);color:var(--duo-pri)}

/* ---------- 8. Marque ---------- */
.duo-brand{display:inline-flex;align-items:center;gap:10px}
/* Marque = deux anneaux entrelacés (assets/img/logo-anneaux.svg).
   Le markup <span><span></span><span></span></span> reste identique sur les 6 pages :
   on ne change que la peinture, pas le HTML. */
.duo-brand-mark{width:40px;height:27px;flex:none;
  background:url(/img/logo-anneaux.svg) left center/contain no-repeat}
.duo-brand-mark span{display:none}
.duo-brand b{font-family:var(--duo-display);font-weight:700;font-size:19px;
  letter-spacing:-.025em;color:var(--duo-ink)}

/* ---------- 9. Haltère (dumbbell) — le composant signature ----------
   Deux points sur un axe 0-100 ; c'est le SEGMENT entre eux qui est coloré.
   L'écart devient l'objet visuel, pas une soustraction mentale. */
.duo-gapchart{margin:0}
.duo-gaprow{padding:16px 0;border-top:1px solid var(--duo-line)}
.duo-gaprow:first-child{border-top:0}
.duo-gaprow-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.duo-gaprow-head .lab{font-size:14px;color:var(--duo-ink);font-weight:400}
.duo-gaprow-head .duo-chip{margin-left:auto}
.duo-track{position:relative;height:24px}
.duo-track .rail{position:absolute;top:10px;left:0;right:0;height:4px;border-radius:4px;
  background:var(--duo-rail)}
.duo-track .seg{position:absolute;top:10px;height:4px;border-radius:4px;background:var(--duo-gap)}
.duo-track .seg.soft{background:var(--duo-gap-50)}
.duo-track .seg.flat{background:var(--duo-rail-ok)}
.duo-track .pt{position:absolute;top:5px;width:14px;height:14px;border-radius:50%;
  margin-left:-7px;border:3px solid var(--duo-surface)}
.duo-track .pt-a{background:var(--duo-a)}
.duo-track .pt-b{background:var(--duo-b)}
.duo-track .val{position:absolute;top:-4px;font-family:var(--duo-display);font-size:10.5px;
  font-weight:600;color:var(--duo-muted-2);transform:translate(-50%,-100%)}

/* légende A/B */
.duo-legend{display:flex;gap:18px;flex-wrap:wrap}
.duo-legend span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--duo-muted);font-weight:400}
.duo-legend i{width:10px;height:10px;border-radius:50%;flex:none}
.duo-legend .i-a{background:var(--duo-a)}
.duo-legend .i-b{background:var(--duo-b)}

/* ---------- 10. Encarts note ---------- */
.duo-note{border-radius:var(--duo-r);padding:16px 18px;font-size:13px;line-height:1.6;
  font-weight:300}
.duo-note b{font-family:var(--duo-display);font-weight:600;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;display:block;margin-bottom:6px}
.duo-note-blind{background:var(--duo-gap-50);color:var(--duo-gap-ink)}
.duo-note-alert{background:var(--duo-alert-50);color:var(--duo-alert-ink)}
.duo-note-alert b{color:var(--duo-alert)}
.duo-note-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.duo-note-row > div{flex:1 1 300px;min-width:0}
.duo-note-info{background:var(--duo-pri-50);color:var(--duo-pri-700)}
.duo-note-info b{color:var(--duo-pri)}

/* ---------- 11. Formulaires ---------- */
.duo-field{margin-bottom:20px}
.duo-label{font-family:var(--duo-display);font-size:12.5px;font-weight:600;
  color:var(--duo-ink);display:block;margin-bottom:8px;letter-spacing:-.005em}
.duo-hint{font-size:12px;color:var(--duo-muted-2);margin-top:7px;line-height:1.5}
.duo-input,.duo-select{
  width:100%;font-family:var(--duo-body);font-size:14.5px;font-weight:300;color:var(--duo-ink);
  background:var(--duo-surface);border:1px solid var(--duo-line-2);border-radius:var(--duo-r);
  padding:13px 16px;transition:border-color .18s ease,box-shadow .18s ease;
}
.duo-input::placeholder{color:var(--duo-muted-2)}
.duo-input:focus,.duo-select:focus{outline:none;border-color:var(--duo-pri);
  box-shadow:0 0 0 3px var(--duo-pri-50)}
.duo-select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%236E6479' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;
  padding-right:40px;cursor:pointer}

/* choix cochables */
.duo-choice{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;
  border:1px solid var(--duo-line);border-radius:var(--duo-r);background:var(--duo-surface);
  cursor:pointer;transition:border-color .18s ease,background .18s ease}
.duo-choice:hover{border-color:var(--duo-line-2)}
.duo-choice.is-on{border-color:var(--duo-pri);background:var(--duo-pri-50)}
.duo-choice .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--duo-line-2);
  flex:none;margin-top:2px;display:grid;place-items:center;background:#fff}
.duo-choice.is-on .box{background:var(--duo-pri);border-color:var(--duo-pri)}
.duo-choice.is-on .box::after{content:'';width:9px;height:5px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.duo-choice .box.round{border-radius:50%}
.duo-choice.is-on .box.round::after{width:7px;height:7px;border:0;background:#fff;
  border-radius:50%;transform:none}
.duo-choice strong{font-family:var(--duo-display);font-size:14px;font-weight:600;
  color:var(--duo-ink);display:block;margin-bottom:3px}
.duo-choice span.d{font-size:12.5px;color:var(--duo-muted);line-height:1.55;display:block}

/* ---------- 12. Coquille applicative ---------- */
.duo-app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.duo-side{background:var(--duo-surface);border-right:1px solid var(--duo-line);
  padding:26px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.duo-side .duo-brand{padding:0 10px 30px}
.duo-nav-group{font-family:var(--duo-display);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--duo-muted-2);
  padding:0 10px;margin:22px 0 9px}
.duo-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--duo-r-sm);
  font-size:14px;color:var(--duo-muted);transition:background .16s ease,color .16s ease}
.duo-nav a:hover{background:var(--duo-bg);color:var(--duo-ink)}
.duo-nav a.is-on{background:var(--duo-pri-50);color:var(--duo-pri);font-weight:400}
.duo-nav a svg{width:16px;height:16px;flex:none;opacity:.85}
.duo-nav a .count{margin-left:auto;font-family:var(--duo-display);font-size:11px;font-weight:600;
  background:var(--duo-bg-2);color:var(--duo-muted);padding:2px 8px;border-radius:var(--duo-r-pill)}
.duo-nav a.is-on .count{background:var(--duo-pri);color:#fff}

.duo-side-foot{margin-top:auto;border-top:1px solid var(--duo-line);padding-top:16px}
.duo-side-foot .duo-btn{margin-top:10px}
.duo-user{display:flex;align-items:center;gap:11px;padding:8px 10px}
.duo-avatar{width:34px;height:34px;border-radius:50%;background:var(--duo-pri-50);
  color:var(--duo-pri);display:grid;place-items:center;font-family:var(--duo-display);
  font-weight:600;font-size:13px;flex:none}
.duo-user .n{font-size:13.5px;color:var(--duo-ink);line-height:1.3}
.duo-user .r{font-size:11.5px;color:var(--duo-muted-2);line-height:1.3}

.duo-main{min-width:0;background:var(--duo-bg)}
.duo-topbar{background:var(--duo-surface);border-bottom:1px solid var(--duo-line);
  padding:20px 34px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:5}
.duo-topbar h1{font-size:20px}
.duo-topbar .sub{font-size:13px;color:var(--duo-muted-2);margin-top:3px}
.duo-topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.duo-content{padding:34px}
/* La barre latérale devient un bandeau à deux lignes : marque et compte en
   haut, navigation dessous. Le défilement horizontal qu'il y avait ici coupait
   « Nouveau dossier » en plein mot, et masquait complètement le pied de barre —
   donc la déconnexion — sur téléphone. */
@media(max-width:1024px){
  .duo-app{grid-template-columns:1fr}
  .duo-side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:12px;
    border-right:0;border-bottom:1px solid var(--duo-line);padding:14px 18px}
  .duo-side .duo-brand{padding:0}
  /* « order » place le pied de barre à côté de la marque : sans lui, la
     navigation en pleine largeur le repousserait sur une troisième ligne. */
  .duo-nav{order:2;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px}
  .duo-nav a{white-space:nowrap}
  .duo-nav-group{display:none}
  .duo-side-foot{order:1;margin:0 0 0 auto;border-top:0;padding-top:0;
    display:flex;align-items:center;gap:10px}
  .duo-side-foot .duo-user{padding:0}
  .duo-side-foot .duo-btn{width:auto;margin-top:0}
  .duo-content,.duo-topbar{padding-left:20px;padding-right:20px}
}
@media(max-width:600px){
  /* Sur téléphone, l'avatar suffit à identifier la session : le nom et la
     spécialité prendraient la place des onglets. */
  .duo-side-foot .duo-user > div{display:none}
}

/* ---------- 13. Tableau de dossiers ---------- */
.duo-table-wrap{background:var(--duo-surface);border:1px solid var(--duo-line);
  border-radius:var(--duo-r-lg);padding:22px 6px 8px;overflow-x:auto}
.duo-table{width:100%;border-collapse:separate;border-spacing:0}
.duo-table th{font-family:var(--duo-display);font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--duo-muted-2);text-align:left;padding:0 18px 12px;
  white-space:nowrap}
.duo-table td{padding:16px 18px;border-top:1px solid var(--duo-line);font-size:14px;
  color:var(--duo-muted);vertical-align:middle}
.duo-table tbody tr:hover td{background:var(--duo-bg)}
.duo-couple{display:flex;align-items:center;gap:11px}
.duo-duo-avatars{display:flex;flex:none}
.duo-duo-avatars i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--duo-display);font-size:11px;font-weight:600;font-style:normal;
  border:2px solid var(--duo-surface)}
.duo-duo-avatars i:last-child{margin-left:-9px}
.duo-duo-avatars .av-a{background:var(--duo-a-50);color:var(--duo-a)}
.duo-duo-avatars .av-b{background:var(--duo-b-50);color:var(--duo-b)}
.duo-couple .nm{font-size:14px;color:var(--duo-ink);line-height:1.35}
.duo-couple .rf{font-size:11.5px;color:var(--duo-muted-2);line-height:1.35}
.duo-td-end{text-align:right}

/* Sous 820 px, six colonnes ne tiennent pas : chaque ligne devient un bloc.
   Seuil calé sur la largeur réelle du tableau (~730 px) plus les marges de
   .duo-content, pour qu'il n'y ait jamais de bande où il faut défiler de côté. */
@media(max-width:820px){
  .duo-table-wrap{padding:8px 0}
  .duo-table thead{display:none}
  .duo-table,.duo-table tbody,.duo-table tr,.duo-table td{display:block;width:auto}
  .duo-table tr{border-top:1px solid var(--duo-line);padding:16px 18px}
  .duo-table tbody tr:first-child{border-top:0}
  .duo-table td{border-top:0;padding:5px 0}
  .duo-table td:first-child{padding-top:0}
  .duo-td-end{text-align:left;padding-top:10px}
}

/* ---------- 14. Étapes / timeline ---------- */
.duo-steps{display:grid;gap:22px}
.duo-step{display:flex;gap:18px}
.duo-step .idx{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--duo-display);font-weight:600;font-size:14px;
  background:var(--duo-pri-50);color:var(--duo-pri)}
.duo-step.done .idx{background:var(--duo-pri);color:#fff}
.duo-step h4{margin-bottom:5px}

/* ---------- 15. Feuille de route (format page A4) ---------- */
.duo-sheet{background:#fff;border:1px solid var(--duo-line);border-radius:var(--duo-r-lg);
  padding:52px 56px;max-width:860px;margin:0 auto;box-shadow:var(--duo-sh)}
.duo-sheet-head{display:flex;align-items:flex-start;gap:20px;padding-bottom:26px;
  border-bottom:2px solid var(--duo-ink);margin-bottom:32px}
.duo-sheet h2{font-size:26px;margin-bottom:6px}
.duo-sheet-meta{margin-left:auto;text-align:right}
.duo-sheet-meta p{font-size:12px;color:var(--duo-muted-2);line-height:1.6}
.duo-sheet-meta strong{color:var(--duo-ink);font-weight:500}
.duo-sheet-block{margin-bottom:34px}
.duo-sheet-block > h3{font-family:var(--duo-display);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--duo-pri);margin-bottom:14px;
  padding-bottom:9px;border-bottom:1px solid var(--duo-line)}
.duo-qlist li{padding:11px 0 11px 26px;position:relative;font-size:14px;color:var(--duo-ink-2);
  line-height:1.6;border-top:1px solid var(--duo-line)}
.duo-qlist li:first-child{border-top:0}
.duo-qlist li::before{content:'';position:absolute;left:6px;top:20px;width:6px;height:6px;
  border-radius:50%;background:var(--duo-pri)}
.duo-qlist li em{font-style:italic;color:var(--duo-muted)}
@media print{
  body{background:#fff}
  .duo-no-print{display:none !important}
  .duo-sheet{border:0;box-shadow:none;padding:0;max-width:none}
}
@media(max-width:768px){
  .duo-sheet{padding:30px 24px}
  /* Le bloc de méta se tassait à trois mots par ligne, collé à droite. */
  .duo-sheet-head{flex-wrap:wrap;gap:14px}
  .duo-sheet-meta{margin-left:0;text-align:left;width:100%;
    display:flex;flex-wrap:wrap;gap:4px 18px}
}

/* ---------- 16. Grilles utilitaires ---------- */
.duo-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.duo-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.duo-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.duo-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:980px){
  .duo-grid-3,.duo-grid-4{grid-template-columns:repeat(2,1fr)}
  .duo-split{grid-template-columns:1fr;gap:36px}
}
@media(max-width:600px){
  .duo-grid-2,.duo-grid-3{grid-template-columns:1fr}
  /* La grille de 4 reste sur deux colonnes : ce sont des compteurs courts,
     les empiler ferait quatre écrans de défilement pour quatre chiffres. */
  .duo-grid-4{grid-template-columns:repeat(2,1fr);gap:14px}
}
.duo-stack-sm > * + *{margin-top:10px}
.duo-stack > * + *{margin-top:18px}
.duo-mt-sm{margin-top:12px}.duo-mt{margin-top:24px}.duo-mt-lg{margin-top:44px}
.duo-mb-sm{margin-bottom:12px}.duo-mb{margin-bottom:24px}.duo-mb-lg{margin-bottom:52px}
.duo-center{text-align:center}
.duo-measure{max-width:62ch}
.duo-measure-center{max-width:60ch;margin-left:auto;margin-right:auto}
.duo-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* .duo-row-end : poussé à droite tant que la ligne tient, réempilé à gauche sur
   téléphone (voir § 17). .duo-push : poussé à droite à toute largeur — pour les
   boutons-icônes, qu'un réempilement ne ferait que déplacer sans rien gagner. */
.duo-row-end{margin-left:auto}
.duo-push{margin-left:auto}

/* ---------- 17. Reprises mobiles ----------
   Ce bloc doit rester le DERNIER du fichier : il annule des règles déclarées
   plus haut (.duo-row-end, .duo-card…) à spécificité égale. Placé avant elles —
   ce qui était le cas — « margin-left:0 » ne s'appliquait jamais et la légende
   de la lecture croisée restait collée à droite sur téléphone. */
@media(max-width:768px){
  .duo-topbar{flex-wrap:wrap;gap:12px;padding-top:16px;padding-bottom:16px}
  .duo-topbar h1{font-size:19px}
  .duo-topbar .right{margin-left:0;width:100%;flex-wrap:wrap;gap:8px}
  .duo-topbar .right .duo-btn{flex:1 1 auto;justify-content:center}
  .duo-content{padding-top:22px}
  /* les lignes « contenu + action à droite » se réempilent */
  .duo-row-end{margin-left:0}
  .duo-legend{width:100%}
}
@media(max-width:600px){
  .duo-card{padding:22px}
  /* Une action seule au bas d'une ligne réempilée prend toute la largeur :
     à 390 px, un bouton de 150 px flottant à gauche se lit comme un oubli. */
  .duo-row > .duo-row-end.duo-btn,
  .duo-row > .duo-row-end > .duo-btn{width:100%;justify-content:center}
  .duo-note-row .duo-btn{width:100%;justify-content:center}
}