/*
Theme Name: Compte a Part
Author: Marion Delseny
Description: Comparateur editorial du portage salarial et des statuts d'independant : colonne de reperes a gauche, comparatif en colonnes, simulateur de net, article pleine largeur.
Version: 1.0.1
Text Domain: compte-a-part
*/

:root{
  --fond:#f6f6f4; --blanc:#fff; --noir:#191b1e; --sable:#b98a3f; --sable-c:#f7f0e2;
  --bleu:#2b5f6b; --texte:#22262a; --doux:#6e757c; --trait:#e3e2dd;
  --t:"Freight Text","Iowan Old Style",Georgia,serif;
  --f:"Karla","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);font:400 16.5px/1.75 var(--f)}
a{color:var(--bleu)}
img{max-width:100%;height:auto;display:block}
.w{max-width:1120px;margin:0 auto;padding:0 20px}

.bandeau{background:var(--noir);color:#9aa1a7}
.bandeau .w{display:flex;justify-content:space-between;gap:16px;padding:9px 20px;font:400 12.5px/1 var(--f);flex-wrap:wrap}
.bandeau a{color:#fff;text-decoration:none}
.tete{background:var(--fond);border-bottom:1px solid var(--trait)}
.tete .w{display:flex;align-items:center;gap:16px;padding:22px 20px;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--noir)}
.sceau{width:48px;height:48px;border:2px solid var(--sable);color:var(--sable);display:grid;place-items:center;font:700 16px/1 var(--t);border-radius:50%}
.mots b{display:block;font:400 26px/1.1 var(--t);letter-spacing:.01em}
.mots span{display:block;font:400 12px/1.4 var(--f);color:var(--doux);margin-top:4px;letter-spacing:.06em;text-transform:uppercase}
.nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--texte);font:500 14px/1;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--sable)}

.grille{display:grid;grid-template-columns:260px 1fr;gap:36px;padding:30px 0 50px}
.corps{max-width:790px;margin:0 auto;padding:30px 0 50px}
@media(max-width:900px){.grille{grid-template-columns:1fr}}

.chapitre{margin:0 0 20px;text-align:left}
.chapitre h2{margin:0;font:400 24px/1.25 var(--t)}
.chapitre i{display:block;width:100%;height:1px;background:var(--trait);margin-top:10px}

.liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px}
.art{background:transparent}
.art img{width:100%;height:170px;object-fit:cover;margin-bottom:12px}
.art .in{padding:0}
.art .rub{display:inline-block;font:500 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--sable);margin-bottom:8px}
.art h3{margin:0 0 8px;font:400 20px/1.3 var(--t)}
.art h3 a{color:var(--noir);text-decoration:none}
.art p{margin:0 0 10px;color:var(--doux);font-size:14.5px}
.art .meta{font:400 12px/1 var(--f);color:var(--doux);border-top:1px solid var(--trait);padding-top:9px}

