/* Section « Écrit comme vous » : deux comptes rendus fictifs complets.
   Sans JavaScript : les deux comptes rendus s'affichent l'un sous l'autre. */
.compo__choix { display: none; }
.js-compo .compo__choix { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--bord); border-radius: 999px; margin-bottom: 22px; }
.compo__onglet { border: 0; background: transparent; padding: 10px 18px; min-height: 44px; border-radius: 999px; font: inherit; font-weight: 600; color: var(--bleu-fonce); cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.compo__onglet[aria-pressed="true"] { background: var(--bleu); color: #fff; }

.compo__grille { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.compo__pages { display: grid; gap: 24px; }
.js-compo .compo__pages { grid-template-columns: minmax(0, 1fr); }
.js-compo .cr { grid-area: 1 / 1; }
.js-compo .cr:not(.cr--actif) { display: none; }

/* Panneau de gauche : cinq lignes à survoler, le compte rendu zoome */
.compo__legende { display: none; }
.js-compo .compo__legende { display: block; background: linear-gradient(160deg, #1B3B5C 0%, #0F2740 70%); color: #EAF3FA; border-radius: 22px; padding: 26px 22px 18px; box-shadow: 0 30px 70px rgba(15,39,64,.35); }
.compo__kicker { margin: 0 0 14px; font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1.2; }
.compo__invite { margin: 0 0 18px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.35); color: #fff; font-weight: 600; }
.compo__curseur { flex: none; color: #F2B8A2; animation: curseur 1.6s ease-in-out infinite; }
@keyframes curseur { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(7px, 7px); } }
.compo__rangs { list-style: none; margin: 0; padding: 0; }
.compo__rangs li { border-top: 1px solid rgba(255,255,255,.12); }
.compo__mot { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 15px 10px; background: transparent; border: 0; border-left: 4px solid transparent; border-radius: 10px; font: inherit; color: inherit; cursor: pointer; transition: background-color .3s ease, transform .3s ease, border-color .3s ease; }
.compo__num { flex: none; font-size: 1.5rem; font-weight: 700; color: #F2B8A2; min-width: 2.1ch; font-variant-numeric: tabular-nums; }
.compo__txt { flex: 1; min-width: 0; }
.compo__txt strong { display: block; font-size: 1.15rem; color: #fff; line-height: 1.25; }
.compo__desc { display: block; max-height: 0; overflow: hidden; opacity: 0; color: #C9DCEC; font-size: .98rem; line-height: 1.45; transition: max-height .45s ease, opacity .35s ease, margin .35s ease; }
.compo__fleche { flex: none; font-size: 1.4rem; color: rgba(255,255,255,.4); transition: transform .3s ease, color .3s ease; }
.compo__mot:hover, .compo__mot--actif { background: rgba(255,255,255,.1); border-left-color: var(--accent); transform: translateX(6px); }
.compo__mot--actif .compo__desc, .compo__mot:hover .compo__desc { max-height: 8em; opacity: 1; margin-top: 6px; }
.compo__mot--actif .compo__fleche, .compo__mot:hover .compo__fleche { transform: translateX(6px); color: #fff; }
.compo__mot:focus-visible { outline: 3px solid #F2B8A2; outline-offset: 2px; }
/* Tant que rien n'a été survolé, la première ligne pulse pour appeler la souris */
.compo--vierge .compo__rangs li:first-child .compo__mot { animation: appel 2.2s ease-in-out infinite; }
@keyframes appel { 0%, 100% { background-color: transparent; } 50% { background-color: rgba(242,184,162,.18); } }

/* Zoom sur la partie survolée */
.cr__feuille { transform-origin: 0 0; transition: transform .75s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.compo__pages { position: relative; }
.compo__badge { position: absolute; z-index: 3; left: 14px; top: 14px; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .95rem; box-shadow: 0 8px 22px rgba(181,80,47,.4); opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.compo[data-allume] .compo__badge { opacity: 1; transform: none; }

/* Le compte rendu : reproduction de la mise en page réelle du PDF produit par l'appli
   (A4, sobre, noir et blanc : la couleur ne porte aucune information). Les dimensions suivent
   la largeur de la feuille (cqw) : 21 cm = 100 % de la largeur, 11 pt = 1,848 cqw. */
.cr { container-type: inline-size; background: #fff; border: 1px solid var(--bord); box-shadow: 0 24px 60px rgba(31,68,102,.18); min-width: 600px; overflow: hidden; }
.compo__pages { overflow-x: auto; padding-bottom: 8px; }
.cr__feuille { position: relative; display: flex; flex-direction: column; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.848cqw; line-height: 1.45; color: #16191c; padding: 4.2em 5.15em 3.6em; aspect-ratio: 21 / 29.7; --regle: #c9ced1; --discret: #56606a; }
.cr__feuille p, .cr__feuille h4, .cr__feuille ul { margin: 0; }
.cr [data-bloc] { transition: opacity .35s ease, background-color .35s ease, box-shadow .35s ease; border-radius: 3px; }
.cr__fictif { position: absolute; top: .9em; right: 1em; z-index: 2; background: #fff3cd; color: #6b4e00; font-size: .72em; font-weight: 700; padding: .15em .6em; border-radius: 4px; border: 1px solid #e8d48a; }
.cr__entete { border-bottom: 1.5px solid #16191c; padding-bottom: .55em; margin-bottom: 1.1em; }
.cr__cabinet { text-align: center; margin-bottom: .5em; }
.cr__maj { text-transform: uppercase; }
.cr__ligne { display: flex; justify-content: space-between; align-items: flex-start; }
.cr__droite { text-align: right; }
.cr__date { text-align: right; margin-top: .6em; }
.cr__doc-titre { text-align: center; margin: 1.5em 0 1.2em; }
.cr__t1 { font-size: 14pt; font-size: 1.27em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: inline-block; }
.cr__doc-titre > div:not(.cr__t1) { font-size: .95em; letter-spacing: .06em; color: var(--discret); margin-top: .45em; }
.cr__id { border-top: 1.5px solid #16191c; border-bottom: 1px solid var(--regle); background: #fafbfb; padding: .6em .75em; margin-bottom: 1.1em; font-size: .95em; line-height: 1.6; }
.cr__id strong { font-weight: 600; font-size: .82em; letter-spacing: .07em; text-transform: uppercase; color: var(--discret); }
.cr__idtab { width: 100%; border-collapse: collapse; margin-bottom: 1.1em; font-size: .95em; border-top: 1.5px solid #16191c; }
.cr__idtab th, .cr__idtab td { border: 1px solid var(--regle); padding: .3em .55em; text-align: left; }
.cr__idtab th { font-weight: 600; font-size: .82em; letter-spacing: .07em; text-transform: uppercase; color: var(--discret); background: #fafbfb; width: 18%; }
.cr__confidentiel { font-style: italic; font-size: .84em; line-height: 1.4; color: var(--discret); border-left: 2px solid var(--regle); padding: .1em 0 .1em .8em; margin-bottom: 1em; }
.cr__feuille .cr__h { color: #16191c; font-family: inherit; font-size: .98em; font-weight: 700; letter-spacing: .06em; border-bottom: 1px solid var(--regle); padding-bottom: .25em; margin: 1.6em 0 .55em; }
.cr__feuille p { text-align: justify; margin-bottom: .4em; }
.cr__feuille p.cr__confidentiel { text-align: left; }
.cr__feuille .cr__puces { margin: .18em 0 .35em 1.25em; padding: 0; }
.cr__puces li { margin: .1em 0; text-align: justify; }
.cr__res { font-size: .96em; margin: .5em 0 .9em; width: 100%; border-collapse: collapse; }
.cr__res th { font-size: .88em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--discret); text-align: left; border: 0; border-bottom: 1px solid #16191c; padding: .3em .5em .25em; }
.cr__res td { border: 0; border-bottom: 1px solid var(--regle); padding: .3em .5em; vertical-align: top; }
.cr__signature { margin-top: 1.6em; text-align: right; }
.cr__nom { margin-top: 1.2em; font-weight: 700; }
.cr__espace { height: 3.2em; }
.cr__pied { margin-top: auto; border-top: 1px solid var(--regle); padding-top: .45em; font-size: .78em; letter-spacing: .03em; color: var(--discret); display: flex; justify-content: space-between; gap: 1em; }

/* Un élément survolé : le reste s'estompe, le bloc concerné est surligné */
.js-compo .compo[data-allume] .cr [data-bloc] { opacity: .28; }
.js-compo .compo[data-allume="1"] .cr [data-bloc="1"],
.js-compo .compo[data-allume="2"] .cr [data-bloc="2"],
.js-compo .compo[data-allume="3"] .cr [data-bloc="3"],
.js-compo .compo[data-allume="4"] .cr [data-bloc="4"],
.js-compo .compo[data-allume="5"] .cr [data-bloc="5"] { opacity: 1; background: #FFF6F1; box-shadow: 0 0 0 6px #FFF6F1, 0 0 0 8px var(--accent); }
/* Le bloc 3 est imbriqué dans le bloc 2 : il reste lisible quand 3 est allumé */
.js-compo .compo[data-allume="3"] .cr section[data-bloc="2"] { opacity: 1; }
.js-compo .compo[data-allume="3"] .cr section[data-bloc="2"] > h4 { opacity: .28; }

.compo__note { margin: 18px 0 40px; font-size: .92rem; color: var(--texte-doux); max-width: 70ch; }

@media (min-width: 900px) {
  .compo__grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 36px; }
  .js-compo .compo__legende { position: sticky; top: 90px; }
}
@media (max-width: 899px) { .js-compo .compo__legende { order: 2; } }
@media (prefers-reduced-motion: reduce) { .cr [data-bloc], .compo__mot, .compo__onglet, .cr__feuille, .compo__desc { transition: none; } .compo__curseur, .compo--vierge .compo__mot { animation: none !important; } }

/* Trame C : mêmes tableaux que B, avec les classes colorées (la couleur appartient au cabinet) */
.cr--c .cr__res td.case { text-align: center; font-weight: 700; }
.cr--c .cr__idtab th { background: #EAF3FA; }

/* Téléphone : invite adaptée au toucher, onglets lisibles, page défilable avec indication */
.pour-tactile { display: none; }
@media (hover: none) { .pour-souris { display: none; } .pour-tactile { display: inline; } }
.compo__glisse { display: none; margin: 0 0 8px; font-size: .92rem; color: var(--texte-doux); font-weight: 600; }
@media (max-width: 899px) {
  .cr { min-width: 520px; }
  .js-compo .compo__glisse { display: block; }
  .compo__grille { gap: 16px; }
}
@media (max-width: 639px) {
  .js-compo .compo__choix { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 18px; width: 100%; }
  .compo__onglet { text-align: left; }
}