CSS Admin

(pour visualisation des éléments SIO)

/*
========================================================================================================================
|  Élément      |  CODE ADMIN CSS
========================================================================================================================
|  Élément SIO  |  Bloc HTML
========================================================================================================================
|  Emplacement  |  Code en-tête page
========================================================================================================================
|  Date MAJ     |  xxxx-xx-xx
========================================================================================================================
*/

Frame Code

(Sublime Text - thème Mariana)

/*
========================================================================================================================
|  Élément      |  FRAME BLOC - Sublime Text Mariana Theme
========================================================================================================================
|  Élément SIO  |  Bloc HTML
========================================================================================================================
|  Emplacement  |  Code en-tête page
========================================================================================================================
|  Date MAJ     |  2026-04-14
========================================================================================================================
*/

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400;1,500&display=swap" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>

/*
========================================================================================================================
|  Élément      |  FRAME BLOC - Sublime Text Mariana Theme
========================================================================================================================
|  Élément SIO  |  Bloc HTML
========================================================================================================================
|  Emplacement  |  Code footer page
========================================================================================================================
|  Date MAJ     |  2026-04-14
========================================================================================================================
*/

/* ============================================================
     1. DÉTECTION DE LANGAGE
     ============================================================ */
  const LANG_SIGNATURES = [
    { lang: 'javascript', file: 'script.js', patterns: [/\b(const|let|var|function|=>|async|await)\b/, /document\./, /window\./], score: 0 },
    { lang: 'css', file: 'style.css', patterns: [/[a-z-]+\s*:\s*[^;{]+;/, /@media/], score: 0 },
    { lang: 'markup', file: 'index.html', patterns: [/<[a-z][a-z0-9-]*(\s[^>]*)?\s*\/?>/i, /<\/?[a-z]+>/i], score: 0 }
  ];

/* ============================================================
     2. CONSTRUCTION DU DOM
     ============================================================ */
  function buildFrameCode(sourceDiv) {
    const area = sourceDiv.querySelector('textarea');
    const tmpl = sourceDiv.querySelector('template');
    let rawCode = (area ? area.value : (tmpl ? tmpl.content.textContent : "")).trim();
    if (!rawCode) return;

const codeTag = wrapper.querySelector('code');
    if (detected.lang === 'css') {
      codeTag.innerHTML = tokenizeCSSToHTML(rawCode);
    } else {
      codeTag.textContent = rawCode;
      if (window.Prism) Prism.highlightElement(codeTag);
    }

const lines = rawCode.split('\n');
    wrapper.querySelector('.fm-gutter').innerHTML = lines.map((_, i) => `<span>${i + 1}</span>`).join('');
    sourceDiv.replaceWith(wrapper);

const body = wrapper.querySelector('.fm-editor-body');
    const toggleBtn = wrapper.querySelector('.fm-toggle-btn');
    toggleBtn.addEventListener('click', () => {
      const isOpen = body.style.display === 'flex';
      body.style.display = isOpen ? 'none' : 'flex';
      toggleBtn.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';
    });

wrapper.querySelector('.fm-copy-btn').addEventListener('click', function() {
      navigator.clipboard.writeText(rawCode);
      this.textContent = 'Copié !';
      setTimeout(() => this.textContent = 'Copier', 2000);
    });
  }

/* ============================================================
     3. TOKENIZER CSS
     ============================================================ */
  const CONTROL_KW = new Set(['none', 'inherit', 'initial', 'unset', 'revert', 'revert-layer']);

function tokenizeCSSToHTML(code) {
    let out = '', i = 0, len = code.length;
    const peek = (n = 0) => code[i + n] || '';
    const eat = (n = 1) => { const s = code.slice(i, i + n); i += n; return s; };

while (i < len) {
      let ch = peek();
      if (/\s/.test(ch)) { out += eat(); continue; }

if (ch === '/' && peek(1) === '*') {
        let val = eat(2); while (i < len && !(peek() === '*' && peek(1) === '/')) val += eat();
        if (peek() === '*') val += eat(2);
        out += sp('fm-comment', val); continue;
      }

if (ch === '@') {
        out += '<span class="fm-at-rule-container"><span class="fm-at-rule-header">';
        out += `<span class="fm-at-rule-type">${sp('fm-at-symbol', eat())}`;
        let name = ''; while (/[a-zA-Z-]/.test(peek())) name += eat();
        out += sp('fm-at-name', name) + '</span>';
        while (i < len && peek() !== '{' && peek() !== ';') {
          let hCh = peek();
          if (/\s/.test(hCh)) out += eat();
          else if (hCh === '(') {
            out += '<span class="fm-media-condition">' + sp(getPunctClass('('), eat());
            while (i < len && peek() !== ')') {
               let cCh = peek();
               if (/[a-zA-Z-]/.test(cCh)) {
                 let word = ''; while(/[a-zA-Z0-9-]/.test(peek())) word += eat();
                 out += sp(word.includes('width') || word.includes('height') ? 'fm-property' : 'fm-kw-value', word);
               } else if (cCh === ':') out += sp(getPunctClass(':'), eat());
               else if (/[0-9]/.test(cCh)) {
                 let num = ''; while(/[0-9.]/.test(peek())) num += eat();
                 let unit = ''; while(/[a-zA-Z%]/.test(peek())) unit += eat();
                 out += sp('fm-number', num) + sp('fm-unit', unit);
               } else out += esc(eat());
            }
            if (peek() === ')') out += sp(getPunctClass(')'), eat());
            out += '</span>';
          }
          else if (/[a-zA-Z-]/.test(hCh)) {
            let word = ''; while (/[a-zA-Z0-9-]/.test(peek())) word += eat();
            out += sp(['only','and','not'].includes(word) ? 'fm-kw-logic' : 'fm-kw-screen', word);
          } else out += esc(eat());
        }
        out += '</span>';
        if (peek() === '{') out += '<span class="fm-at-rule-body">' + sp(getPunctClass('{'), eat());
        else if (peek() === ';') out += sp(getPunctClass(';'), eat()) + '</span>';
        continue;
      }

if (ch !== '}' && ch !== '{') {
        out += '<span class="fm-rule"><span class="fm-selector">';
        while (i < len && peek() !== '{' && peek() !== '}') {
          let sCh = peek();
          if (/\s/.test(sCh)) out += eat();
          else if (sCh === '.') out += sp('fm-class-dot', eat());
          else if (sCh === '#') out += sp('fm-id-hash', eat());
          // --- CORRECTION : Gestion de TOUS les duos d'attributs (^=, $=, *=, ~=, |=) ---
          else if (['^', '$', '*', '~', '|'].includes(sCh) && peek(1) === '=') {
            out += sp('fm-punctuation fm-operator-combo', eat(2));
          }
          else if (sCh === ':') {
             out += '<span class="fm-pseudo-class-container">';
             let col = eat(); if (peek() === ':') col += eat();
             out += sp('fm-pseudo-colon', col);
             let word = ''; while (/[a-zA-Z0-9_-]/.test(peek())) word += eat();
             out += sp('fm-pseudo-name', word) + '</span>';
          }
          else if (sCh === '"' || sCh === "'") {
             let q = eat(); let str = ''; while(i < len && peek() !== q) str += eat();
             out += sp('fm-punctuation fm-quote', q) + sp('fm-string', str) + (peek() === q ? sp('fm-punctuation fm-quote', eat()) : '');
          }
          else if (/[0-9]/.test(sCh)) {
            let num = ''; while (/[0-9.]/.test(peek())) num += eat();
            let unit = ''; while (/[a-zA-Z%]/.test(peek())) unit += eat();
            out += sp('fm-number', num) + (unit ? sp('fm-unit', unit) : '');
          }
          else if (/[a-zA-Z0-9_-]/.test(sCh)) {
            let word = ''; while (/[a-zA-Z0-9_-]/.test(peek())) word += eat();
            let last = out.split('<span').pop();
            if (last.includes('fm-class-dot')) out += sp('fm-class-name', word);
            else if (last.includes('fm-id-hash')) out += sp('fm-id-name', word);
            else if (out.endsWith('fm-square-bracket-open">[</span>')) out += sp('fm-attribute', word);
            else out += sp('fm-tag', word);
          } else out += sp(getPunctClass(sCh, 'selector'), eat());
        }
        out += '</span>';

if (peek() === '{') {
          out += '<span class="fm-declaration-block">' + sp(getPunctClass('{'), eat());
          while (i < len && peek() !== '}') {
            let dCh = peek();
            if (/\s/.test(dCh)) out += eat();
            else if (dCh === '/' && peek(1) === '*') {
              let val = eat(2); while (i < len && !(peek() === '*' && peek(1) === '/')) val += eat();
              if (peek() === '*') val += eat(2);
              out += sp('fm-comment', val);
            }
            else if (/[a-zA-Z-]/.test(dCh)) {
              out += '<span class="fm-declaration">';
              let prop = ''; while (/[a-zA-Z0-9-]/.test(peek())) prop += eat();
              if (prop.startsWith('--')) out += sp('fm-property-variable', prop);
              else out += sp('fm-property', prop);
              while (i < len && ![':',';','}'].includes(peek())) out += eat();
              if (peek() === ':') out += sp(getPunctClass(':'), eat());
              out += '<span class="fm-value-container">';
              while (i < len && peek() !== ';' && peek() !== '}') {
                let vCh = peek();
                if (/\s/.test(vCh)) out += eat();
                else if (vCh === '!' && code.substr(i, 20).replace(/\s/g,'').toLowerCase().startsWith('!important')) {
                   let imp = eat(); while(i < len && !/\s|;|}/.test(peek())) imp += eat();
                   out += sp('fm-important', imp);
                }
                else if (/[0-9]/.test(vCh) || (vCh === '-' && /[0-9.]/.test(peek(1)))) {
                  if (vCh === '-') out += sp('fm-math-operator fm-math-minus', eat());
                  let num = ''; while (/[0-9.]/.test(peek())) num += eat();
                  let unit = ''; while (/[a-zA-Z%]/.test(peek())) unit += eat();
                  out += sp('fm-number', num) + (unit ? sp('fm-unit', unit) : '');
                }
                else if (vCh === '#' && /[0-9a-fA-F]/.test(peek(1))) {
                  out += '<span class="fm-hex-container">' + sp('fm-punctuation fm-hash', eat());
                  let hex = ''; while(/[0-9a-fA-F]/.test(peek())) hex += eat();
                  out += sp('fm-hex-value', hex) + '</span>';
                }
                else if (/[a-zA-Z-]/.test(vCh)) {
                  let word = ''; while (/[a-zA-Z0-9-]/.test(peek())) word += eat();
                  if (peek() === '(') out += sp('fm-function-name', word);
                  else {
                    if (word.startsWith('--')) out += sp('fm-value-variable', word);
                    else out += sp(CONTROL_KW.has(word) ? 'fm-kw-control' : 'fm-kw-value', word);
                  }
                }
                else if (vCh === '"' || vCh === "'") {
                   let q = eat(); let str = ''; 
                   while(i < len && peek() !== q) {
                      if(peek() === '\\') str += eat(2);
                      else str += eat();
                   }
                   out += sp('fm-punctuation fm-quote', q) + sp('fm-string', str) + (peek() === q ? sp('fm-punctuation fm-quote', eat()) : '');
                }
                else out += sp(getPunctClass(vCh, 'value'), eat());
              }
              out += '</span>';
              if (peek() === ';') out += sp(getPunctClass(';'), eat());
              out += '</span>';
            } else out += eat();
          }
          if (peek() === '}') out += sp(getPunctClass('}'), eat());
          out += '</span>'; 
        }
        out += '</span>'; 
        continue;
      }

if (ch === '}') {
        out += sp(getPunctClass('}'), eat()) + '</span></span>';
        continue;
      }
      out += esc(eat());
    }
    return out;
  }