.une{background:var(--blanc);border-bottom:1px solid var(--trait)}
.une .w{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;padding:0}
.une .txt{padding:46px 40px 46px 20px}
.une h1{margin:0 0 16px;font:400 40px/1.15 var(--t);color:var(--noir)}
.une p{margin:0 0 22px;color:var(--doux)}
.une img{height:100%;min-height:340px;object-fit:cover}
.cta{display:inline-block;background:var(--noir);color:#fff;text-decoration:none;font:500 14px/1;padding:14px 24px}
@media(max-width:820px){.une .w{grid-template-columns:1fr}.une .txt{padding:32px 20px}}

/* Comparatif en colonnes : la signature de ce site */
.comparatif{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;background:var(--blanc);border:1px solid var(--trait);margin-bottom:34px}
.comparatif .col{padding:22px;border-right:1px solid var(--trait)}
.comparatif .col:last-child{border-right:0}
.comparatif h3{margin:0 0 6px;font:400 21px/1.2 var(--t)}
.comparatif .net{font:700 26px/1 var(--f);color:var(--bleu);margin:10px 0 4px}
.comparatif .leg{font-size:12.5px;color:var(--doux);margin-bottom:12px}
.comparatif ul{list-style:none;margin:0;padding:0;font-size:14px}
.comparatif li{padding:5px 0;border-top:1px dotted var(--trait);color:var(--doux)}

.outil{background:var(--sable-c);padding:28px;margin:32px 0}
.outil h2{margin:0 0 6px;font:400 24px/1.25 var(--t)}
.outil .sous{margin:0 0 18px;color:var(--doux);font-size:14.5px}
.outil .ch{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.outil label{display:block;font:500 12.5px/1 var(--f);margin-bottom:6px}
.outil input,.outil select{width:100%;padding:11px;border:1px solid #ded2b8;font:400 15px/1 var(--f);background:#fff}
.sortie{margin-top:18px;padding:18px;background:#fff;text-align:center;border:1px solid #ded2b8}
.sortie b{display:block;font:700 32px/1.1 var(--f);color:var(--bleu)}
.sortie span{font-size:13.5px;color:var(--doux)}
.outil .note{margin:14px 0 0;font-size:14px;color:var(--doux)}

.cote .bloc{background:var(--blanc);border:1px solid var(--trait);padding:18px;margin-bottom:18px}
.cote h4{margin:0 0 12px;font:500 12px/1 var(--f);letter-spacing:.13em;text-transform:uppercase;color:var(--sable)}
.cote .rond{width:50px;height:50px;border-radius:50%;background:var(--bleu);color:#fff;display:grid;place-items:center;font:700 16px/1 var(--f);margin-bottom:10px}
.cote .sig b{display:block;font:400 19px/1.2 var(--t)}
.cote .role{font-size:12.5px;color:var(--doux);margin:4px 0 10px}
.cote .sig p{margin:0;font-size:14px}
.cote ul{list-style:none;margin:0;padding:0}
.cote li{border-bottom:1px solid var(--trait);padding:9px 0}
.cote li:last-child{border:0}
.cote li a{color:var(--noir);text-decoration:none;font:500 14.5px/1.4 var(--f)}
.cote .chiffre{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:7px 0;border-bottom:1px dotted var(--trait)}
.cote .chiffre b{color:var(--bleu)}

.contenu,.papier{background:var(--blanc);border:1px solid var(--trait);padding:40px 44px}
.contenu h1{margin:0 0 14px;font:400 34px/1.2 var(--t)}
.ariane{font-size:12.5px;color:var(--doux);margin-bottom:14px;letter-spacing:.03em}
.ariane a{color:var(--doux)}
.credits{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--doux);padding:12px 0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);margin-bottom:24px}
.vignette{width:100%;margin-bottom:24px}
.ouverture{font:400 19.5px/1.6 var(--t);color:var(--noir);margin-bottom:26px}
.contenu h2{font:400 26px/1.3 var(--t);margin:34px 0 12px}
.contenu h3{font:400 21px/1.35 var(--t);margin:26px 0 10px}
.contenu ul,.contenu ol{padding-left:22px}
.contenu table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.contenu th,.contenu td{border-bottom:1px solid var(--trait);padding:10px 11px;text-align:left}
.contenu th{background:var(--sable-c)}
.contenu blockquote{margin:24px 0;padding:16px 20px;background:var(--sable-c);font-style:italic}

.fpo-suite{margin-top:30px;background:var(--blanc);border:1px solid var(--trait);padding:24px}
.fpo-suite .tete{display:inline-block;cursor:pointer;font:500 13.5px/1 var(--f);padding:9px 0;margin:0 20px 14px 0;border-bottom:2px solid transparent}
.fpo-suite .tete.actif{border-color:var(--sable);color:var(--noir)}
.fpo-suite .panneau ul{list-style:none;margin:0;padding:0}
.fpo-suite .panneau li{padding:8px 0;border-bottom:1px solid var(--trait)}
.fpo-suite .panneau a{color:var(--noir);text-decoration:none;font-weight:500}

.pied{background:var(--noir);color:#9aa1a7;margin-top:42px}
.pied .w{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px;padding:38px 20px}
.pied h4{margin:0 0 12px;color:#fff;font:400 17px/1 var(--t)}
.pied p{margin:0 0 10px;font-size:14px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{padding:5px 0}
.pied a{color:#9aa1a7;text-decoration:none;font-size:14px}
.pied a:hover{color:#fff}
.copy{border-top:1px solid #2d3135;padding:15px 20px;font-size:12.5px}
@media(max-width:820px){.pied .w{grid-template-columns:1fr}}