@media (min-width: 640px) {
  .ep-panneau {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--e-10);
    align-items: end;
    padding: var(--e-8) var(--e-10);
  }
  .ep-panneau .cq-hero-in { display: contents; }
  .ep-panneau .cq-hero-in > * { grid-column: 1; min-width: 0; }

  .ep-panneau .ep-sur {
    font-family: var(--font-donnee);
    font-size: var(--fs-etiquette);
    line-height: var(--lh-etiquette);
    font-weight: 500;
    letter-spacing: var(--ls-capitales);
    color: var(--sur-marine-3);
  }
  .ep-panneau .ep-titre {
    margin: var(--e-3) 0 0;
    font-family: var(--font-titre);
    font-weight: 400;
    font-size: var(--fs-page);
    line-height: var(--lh-page);
    letter-spacing: var(--ls-serre);
    color: var(--sur-marine);
  }
  .ep-panneau .ep-titre .dot { color: var(--or); }
  .ep-panneau .ep-intro {
    max-width: 620px;
    margin: var(--e-3) 0 0;
    font-family: var(--font-texte);
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
    color: var(--sur-marine-2);
  }

  .ep-panneau .ep-tuiles {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--e-10);
    margin: 0;
    border-top: 0;

    border-radius: 0;
    overflow: visible;
  }
  .ep-panneau .ep-tuiles .cq-fig {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--e-1-5);
    max-width: calc(var(--e-16) * 2);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left;
  }
  .ep-panneau .ep-tuiles .cq-fig .v {
    font-family: var(--font-titre);
    font-size: var(--fs-roi-s);
    line-height: var(--lh-serre);
    letter-spacing: var(--ls-serre);
    color: var(--sur-marine);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .ep-panneau .ep-tuiles .cq-fig.hl .v { color: var(--or); }
  .ep-panneau .ep-tuiles .cq-fig .k {
    margin: 0;
    font-family: var(--font-donnee);
    font-size: var(--fs-etiquette);
    line-height: var(--lh-etiquette);
    font-weight: 500;
    letter-spacing: var(--ls-capitales);
    text-transform: uppercase;
    color: var(--sur-marine-3);
  }

  .ep-panneau .cq-hero-in > .df-cartouches {
    grid-column: 1 / -1;
    margin-top: var(--e-8);
  }

  .ep-panneau .cq-hero-in > .df-cartouches > :first-child { margin-top: 0; }

  .ep-bloc {
    margin-top: var(--e-6);
    padding: var(--e-5);
    background: var(--papier);
    border: 1px solid var(--filet);
    border-radius: var(--r-lg);
  }
  .ep-hd { gap: var(--e-3); }
  .ep-hd .ep-ttl {
    font-family: var(--font-donnee);
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
    font-weight: 500;
    letter-spacing: var(--ls-capitales);
    color: var(--texte);
  }
  .ep-hd .ep-ttl b {
    margin-right: var(--e-1);
    font-family: var(--font-titre);
    font-weight: 400;
    font-size: var(--fs-ui);
    letter-spacing: 0;
    color: var(--or);
  }
  .ep-hd .ep-ln { background: var(--filet); }

  .ep-formats { gap: var(--e-3); margin-top: var(--e-5); }
  .ep-format {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--signe);
    column-gap: var(--e-3);
    row-gap: var(--e-1);
    align-items: center;
    min-height: var(--h-tactile);
    padding: var(--e-3) var(--e-4);
    background: var(--papier);
    border: 1px solid var(--filet);
    border-radius: var(--r-md);
    color: var(--texte);
    transition: border-color var(--d-court) var(--courbe);
  }
  .ep-format:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--filet-champ);
  }
  .ep-format.on {
    border: var(--filet-fort) solid var(--or);
    padding: calc(var(--e-3) - 1px) calc(var(--e-4) - 1px);
  }
  .ep-format .ep-format-n {
    grid-column: 1;
    font-family: var(--font-titre);
    font-size: var(--fs-lecture);
    line-height: var(--lh-bloc);
    color: var(--texte);
  }
  .ep-format .ep-format-d {
    grid-column: 1;
    margin: 0;
    font-family: var(--font-donnee);
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
    color: var(--texte-3);
  }
  .ep-format .ep-format-ok,
  .ep-format.on .ep-format-ok { display: none; }

  .ep-format::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--signe);
    height: var(--signe);
    border: 1px solid var(--filet-champ);
    border-radius: var(--r-rond);
    font-family: var(--font-texte);
    font-weight: 600;
    font-size: var(--fs-dense);
    line-height: var(--lh-serre);
  }
  .ep-format.on::after {
    content: "✓";
    border-color: var(--or);
    background: var(--or);
    color: var(--marine);
  }
  .ep-format:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }

  .ep-pied { gap: var(--e-3) var(--e-5); margin-top: var(--e-5); }
  .ep-bloc .ep-cta {
    min-height: var(--h-lg);
    padding: 0 var(--e-6);
    gap: var(--e-2);
    background: var(--or);
    color: var(--marine);
    font-family: var(--font-titre);
    font-size: var(--fs-bouton-lg);
  }
  .ep-bloc .ep-cta:hover { background: var(--or-sombre); transform: none; }
  .ep-bloc .ep-cta:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }
  .ep-ctx {
    font-family: var(--font-donnee);
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
    color: var(--texte-3);
  }
}

