/* ============================================================
   KOSZY COPRO : feuille de style
   Charte : marine #14273F, papier chaud, filet laiton.
   Titres : Playfair Display (accordée au K du logo)
   Textes : Karla
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Karla:wght@300;400;500;600;700&display=swap');

:root{
  --marine:#14273F;
  --marine-2:#1E3556;
  --marine-3:#2E4665;
  --papier:#FBF9F5;
  --parchemin:#F1ECE2;
  --laiton:#94642E;
  --laiton-clair:#D9A961;
  --gris:#5C6675;
  --gris-clair:#8C93A0;
  --trait:#DCD5C8;
  --trait-marine:#2C4160;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --large:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--marine);
  font-family:var(--sans);font-size:17.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
p{margin:0 0 1.1rem}
.contenu{max-width:var(--large);margin:0 auto;padding:0 1.9rem}
a{color:var(--marine);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--laiton)}

/* ---------- Titres ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;line-height:1.16;letter-spacing:-.01em}
h2{font-size:clamp(1.65rem,3vw,2.25rem)}
h3{font-size:1.28rem;font-weight:500}

/* ---------- Étiquette de section (marge gauche) ---------- */
.etiquette{
  font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--laiton);
  line-height:1.7;padding-top:.6rem;border-top:2px solid var(--marine);
}
.etiquette .n{display:block;font-family:var(--serif);font-size:1.5rem;
  font-weight:400;letter-spacing:0;color:var(--trait);line-height:1;margin-bottom:.45rem}

/* ---------- En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:60;background:rgba(251,249,245,.94);
  backdrop-filter:saturate(1.5) blur(9px);border-bottom:1px solid transparent;transition:border-color .25s;
}
.entete.colle{border-bottom-color:var(--trait)}
.entete .contenu{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:.95rem 1.9rem}
.enseigne{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--marine);flex:none}
.enseigne img{width:42px;height:42px}
.mot{line-height:1;display:block}
.mot .l1{display:block;font-family:var(--serif);font-size:1.35rem;letter-spacing:.01em}
.mot .l1 b{font-weight:600}
.mot .l1 span{font-weight:400;letter-spacing:.2em;margin-left:.4em;font-size:.82em;color:var(--marine-3)}
.mot .l2{
  display:block;
  font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gris);
  border-top:1px solid var(--trait);margin-top:.42rem;padding-top:.34rem;font-weight:500;
}
.entete nav{display:flex;gap:1.75rem;align-items:center}
.entete nav a{
  font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;color:var(--gris);padding-bottom:.28rem;border-bottom:2px solid transparent;transition:.2s;
}
.entete nav a:hover{color:var(--marine)}
.entete nav a.actif{color:var(--marine);border-bottom-color:var(--laiton)}
.entete nav a.appel-nav{
  color:var(--papier);background:var(--marine);border:0;padding:.6rem 1.05rem;
}
.entete nav a.appel-nav:hover{background:var(--laiton);color:#fff}
@media(max-width:900px){
  .entete .contenu{flex-wrap:wrap;gap:.7rem;padding:.8rem 1.2rem}
  .entete nav{width:100%;gap:1.1rem;overflow-x:auto;padding-bottom:.2rem}
  .entete nav a{white-space:nowrap;font-size:.65rem;letter-spacing:.11em}
  .enseigne img{width:36px;height:36px}
  .mot .l1{font-size:1.12rem}
}

/* ---------- Ouverture (bandeau marine) ---------- */
.ouverture{
  background:var(--marine);color:#fff;position:relative;overflow:hidden;
  padding:5.2rem 0 4.4rem;
}
.ouverture::before{
  content:"";position:absolute;top:50%;right:-90px;transform:translateY(-50%);
  width:430px;height:430px;
  background:url('logo-k.png') center/contain no-repeat;
  opacity:.055;filter:invert(1);pointer-events:none;
}
.ouverture .contenu{position:relative}
.sur-titre{
  font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--laiton-clair);display:block;margin-bottom:1.5rem;
}
.ouverture h1{
  font-size:clamp(2.1rem,4.9vw,3.5rem);font-weight:400;color:#fff;
  max-width:19ch;line-height:1.12;
}
.ouverture h1 em{font-style:italic;color:var(--laiton-clair)}
.ouverture .filet{width:64px;height:2px;background:var(--laiton-clair);margin:2rem 0 1.7rem}
.ouverture .lede{font-size:1.14rem;max-width:52ch;color:#CBD5E2;margin:0}
.ouverture .actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}
@media(max-width:820px){
  .ouverture{padding:3.2rem 0 2.8rem}
  .ouverture::before{width:280px;height:280px;right:-110px;opacity:.045}
}