/*
========================================================================================================================
|  Élément      |  FRAME BLOC - Sublime Text Mariana Theme
========================================================================================================================
|  Élément SIO  |  Bloc HTML
========================================================================================================================
|  Emplacement  |  style.css
========================================================================================================================
|  Date MAJ     |  2026-04-14
========================================================================================================================
*/

/* Variables */
/*-----------*/
:root {
  --mar-bg:      #303841;
  --mar-fg:      #cdd3de;
  --mar-grey:    #a6acb9;
  --mar-white:   #ffffff ;
  --mar-red:     #ec5f67;
  --mar-orange:  #f99157;
  --mar-yellow:  #fac863;
  --mar-green:   #99c794;
  --mar-teal:    #5fb3b3;
  --mar-green-dark: #5fb4b4;
  --mar-blue:    #6699cc;
  --mar-purple:  #c594c5;
  --tab-active-bg:     #303841;
  --tab-inactive-bg:   #252c35;
  --tab-border:        #1e252d;
  --titlebar-bg:       #1e252d;
  --scrollbar-bg:      #2b313a;
  --scrollbar-thumb:   #4b5a6a;
  --btn-copy-bg:       #3d4a57;
  --btn-copy-hover:    #99c794; /* #5fb3b3 */ 
  /* Police */
  --fm-frame-code-police: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* 'JetBrains Mono', 'Consolas', 'Monaco', monospace */
}

