/* Les pages SEO au design de l'application (espace du rôtisseur, administration) : le beige du comptoir, l'encre, la braise des boutons,
   le jaune des pastilles, les titres en capitales Anton, des angles droits, un trait d'encre sous ce qui se touche. Tout vient des
   variables de socle.css (aucune couleur écrite ici). Au branchement, ce fichier devient /seo.css. */
body.seo{background:var(--comptoir);color:var(--encre)}

/* L'en-tête : l'encre, le lockup de la marque (PRO en jaune comme dans l'espace), deux liens, un bouton. */
.seo-entete{background:var(--encre);color:var(--papier)}
.seo-entete__ligne{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);max-width:1040px;margin:0 auto;padding:var(--e2) var(--e4)}
.seo-entete .marque{color:var(--papier)}
.seo-entete .marque svg{fill:var(--papier);color:var(--braise-vive)}
.seo-entete .marque__pro{color:var(--jaune)}
.seo-entete__liens{display:flex;align-items:center;gap:var(--e4)}
.seo-entete__liens a:not(.btn){display:none;color:var(--papier);font-size:var(--t14);font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.seo-entete__liens a:not(.btn):hover{color:var(--jaune)}
.seo-entete .btn{min-height:44px;padding:0 var(--e4);font-size:var(--t14)}
@media (min-width:760px){.seo-entete__liens a:not(.btn){display:inline-flex}}

/* La page. */
.seo-page{max-width:760px;margin:0 auto;padding:var(--e6) var(--e4) var(--e16)}
.seo-fil{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e2);margin-bottom:var(--e5);color:var(--encre-douce);font-size:var(--t14)}
.seo-fil a{color:var(--encre-douce)}
.seo-fil span{color:var(--brume)}
.seo-tete{display:grid;gap:var(--e4);margin-bottom:var(--e8)}
.seo-tete .page__titre{font-size:clamp(2.25rem,1.6rem + 3.2vw,3.75rem);line-height:1.02}
.seo-tete .page__intro{max-width:none;margin:0;font-size:var(--t18);color:var(--encre)}
.seo-meta{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e4);margin:0;color:var(--encre-sourde);font-size:var(--t14)}
.seo-meta b{color:var(--encre)}

/* « En bref » : le jaune voilé, un trait d'encre dessous. Le sommaire : un papier. */
.seo-bref{display:grid;gap:var(--e2);margin-bottom:var(--e5);padding:var(--e5);background:var(--jaune-voile);box-shadow:inset 0 -3px 0 var(--encre)}
.seo-bref p{margin:0;font-size:var(--t18);line-height:1.5}
.seo-sommaire{margin-bottom:var(--e10);padding:var(--e5);background:var(--papier);box-shadow:inset 0 -3px 0 var(--encre)}
.seo-sommaire ol{margin:var(--e3) 0 0;padding-left:var(--e6);display:grid;gap:var(--e2)}
.seo-sommaire a{font-weight:700}

/* Le corps : des titres d'Anton, un texte à lire. */
.seo-corps h2{margin:var(--e12) 0 var(--e4);font:400 clamp(1.5rem,1.2rem + 1.4vw,2.125rem)/1.1 var(--police-affiche);letter-spacing:.005em;text-transform:uppercase;text-wrap:balance;scroll-margin-top:var(--e6)}
.seo-corps h2::before{content:"";display:block;width:56px;height:6px;margin-bottom:var(--e3);background:var(--braise)}
.seo-corps h3{margin:var(--e6) 0 var(--e2);font:800 var(--t18)/1.3 var(--police)}
.seo-corps p,.seo-corps li{max-width:68ch;font-size:var(--t18);line-height:1.6}
.seo-corps p{margin:0 0 var(--e4)}
.seo-corps ul,.seo-corps ol{margin:0 0 var(--e5);padding-left:var(--e6);display:grid;gap:var(--e2)}
.seo-corps li::marker{color:var(--braise);font-weight:800}
.seo-corps b{font-weight:800}

/* Un tableau : l'en-tête d'encre, des cases de papier. */
.seo-tableau{margin:0 0 var(--e5);overflow-x:auto}
.seo-tableau table{width:100%;min-width:480px;border-collapse:collapse;background:var(--papier);box-shadow:inset 0 -3px 0 var(--encre)}
.seo-tableau th{padding:var(--e3) var(--e4);background:var(--encre);color:var(--papier);font-size:var(--t14);font-weight:800;letter-spacing:.05em;text-align:left;text-transform:uppercase}
.seo-tableau td{padding:var(--e3) var(--e4);border-top:1px solid var(--filet-fort);font-size:var(--t16)}
.seo-tableau td:first-child{font-weight:800;font-variant-numeric:tabular-nums}