[data-module="compo"] .cp-writing > .cfo-tete-hote,
[data-module="compo"] .cp-writing > .cfo-carton,
[data-module="compo"] .cfo-sommaire,
[data-module="compo"] .cfo-pied-libre { display: none; }
[data-module="compo"] .cfo-cote { display: contents; }

@media (min-width: 640px) {

  [data-module="compo"] { scroll-margin-top: calc(var(--e-16) + var(--e-10)); }

  body:has([data-module="compo"] .cp-writing:not([style*="none"]) > .cfo-carton) .pdw-epreuve { display: none; }

  [data-module="compo"] .cp-writing > .cfo-tete-hote {
    display: block;
    position: sticky;
    top: calc(var(--e-16) + var(--e-8) + var(--e-1));  
    z-index: 6;
    height: 0;
  }
  [data-module="compo"] .cfo-tete-hote > .cfo-tete {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    gap: var(--e-3);
    min-height: var(--h-barre);
    padding: var(--e-2) var(--e-3) var(--e-2) var(--e-5);
    visibility: hidden;
    opacity: 0;
    transform: translateY(calc(var(--e-2) * -1));
    transition: opacity var(--d-court) var(--courbe), transform var(--d-court) var(--courbe), visibility 0s linear var(--d-court);
    box-sizing: border-box;
    background: var(--papier);
    border: 1px solid var(--filet);
    border-radius: var(--r-lg);
    font-family: var(--font-texte);
    color: var(--texte);
  }
  .cfo-tete > .etiquette { flex: none; }

  .cfo-tete-sujet {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-titre);
    font-weight: 400;
    font-size: var(--fs-bloc);
    line-height: var(--lh-bloc);
    color: var(--texte);
    overflow-wrap: break-word;
    text-wrap: balance;  
  }
  .cfo-tete-niv { flex: none; }
  .cfo-tete-flex { flex: 1 1 0; min-width: 0; }
  .cfo-tete-chrono {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--e-1-5);
    font-family: var(--font-donnee);
    font-size: var(--fs-ui);
    line-height: var(--lh-serre);
    color: var(--texte-2);
    font-variant-numeric: tabular-nums;
  }
  .cfo-tete-sab, .cfo-tete-sab svg { display: block; }

  .cfo-tete-chrono.bas { color: var(--carmin); }
  .cfo-tete-chrono[hidden],
  .cfo-outils .cfo-aide[hidden] { display: none; }
  .cfo-outils .btn { flex: none; }

  .cfo-aide-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--signe);
    height: var(--signe);
    margin-left: calc(var(--e-2) * -1);
    border-radius: var(--r-rond);
    background: var(--marine);
    color: var(--papier);
    font-family: var(--font-donnee);
    font-size: var(--fs-meta);
    font-weight: 600;
    line-height: var(--lh-serre);
  }

  [data-module="compo"] .cp-writing:has(.cfo-resultat .copie) > .cfo-tete-hote,
  [data-module="compo"] .cp-writing:has(.cfo-resultat .copie) > .cfo-carton { display: none; }

  [data-module="compo"] .cfo-tete-hote > .cfo-tete.compacte {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--d-court) var(--courbe), transform var(--d-court) var(--courbe);
  }
  .cfo-tete-sujet {
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .cfo-outils { display: flex; align-items: center; gap: var(--e-2); flex: none; }
  .cfo-carton-l1 {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    min-height: var(--h-sm);
  }
  .cfo-carton-l1 .cfo-tete-niv {
    background: transparent;
    border-color: var(--creme-a22);
    color: var(--sur-marine-2);
  }

  .cfo-carton .cfo-tete-chrono { color: var(--sur-marine-2); margin-right: var(--e-2); }
  .cfo-carton .cfo-tete-chrono.bas { color: var(--carmin-pale); }
  .cfo-carton .btn.tonal.sm { background: var(--marine-2); color: var(--sur-marine); }
  .cfo-carton .btn.tonal.sm:hover { background: color-mix(in srgb, var(--marine-2), var(--sur-marine) 12%); color: var(--sur-marine); }
  .cfo-carton .btn:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
  .cfo-carton .cfo-aide-i { background: var(--sur-marine); color: var(--marine); }
  [data-module="compo"] .cp-writing > .cfo-carton {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    gap: var(--e-5);
    margin: var(--e-6) 0 var(--e-8);
    padding: var(--e-5) var(--e-5) var(--e-10) var(--e-10);
    background: var(--marine);
    border-radius: var(--r-xl);
    color: var(--sur-marine);
  }
  .cfo-carton-sur {
    font-family: var(--font-donnee);
    font-size: var(--fs-etiquette);
    line-height: var(--lh-etiquette);
    font-weight: 500;
    letter-spacing: var(--ls-capitales);
    color: var(--sur-marine-3);
  }
  .cfo-carton-t {
    margin: 0;
    max-width: 22em;
    font-family: var(--font-titre);
    font-weight: 400;
    font-size: clamp(var(--fs-page-m), 3.2vw, var(--fs-page));
    line-height: var(--lh-page-m);
    letter-spacing: var(--ls-serre);
    color: var(--sur-marine);
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  .cfo-carton-q { color: var(--or); }

  [data-module="compo"] .cp-writing > .cfo-barre { display: none; }

  [data-module="compo"] .cfo-copie:not(:has(> .cfo-resultat .copie)) {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  [data-module="compo"] .cfo-copie:not(:has(> .cfo-resultat .copie)) > .cfo-hd { display: none; }

  [data-module="compo"] .cfo-champs:not(.verdict) > .ccx-sujet,
  [data-module="compo"] .cfo-champs:not(.verdict) > .ccx-prog { display: none; }
  [data-module="compo"] .cfo-champs:not(.verdict) { margin-top: 0; }

  [data-module="compo"] .cfo-copie:not(:has(> .cfo-resultat .copie)) > .cp-exam-note {
    display: grid;
    grid-template-columns: var(--signe) minmax(0, 1fr);
    column-gap: var(--e-2);
    margin: 0 0 var(--e-5);
    padding: calc(var(--e-3) + var(--e-0-5)) var(--e-4);
    border: 0;
    border-radius: var(--r-md);
    background: var(--carmin-pale);
    font-family: var(--font-texte);
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
    color: var(--texte);
  }
  [data-module="compo"] .cfo-copie:not(:has(> .cfo-resultat .copie)) > .cp-exam-note::before {
    content: "!";
    display: grid;
    place-items: center;
    width: var(--signe);
    height: var(--signe);
    border-radius: var(--r-rond);
    background: var(--carmin);
    color: var(--papier);
    font-family: var(--font-donnee);
    font-size: var(--fs-meta);
    font-weight: 600;
    line-height: var(--lh-serre);
  }
  [data-module="compo"] .cfo-copie:not(:has(> .cfo-resultat .copie)) > .cp-exam-note.or { background: var(--or-pale); }
  [data-module="compo"] .cfo-copie:not(:has(> .cfo-resultat .copie)) > .cp-exam-note.or::before { background: var(--or); color: var(--marine); }

  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-etape {
    display: grid;
    grid-template-columns: var(--h-pastille) minmax(0, 1fr);
    column-gap: var(--e-4);
    padding-bottom: var(--e-5);
    scroll-margin-top: calc(var(--e-16) * 2);
  }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-fil { width: auto; }

  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-fil::before {
    content: "";
    flex: none;
    width: var(--filet-fort);
    height: calc((var(--h-lg) - var(--h-pastille)) / 2);
    background: var(--filet);
    border-radius: var(--r-trait);
  }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-prog + .ccx-etape .ccx-fil::before { background: transparent; }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-trait {
    width: var(--filet-fort);
    margin-top: 0;
    background: var(--filet);
    border-radius: var(--r-trait);
  }

  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-past,
  .cfo-som-past {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--h-pastille);
    height: var(--h-pastille);
    margin: 0;
    border: var(--filet-fort) solid var(--or);
    border-radius: var(--r-rond);
    background: var(--papier);
    color: var(--marine);
    font-family: var(--font-titre);
    font-size: var(--fs-meta);
    line-height: var(--lh-serre);
  }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-past.t-marine, .cfo-som-past.t-marine { border-color: var(--marine); color: var(--marine); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-past.t-brique, .cfo-som-past.t-brique { border-color: var(--terre-cuite); color: var(--terre-cuite); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-past.plein.t-or, .cfo-som-past.plein.t-or { background: var(--or); color: var(--marine); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-past.plein.t-marine, .cfo-som-past.plein.t-marine { background: var(--marine); color: var(--papier); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-past.plein.t-brique, .cfo-som-past.plein.t-brique { background: var(--terre-cuite); color: var(--papier); }

  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-carte {
    background: var(--papier);
    border: 1px solid var(--filet);
    border-radius: var(--r-lg);
  }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-bandeau {
    align-items: center;
    gap: var(--e-3);
    min-height: var(--h-lg);
    padding: 0 var(--e-5);
    box-sizing: border-box;
  }

  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-bandeau.t-or { background: var(--or-pale); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-bandeau.t-marine { background: var(--marine-pale); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-bandeau.t-brique { background: var(--terre-cuite-pale); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-titre {
    flex: 1 1 auto;
    font-family: var(--font-titre);
    font-size: var(--fs-bloc);
    line-height: var(--lh-bloc);
    color: var(--texte);
  }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-compte,
  .cfo-som-n {
    flex: none;
    font-family: var(--font-donnee);
    font-size: var(--fs-meta);
    line-height: var(--lh-serre);
    color: var(--texte-3);
    font-variant-numeric: tabular-nums;
  }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-corps { gap: var(--e-5); padding: var(--e-5); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-champ { gap: 0; }

  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-lbl {
    margin-bottom: var(--e-1-5);
    font-family: var(--font-texte);
    font-size: var(--fs-dense);
    line-height: var(--lh-dense);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--texte);
  }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-lbl > span:first-child { text-transform: lowercase; }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-lbl > span:first-child::first-letter { text-transform: uppercase; }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-aide {
    margin-top: var(--e-1-5);
    font-family: var(--font-donnee);
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
    color: var(--texte-3);
  }

  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-zone,
  [data-module="compo"] .cfo-copie:not(:has(> .cfo-resultat .copie)) > .cfo-zone {
    padding: var(--e-4);
    background: var(--papier);
    border: 1px solid var(--filet-champ);
    border-radius: var(--r-sm);
    font-family: var(--font-texte);
    font-size: var(--fs-lecture);
    line-height: var(--lh-lecture);
    color: var(--texte);
    caret-color: var(--marine);
  }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-zone:placeholder-shown,
  [data-module="compo"] .cfo-copie > .cfo-zone:placeholder-shown { border-style: dashed; }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-zone::placeholder,
  [data-module="compo"] .cfo-copie > .cfo-zone::placeholder { color: var(--texte-3); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-zone.rempli { border-style: solid; border-color: var(--filet); background: var(--papier); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-zone:focus,
  [data-module="compo"] .cfo-copie > .cfo-zone:focus {
    border-style: solid;
    border-color: var(--marine);
    background: var(--papier);
    outline: 2px solid var(--marine);
    outline-offset: 2px;
  }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-zone.hh1 { min-height: calc(var(--e-16) * 2); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-zone.hh2 { min-height: calc(var(--e-16) * 3); }
  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-zone.hh3 { min-height: calc(var(--e-16) * 4); }

  [data-module="compo"] .cfo-champs:not(.verdict) .ccx-zone,
  [data-module="compo"] .cfo-copie > .cfo-zone { resize: vertical; }
  [data-module="compo"] .cfo-copie:not(:has(> .cfo-resultat .copie)) > .cfo-zone { margin: 0 0 var(--e-5); min-height: calc(var(--e-16) * 8); }

  [data-module="compo"] .ccx-rendre.cfo-pied {
    position: sticky;
    bottom: var(--e-3);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--e-5);
    margin-top: 0;
    padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5);
    background: var(--papier);
    border: 1px solid var(--filet);
    border-radius: var(--r-lg);
    box-shadow: none;
  }

  [data-module="compo"] .cfo-pied > .cfo-jauge { flex: 0 1 calc(var(--e-10) * 3); min-width: var(--e-10); }
  [data-module="compo"] .cfo-pied-tx { flex: 0 1 auto; display: flex; flex-direction: column; gap: var(--e-0-5); min-width: 0; }
  [data-module="compo"] .cfo-pied > .ccx-rendre-flex { display: none; }
  [data-module="compo"] .cfo-pied .ccx-rendre-n {
    font-family: var(--font-donnee);
    font-size: var(--fs-ui);
    line-height: var(--lh-meta);
    color: var(--texte);
    font-variant-numeric: tabular-nums;
  }
  [data-module="compo"] .cfo-pied-meta {
    font-family: var(--font-donnee);
    font-size: var(--fs-meta);
    line-height: var(--lh-meta);
    color: var(--texte-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  [data-module="compo"] .cfo-pied .btn.or { flex: none; margin-left: auto; text-transform: none; letter-spacing: 0; }
  [data-module="compo"] .cfo-pied .btn.or svg { margin: 0; vertical-align: 0; }

  [data-module="compo"] .cfo-copie:has(> .cfo-resultat .copie) > .cfo-pied-libre { display: none; }

  [data-module="compo"] .cfo-champs.verdict .ccx-rendre.cfo-pied { display: none; }
}

@media (min-width: 640px) {
  [data-module="compo"] .cfo-grille > .cp-guide { display: none; }
  [data-module="compo"] .cfo-sommaire { display: none; }
  [data-module="compo"] .cfo-cote { display: none; }
  [data-module="compo"] .cfo-grille.bro-ouvert > .cfo-cote { display: block; min-width: 0; }
  [data-module="compo"] .cfo-grille:has(> .cp-writemain > .cfo-resultat:not(:empty)) > .cfo-cote { display: none; }
  [data-module="compo"] .cp-writegrid.cfo-grille { grid-template-columns: minmax(0, 1fr); }
  [data-module="compo"] .cfo-grille > .cp-writemain { grid-column: 1; }
  .cfo-tete .cfo-bro-tete.btn.tonal[aria-expanded="true"],
  .cfo-tete .cfo-bro-tete.btn.tonal[aria-expanded="true"]:hover { background: var(--marine); color: var(--sur-marine); }
  .cfo-carton .cfo-bro-tete.btn.tonal[aria-expanded="true"],
  .cfo-carton .cfo-bro-tete.btn.tonal[aria-expanded="true"]:hover { background: var(--sur-marine); color: var(--marine); }
}
@media (min-width: 900px) {
  [data-module="compo"] .cp-writegrid.cfo-grille.bro-ouvert {
    grid-template-columns: minmax(0, 1fr) calc(var(--e-16) * 4 - var(--e-4));
    grid-template-rows: auto;
    column-gap: var(--e-6);
  }
  [data-module="compo"] .cfo-grille.bro-ouvert > .cp-writemain { grid-row: 1; }
  [data-module="compo"] .cfo-grille.bro-ouvert > .cfo-cote {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--e-16) * 2);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--e-6);
  }

  [data-module="compo"] .cfo-grille.bro-ouvert .cfo-bro-zone { min-height: calc(var(--e-16) * 6); }
}
@media (min-width: 640px) {

  .cfo-som-liste {
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cfo-som-item {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    width: 100%;
    min-height: var(--h-md);
    padding: 0 var(--e-4);
    box-sizing: border-box;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--texte-2);
    font-family: var(--font-texte);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--d-court) var(--courbe);
  }
  .cfo-som-item:hover { background: var(--creme-2); }
  .cfo-som-item.on { color: var(--texte); }
  .cfo-som-item.on.t-or { background: var(--or-pale); }
  .cfo-som-item.on.t-marine { background: var(--marine-pale); }
  .cfo-som-item.on.t-brique { background: var(--terre-cuite-pale); }
  .cfo-som-item .cfo-som-past {
    width: var(--h-pastille-fixe);
    height: var(--h-pastille-fixe);
    font-size: var(--fs-etiquette);
  }
  .cfo-som-t { flex: 1 1 auto; min-width: 0; font-size: var(--fs-ui); font-weight: 600; }

  [data-module="compo"] .cfo-cote .cfo-brouillon {
    display: grid;
    grid-template-columns: var(--signe) minmax(0, 1fr);
    column-gap: var(--e-2);
    row-gap: var(--e-1-5);
    margin: 0;
    padding: calc(var(--e-3) + var(--e-0-5)) var(--e-4);
    background: var(--papier);
    border: 1px solid var(--filet);
    border-radius: var(--r-md);
    color: var(--texte);
  }
  [data-module="compo"] .cfo-cote .cfo-brouillon::before {
    content: "i";
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: var(--signe);
    height: var(--signe);
    border-radius: var(--r-rond);
    background: var(--marine);
    color: var(--papier);
    font-family: var(--font-donnee);
    font-size: var(--fs-meta);
    font-weight: 600;
    line-height: var(--lh-serre);
  }
  [data-module="compo"] .cfo-cote .cfo-brouillon > * { grid-column: 2; min-width: 0; margin: 0; }
  [data-module="compo"] .cfo-cote .cfo-eyeb {
    display: flex;
    align-items: center;
    min-height: var(--signe);
    font-family: var(--font-donnee);
    font-size: var(--fs-etiquette);
    line-height: var(--lh-etiquette);
    font-weight: 600;
    letter-spacing: var(--ls-capitales);
    color: var(--marine);
  }
  [data-module="compo"] .cfo-cote .cfo-bro-tx {
    font-family: var(--font-texte);
    font-size: var(--fs-dense);
    line-height: var(--lh-dense);
    color: var(--texte-2);
  }
  [data-module="compo"] .cfo-cote .cfo-bro-go {
    justify-self: start;
    width: auto;
    min-height: 0;
    height: var(--h-sm);
    padding: 0 var(--e-4);
    border: 0;
    border-radius: var(--r-pilule);
    background: var(--creme-2);
    color: var(--marine);
    font-family: var(--font-titre);
    font-size: var(--fs-dense);
    line-height: var(--lh-serre);
  }
  [data-module="compo"] .cfo-cote .cfo-bro-go:hover { background: var(--filet); }
  [data-module="compo"] .cfo-cote .cfo-bro-go:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }
  [data-module="compo"] .cfo-cote .cfo-bro-zone { grid-column: 1 / -1; }
}

.cfo-aide-voile {
  position: fixed;
  inset: 0;
  z-index: var(--z-voile);
  background: var(--voile);
  animation: apparait var(--d-moyen) var(--courbe) both;
}
[data-module="compo"] .ccx-etape.cfo-projecteur { position: relative; z-index: var(--z-fenetre); }

.sog-screen:has(.cfo-projecteur),
[data-module="compo"] .cfo-copie:has(.cfo-projecteur) { animation: none; }
.v3.popover.cfo-pop { z-index: var(--z-fenetre); }
.cfo-pop {
  z-index: var(--z-fenetre);
  font-family: var(--font-texte);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}

.cfo-pop.flotte {
  position: fixed;
  right: var(--e-3);
  bottom: calc(var(--h-flottant) + var(--e-6));
  max-height: calc(100vh - var(--e-16) * 2 - var(--h-flottant) - var(--e-6));
  overflow: auto;
}
.cfo-pop.cote::before {
  content: "";
  position: absolute;
  left: calc(var(--e-1-5) * -1);
  top: var(--e-5);
  width: var(--e-3);
  height: var(--e-3);
  background: var(--marine);
  border-radius: var(--r-trait);
  transform: rotate(45deg);
}
.cfo-pop .popover-tete { position: relative; padding-right: var(--e-1); }
.cfo-pop-corps { display: flex; flex-direction: column; gap: var(--e-4); }
.cfo-pop-etape {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: var(--e-3);
  align-items: start;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-sm);
  background: var(--or-pale);
}
.cfo-pop-etape.t-marine { background: var(--marine-pale); }
.cfo-pop-etape.t-brique { background: var(--terre-cuite-pale); }
.cfo-pop-num {
  font-family: var(--font-titre);
  font-size: var(--fs-section);
  line-height: var(--h-pastille);
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.cfo-pop-t { margin: 0; padding-top: var(--e-0-5); font-size: var(--fs-ui); line-height: var(--lh-ui); }
.cfo-pop-t b { font-family: var(--font-titre); font-weight: 400; font-size: var(--fs-bloc); }
.cfo-pop-ex {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--r-sm);
  background: var(--creme);
}
.cfo-pop-ex-h { margin: 0; font-size: var(--fs-dense); line-height: var(--lh-dense); font-weight: 600; }
.cfo-pop-ex-p { margin: 0; font-size: var(--fs-dense); line-height: var(--lh-dense); font-style: italic; }
.cfo-pop-li { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.cfo-pop-li li {
  display: grid;
  grid-template-columns: var(--signe) minmax(0, 1fr);
  column-gap: var(--e-2);
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
}
.cfo-pop-li b { font-weight: 600; }
.cfo-pop-li-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--signe);
  height: var(--signe);
  border-radius: var(--r-rond);
  background: var(--marine);
  color: var(--papier);
  font-family: var(--font-donnee);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: var(--lh-serre);
}
.cfo-pop-note { margin: 0; font-family: var(--font-donnee); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--texte-3); }
.cfo-pop-pied {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--filet);
}
.cfo-pop-prec:disabled { color: var(--texte-inactif); text-decoration: none; cursor: default; }
.cfo-pop-points { display: flex; align-items: center; gap: var(--e-1-5); margin: 0 auto; }
.cfo-pop-points > span { display: block; width: var(--e-2); height: var(--e-2); border-radius: var(--r-rond); background: var(--filet); }
.cfo-pop-points > span.on { width: var(--e-5); border-radius: var(--r-pilule); background: var(--marine); }
.cfo-pop-points > .cfo-pop-cpt {
  width: auto;
  height: auto;
  margin-left: var(--e-1-5);
  border-radius: 0;
  background: none;
  font-family: var(--font-donnee);
  font-size: var(--fs-meta);
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .cfo-aide-voile { animation: none; }
  .cfo-som-item, .ep-format { transition: none; }
}