/*
Theme Name: Ligne A Ligne
Author: Nadia Berthelot
Description: Mise en page d'index pour un site sur la paie : en-tete centre, sommaire en colonnes, fiches tres structurees.
Version: 3.2.0
Text Domain: ligne-a-ligne
*/

:root{
  --fond:#f7f8fa; --blanc:#fff; --nuit:#1b2a41; --acier:#54657c;
  --souligne:#c9a227; --trait:#dfe4ea; --doux:#6d7a8a;
  --p:"Charter","Bitstream Charter",Cambria,Georgia,serif;
  --i:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--nuit);font:400 16.5px/1.7 var(--i)}
a{color:var(--acier)}
img{max-width:100%;height:auto}
.cadre{max-width:960px;margin:0 auto;padding:0 20px}

.fronton{background:var(--blanc);border-bottom:3px double var(--nuit);text-align:center}
.fronton .cadre{padding:32px 20px 24px}
.fronton a.nom{display:inline-block;text-decoration:none;color:var(--nuit);font:700 30px/1.2 var(--p);letter-spacing:.02em}
.fronton .sous{margin:8px 0 0;font:400 14px/1.5 var(--i);color:var(--doux);letter-spacing:.03em;text-transform:uppercase}
.rubans{border-top:1px solid var(--trait);margin-top:20px;padding-top:14px;display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font:600 13px/1 var(--i)}
.rubans a{text-decoration:none;color:var(--acier);padding-bottom:5px;border-bottom:2px solid transparent}
.rubans a:hover{border-color:var(--souligne);color:var(--nuit)}

.preambule{padding:36px 0 8px;text-align:center}
.preambule h1{margin:0 auto 12px;font:700 30px/1.3 var(--p);max-width:24ch}
.preambule p{margin:0 auto;max-width:58ch;color:var(--acier);font-size:17.5px}

.sommaire{padding:30px 0 50px}
.sommaire h2{font:600 12.5px/1 var(--i);text-transform:uppercase;letter-spacing:.12em;color:var(--doux);
  border-bottom:1px solid var(--trait);padding-bottom:10px;margin:34px 0 4px}
.index{columns:2;column-gap:38px;margin:0;padding:0;list-style:none}
.index li{break-inside:avoid;padding:11px 0;border-bottom:1px dotted var(--trait)}
.index a{display:block;text-decoration:none;color:var(--nuit);font:600 16px/1.4 var(--i)}
.index a:hover{color:var(--souligne)}
.index span{display:block;font:400 13.5px/1.5 var(--i);color:var(--doux);margin-top:3px}

.encart{background:var(--blanc);border:1px solid var(--trait);border-top:3px solid var(--souligne);padding:22px 26px;margin:26px 0}
.encart h3{margin:0 0 8px;font:700 16px/1.3 var(--i)}
.encart p{margin:0;font-size:15.5px;color:var(--acier)}

.fiche{background:var(--blanc);border:1px solid var(--trait);max-width:72ch;margin:32px auto 56px;padding:38px 42px}
.fiche h1{margin:0 0 12px;font:700 30px/1.3 var(--p)}
.fiche .entete{display:flex;gap:18px;flex-wrap:wrap;font:500 13px/1.5 var(--i);color:var(--doux);
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:12px 0;margin-bottom:28px}
.fiche h2{font:700 22px/1.4 var(--i);margin:32px 0 10px;color:var(--nuit)}
.fiche h2::before{content:"—";color:var(--souligne);margin-right:9px}
.fiche h3{font:600 18px/1.45 var(--i);margin:22px 0 6px}
.fiche table{width:100%;border-collapse:collapse;font-size:14.5px;margin:18px 0}
.fiche th,.fiche td{border:1px solid var(--trait);padding:8px 10px;text-align:left}
.fiche th{background:#eef1f5;font-weight:600}
.fiche ul,.fiche ol{padding-left:20px}

.ourlet{background:var(--nuit);color:#b9c6d6;margin-top:40px}
.ourlet .cadre{padding:26px 20px;font-size:13.5px;display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap}
.ourlet a{color:#fff}
.ourlet p{margin:0;max-width:58ch}

@media(max-width:800px){
  .index{columns:1}
  .fiche{padding:26px 22px}
  .preambule h1{font-size:25px}
}