/* Cyriskintel – feuille de style unique, sans dépendance externe. */

:root{
  /* Règle de couleur : les fonds sont neutres, le bleu est réservé au texte
     cliquable et aux filets. Jamais de texte bleu sur un fond bleuté. */
  --blanc:#FFFFFF;
  --fond:#F4F5F6;       /* gris neutre          */
  --fond-2:#ECEEF0;     /* survol, fond appuyé  */

  /* Texte : contrastes vérifiés sur blanc */
  --encre:#14171A;      /* corps de texte      – 15,8:1 */
  --encre-2:#3A4046;    /* texte secondaire    –  9,7:1 */
  --gris:#5A6169;       /* légendes, méta      –  6,6:1 */

  --filet:#DDE0E3;
  --filet-clair:#ECEEF0;

  --marine:#16191C;     /* réservé au pied de page, neutre */
  --accent:#0B769F;     /* bleu du logo – liens, filets, surbrillance */
  --accent-fonce:#06556F;
  --saumon:#FBD5C6;--saumon-marque:#F4BA9A;--violet:#842479;     /* sélection d'un sous-menu – saumon clair */
  --saumon-bord:#DE7550;

  --mesure:70ch;
  --sans:Aptos,"Aptos Display","Segoe UI Variable Text","Segoe UI",
         ui-sans-serif,system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--accent-fonce);text-underline-offset:2px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.bande{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.saut{position:absolute;left:-9999px}
.saut:focus{left:1rem;top:1rem;z-index:100;background:var(--blanc);padding:.6rem 1rem;border-radius:6px}

/* ---------- en-tête, clair ---------- */
.entete{
  background:var(--blanc);
  padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid var(--filet);
  box-shadow:0 1px 0 rgba(11,118,159,.06);
}
/* l'en-tête a sa propre largeur : neuf rubriques tiennent sur une ligne */
.entete .bande{width:min(1280px,100% - 2.5rem);display:flex;align-items:center;gap:.4rem 1.5rem;flex-wrap:wrap;padding-block:1rem .7rem}
.logo{display:block;flex:none;line-height:0}
.logo img{width:auto;height:52px;display:block}

.burger{
  display:none;background:var(--blanc);color:var(--encre);font:inherit;
  border:1px solid var(--filet);border-radius:7px;padding:.45rem .8rem;cursor:pointer;
}

.visuellement-cache{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* recherche : dans l'en-tête, à droite du logo */
/* la recherche reste à droite de l'en-tête, à l'opposé du logo */
.rech-entete{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.rech-champ{display:flex;align-items:stretch}
.rech-etiquette{font-size:.92rem;color:var(--encre-2);white-space:nowrap}
.rech-entete input{
  font:inherit;font-size:.9rem;color:var(--encre);background:var(--blanc);
  border:1px solid var(--filet);border-right:0;border-radius:7px 0 0 7px;
  padding:.42rem .7rem;width:15rem;max-width:46vw;
}
.rech-entete input::placeholder{color:var(--gris)}
.rech-entete input:focus{border-color:var(--accent);outline:0}
.rech-entete button{
  font:inherit;font-size:1.05rem;line-height:1;cursor:pointer;
  border:1px solid var(--filet);border-left:0;border-radius:0 7px 7px 0;
  background:var(--fond);color:var(--encre-2);padding:0 .7rem;
}
.rech-entete button:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.rech-entete input:focus + button{border-color:var(--accent)}
/* la barre occupe sa propre ligne : dix entrées ne tiennent pas à côté du logo */
.nav{flex:1 1 100%;margin-left:0}
.nav ul{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:.1rem;margin:0;padding:0}
.nav a{
  display:block;color:var(--encre-2);text-decoration:none;padding:.5rem .6rem;border-radius:6px;
  font-size:.92rem;font-weight:500;white-space:nowrap;
}
.nav > ul > li:hover > a,
.nav > ul > li:focus-within > a,
.nav a:hover,
.nav a:focus-visible{background:var(--accent);color:#fff}
.nav > ul > li:hover > a::after{color:#fff;opacity:1}
.nav a:hover .compte{color:#D8ECF3}
.nav a[aria-current="page"]{background:var(--accent);color:#fff}
.nav li{position:relative}
.nav .a-enfants>a::after{content:"▾";margin-left:.35rem;font-size:.7em;opacity:.55}

.nav .fin{margin-left:.5rem}
.nav .fin>a{
  border:1px solid var(--accent);color:var(--accent-fonce);
  padding:.4rem .75rem;border-radius:7px;
}
.nav .fin>a:hover{background:var(--accent);color:#fff}
.nav .a-enfants>a:hover::after{opacity:1}

.nav .sous,.nav .sous2{
  display:none;position:absolute;left:0;top:100%;z-index:40;min-width:270px;max-width:320px;
  background:var(--blanc);border:1px solid var(--filet);border-radius:10px;padding:.35rem;
  flex-direction:column;align-items:stretch;text-align:left;
  box-shadow:0 16px 38px rgba(16,34,46,.14);
}
.nav .sous li,.nav .sous2 li{width:100%}
.nav .sous .a-enfants>a::after,.nav .sous li:has(.sous2)>a::after{
  content:"›";float:right;color:var(--gris);
}
.nav .sous .a-enfants>a:hover::after,.nav .sous li:has(.sous2)>a:hover::after{color:var(--encre)}
.nav li:hover>.sous,.nav li:focus-within>.sous{display:flex}
.nav .sous li:hover>.sous2,.nav .sous li:focus-within>.sous2{display:flex;left:calc(100% - .2rem);top:-.35rem}
.nav .sous a{white-space:normal;font-size:.89rem;font-weight:450;color:var(--encre-2)}
.nav .sous a:hover,
.nav .sous a:focus-visible{background:var(--saumon);color:var(--encre);box-shadow:inset 3px 0 0 var(--saumon-bord)}
.nav .sous a[aria-current="page"]{background:var(--saumon);color:var(--encre);box-shadow:inset 3px 0 0 var(--saumon-bord)}
.nav .sous a:hover .fleche{color:var(--encre)}
.nav .sous li{position:relative}

/* ---------- fil d'Ariane ---------- */
.ariane{background:var(--fond);border-bottom:1px solid var(--filet)}
.ariane ol{
  list-style:none;margin:0;padding:.55rem 0;display:flex;flex-wrap:wrap;gap:.4rem;
  width:min(1160px,100% - 2.5rem);margin-inline:auto;font-size:.83rem;color:var(--encre-2);
}
.ariane li+li::before{content:"›";margin-right:.4rem;color:var(--gris)}
.ariane a{color:var(--encre-2);text-decoration:none}
.ariane a:hover{color:var(--accent-fonce);text-decoration:underline}

/* ---------- prose ---------- */
main{display:block}
.prose{width:min(var(--mesure),100% - 2.5rem);margin:0 auto;padding-block:2.6rem 1rem}
.prose h1{
  font-size:clamp(1.85rem,1.3rem + 2vw,2.45rem);line-height:1.15;letter-spacing:-.02em;
  margin:0 0 1.2rem;text-wrap:balance;font-weight:700;
}
.prose h2{font-size:1.4rem;letter-spacing:-.012em;margin:2.4rem 0 .8rem;text-wrap:balance;font-weight:650}
.prose h3{font-size:1.13rem;margin:1.9rem 0 .6rem;font-weight:640}
.prose h4{font-size:1rem;margin:1.5rem 0 .5rem;font-weight:640;color:var(--encre-2)}
.prose p,.prose li{font-size:1.02rem;line-height:1.7}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.35rem}
.prose li{margin-bottom:.4rem}
.prose li::marker{color:var(--accent)}
.prose blockquote{
  margin:1.6rem 0;padding:.9rem 1.2rem;border-left:3px solid var(--accent);
  background:var(--fond);color:var(--encre);border-radius:0 8px 8px 0;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose hr{border:0;border-top:1px solid var(--filet);margin:2.4rem 0}
.prose code{
  font-family:var(--mono);font-size:.88em;background:var(--fond);color:var(--encre);
  padding:.12em .35em;border-radius:4px;
}
.prose figure{margin:1.8rem 0;text-align:center}
.prose figure img{border:1px solid var(--filet);border-radius:9px}
.prose strong{font-weight:660}
.tableau{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--filet);border-radius:9px}
.tableau table{border-collapse:collapse;width:100%;font-size:.93rem}
.tableau th{
  text-align:left;background:var(--fond);padding:.6rem .8rem;font-weight:640;color:var(--encre);
  border-bottom:1px solid var(--filet);
}
.tableau td{padding:.6rem .8rem;border-bottom:1px solid var(--filet-clair);vertical-align:top}
.tableau tr:last-child td{border-bottom:0}

/* ---------- article ---------- */
.art-entete{margin-bottom:1.8rem;padding-bottom:1.1rem;border-bottom:1px solid var(--filet)}
.art-entete h1{margin-bottom:.6rem}
.art-meta{font-size:.86rem!important;color:var(--gris);margin:0!important}
.art-nav{
  width:min(var(--mesure),100% - 2.5rem);margin:2.5rem auto 3.5rem;
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}
.art-nav a{
  display:grid;gap:.25rem;padding:.9rem 1.1rem;border:1px solid var(--filet);border-radius:10px;
  text-decoration:none;color:var(--encre);font-size:.95rem;font-weight:560;
}
.art-nav a:hover{border-color:var(--accent);background:var(--fond)}
.art-nav span{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--gris);font-weight:500}
.art-nav .suiv{text-align:right}

/* ---------- sous-pages ---------- */
.sous-pages{width:min(var(--mesure),100% - 2.5rem);margin:1rem auto 3.5rem}
.sous-pages h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);margin:0 0 .8rem}
.sous-pages ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.sous-pages a{
  display:grid;gap:.2rem;padding:.85rem 1.05rem;border:1px solid var(--filet);border-radius:10px;
  text-decoration:none;color:var(--encre);
}
.sous-pages a:hover{border-color:var(--accent);background:var(--fond)}
.sous-pages .t{font-weight:600;font-size:.98rem}
.sous-pages .d{font-size:.87rem;color:var(--encre-2)}

/* ---------- accueil ---------- */
.hero{
  background:var(--fond);
  border-bottom:1px solid var(--filet);padding-block:3.2rem 2.8rem;
}
.hero .eyebrow{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  font-weight:600;margin:0 0 .9rem;
}
.hero h1{
  font-size:clamp(2rem,1.3rem + 3vw,2.9rem);line-height:1.1;letter-spacing:-.025em;
  margin:0 0 1.1rem;color:var(--encre);text-wrap:balance;font-weight:700;max-width:22ch;
}
.hero-intro p{font-size:1.12rem;line-height:1.6;color:var(--encre-2);max-width:62ch;margin:0}

/* le titre à gauche, la pile GRC à droite */
.hero .bande{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:1.5rem 2.5rem;align-items:center}

/* ---------- pile GRC : quatre couches cliquables ---------- */
.pile{margin:0;display:grid;gap:.6rem;max-width:380px;justify-self:end}
.pile svg{width:100%;height:auto;display:block;overflow:visible}
.pile figcaption{font-size:.85rem;color:var(--gris);margin:0}
.pile .couche{cursor:pointer}
/* les teintes sont ici, et non dans un attribut style : la CSP refuse le style en ligne */
.pile .c0{--teinte:#F4BA9A;--teinte-texte:#A2451A}
.pile .c1{--teinte:#842479;--teinte-texte:#842479}
.pile .c2{--teinte:#0B769F;--teinte-texte:#06556F}
.pile .plaque{transition:opacity .12s}
.pile .attache{stroke:var(--teinte);stroke-width:1;opacity:.5}
.pile .etiquette{
  font-family:inherit;font-size:13.5px;font-weight:640;fill:var(--encre);
  letter-spacing:-.01em;
}
.pile .couche:hover .plaque,.pile .couche:focus-visible .plaque{opacity:.72}
.pile .couche:hover .etiquette,.pile .couche:focus-visible .etiquette{
  fill:var(--teinte-texte);text-decoration:underline;
}
.pile .couche:focus-visible{outline:none}

.produits .bande{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem;
  padding-block:2.4rem 1.6rem;
}
.produit{
  border:1px solid var(--filet);border-top:3px solid var(--accent);border-radius:12px;
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;background:var(--blanc);
}
.produit h2{font-size:1.28rem;margin:0;letter-spacing:-.015em;font-weight:680}
.produit .accroche{color:var(--encre);font-weight:640;font-size:.94rem;margin:0}
.produit-txt p{font-size:.98rem;line-height:1.62;color:var(--encre-2);margin:0}
.produit-liens{margin-top:auto;padding-top:.8rem;font-size:.9rem;color:var(--gris)}
.produit-liens p{margin:0}
.produit-liens a{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}

.ouvert{background:var(--fond);border-block:1px solid var(--filet)}
.ouvert .bande{padding-block:2.6rem}
.ouvert h2{font-size:1.28rem;margin:0 0 .8rem;font-weight:680}
.ouvert p{max-width:var(--mesure);margin:0;color:var(--encre-2)}

/* Les articles sont encadrés d'un filet hachuré, à la largeur des trois
   cartes produit, pour les distinguer du reste de la page. */
.derniers{background:transparent}
.derniers .bande{
  background:var(--fond);
  border:2px dashed var(--accent);
  border-radius:12px;
  padding:1.5rem 1.4rem 1.7rem;
  margin-block:0 2.6rem;
}
.derniers-h{display:flex;align-items:baseline;gap:.4rem 1.2rem;flex-wrap:wrap;margin-bottom:1.4rem}
.derniers-h h2{font-size:1.28rem;margin:0;font-weight:680}
.derniers-h p{margin:0;font-size:.95rem;color:var(--encre-2);flex:1 1 20ch}
.derniers-h .tous{
  margin-left:auto;font-size:.9rem;font-weight:600;white-space:nowrap;text-decoration:none;
  border:1px solid var(--accent);border-radius:7px;padding:.35rem .8rem;color:var(--accent-fonce);
}
.derniers-h .tous:hover{background:var(--accent);color:#fff}
.derniers ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.derniers li{display:flex}
.derniers li>a{
  display:grid;gap:.35rem;align-content:start;width:100%;
  background:var(--blanc);border:1px solid var(--filet);border-radius:10px;
  padding:1rem 1.1rem 1.1rem;text-decoration:none;color:var(--encre);
}
.derniers li>a:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(16,34,46,.07)}
.derniers time{font-size:.76rem;color:var(--gris);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.derniers .t{font-weight:640;font-size:1rem;line-height:1.3}
.derniers li>a:hover .t{color:var(--accent-fonce)}
.derniers .d{font-size:.89rem;color:var(--encre-2);line-height:1.5}

/* ---------- index des articles ---------- */
.annee{width:min(840px,100% - 2.5rem);margin-inline:auto;padding-bottom:1.4rem}
.annee h2{
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);font-weight:600;
  border-bottom:1px solid var(--filet);padding-bottom:.4rem;margin:2rem 0 1rem;
}
.liste-articles{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.liste-articles li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:.3rem 1rem}
.liste-articles time{
  font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--gris);padding-top:.15rem;
}
.liste-articles a{grid-column:2;font-weight:620;text-decoration:none;font-size:1.05rem;line-height:1.35}
.liste-articles a:hover{text-decoration:underline}
.liste-articles p{grid-column:2;margin:0;font-size:.94rem;color:var(--encre-2);line-height:1.55}
.blogue .prose{padding-bottom:0}

/* ---------- page de recherche ---------- */
.rech-form{display:flex;gap:0;margin:1.4rem 0 .8rem}
.rech-form input{
  flex:1 1 auto;min-width:0;font:inherit;font-size:1.02rem;color:var(--encre);
  border:1px solid var(--filet);border-right:0;border-radius:9px 0 0 9px;
  padding:.65rem .9rem;background:var(--blanc);
}
.rech-form input:focus{border-color:var(--accent);outline:0}
.rech-form button{
  font:inherit;font-size:.98rem;font-weight:600;cursor:pointer;white-space:nowrap;
  border:1px solid var(--accent);border-radius:0 9px 9px 0;
  background:var(--accent);color:#fff;padding:.65rem 1.1rem;
}
.rech-form button:hover{background:var(--accent-fonce);border-color:var(--accent-fonce)}
.rech-etat{font-size:.92rem;color:var(--gris);margin:0}

.rech-zone{width:min(var(--mesure),100% - 2.5rem);margin:1.4rem auto 3.5rem}
.rech-res{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.rech-res li{
  border:1px solid var(--filet);border-radius:10px;padding:.95rem 1.15rem;background:var(--blanc);
  display:grid;gap:.25rem;
}
.rech-res li:hover{border-color:var(--accent)}
.rech-res li > a{font-weight:640;font-size:1.05rem;text-decoration:none;line-height:1.3}
.rech-res li > a:hover{text-decoration:underline}
.rech-res time{font-size:.78rem;color:var(--gris);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.rech-res p{margin:0;font-size:.94rem;color:var(--encre-2);line-height:1.55}
.rech-res mark{background:var(--saumon);color:var(--encre);padding:0 .12em;border-radius:2px}
.rech-res .url{font-size:.78rem}

/* ---------- pied ---------- */
.pied{background:var(--marine);color:#C9CED3;margin-top:3rem;padding-bottom:env(safe-area-inset-bottom,0px)}
.pied .bande{padding-block:2.2rem 1.8rem;display:grid;gap:1.2rem;font-size:.92rem}
.pied strong{color:#fff;font-size:1rem}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem}
.pied a{color:#E6EAED;text-decoration:none;border-bottom:1px solid #454B51}
.pied a:hover{color:#fff;border-bottom-color:#fff}
.copy{margin:0;font-size:.82rem;color:#9AA1A8;border-top:1px solid #2A2F34;padding-top:1rem}

.erreur-page{padding-block:4rem 5rem}

.sous-toggle{display:none}

/* sous 900 px, la pile passe sous le titre et se recentre */
@media (max-width:900px){
  .hero .bande{grid-template-columns:minmax(0,1fr)}
  .pile{max-width:380px;justify-self:start}
}

@media (max-width:1260px){
  .burger{display:block}
  .nav{
    display:none;width:100%;margin-left:0;
    max-height:calc(100dvh - 8rem);overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.ouvert{display:block}
  .nav > ul{flex-direction:column;align-items:stretch;gap:0;padding-bottom:.6rem}
  .nav li{display:flex;flex-wrap:wrap;align-items:center}
  .nav li > a{flex:1 1 auto}
  .nav .a-enfants>a::after{content:none}

  /* un sous-menu ne s'ouvre qu'à la demande : le premier niveau reste lisible */
  .sous-toggle{
    display:block;flex:none;width:2.4rem;height:2.4rem;line-height:1;
    border:1px solid var(--filet);border-radius:7px;background:var(--blanc);
    color:var(--encre-2);font:inherit;font-size:1rem;cursor:pointer;margin-left:.4rem;
  }
  .sous-toggle::before{content:"+"}
  .sous-toggle[aria-expanded="true"]::before{content:"–"}
  .nav .sous,.nav .sous2{
    display:none;position:static;background:transparent;border:0;box-shadow:none;
    padding:0 0 .4rem 1rem;min-width:0;max-width:none;width:100%;
  }
  .nav li.deplie > .sous,.nav li.deplie > .sous2{display:flex}
  .nav li:hover>.sous,.nav li:focus-within>.sous{display:none}
  .nav li.deplie:hover>.sous{display:flex}
  .nav .sous li:hover>.sous2,.nav .sous li:focus-within>.sous2{display:none;left:auto;top:auto}
  .nav .sous li.deplie>.sous2{display:flex}
  .nav .sous .a-enfants>a::after,.nav .sous li:has(.sous2)>a::after{content:none}

  /* barre repliée : la recherche garde sa place à droite, avant le bouton Menu */
  .rech-entete{order:2;flex:0 1 auto;margin-left:auto}
  .rech-etiquette{display:none}
  .rech-entete input{width:11rem;max-width:38vw}
  .burger{order:3;margin-left:.6rem}

  /* un point de plus à la lecture sur mobile */
  .nav > ul > li > a{font-size:1.02rem;padding-block:.62rem}
  .nav .sous a{font-size:.97rem;padding-block:.55rem}
  .nav .fin>a{font-size:1.02rem}

  .nav .fin{margin-left:0;margin-top:.5rem}
  .nav .fin>a{display:inline-block;flex:0 0 auto}
  .logo img{height:44px}
  .art-nav{grid-template-columns:1fr}
  .art-nav .suiv{text-align:left}
}
@media (max-width:520px){
  /* l'illustration rétrécit pour que l'étiquette la plus longue tienne */
  .pile{max-width:330px}
}
@media (max-width:420px){
  .logo img{height:38px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media print{
  .entete,.pied,.ariane,.art-nav,.sous-pages{display:none}
  body{font-size:11pt;color:#000}
  .prose{width:100%}
  .prose a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}