/* La suite : un panneau d'encre, un bouton de braise. */
.seo-suite{display:grid;gap:var(--e3);justify-items:start;margin-top:var(--e12);padding:var(--e6)}
.seo-suite .page__titre{font-size:var(--t30)}
.seo-suite p{margin:0;max-width:56ch;font-size:var(--t18)}
.seo-suite .pastille{background:var(--jaune);color:var(--encre)}

/* Le pied. */
.seo-pied{background:var(--encre);color:var(--papier)}
.seo-pied__ligne{display:grid;gap:var(--e4);max-width:1040px;margin:0 auto;padding:var(--e8) var(--e4)}
.seo-pied .marque{color:var(--papier)}
.seo-pied .marque svg{fill:var(--papier);color:var(--braise-vive)}
.seo-pied .marque__pro{color:var(--jaune)}
.seo-pied p{margin:0;max-width:60ch;color:var(--brume);font-size:var(--t14)}
.seo-pied nav{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e5)}
.seo-pied nav a{color:var(--jaune);font-size:var(--t14);font-weight:700}

/* L'index des brouillons. */
.seo-index td a{font-weight:700}

/* Les pastilles d'un bloc en grille gardent leur largeur. */
.seo-tete>.pastille,.seo-bref>.pastille{justify-self:start}

/* Les outils gratuits (pages /outils/) : un formulaire de papier, des champs de l'application, un résultat en jaune voilé. */
.seo-outil{margin-bottom:var(--e6);padding:var(--e5);background:var(--papier);box-shadow:inset 0 -3px 0 var(--encre)}
.seo-outil__titre{margin:0 0 var(--e4);font:400 var(--t24)/1.1 var(--police-affiche);letter-spacing:.005em;text-transform:uppercase}
.seo-outil__champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--e4)}
.seo-outil .champ__libelle{display:block;margin-bottom:var(--e1);font-weight:700}
.seo-outil .champ__aide{margin:var(--e1) 0 0;color:var(--encre-sourde);font-size:var(--t14)}
.seo-outil__actions{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e5)}
.seo-outil__groupe{margin:var(--e5) 0 0;padding:var(--e4);background:var(--comptoir)}
.seo-outil__groupe legend{padding:0 var(--e2);font-weight:800}
.seo-outil__groupe{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--e4)}
.seo-outil__groupe legend{grid-column:1/-1}
.seo-outil__allergenes{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.seo-case{display:flex;align-items:center;gap:var(--e2);min-height:44px;font-size:var(--t16)}
.seo-case input,.champ--case input{width:20px;height:20px;accent-color:var(--braise)}
.champ--case{align-self:end}
.seo-resultat{margin-top:var(--e5);padding:var(--e5);background:var(--jaune-voile);box-shadow:inset 0 -3px 0 var(--encre)}
.seo-resultat__titre{margin:0 0 var(--e3);font:400 var(--t30)/1.05 var(--police-affiche);text-transform:uppercase}
.seo-resultat__liste{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e2) var(--e5);margin:0}
.seo-resultat__liste dt{color:var(--encre-douce)}
.seo-resultat__liste dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.seo-resultat__note{margin:var(--e4) 0 0;color:var(--encre-douce);font-size:var(--t14)}
.seo-affichage{margin-top:var(--e6)}
.seo-affichage table{width:100%;border-collapse:collapse;background:var(--papier)}
.seo-affichage th,.seo-affichage td{padding:var(--e3);border:1px solid var(--encre);text-align:left;vertical-align:top}
.seo-affichage thead th{background:var(--encre);color:var(--papier)}
@media print{
  body.seo{background:#fff}
  .seo-entete,.seo-pied,.seo-fil,.seo-bref,.seo-sommaire,.seo-suite,.seo-tete,.seo-corps,.pas-imprime,.seo-outil__titre,.seo-outil form{display:none!important}
  .seo-page{max-width:none;padding:0}
  .seo-outil{padding:0;box-shadow:none}
  .seo-affichage thead th{background:#fff;color:#000}
}

/* Les sources d'une page de loi, en bas : petit texte, liste numérotée. */
.seo-sources{margin-top:var(--e12);padding:var(--e5);background:var(--papier);box-shadow:inset 0 -3px 0 var(--encre)}
.seo-sources h2{margin-top:0}
.seo-sources li{font-size:var(--t14);line-height:1.5;color:var(--encre-douce)}
.seo-sources a{word-break:break-all}

/* « À lire aussi » : les pages de la même famille, avant le panneau de fin. */
.seo-aussi{margin-top:var(--e10);padding:var(--e5);background:var(--papier);box-shadow:inset 0 -3px 0 var(--encre)}
.seo-aussi h2{margin:0 0 var(--e3);font:400 var(--t24)/1.1 var(--police-affiche);text-transform:uppercase}
.seo-aussi ul{margin:0;padding-left:var(--e5);display:grid;gap:var(--e2)}
.seo-aussi a{font-weight:700}