/* Container principal */
/*---------------------*/
.fm-frame-code {/*font-family: var(--fm-frame-code-police) !important; font-size: 13px; line-height: 1.6;*/ border-radius: 6px; overflow: hidden; background: var(--mar-bg); box-shadow: 0 4px 6px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04); position: relative;}

/* Frame code title bar (en-tête) */
/*--------------------------------*/
/* Container principal */
.fm-frame-code .fm-titlebar {display: flex; align-items: center; background: var(--titlebar-bg); padding: 0 10px; height: 38px; gap: 6px; border-bottom: 0px solid var(--tab-border);}
/* 3 dots */
.fm-frame-code .fm-titlebar .fm-dots {display: flex; gap: 6px; margin-right: 10px;}
.fm-frame-code .fm-titlebar .fm-dot  {width: 12px; height: 12px; border-radius: 50%;}
.fm-frame-code .fm-titlebar .fm-dot-close {background: #ec5f67;}
.fm-frame-code .fm-titlebar .fm-dot-min   {background: #f99157;}
.fm-frame-code .fm-titlebar .fm-dot-max   {background: #99c794;}
/* Onglet */
.fm-frame-code .fm-titlebar .fm-tabs {display: flex; flex: 1;}
.fm-frame-code .fm-titlebar .fm-tabs .fm-tab {display: flex; align-items: center; padding: 0 16px; height: 38px; font-size: 12px; color: #a6acb9; background: var(--tab-inactive-bg); border-right: 1px solid var(--tab-border); white-space: nowrap;}
.fm-frame-code .fm-titlebar .fm-tabs .fm-tab.active {background: var(--tab-active-bg);}
/* Bouton copier */
.fm-frame-code .fm-titlebar .fm-copy-btn {margin-left: auto; padding: 4px 12px; background: var(--btn-copy-bg); border: 1px solid rgba(255,255,255,.06); border-radius: 4px; color: #a6acb9; font-size: 11px; cursor: pointer; transition: .15s;}
.fm-frame-code .fm-titlebar .fm-copy-btn:hover {background: var(--btn-copy-hover); color: #fff; }
/* Bouton toggle */
.fm-frame-code .fm-titlebar .fm-toggle-btn {margin-left: 6px; background: none; border: none; color: #a6acb9; cursor: pointer; transition: transform .3s ease;}

/* Frame code body (contenu) */
/*---------------------------*/
/* Container principal */
.fm-frame-code .fm-editor-body {display: flex; background: var(--mar-bg); overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);}
.fm-frame-code .fm-editor-body::-webkit-scrollbar {height: 10px;}
.fm-frame-code .fm-editor-body::-webkit-scrollbar-track {background: var(--scrollbar-bg);}
.fm-frame-code .fm-editor-body::-webkit-scrollbar-thumb {background: var(--scrollbar-thumb); border-radius: 2px;}
/* Gouttière (numéro lignes) */
.fm-frame-code .fm-editor-body .fm-gutter {padding: 16px 14px 16px 10px; background: var(--mar-bg); color: #4f5b66; text-align: right; user-select: none; border-right: 1px solid rgba(255,255,255,.04); flex-shrink: 0;}
.fm-frame-code .fm-editor-body .fm-gutter > span {display: block; font-family: var(--fm-frame-code-police) !important; font-size: 13px !important; line-height: 1.5 !important; color: #4f5b66 !important;}
/* Zone de code */
.fm-frame-code .fm-editor-body .fm-code-area {flex: 1; padding: 16px 20px 16px 16px; min-width: 0;}
.fm-frame-code .fm-editor-body .fm-code-area pre[class*="language-"], .fm-frame-code .fm-editor-body .fm-code-area code[class*="language-"] {font-size: 13px !important; line-height: 1.5 !important; tab-size: 4 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; text-shadow: none !important; color: var(--mar-fg) !important;}
.fm-frame-code .fm-editor-body .fm-code-area pre[class*="language-"] *, .fm-frame-code .fm-editor-body .fm-code-area code[class*="language-"] * {font-family: var(--fm-frame-code-police) !important;}

/* Coloration syntaxique */
/*-----------------------*/
/* Sélecteurs */
.fm-frame-code .fm-tag {color: var(--mar-red) !important;}
.fm-frame-code .fm-attribute {color: var(--mar-purple) !important;}
/* :pseudo, ::pseudo-element */
.fm-frame-code .fm-pseudo-class-container {color: var(--mar-white) !important;}
.fm-frame-code .fm-pseudo-class-container .fm-pseudo-colon {color: var(--mar-green-dark) !important;}
/* Propriétés */
.fm-frame-code .fm-property {color: var(--mar-white) !important; font-style: italic !important;}
/* Valeurs */
.fm-frame-code .fm-kw-value {color: var(--mar-purple) !important; font-style: italic !important;}
.fm-frame-code .fm-kw-control {color: var(--mar-red) !important; font-style: italic !important;}
/* #identifiant */
.fm-frame-code .fm-id-hash {color: var(--mar-green-dark) !important;}
.fm-frame-code .fm-id-name {color: var(--mar-purple) !important;}
/* .classe */
.fm-frame-code .fm-class-dot  {color: var(--mar-green-dark) !important;}
.fm-frame-code .fm-class-name {color: var(--mar-purple) !important;}
/* Ponctuation " => vert */
.fm-frame-code .fm-quote {color: var(--mar-green-dark) !important;}
/* Ponctuation {}[]() => blanc */
.fm-frame-code .fm-punctuation.fm-bracket-open,
.fm-frame-code .fm-punctuation.fm-bracket-close,
.fm-frame-code .fm-punctuation.fm-square-bracket-open,
.fm-frame-code .fm-punctuation.fm-square-bracket-close,
.fm-frame-code .fm-punctuation.fm-paren-open,
.fm-frame-code .fm-punctuation.fm-paren-close {color: var(--mar-white) !important;}
/* Ponctuation :; => gris */
.fm-frame-code .fm-punctuation.fm-colon,
.fm-frame-code .fm-punctuation.fm-semi {color: var(--mar-grey) !important;}
/* Opérateurs >+=/ => rouge */
.fm-frame-code .fm-punctuation.fm-operator-gt,
.fm-frame-code .fm-punctuation.fm-operator-plus,
.fm-frame-code .fm-punctuation.fm-equal,
.fm-frame-code .fm-punctuation.fm-operator-slash {color: var(--mar-red) !important;}
/* Opérateurs combinés *= ^= */
.fm-frame-code .fm-punctuation.fm-operator-combo {color: var(--mar-red) !important;}
/* Sélecteur *  */
.fm-frame-code .fm-punctuation.fm-star {color: var(--mar-purple) !important;}
/* Couleurs hexadécimales */
.fm-frame-code .fm-hex-container .fm-hash {color: var(--mar-green-dark) !important;}
.fm-frame-code .fm-hex-container .fm-hex-value {color: var(--mar-purple) !important;}
/* Chaînes de caractères strings "…" '…' → vert */
.fm-frame-code .fm-string { color: var(--mar-green) !important;}
/* Fonctions */
.fm-frame-code .fm-function-name {color: var(--mar-blue) !important;}
/* Opérateurs mathématiques */
.fm-frame-code .fm-math-operator {color: var(--mar-red) !important;}
/* Commentaires */
.fm-frame-code .fm-comment {color: var(--mar-grey) !important;}
/* Règles @media */
.fm-frame-code .fm-at-symbol {color: var(--mar-green-dark) !important;}
.fm-frame-code .fm-at-name {color: var(--mar-purple) !important;}
/* Règles média => only, and */
.fm-frame-code .fm-kw-logic {color: var(--mar-red) !important;}
/* Medias screen, print, all → rouge, italic */
.fm-frame-code .fm-kw-screen  { color: var(--mar-purple) !important; font-style: italic !important;}
/* Règles média => propriétés */
.fm-frame-code .fm-media-prop {color: var(--mar-white) !important;}
/* Nombres */
.fm-frame-code .fm-number {color: var(--mar-orange) !important;}
/* Unités */
.fm-frame-code .fm-unit {color: var(--mar-purple) !important; font-style: italic !important;}
/* Mot clé => !important */
.fm-frame-code .fm-important {color: var(--mar-purple) !important;}
/* Mot clé => none */
.fm-frame-code .fm-kw-none {color: var(--mar-red) !important;}
/* Variables */
.fm-frame-code .fm-property-variable,
.fm-frame-code .fm-value-variable {color: var(--mar-white) !important;}

Colonnes hauteurs identiques

(avec rangées intérieures)

Colonne 1

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit.

Colonne 2

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus.

Colonne 1

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit.

Colonne 2

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est, videtis.

Colonne 3

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus.

Colonne 1

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit.

Colonne 2

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est, videtis; hoc vere tamen licet dicere.

Colonne 3

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus, quos in vita celeberrimos.

Colonne 4

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus, quos in vita celeberrimos laetissimosque viderit, illum diem clarissimum fuisse.

3 colonnes --> 2 colonnes --> 1 colonne

(choisir les breakpoints)

Colonne 1

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.

Colonne 2

Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis remedium aliud satis validum, ut famulos percontatum missos quem ad modum valeant noti hac aegritudine colligati, non ante recipiant domum quam lavacro purgaverint corpus.

Colonne 3

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.

Colonne 1

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur

Colonne 2

Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis remedium aliud satis validum, ut famulos percontatum missos quem ad modum valeant noti hac aegritudine colligati, non ante recipiant domum quam lavacro purgaverint corpus.

Colonne 3

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.

Colonnes x 4

Colonne 1

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.

Colonne 2

Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.

Colonne 3

Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis remedium aliud satis validum, ut famulos percontatum missos quem ad modum valeant noti hac aegritudine colligati, non ante recipiant domum quam lavacro purgaverint corpus.

Colonne 4

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus, quos in vita celeberrimos laetissimosque viderit, illum diem clarissimum fuisse, cum senatu dimisso domum reductus ad vesperum est a patribus conscriptis, populo Romano, sociis et Latinis, pridie quam excessit e vita, ut ex tam alto dignitatis gradu ad superos videatur deos potius quam ad inferos pervenisse.

Colonne 1

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.

Colonne 2

Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.

Colonne 3

Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis remedium aliud satis validum, ut famulos percontatum missos quem ad modum valeant noti hac aegritudine colligati, non ante recipiant domum quam lavacro purgaverint corpus.

Colonne 4

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus, quos in vita celeberrimos laetissimosque viderit, illum diem clarissimum fuisse, cum senatu dimisso domum reductus ad vesperum est a patribus conscriptis, populo Romano, sociis et Latinis, pridie quam excessit e vita, ut ex tam alto dignitatis gradu ad superos videatur deos potius quam ad inferos pervenisse.

Colonnes de hauteurs identiques :

#row-xxxxxxxx {column-gap: 20px; row-gap: 20px;}
#row-xxxxxxxx > div {align-self: auto;}
#row-xxxxxxxx > div > div {display: flex; flex-grow: 1;}

Boîte de contenu

Titre de la boîte de contenu

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.

Listes à puces