/* Base commune : remise à zéro des styles par défaut du navigateur. */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: system-ui, sans-serif; }
body { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ol, ul, menu { list-style: none; }
a { color: inherit; text-decoration: inherit; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; }
button { cursor: pointer; }

/* Pas de mot orphelin en fin de ligne ou de paragraphe. */
.cm h1,.cm h2,.cm h3{text-wrap:balance}
.cm p,.cm li,.cm figcaption,.cm dd{text-wrap:pretty}
/* Un texte ne sort jamais de sa case. */
.cm :is(h1,h2,h3,p,li,dd,figcaption,a){overflow-wrap:break-word;min-width:0}
.cm .cm-nb{white-space:nowrap}
/* Chaque phrase reste groupee : elle passe a la ligne entiere plutot que de laisser son debut en fin de ligne. */
.cm .cm-ph{display:inline-block;max-width:100%;vertical-align:top;text-wrap:pretty}
/* Presentation : le film du portfolio, hors projets. */
.cm-reel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding:clamp(3.5rem,8vw,7rem) var(--pad);scroll-margin-top:3.5rem}
.cm-reel__kicker{margin:0 0 1rem;color:var(--red)}
.cm-reel__title{font-size:clamp(2.8rem,7.5vw,7.5rem)}
.cm-reel__text{max-width:44ch;margin:1.5rem 0 0;font-size:1.1rem}
.cm-reel__frame{position:relative;width:100%;max-width:26rem;justify-self:end}
.cm-reel__frame::before{content:"";position:absolute;inset:1.25rem -1.25rem -1.25rem 1.25rem;background:var(--red)}
.cm-reel__frame video{position:relative;display:block;width:100%;height:auto;border:2px solid var(--ink);background:var(--ink)}
@media (max-width:760px){.cm-reel{grid-template-columns:1fr}.cm-reel__frame{max-width:20rem;justify-self:start}}