/*
Theme Name: Casino Senclair
Theme URI: https://casino-senclair.fr/
Description: Theme of casino-senclair.fr (FR). Identity: ink-navy ground, French blue for structure, one red per screen for the single action, chalk paper for reading. Mark: a lighthouse inside the Hexagone. Allowed blocks: headings, text, table, lists, pros/cons, full-width image, author quote.
Version: 1.0.0
Author: WP-generator
Text Domain: senclair
*/

/* Inter, variable, self-hosted. Two files cover weights 100-900. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-var.woff2") format("woff2-variations"),
       url("assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-var-italic.woff2") format("woff2-variations"),
       url("assets/fonts/inter-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* French tricolour read as a hierarchy, not as decoration: ink navy carries
     the structure, blue marks what the desk stands behind, red is spent once
     per screen on the single action. Paper is cool chalk, never cream. */
  --snc-encre: #0B1B2E;
  --snc-encre-2: #061220;
  --snc-encre-3: #132C4C;
  --snc-ouverture: linear-gradient(158deg, #1B3A63 0%, #0B1B2E 54%, #061220 100%);
  --snc-bleu: #1F4FA3;
  --snc-bleu-vif: #2E6BD6;
  --snc-azur: #7FB0FF;
  --snc-rouge: #D8403A;            /* action and warnings only, never body copy */
  --snc-rouge-fonce: #A82B27;
  --snc-lien: #1B4890;
  --snc-brume: #B9C7DA;            /* light type on the ink ground */
  --snc-plume: "Inter", "Helvetica Neue", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --snc-texte: #14202E;
  --snc-doux: #5C6B7E;
  --snc-trait: #DFE4EB;
  --snc-trait-2: #C9D2DE;
  --snc-carte: #FFFFFF;
  --snc-craie: #F3F6FA;
  --snc-atout: #ECF5EF;
  --snc-atout-trait: #2F7D5B;
  --snc-revers: #FBECEB;
  --snc-revers-trait: #B23B36;
  --snc-arrondi: 10px;
  --snc-arrondi-s: 6px;
  --snc-largeur: 1180px;
  /* Mark used as the icon of the "ou ca a coince" box. The path must be
     absolute: url() inside a custom property resolves from the file where the
     property is USED, not where it is declared. */
  --snc-icone-alerte: url('/wp-content/themes/wpgen-fr/assets/mascot.svg');
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--snc-craie);
  color: var(--snc-texte);
  font: 400 18px/1.7 var(--snc-plume);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.3px; line-height: 1.24; }

img { max-width: 100%; height: auto; }
a { color: var(--snc-lien); text-underline-offset: 2px; }
a:hover { color: var(--snc-rouge-fonce); }

.snc-cadre { max-width: var(--snc-largeur); margin: 0 auto; padding: 0 22px; }

/* ---------------- header ---------------- */

/* The tricolour runs as three unequal segments over the header: an even split
   read as a rendering artefact, this reads as a deliberate rule. */