/* ---------- Boutons ---------- */
.appel,.appel-2,.appel-sombre{
  display:inline-block;font-family:var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:.95rem 1.8rem;text-decoration:none;transition:.2s;
}
.appel{background:var(--papier);color:var(--marine);border:1px solid var(--papier)}
.appel:hover{background:var(--laiton-clair);border-color:var(--laiton-clair);color:var(--marine)}
.appel-2{background:transparent;color:#fff;border:1px solid var(--marine-3)}
.appel-2:hover{border-color:var(--laiton-clair);color:var(--laiton-clair)}
.appel-sombre{background:var(--marine);color:var(--papier);border:1px solid var(--marine)}
.appel-sombre:hover{background:var(--laiton);border-color:var(--laiton);color:#fff}

/* ---------- Rubriques ---------- */
.rubrique{padding:3.6rem 0;border-bottom:1px solid var(--trait)}
.rubrique.parchemin{background:var(--parchemin);border-bottom:none}
.rubrique.sans-filet{border-bottom:none}
.grille{display:grid;grid-template-columns:180px 1fr;gap:3.4rem;align-items:start}
.corps{max-width:66ch}
.corps>:first-child{margin-top:0}
.corps h2{margin-bottom:1.1rem}
.corps h3{margin:2.1rem 0 .5rem}
.corps h3:first-child{margin-top:0}
@media(max-width:820px){
  .grille{grid-template-columns:1fr;gap:1.2rem}
  .rubrique{padding:2.5rem 0}
}

/* ---------- Public visé : lignes numérotées ---------- */
.publics{margin-top:.4rem;border-top:1px solid var(--trait)}
.public{
  display:grid;grid-template-columns:2.6rem 1fr;gap:1.5rem;
  padding:1.6rem 0;border-bottom:1px solid var(--trait);
  transition:padding-left .25s ease,background .25s ease;
}
.public:hover{padding-left:.8rem;background:linear-gradient(90deg,var(--parchemin),transparent 72%)}
.public .num{font-family:var(--serif);font-size:1.35rem;color:var(--trait);line-height:1.3;transition:color .25s}
.public:hover .num{color:var(--laiton)}
.public h3{margin:0 0 .35rem}
.public p{margin:0;color:var(--gris);font-size:.97rem}
.public .lien{
  display:inline-block;margin-top:.55rem;font-size:.68rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--laiton);text-decoration:none;
  border-bottom:1px solid var(--trait);padding-bottom:2px;
}
.public .lien:hover{border-bottom-color:var(--laiton)}

/* ---------- Bloc négatif ---------- */
.negatif{
  background:var(--marine);color:#C9D3E0;padding:2.2rem 2.2rem 2rem;
  border-left:4px solid var(--laiton-clair);
}
.negatif h3{color:#fff;margin:0 0 1rem;font-size:1.35rem}
.negatif ul{list-style:none;margin:0 0 1.2rem;padding:0}
.negatif li{padding-left:1.35rem;position:relative;margin-bottom:.55rem}
.negatif li::before{content:"";position:absolute;left:0;top:.82em;width:9px;height:1px;background:var(--laiton-clair)}
.negatif p:last-child{margin-bottom:0}
.negatif .sortie{color:#fff;border-top:1px solid var(--trait-marine);padding-top:1.1rem;margin-top:.4rem}
@media(max-width:560px){.negatif{padding:1.5rem 1.4rem}}

/* ---------- Méthode : étapes ---------- */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:1.6rem 0 1.4rem;border-top:2px solid var(--marine)}
.etape{padding:1.5rem 1.7rem 1.4rem 0;border-right:1px solid var(--trait)}
.etape:last-child{border-right:0;padding-right:0}
.etape .k{font-family:var(--serif);font-size:1.6rem;color:var(--laiton);display:block;line-height:1;margin-bottom:.6rem}
.etape h3{font-size:1.08rem;font-weight:500;margin:0 0 .4rem}
.etape p{font-size:.93rem;color:var(--gris);margin:0}
@media(max-width:820px){
  .etapes{grid-template-columns:1fr}
  .etape{border-right:0;border-bottom:1px solid var(--trait);padding:1.2rem 0}
  .etape:last-child{border-bottom:0}
}

/* ---------- Tranche (citation) ---------- */
.tranche{
  font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.62rem);font-style:italic;
  line-height:1.42;border-left:3px solid var(--laiton);padding-left:1.5rem;margin:2rem 0;color:var(--marine);
}

/* ---------- Listes ---------- */
.liste-filets{list-style:none;padding:0;margin:1.3rem 0}
.liste-filets li{border-top:1px solid var(--trait);padding:.9rem 0}
.liste-filets li:last-child{border-bottom:1px solid var(--trait)}
ul.simple{padding-left:1.05rem;margin:0 0 1.1rem}
ul.simple li{margin-bottom:.4rem}

/* ---------- Chiffres ---------- */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait);margin-top:2rem}
.chiffre{background:var(--papier);padding:1.3rem 1.2rem}
.chiffre b{display:block;font-family:var(--serif);font-size:2rem;font-weight:500;line-height:1;color:var(--marine)}
.chiffre span{display:block;font-size:.76rem;line-height:1.45;color:var(--gris);margin-top:.55rem}
@media(max-width:720px){.chiffres{grid-template-columns:1fr 1fr}}

