/* vas-i.fr (VASIMAG) : lisible par tous, marine et corail, gros caracteres, boutons larges. */
:root {
  --marine: #14335a; --marine-2: #1d4677; --corail: #ff6b4a; --corail-f: #c8401f; --ciel: #eef5fb;
  --blanc: #ffffff; --encre: #142233; --gris: #4c5b6b; --filet: #d6e2ee;
  --titre: 'Exo 2', 'Trebuchet MS', sans-serif; --texte: 'Libre Franklin', 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; }
body { margin: 0; background: var(--ciel); color: var(--encre); font: 400 1.08rem/1.75 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marine-2); text-underline-offset: .2em; text-decoration-thickness: 2px; }
a:hover { color: var(--corail-f); }
:focus-visible { outline: 4px solid var(--corail); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 800; line-height: 1.15; }
.saut { position: absolute; left: -999px; } .saut:focus { left: 1rem; top: 1rem; background: #fff; padding: .6rem 1rem; z-index: 9; }
.cadre { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.fl { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.elan { width: 2.4rem; height: 1.5rem; fill: none; stroke: var(--corail); stroke-width: 3; stroke-linecap: round; }
.elan circle { fill: var(--corail); stroke: none; }

/* en-tete : barre marine, boutons larges, jamais caches */
.couloir { background: var(--marine); color: #fff; }
.couloir__z { width: min(100% - 2rem, 70rem); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; padding: .8rem 0; }
.marque { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font: italic 800 1.7rem/1 var(--titre); letter-spacing: .02em; margin: 0; }
.marque b { color: var(--corail); }
.marque:hover { color: #fff; }
.couloir__nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.couloir__nav a { color: #fff; text-decoration: none; font: 600 1rem/1 var(--titre); padding: .7rem 1rem; border-radius: 10px; border: 2px solid rgba(255,255,255,.25); }
.couloir__nav a:hover, .couloir__nav a[aria-current] { background: var(--corail); border-color: var(--corail); color: #fff; }

/* accueil */
.depart { width: min(100% - 2rem, 70rem); margin: 3rem auto 2.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .depart { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.depart h1 { font-size: clamp(2.2rem, 1.3rem + 3.8vw, 3.8rem); color: var(--marine); margin: 0 0 1.1rem; }
.depart__t p { font-size: 1.2rem; color: var(--gris); margin: 0; }
.depart__s { background: var(--marine); border-radius: 22px; padding: 1.5rem; }
.depart__q { color: #fff; font: 800 1.3rem/1 var(--titre); margin: 0 0 1rem; }
.depart__s ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.depart__s a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; border-radius: 12px; padding: 1rem 1.2rem; color: var(--marine); text-decoration: none; font: 600 1.12rem/1.3 var(--titre); }
.depart__s a:hover { background: var(--corail); color: #fff; }
.balise { font-size: 1.7rem; color: var(--marine); margin: 2.5rem 0 1.4rem; display: inline-block; border-bottom: 6px solid var(--corail); padding-bottom: .2rem; }

/* liste en zigzag */
.zigzag { list-style: none; margin: 0 0 3rem; padding: 0; display: grid; gap: 1.4rem; }
.zig a { display: grid; gap: 0; background: var(--blanc); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--encre); border: 2px solid transparent; }
.zig a:hover { border-color: var(--corail); }
@media (min-width: 820px) {
  .zig a { grid-template-columns: 1fr 1.25fr; }
  .zig:nth-child(even) a img { order: 2; }
}
.zig img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.zig__c { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.6rem; justify-content: center; }
.zig__r { font: 600 .85rem/1 var(--titre); text-transform: uppercase; letter-spacing: .1em; color: var(--corail-f); }
.zig__t { font: 800 1.45rem/1.2 var(--titre); color: var(--marine); }
.zig__d { color: var(--gris); }
.zig__lire { display: inline-flex; align-items: center; gap: .4rem; font: 600 1rem/1 var(--titre); color: var(--marine); }
.vide { background: var(--blanc); border-radius: 18px; padding: 1.4rem 1.6rem; margin-bottom: 3rem; }

/* article : bande marine, photo qui chevauche */
.seance__bande { background: var(--marine); color: #fff; padding: 2.4rem 0 6rem; }
.seance__bande--rubrique { padding-bottom: 2.6rem; margin-bottom: 2rem; }
.seance__r { display: inline-block; background: var(--corail); color: #fff; text-decoration: none; font: 600 .9rem/1 var(--titre); padding: .45rem .8rem; border-radius: 6px; margin: 0 0 1rem; }
.seance__bande h1 { color: #fff; font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem); margin: 0 0 1rem; max-width: 24ch; }
.seance__m, .seance__chapeau { margin: 0; color: #cfdcec; font-size: 1.05rem; max-width: 44rem; }
.seance__m a, .seance__chapeau a { color: #fff; }
.seance__img { width: min(100% - 2rem, 60rem); margin: -4.5rem auto 2.4rem; }
.seance__img img { width: 100%; border-radius: 20px; box-shadow: 0 18px 40px rgba(20,51,90,.25); aspect-ratio: 16 / 9; object-fit: cover; }
.seance__texte { width: min(100% - 2rem, 44rem); margin: 0 auto 2rem; }
.seance__texte--fixe { margin-top: 2rem; }
.seance__texte > * { margin-block: 0 1.1em; }
.seance__texte h2 { font-size: 1.75rem; color: var(--marine); margin: 2em 0 .6em; }
.seance__texte h3 { font-size: 1.3rem; color: var(--marine-2); margin: 1.6em 0 .5em; }
.seance__texte li { margin-bottom: .45em; }
.seance__texte li::marker { color: var(--corail); font-weight: 700; }
.seance__texte .cnt-apercu { background: var(--blanc); border: 3px solid var(--corail); border-radius: 18px; padding: 1.1rem 1.4rem; }
.seance__texte .cnt-apercu > :last-child { margin-bottom: 0; }
.seance__texte .cnt-date-maj { color: var(--gris); font-size: .95rem; }
.seance__texte .cnt-table-box { overflow-x: auto; }
.seance__texte table { width: 100%; border-collapse: collapse; background: var(--blanc); border-radius: 14px; overflow: hidden; font-size: 1rem; }
.seance__texte th { background: var(--marine); color: #fff; text-align: left; font-family: var(--titre); }
.seance__texte th, .seance__texte td { padding: .75rem .9rem; border-bottom: 1px solid var(--filet); vertical-align: top; }
.seance__texte .cnt-sources-maj, .seance__texte .cnt-sources-info { color: var(--gris); font-size: .95rem; }
.seance__texte .cnt-references { font-size: .9rem; color: var(--gris); padding-left: 1.3rem; word-break: break-word; }

/* pied */
.vestiaire { background: var(--marine); color: #cfdcec; margin-top: 3rem; }
.vestiaire__z { width: min(100% - 2rem, 70rem); margin-inline: auto; display: grid; gap: 2rem; padding: 2.8rem 0 2rem; }
@media (min-width: 800px) { .vestiaire__z { grid-template-columns: 2fr 1fr 1fr; } }
.marque--pied { margin-bottom: .9rem; font-size: 1.4rem; }
.vestiaire p { margin: 0; line-height: 1.6; max-width: 32rem; }
.vestiaire nav { display: flex; flex-direction: column; gap: .5rem; }
.vestiaire nav a { color: #fff; text-decoration: none; }
.vestiaire nav a:hover { color: var(--corail); }
.vestiaire__t { font: 800 .95rem/1 var(--titre) !important; color: var(--corail); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem !important; }
.vestiaire__bas { width: min(100% - 2rem, 70rem); margin: 0 auto !important; padding: 1rem 0 1.5rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .9rem; max-width: none !important; }
.vestiaire__bas a { color: #fff; }
body { overflow-wrap: break-word; }