.snc-entete { background: var(--snc-encre); border-bottom: 1px solid #1B3050; }
.snc-drapeau { display: flex; height: 4px; }
.snc-drapeau span:nth-child(1) { flex: 5; background: var(--snc-bleu-vif); }
.snc-drapeau span:nth-child(2) { flex: 2; background: #F3F6FA; }
.snc-drapeau span:nth-child(3) { flex: 3; background: var(--snc-rouge); }

.snc-entete-rangee {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 0;
}

.snc-bascule {
  display: none;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 12px 10px;
  background: none;
  border: 1px solid rgba(127, 176, 255, .34);
  border-radius: var(--snc-arrondi-s);
  cursor: pointer;
}
.snc-bascule span { display: block; height: 2px; background: var(--snc-azur); border-radius: 1px; }
.snc-bascule span + span { margin-top: 5px; }
.snc-bascule:hover { border-color: var(--snc-bleu-vif); }

.snc-signe { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.snc-signe-ecu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
}
.snc-signe-texte { display: block; line-height: 1.14; }
.snc-signe-ligne1 {
  display: block;
  font-size: 11px;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--snc-azur);
  margin-bottom: 4px;
}
.snc-signe-ligne2 { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.snc-signe-ligne2 b { color: #ffffff; font-weight: 800; }
.snc-signe-ligne2 i { color: var(--snc-azur); font-style: normal; font-weight: 800; }

/* ---------------- navigation ---------------- */

.snc-nav { background: var(--snc-encre-2); border-top: 1px solid #162943; }
.snc-nav ul { list-style: none; margin: 0; padding: 0; }
.snc-nav > .snc-cadre > ul { display: flex; flex-wrap: wrap; }
.snc-nav li { position: relative; }
.snc-nav a,
.snc-nav-bouton {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 16px;
  color: var(--snc-brume);
  font: 600 15px/1 var(--snc-plume);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.snc-nav a:hover,
.snc-nav-bouton:hover { color: #ffffff; background: rgba(46, 107, 214, .16); }
.snc-nav > .snc-cadre > ul > li.snc-ouvert > .snc-nav-bouton { color: #ffffff; background: rgba(46, 107, 214, .24); }

.snc-nav-fleche {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s;
}
.snc-ouvert > .snc-nav-bouton .snc-nav-fleche,
.snc-ouvert > .snc-nav-arc .snc-nav-fleche { transform: rotate(-135deg) translate(-3px, -3px); }

/* A parent item is a row: the link keeps its destination (the hub is a real
   page) and the arrow is its own button, so the dropdown opens without
   navigating away. Without this the submenu was unreachable on desktop. */
.snc-nav li.menu-item-has-children { display: flex; align-items: center; flex-wrap: wrap; }
.snc-nav li.menu-item-has-children > a { padding-right: 7px; }
.snc-nav li.menu-item-has-children > .sub-menu { flex: 1 0 100%; }

.snc-nav-arc {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 15px 0 2px;
  background: none;
  border: 0;
  color: var(--snc-brume);
  cursor: pointer;
}
.snc-nav-arc:hover { color: #ffffff; }
.snc-nav-arc:focus-visible { outline: 2px solid var(--snc-azur); outline-offset: -2px; }

.snc-nav .sub-menu {
  display: none;
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  min-width: 258px;
  padding: 6px 0;
  background: #0F2440;
  border: 1px solid #1E3A5E;
  border-top: 2px solid var(--snc-bleu-vif);
  border-radius: 0 0 var(--snc-arrondi-s) var(--snc-arrondi-s);
  box-shadow: 0 20px 40px rgba(3, 9, 18, .5);
}
.snc-nav li.snc-ouvert > .sub-menu { display: block; }
.snc-nav .sub-menu a { padding: 10px 16px; font-weight: 500; }

/* Third level (a submenu inside a submenu): expands in place instead of
   floating a second panel over the first — avoids a box-in-a-box on desktop. */
.snc-nav .sub-menu .sub-menu {
  position: static;
  min-width: 0;
  margin: 2px 0 2px 16px;
  padding: 0;
  border: 0;
  border-left: 2px solid var(--snc-bleu);
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.snc-nav .sub-menu .sub-menu a { padding: 8px 16px; font-weight: 400; font-size: 14px; }

/* Desktop: pointer hover and keyboard focus both open the dropdown. The arrow
   button stays available for touch and for anyone tabbing through. */
@media (min-width: 981px) {
  .snc-nav > .snc-cadre > ul > li:hover > .sub-menu,
  .snc-nav > .snc-cadre > ul > li:focus-within > .sub-menu { display: block; }
  .snc-nav > .snc-cadre > ul > li.menu-item-has-children:hover > a,
  .snc-nav > .snc-cadre > ul > li.menu-item-has-children:hover > .snc-nav-arc,
  .snc-nav > .snc-cadre > ul > li.menu-item-has-children:focus-within > a,
  .snc-nav > .snc-cadre > ul > li.menu-item-has-children:focus-within > .snc-nav-arc {
    color: #ffffff;
    background: rgba(46, 107, 214, .16);
  }
  .snc-nav > .snc-cadre > ul > li:hover > .snc-nav-arc .snc-nav-fleche,
  .snc-nav > .snc-cadre > ul > li:focus-within > .snc-nav-arc .snc-nav-fleche {
    transform: rotate(-135deg) translate(-3px, -3px);
  }
}

/* ---------------- hero ---------------- */

.snc-ouverture {
  position: relative;
  background: var(--snc-ouverture);
  color: #EDF2F9;
  padding: 46px 0 42px;
  border-bottom: 4px solid var(--snc-bleu);
  overflow: hidden;
}
/* faint hexagon, the same shape as the mark: identity without a picture */
.snc-ouverture::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -80px;
  width: 420px;
  height: 480px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 2px solid rgba(127, 176, 255, .12);
  background: rgba(46, 107, 214, .05);
  pointer-events: none;
}
.snc-ouverture > .snc-cadre { position: relative; z-index: 1; }
.snc-ouverture h1 { margin: 0 0 15px; font-size: 41px; color: #ffffff; }
.snc-chapeau { margin: 0 0 18px; font-size: 19.5px; color: #C4D2E4; max-width: 62ch; }
.snc-chapeau a { color: var(--snc-azur); }

.snc-ouverture-grille { display: grid; grid-template-columns: 1.25fr .75fr; gap: 34px; align-items: center; }
.snc-ouverture-seule .snc-ouverture-grille { grid-template-columns: 1fr; }
.snc-ouverture-image img { display: block; width: 100%; }

.snc-fil { font-size: 13px; color: #90A4BE; margin-bottom: 15px; }
.snc-fil a { color: #90A4BE; text-decoration: none; }
.snc-fil a:hover { color: var(--snc-azur); text-decoration: underline; }

.snc-jetons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.snc-jeton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(127, 176, 255, .28);
  border-radius: 30px;
  color: #E7EEF8;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.snc-jeton:hover { background: rgba(46, 107, 214, .24); color: #ffffff; }

/* ---------------- byline ---------------- */

.snc-signature { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; margin: 22px 0 16px; }
.snc-signature-personne { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.snc-signature-personne img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--snc-bleu-vif); }
.snc-signature-infos a { color: var(--snc-azur); font-weight: 600; text-decoration: none; }
.snc-signature-infos a:hover { text-decoration: underline; }
.snc-signature-role { color: #93A6BF; }
.snc-signature-date { margin-left: auto; }

.snc-avertissement {
  margin: 0;
  padding: 13px 17px;
  background: rgba(3, 10, 20, .38);
  border-left: 3px solid var(--snc-rouge);
  border-radius: 0 var(--snc-arrondi-s) var(--snc-arrondi-s) 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: #B7C5D8;
}
.snc-avertissement-age,
.snc-age {
  display: inline-block;
  padding: 1px 8px;
  margin-right: 7px;
  background: var(--snc-rouge);
  border-radius: 3px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  vertical-align: 1px;
}

/* ---------------- content ---------------- */

.snc-corps { padding: 34px 0 58px; }
.snc-feuille {
  background: var(--snc-carte);
  border: 1px solid var(--snc-trait);
  border-radius: var(--snc-arrondi);
  padding: 36px 42px 42px;
  box-shadow: 0 1px 2px rgba(11, 27, 46, .04);
}

/* H2 gets a hexagon tick rather than a left bar: the bar is what every other
   comparison site in this niche uses. */
.snc-texte h2 {
  position: relative;
  margin: 48px 0 17px;
  padding-left: 28px;
  font-size: 29px;
}
.snc-texte h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 15px;
  height: 17px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--snc-bleu-vif);
}
.snc-texte h2:first-child { margin-top: 4px; }
.snc-texte h3 { margin: 32px 0 10px; font-size: 21.5px; color: #0F2440; }
.snc-texte h4 { margin: 24px 0 8px; font-size: 17px; }
.snc-texte p { margin: 0 0 17px; }
.snc-texte li { margin-bottom: 9px; }

/* Scoped to a direct child of .snc-texte: a list block sits at the top of the
   content, while the pros/cons box's own <ul> is nested two levels down
   inside .snc-pour-contre and keeps its separate, plainer styling below. */

/* Ordered list: a numbered badge instead of the default marker. */
.snc-texte > ol { margin: 0 0 20px; padding-left: 0; list-style: none; counter-reset: snc-ol; }
.snc-texte > ol > li { position: relative; padding-left: 40px; }
.snc-texte > ol > li::before {
  counter-increment: snc-ol;
  content: counter(snc-ol);
  position: absolute;
  left: 0;
  top: -.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  background: var(--snc-bleu-vif);
  border-radius: 50%;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

/* Unordered list: each item as its own small card, marked with the same
   hexagon tick used on H2 — one recurring shape instead of a generic bullet. */
.snc-texte > ul { margin: 0 0 20px; padding-left: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.snc-texte > ul > li {
  position: relative;
  margin-bottom: 0;
  padding: 11px 16px 11px 38px;
  background: var(--snc-craie);
  border: 1px solid var(--snc-trait);
  border-radius: var(--snc-arrondi-s);
}
.snc-texte > ul > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.snc-texte > ul > li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 1.12em;
  width: 9px;
  height: 10px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--snc-bleu-vif);
}
.snc-texte figure { margin: 32px 0; }
.snc-texte figure img { display: block; width: 100%; border-radius: var(--snc-arrondi); }
.snc-texte figcaption { margin-top: 10px; font-size: 14px; color: var(--snc-doux); }
.snc-texte strong { font-weight: 700; }

/* Tables scroll instead of squeezing: a five column comparison cannot be made
   to fit 360 px without turning the numbers into confetti. */
.snc-texte .wp-block-table,
.snc-texte table { width: 100%; }
.snc-texte .wp-block-table { overflow-x: auto; margin: 28px 0; }
.snc-texte table { border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
.snc-texte th, .snc-texte td { padding: 12px 14px; border: 1px solid var(--snc-trait-2); text-align: left; vertical-align: top; }
.snc-texte thead th { background: var(--snc-encre); color: #ffffff; font-weight: 700; border-color: #23405F; }
.snc-texte tbody tr:nth-child(even) td { background: #F6F9FC; }

.snc-citation,
.snc-texte blockquote {
  position: relative;
  margin: 30px 0;
  padding: 24px 28px 24px 30px;
  background: #F4F8FD;
  border: 1px solid var(--snc-trait);
  border-left: 4px solid var(--snc-bleu-vif);
  border-radius: 0 var(--snc-arrondi) var(--snc-arrondi) 0;
  font-size: 18.5px;
  font-style: italic;
  color: #1A2A3C;
}
.snc-citation p, .snc-texte blockquote p { margin: 0 0 10px; }
.snc-citation cite, .snc-texte blockquote cite,
.snc-citation footer, .snc-texte blockquote footer {
  display: block;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  color: var(--snc-bleu);
}

/* pros and cons: two columns, one green, one red */
.snc-pour-contre { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.snc-pour-contre > div { padding: 19px 21px; border-radius: var(--snc-arrondi); }
.snc-pour-contre > div:first-child { background: var(--snc-atout); border-left: 4px solid var(--snc-atout-trait); }
.snc-pour-contre > div:last-child { background: var(--snc-revers); border-left: 4px solid var(--snc-revers-trait); }
.snc-pour-contre h4 { margin: 0 0 10px; font-size: 15px; text-transform: uppercase; letter-spacing: .7px; }
.snc-pour-contre ul { margin: 0; padding-left: 18px; }
.snc-pour-contre li { font-size: 16px; }
.snc-pour-contre li::marker { color: var(--snc-bleu); }

/* "ou ca a coince": the box where a check did not go to plan */
.snc-accroc {
  position: relative;
  margin: 32px 0;
  padding: 21px 25px 21px 78px;
  background: #F7FAFE;
  border: 1px dashed var(--snc-bleu);
  border-radius: var(--snc-arrondi);
}
.snc-accroc::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 21px;
  width: 40px;
  height: 40px;
  background: var(--snc-icone-alerte) center/contain no-repeat;
}
.snc-accroc h4 { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .7px; color: var(--snc-bleu); }
.snc-accroc p { margin: 0; font-size: 16.5px; }
.snc-accroc p + p { margin-top: 12px; }

/* ---------------- FAQ ---------------- */

.snc-faq { margin: 36px 0 8px; border-top: 1px solid var(--snc-trait); }
.snc-faq-bloc { border-bottom: 1px solid var(--snc-trait); }
.snc-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: 700 17.5px/1.45 var(--snc-plume);
  color: var(--snc-texte);
}
.snc-faq-question:hover { color: var(--snc-lien); }
.snc-faq-icone {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--snc-bleu);
  border-radius: 50%;
}
.snc-faq-icone::before, .snc-faq-icone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--snc-bleu);
  transform: translate(-50%, -50%);
}
.snc-faq-icone::before { width: 10px; height: 2px; }
.snc-faq-icone::after { width: 2px; height: 10px; transition: transform .15s; }
.snc-faq-bloc.snc-ouvert .snc-faq-icone::after { transform: translate(-50%, -50%) scaleY(0); }
.snc-faq-reponse { display: none; padding: 0 2px 19px; }
.snc-faq-bloc.snc-ouvert .snc-faq-reponse { display: block; }
.snc-faq-reponse p:last-child { margin-bottom: 0; }

/* ---------------- how we check ---------------- */

.snc-controle {
  margin: 38px 0;
  padding: 30px 32px;
  background: var(--snc-encre);
  border-radius: var(--snc-arrondi);
  color: #E4ECF6;
}
.snc-controle-titre { margin: 0 0 8px; font-size: 22px; color: #ffffff; border: 0; padding: 0; }
.snc-controle-titre::before { display: none; }
.snc-controle-intro { margin: 0 0 22px; font-size: 16px; color: #A6B8CE; max-width: 70ch; }
.snc-controle-etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.snc-controle-etape { display: flex; flex-direction: column; gap: 10px; padding: 17px; background: rgba(255, 255, 255, .06); border-radius: var(--snc-arrondi-s); border-top: 2px solid var(--snc-bleu-vif); }
.snc-controle-etape.snc-etape-montre { border-top-color: var(--snc-rouge); }
.snc-controle-marque { display: flex; align-items: center; gap: 9px; color: var(--snc-azur); }
.snc-controle-icone { width: 26px; height: 26px; }
.snc-controle-numero { font-size: 13px; font-weight: 800; color: #7E90A8; }
.snc-controle-texte { display: block; }
.snc-controle-etape-titre { display: block; font-size: 16px; margin-bottom: 4px; color: #ffffff; }
.snc-controle-note { display: block; font-size: 14px; color: #A2B4CA; line-height: 1.5; }
.snc-controle-detail { display: block; margin-top: 9px; font-size: 14px; color: #8EA1B9; line-height: 1.56; }
.snc-controle-plus { margin: 20px 0 0; font-size: 15px; }
.snc-controle-plus a { color: var(--snc-azur); font-weight: 600; }

/* ---------------- banner ---------------- */

.snc-bandeau { display: block; margin: 36px 0; border-radius: var(--snc-arrondi); overflow: hidden; border: 1px solid var(--snc-trait); }
.snc-bandeau img { display: block; width: 100%; }
.snc-bandeau--sombre { border-color: #17304F; }

/* ---------------- author card ---------------- */

.snc-carte-visite {
  display: flex;
  gap: 22px;
  margin-top: 26px;
  padding: 27px 31px;
  background: var(--snc-carte);
  border: 1px solid var(--snc-trait);
  border-left: 4px solid var(--snc-bleu-vif);
  border-radius: var(--snc-arrondi);
}
.snc-carte-visite > img { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; }
.snc-carte-visite h2 { margin: 0 0 4px; font-size: 20px; border: 0; padding: 0; }
.snc-carte-visite h2::before { display: none; }
.snc-carte-visite p { margin: 0 0 12px; font-size: 16px; }
.snc-carte-visite .snc-signature-role { color: var(--snc-doux); font-size: 14.5px; }
.snc-carte-visite-lien { font-weight: 600; }

.snc-portrait { margin-top: 20px; }
.snc-portrait img { width: 190px; height: 190px; border-radius: var(--snc-arrondi); border: 3px solid var(--snc-bleu-vif); }
.snc-portrait-ville { display: block; margin-top: 8px; font-size: 14px; color: #90A4BE; }
.snc-ouverture-auteur .snc-ouverture-grille { grid-template-columns: 1fr; }

/* ---------------- child listing ---------------- */

.snc-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 34px; }
.snc-liste-entree {
  padding: 21px 23px;
  background: #F8FAFD;
  border: 1px solid var(--snc-trait);
  border-radius: var(--snc-arrondi);
}
.snc-liste-rubrique { display: inline-block; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--snc-bleu); }
.snc-liste-titre { display: block; font-size: 19px; font-weight: 800; color: var(--snc-texte); text-decoration: none; }
.snc-liste-titre:hover { color: var(--snc-lien); }
.snc-liste-texte { margin: 9px 0 0; font-size: 15.5px; color: #445364; }
.snc-liste-pied { display: flex; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--snc-doux); }
.snc-liste-vide { color: var(--snc-doux); }

/* ---------------- footer ---------------- */

.snc-pied { background: var(--snc-encre); color: #A9BACE; padding: 46px 0 26px; font-size: 15px; border-top: 4px solid var(--snc-bleu); }
.snc-pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; }
.snc-pied h4 { margin: 0 0 13px; font-size: 14px; color: #ffffff; text-transform: uppercase; letter-spacing: 1.2px; }
.snc-pied p { margin: 0 0 12px; line-height: 1.62; }
.snc-pied ul { list-style: none; margin: 0; padding: 0; }
.snc-pied li { margin-bottom: 8px; }
.snc-pied a { color: #BCCADB; text-decoration: none; }
.snc-pied a:hover { color: var(--snc-azur); text-decoration: underline; }
.snc-pied-note { margin-top: 30px; padding-top: 20px; border-top: 1px solid #1A2F4B; font-size: 13px; line-height: 1.66; color: #7F92AA; }

/* ---------------- self-assessment ---------------- */

.snc-test { margin: 30px 0; }
.snc-test-form { margin: 0; }
.snc-test-question { margin: 0 0 16px; padding: 17px 19px; background: #fff; border: 1px solid var(--snc-trait); border-radius: var(--snc-arrondi); }
.snc-test-question.snc-test-fait { border-color: var(--snc-bleu-vif); background: #F7FAFE; }
.snc-test-question legend { display: flex; gap: 10px; align-items: baseline; padding: 0; font-weight: 700; font-size: 17px; }
.snc-test-numero { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--snc-encre); color: #fff; border-radius: 50%; font-size: 13px; }
.snc-test-libelle { display: inline-block; }
.snc-test-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.snc-test-options input { position: absolute; opacity: 0; width: 0; height: 0; }
.snc-test-options label { padding: 9px 16px; background: #F3F6FA; border: 1px solid var(--snc-trait-2); border-radius: 30px; font-size: 15px; font-weight: 600; cursor: pointer; }
.snc-test-options label:hover { border-color: var(--snc-bleu-vif); }
.snc-test-options input:checked + label { background: var(--snc-encre); border-color: var(--snc-encre); color: #ffffff; }
.snc-test-options input:focus-visible + label { outline: 2px solid var(--snc-bleu-vif); outline-offset: 2px; }
.snc-test-envoyer { padding: 12px 24px; background: var(--snc-rouge); color: #fff; border: 0; border-radius: 30px; font: 700 16px var(--snc-plume); cursor: pointer; }
.snc-test-envoyer:hover { background: var(--snc-rouge-fonce); }
.snc-test-envoyer:disabled { background: #A9B5C4; cursor: not-allowed; }
.snc-test-recommencer { margin-top: 16px; padding: 10px 20px; background: none; border: 1px solid var(--snc-trait-2); border-radius: 30px; font: 600 15px var(--snc-plume); cursor: pointer; }
.snc-test-resultat { display: none; margin-top: 24px; padding: 21px 23px; background: #fff; border: 1px solid var(--snc-trait); border-left: 4px solid var(--snc-bleu-vif); border-radius: var(--snc-arrondi); }
.snc-test-resultat.snc-test-visible { display: block; }
.snc-test-resultat h4 { margin: 0 0 8px; font-size: 19px; }
.snc-test-bandeau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.snc-test-n-titre { font-size: 21px; font-weight: 800; }
.snc-test-n-valeur { font-size: 15px; color: var(--snc-doux); }
.snc-test-bandeau.snc-n0 .snc-test-n-titre { color: #2F7D5B; }
.snc-test-bandeau.snc-n1 .snc-test-n-titre { color: #5B7F46; }
.snc-test-bandeau.snc-n2 .snc-test-n-titre { color: #B5791F; }
.snc-test-bandeau.snc-n3 .snc-test-n-titre { color: var(--snc-rouge); }
.snc-test-jauge-svg { width: 100%; height: auto; }
.snc-test-g-bande, .snc-test-g-axe { font: 600 13px var(--snc-plume); fill: #5C6B7E; }
.snc-test-g-valeur { font: 800 19px var(--snc-plume); fill: #14202E; }
.snc-test-part { margin-bottom: 12px; }
.snc-test-part-tete { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; }
.snc-test-part-nom { font-weight: 600; }
.snc-test-part-valeur { color: var(--snc-doux); }
.snc-test-part-piste { height: 8px; background: var(--snc-trait); border-radius: 4px; overflow: hidden; }
.snc-test-part-remplissage { height: 100%; }
.snc-test-liste { margin: 10px 0 0; padding-left: 20px; }
.snc-test-liste li { margin-bottom: 8px; }
.snc-test-alerte { margin-top: 18px; padding: 14px 17px; background: var(--snc-revers); border-left: 4px solid var(--snc-rouge); border-radius: 0 var(--snc-arrondi-s) var(--snc-arrondi-s) 0; font-size: 14.5px; }
.snc-test-parts { display: block; margin-top: 18px; }
.snc-test-parts-note { margin-top: 10px; font-size: 15px; color: #445364; }
.snc-test-etapes { margin: 16px 0 0; font-size: 14px; color: var(--snc-doux); }

/* ---------------- responsive ---------------- */

@media (max-width: 980px) {
  body { font-size: 17px; }
  .snc-ouverture h1 { font-size: 32px; }
  .snc-ouverture-grille { grid-template-columns: 1fr; gap: 24px; }
  .snc-ouverture-image { order: -1; }
  .snc-ouverture::after { display: none; }
  .snc-feuille { padding: 26px 22px 32px; }
  .snc-texte h2 { font-size: 24px; }
  .snc-controle-etapes { grid-template-columns: repeat(2, 1fr); }
  .snc-pied-grille { grid-template-columns: 1fr 1fr; }
  .snc-liste { grid-template-columns: 1fr; }
  .snc-pour-contre { grid-template-columns: 1fr; }
  .snc-texte > ul { grid-template-columns: 1fr; }

  .snc-bascule { display: block; }
  .snc-nav { display: none; }
  .snc-nav.snc-ouvert { display: block; }
  .snc-nav > .snc-cadre > ul { display: block; }
  .snc-nav .sub-menu { position: static; display: none; min-width: 0; box-shadow: none; border: 0; border-left: 2px solid var(--snc-bleu); margin-left: 16px; }
  .snc-nav li.snc-ouvert > .sub-menu { display: block; }
  .snc-nav-bouton { width: 100%; justify-content: space-between; }
  .snc-nav li.menu-item-has-children > a { flex: 1 1 auto; }
  .snc-nav-arc { padding: 14px 20px; }
  body.snc-nav-bloque { overflow: hidden; }
}

@media (max-width: 620px) {
  .snc-ouverture { padding: 30px 0 28px; }
  .snc-ouverture h1 { font-size: 26px; }
  .snc-chapeau { font-size: 17px; }
  .snc-signe-ligne2 { font-size: 21px; }
  .snc-signe-ecu { width: 44px; height: 44px; }
  .snc-feuille { padding: 20px 17px 28px; }
  .snc-texte h2 { padding-left: 24px; }
  .snc-controle { padding: 21px 19px; }
  .snc-controle-etapes { grid-template-columns: 1fr; }
  .snc-pied-grille { grid-template-columns: 1fr; }
  .snc-carte-visite { flex-direction: column; }
  .snc-signature-date { margin-left: 0; }
  .snc-accroc { padding: 19px; }
  .snc-accroc::before { position: static; display: block; margin-bottom: 11px; }
}