/* ---------- Encadré / repères ---------- */
.encadre{
  background:var(--parchemin);border:1px solid var(--trait);border-left:3px solid var(--laiton);
  padding:1.5rem 1.7rem;margin:1.8rem 0;
}
.encadre h3{font-size:1.12rem;margin:0 0 .55rem}
.encadre p:last-child{margin-bottom:0}
.encadre .ref{
  display:block;font-size:.72rem;letter-spacing:.06em;color:var(--gris);
  border-top:1px solid var(--trait);margin-top:.9rem;padding-top:.7rem;
}
.encadre .ref a{color:var(--laiton)}
.note{font-size:.87rem;color:var(--gris);line-height:1.65}

/* ---------- Pied de page ---------- */
.pied{background:var(--marine);color:#AFBACA;padding:3rem 0 1.8rem;font-size:.88rem;line-height:1.75}
.pied .colonnes{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.2rem}
.pied h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.21em;text-transform:uppercase;color:var(--laiton-clair);margin:0 0 .8rem;font-weight:700}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:.32rem}
.pied a{color:#AFBACA;text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied .enseigne-pied{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.pied .enseigne-pied img{width:34px;height:34px;filter:invert(1) brightness(1.6)}
.pied .enseigne-pied b{font-family:var(--serif);font-size:1.12rem;color:#fff;font-weight:500;letter-spacing:.02em}
.ourlet{border-top:1px solid var(--trait-marine);margin-top:2.1rem;padding-top:1rem;font-size:.75rem;color:#7E8CA0}
@media(max-width:760px){.pied .colonnes{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- Pages de texte ---------- */
.texte{padding:3rem 0 3.4rem;max-width:74ch}
.texte h1{font-size:clamp(1.9rem,4vw,2.7rem);margin:0 0 .6rem}
.texte .lede{font-size:1.1rem;color:var(--gris);max-width:56ch;margin:0 0 2.2rem}
.texte h2{font-size:1.45rem;margin:2.6rem 0 .8rem}
.texte dt{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton);margin-top:1.1rem}
.texte dd{margin:.15rem 0 0}

/* champ restant à renseigner avant mise en ligne */
.a-completer{background:#FBEFC4;border-bottom:1px dashed #A8842B;padding:0 .25rem}