/* =====================================================================================
   Socle de l'application (jk.php), chargé en premier par head.php.
   Reprend ce que Material Design Lite apportait encore (retiré en octobre 2026) : styles de base
   des éléments HTML et grille .jk-grid / .jk-cell (ex mdl-grid / mdl-cell, mêmes règles).
   Les autres feuilles (jk.css, ..., skin-*.css) passent après et priment.
   ===================================================================================== */

/* ---------- Base des éléments ---------- */
html { color: rgba(0, 0, 0, .87); width: 100%; height: 100%; touch-action: manipulation; }
body { width: 100%; min-height: 100%; margin: 0; }
main { display: block; }
html, body { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
iframe { display: block; width: 100%; border: none; }
*[hidden] { display: none !important; }
.hidden { display: none !important; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

h1, h2, h3, h4, h5, h6, p { padding: 0; }
h1, h2, h3, h4, h5, h6 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; }
h1, h2, h3, h4, h6 { font-weight: 400; }
h1 { font-size: 56px; line-height: 1.35; letter-spacing: -.02em; margin: 24px 0; }
h2 { font-size: 45px; line-height: 48px; margin: 24px 0; }
h3 { font-size: 34px; line-height: 40px; margin: 24px 0; }
h4 { font-size: 24px; line-height: 32px; margin: 24px 0 16px; }
h5 { font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: .02em; margin: 24px 0 16px; }
h6 { font-size: 16px; letter-spacing: .04em; line-height: 24px; margin: 24px 0 16px; }
p { font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 24px; margin: 0 0 16px; }
a { color: rgb(68, 138, 255); font-weight: 500; }
a { -webkit-tap-highlight-color: transparent; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.35; letter-spacing: -.02em; opacity: .54; font-size: .6em; }
blockquote { font-family: "Roboto", "Helvetica", "Arial", sans-serif; position: relative; font-size: 24px; font-weight: 300; font-style: italic; line-height: 1.35; letter-spacing: .08em; }
address { font-size: 12px; line-height: 1; font-style: normal; }
ul, ol { font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 24px; }
mark { background-color: #f4ff81; }
dt { font-weight: 700; }

/* ---------- Grille (12 colonnes en bureau, 8 en tablette, 4 en mobile ; gouttière 16 px) ---------- */
.jk-grid{display:flex;flex-flow:row wrap;margin:0 auto;align-items:stretch}
.jk-grid.jk-grid--no-spacing{padding:0}
.jk-cell{box-sizing:border-box}
.jk-cell--middle{align-self:center}
.jk-grid.jk-grid--no-spacing>.jk-cell{margin:0}
@media (max-width:479px){
	.jk-grid{padding:8px}
	.jk-cell{margin:8px;width:calc(100% - 16px)}
	.jk-grid--no-spacing>.jk-cell{width:100%}
	.jk-cell--2-col-phone.jk-cell--2-col-phone{width:calc(50% - 16px)}
	.jk-grid--no-spacing>.jk-cell--2-col-phone.jk-cell--2-col-phone{width:50%}
	.jk-cell--4-col,.jk-cell--4-col-phone.jk-cell--4-col-phone{width:calc(100% - 16px)}
	.jk-grid--no-spacing>.jk-cell--4-col,.jk-grid--no-spacing>.jk-cell--4-col-phone.jk-cell--4-col-phone{width:100%}
	.jk-cell--5-col{width:calc(100% - 16px)}
	.jk-grid--no-spacing>.jk-cell--5-col{width:100%}
	.jk-cell--6-col{width:calc(100% - 16px)}
	.jk-grid--no-spacing>.jk-cell--6-col{width:100%}
	.jk-cell--7-col{width:calc(100% - 16px)}
	.jk-grid--no-spacing>.jk-cell--7-col{width:100%}
	.jk-cell--8-col{width:calc(100% - 16px)}
	.jk-grid--no-spacing>.jk-cell--8-col{width:100%}
	.jk-cell--12-col,.jk-cell--12-col-phone.jk-cell--12-col-phone{width:calc(100% - 16px)}
	.jk-grid--no-spacing>.jk-cell--12-col,.jk-grid--no-spacing>.jk-cell--12-col-phone.jk-cell--12-col-phone{width:100%}
}
@media (min-width:480px) and (max-width:839px){
	.jk-grid{padding:8px}
	.jk-cell{margin:8px;width:calc(50% - 16px)}
	.jk-grid--no-spacing>.jk-cell{width:50%}
	.jk-cell--4-col{width:calc(50% - 16px)}
	.jk-grid--no-spacing>.jk-cell--4-col{width:50%}
	.jk-cell--5-col{width:calc(62.5% - 16px)}
	.jk-grid--no-spacing>.jk-cell--5-col{width:62.5%}
	.jk-cell--6-col{width:calc(75% - 16px)}
	.jk-grid--no-spacing>.jk-cell--6-col{width:75%}
	.jk-cell--7-col{width:calc(87.5% - 16px)}
	.jk-grid--no-spacing>.jk-cell--7-col{width:87.5%}
	.jk-cell--8-col{width:calc(100% - 16px)}
	.jk-grid--no-spacing>.jk-cell--8-col{width:100%}
	.jk-cell--12-col,.jk-cell--12-col-tablet.jk-cell--12-col-tablet{width:calc(100% - 16px)}
	.jk-grid--no-spacing>.jk-cell--12-col,.jk-grid--no-spacing>.jk-cell--12-col-tablet.jk-cell--12-col-tablet{width:100%}
}
@media (min-width:840px){
	.jk-grid{padding:8px}
	.jk-cell{margin:8px;width:calc(33.3333333333% - 16px)}
	.jk-grid--no-spacing>.jk-cell{width:33.3333333333%}
	.jk-cell--4-col{width:calc(33.3333333333% - 16px)}
	.jk-grid--no-spacing>.jk-cell--4-col{width:33.3333333333%}
	.jk-cell--5-col{width:calc(41.6666666667% - 16px)}
	.jk-grid--no-spacing>.jk-cell--5-col{width:41.6666666667%}
	.jk-cell--6-col{width:calc(50% - 16px)}
	.jk-grid--no-spacing>.jk-cell--6-col{width:50%}
	.jk-cell--7-col{width:calc(58.3333333333% - 16px)}
	.jk-grid--no-spacing>.jk-cell--7-col{width:58.3333333333%}
	.jk-cell--8-col{width:calc(66.6666666667% - 16px)}
	.jk-grid--no-spacing>.jk-cell--8-col{width:66.6666666667%}
	.jk-cell--12-col{width:calc(100% - 16px)}
	.jk-grid--no-spacing>.jk-cell--12-col{width:100%}
}