/* MLE FINANCE — feuille de style issue de DESIGN.md (DESIGN_SEED 94164270400014) */

@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/gloock-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/public-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/public-sans-latin-700-normal.woff2") format("woff2")}

:root{
  --fond:#f1deda;
  --surface:#e0d4d1;
  --texte:#544340;
  --primaire:#a14921;
  --accent:#e3411c;
  --filet:#c0aeaa;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--fond);color:var(--texte);font:400 16px/1.55 "Public Sans",sans-serif;-webkit-hyphens:auto;hyphens:auto;min-height:100vh}
body::before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");opacity:.08;mix-blend-mode:multiply;pointer-events:none;z-index:1000}
[hidden]{display:none !important}
img{max-width:100%;height:auto}

h1,h2,h3{font-family:"Gloock",serif;font-weight:400;margin:0 0 16px;text-align:left;-webkit-hyphens:manual;hyphens:manual}
h1{font-size:44px;line-height:1.08;letter-spacing:-.01em}
h2{font-size:30px;line-height:1.15;color:var(--accent)}
h3{font-size:21px;line-height:1.25}
p{margin:0 0 12px;max-width:68ch}
ul,ol{max-width:68ch}
a{color:var(--texte);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--primaire)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--primaire);outline-offset:2px}
strong{font-weight:700}
small,.petit{font-size:13px;line-height:1.45}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.saut{position:absolute;left:-9999px;top:8px;background:var(--primaire);color:var(--fond);padding:8px 12px;z-index:70}
.saut:focus{left:8px}

.conteneur{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- en-tête : logo à gauche, liens en colonne à droite ---------- */
.entete{border-bottom:3px double var(--filet)}
.entete .conteneur{display:flex;align-items:flex-start;justify-content:space-between;padding-top:24px;padding-bottom:24px}
.logo{display:inline-block;line-height:0}
.logo img{height:48px;width:auto;display:block}
.nav-haut ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end}
.nav-haut a{font-weight:700;font-size:15px;line-height:28px;text-decoration:none}
.nav-haut a:hover{text-decoration:underline;text-decoration-thickness:1px}
.nav-haut a[aria-current="page"]{text-decoration:underline double var(--accent);text-decoration-thickness:3px;text-underline-offset:6px}
.entete-min .conteneur{padding-top:14px;padding-bottom:14px}

/* barre basse mobile */
.barre-basse{display:none}
.picto{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;flex:none}

/* ---------- mosaïque d'ouverture ---------- */
.photo{background:var(--primaire);overflow:hidden}
.photo img{filter:grayscale(1);mix-blend-mode:multiply;object-fit:cover;width:100%;height:100%;display:block}
.mosaique{position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:320px 260px;gap:12px;margin:24px 0 0}
.photos-bc{display:contents}
.photo-a{grid-column:1/8;grid-row:1/3}
.photo-b{grid-column:8/13;grid-row:1/2}
.photo-c{grid-column:10/13;grid-row:2/3}
.aplat{grid-column:5/10;grid-row:2/3;align-self:end;z-index:2;background:var(--primaire);color:var(--fond);padding:32px;box-shadow:8px 8px 0 var(--texte)}
.aplat h1{color:var(--fond);margin:0 0 12px}
.aplat p{color:var(--fond);margin:0;max-width:none}
.mosaique .tampon{position:absolute;top:-24px;right:24px;z-index:3}

/* ---------- en-tête de page intérieure ---------- */
.en-tete-page{background:var(--surface);border-bottom:3px double var(--filet);overflow-x:clip}
.en-tete-page .conteneur{position:relative;padding-top:40px;padding-bottom:40px}
.en-tete-page h1{max-width:22ch;margin:0 0 12px}
.en-tete-page p{margin:0;max-width:60ch}
.en-tete-page .tampon{position:absolute;top:-20px;right:40px}

/* ---------- structure rapport ---------- */
.rapport{display:grid;grid-template-columns:200px 1fr;column-gap:48px;padding-top:40px}
.toc{position:sticky;top:24px;align-self:start;border-top:3px double var(--filet);padding-top:12px}
.toc-titre{font-family:"Gloock",serif;font-size:18px;margin:0 0 8px}
.toc ol{list-style:upper-roman;margin:0;padding-left:28px;font-weight:700;font-size:13px;line-height:28px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.contenu{counter-reset:sec;min-width:0}
.sec{counter-increment:sec;padding:56px 0;border-top:3px double var(--filet)}
.contenu > .sec:first-child{border-top:0;padding-top:0}
.sec > h2::before{content:counter(sec,upper-roman) ". "}
.sec.compact{padding:40px 0}
.sec.large{padding:72px 0}
.sec.sans-num{counter-increment:none}
.sec.sans-num > h2::before{content:none}

/* 1. tableau / liste de définitions */
.defs{display:grid;grid-template-columns:200px 1fr;margin:0;border-top:3px double var(--filet);max-width:none}
.defs dt,.defs dd{margin:0;padding:12px 0;border-bottom:3px double var(--filet)}
.defs dt{font-weight:700;font-size:15px;padding-right:16px}
.defs dd p{margin:0 0 6px}
.defs dd p:last-child{margin:0}
.tableau{width:100%;border-collapse:collapse;border-top:3px double var(--filet)}
.tableau th,.tableau td{text-align:left;padding:12px 16px 12px 0;vertical-align:top;border-bottom:3px double var(--filet)}
.tableau thead th{font-size:14px;border-bottom:5px double var(--texte)}

/* 2. deux colonnes texte / image */
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.deux-col .photo{aspect-ratio:4/3}
.deux-col .tampon-colonne{display:flex;justify-content:center;align-items:center;padding:24px 0}

/* 3. encadré ou citation sur aplat */
.encadre{background:var(--primaire);color:var(--fond);padding:40px;box-shadow:8px 8px 0 var(--texte);max-width:900px}
.encadre h3,.encadre p,.encadre a,.encadre li{color:var(--fond)}
.encadre h3{font-size:28px;margin-bottom:12px}
.encadre .citation{font-family:"Gloock",serif;font-size:26px;line-height:1.3;margin:0 0 16px;max-width:30ch}
.encadre .btn{background:var(--fond);color:var(--texte);box-shadow:4px 4px 0 var(--texte)}
.encadre .etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;list-style:none;max-width:none}
.encadre .etapes li{border-top:3px double var(--fond);padding-top:12px}
.encadre .etapes strong{display:block;font-family:"Gloock",serif;font-weight:400;font-size:21px;margin-bottom:6px}

/* 4. liste numérotée / index */
.index{list-style:none;margin:0;padding:0;counter-reset:idx;border-top:3px double var(--filet);max-width:none}
.index li{counter-increment:idx;display:grid;grid-template-columns:64px 1fr;gap:16px;padding:20px 0;border-bottom:3px double var(--filet)}
.index li::before{content:counter(idx);font-family:"Gloock",serif;font-size:28px;line-height:1;color:var(--accent)}
.index h3{margin:0 0 6px}
.index p{margin:0 0 6px}
.index p:last-child{margin:0}
.index .picto{width:28px;height:28px;margin-bottom:8px;display:block}

/* 5. texte + note de marge */
.note{display:grid;grid-template-columns:1fr 220px;gap:40px;align-items:start}
.marge{font-size:13px;line-height:1.45;border-left:3px double var(--filet);padding-left:16px}
.marge p{margin:0 0 8px}
.marge .tampon{margin:8px 0 0}

/* 6. texte pleine largeur en grand corps */
.grand{font-family:"Gloock",serif;font-size:28px;line-height:1.3;max-width:30ch;margin:0 0 20px}

/* 7. bande de couleur avec appel à l'action */
.bande{background:var(--primaire);color:var(--fond);padding:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.bande h2,.bande p{color:var(--fond)}
.bande h2{margin:0 0 8px}
.bande p{margin:0;max-width:48ch}

/* ---------- boutons ---------- */
.btn{display:inline-block;padding:14px 22px;background:var(--primaire);color:var(--fond);font-family:"Public Sans",sans-serif;font-weight:700;font-size:15px;line-height:1;text-decoration:none;border:0;border-radius:0;box-shadow:4px 4px 0 var(--texte);cursor:pointer;-webkit-hyphens:manual;hyphens:manual}
.btn:hover,.btn:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--texte);color:var(--fond)}
.btn-second{background:var(--surface);color:var(--texte);box-shadow:4px 4px 0 var(--primaire)}
.btn-second:hover,.btn-second:focus-visible{box-shadow:2px 2px 0 var(--primaire);color:var(--texte)}
.btn-large{width:100%;text-align:center}

/* ---------- formulaires ---------- */
.formulaire{background:var(--surface);padding:32px;box-shadow:8px 8px 0 var(--texte)}
.formulaire h2,.formulaire h3{color:var(--texte);margin-bottom:16px}
.formulaire h3{font-size:24px}
.champ{margin-bottom:16px}
.champ label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.champ .optionnel{font-weight:400}
.champ input,.champ textarea{width:100%;height:44px;border:1px solid var(--filet);background:var(--fond);color:var(--texte);font:inherit;padding:0 12px;border-radius:0;display:block}
.champ textarea{height:140px;padding:10px 12px;resize:vertical}
.champ input:focus,.champ textarea:focus{outline:0;border:2px solid var(--primaire);box-shadow:3px 3px 0 var(--filet)}
.champ .aide{display:block;font-size:13px;margin-top:4px}
.champ .erreur-champ{display:block;font-size:13px;font-weight:700;color:var(--primaire);margin-top:4px}
.champ.invalide input,.champ.invalide textarea{border:2px solid var(--primaire)}
.consent{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:14px;margin-bottom:20px}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--primaire)}
.consent label{font-weight:400;max-width:none}
.honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.message{padding:16px 20px;border:3px double var(--primaire);margin:0 0 24px;font-weight:700}
.message p{margin:0}

/* ---------- carte ---------- */
.carte{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:left;padding:24px;box-shadow:8px 8px 0 var(--texte)}
.carte iframe{width:100%;height:100%;border:0;display:block}
.carte.chargee{padding:0;display:block}
.carte p{margin:0;max-width:40ch}

/* ---------- tampon circulaire (signature) ---------- */
.tampon{width:128px;height:128px;color:var(--accent);mix-blend-mode:multiply;transform:rotate(-14deg);display:block;flex:none}
.tampon text{font-family:"Public Sans",sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- pied de page ---------- */
.pied{border-top:5px double var(--texte);margin-top:56px;padding:40px 0 48px;font-size:14px}
.pied .conteneur{display:grid;grid-template-columns:1fr 1fr auto;gap:32px;align-items:start}
.pied h2{font-size:18px;color:var(--texte);margin:0 0 10px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:6px}
.pied p{margin:0 0 6px;max-width:none}
button.lien{background:none;border:0;padding:0;font:inherit;color:var(--texte);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
button.lien:hover{color:var(--primaire)}

/* ---------- bandeau cookies ---------- */
.cookies{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:3px double var(--texte);padding:20px 24px;z-index:60}
.cookies .conteneur{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;padding:0}
.cookies p{margin:0;font-size:14px;max-width:62ch}
.cookies .actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.cookies .btn{min-width:140px;text-align:center}
.cookies a{font-size:14px}

/* ---------- landing page ---------- */
.landing-hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:48px;row-gap:0;padding:40px 0 56px;align-items:start}
.landing-hero .accroche{grid-column:1;grid-row:1}
.landing-hero .faits{grid-column:1;grid-row:2}
.landing-hero .formulaire-bloc{grid-column:2;grid-row:1/3}
.landing-hero h1{margin-bottom:16px}
.formulaire-bloc{position:relative}
.landing-hero .tampon{position:absolute;top:-48px;right:-28px}
.landing-hero .formulaire h3{padding-right:110px}
.landing-hero .faits{list-style:none;margin:24px 0 0;padding:0;border-top:3px double var(--filet)}
.landing-hero .faits li{padding:10px 0;border-bottom:3px double var(--filet);display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.identite{font-size:13px;line-height:1.45}

/* ---------- page 404 / merci ---------- */
.simple{padding:72px 0}

/* ============================================================ */
@media (max-width:1023px){
  body{padding-bottom:64px}
  body.landing{padding-bottom:0}
  .conteneur{padding:0 16px}
  h1{font-size:30px}
  h2{font-size:25px}
  h3{font-size:19px}
  .entete .conteneur{padding-top:14px;padding-bottom:14px}
  .logo img{height:36px}
  .nav-haut{display:none}
  .barre-basse{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;height:64px;background:var(--surface);border-top:3px double var(--texte);z-index:50}
  .barre-basse a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:700;font-size:11px;line-height:1;text-decoration:none;color:var(--texte)}
  .barre-basse a[aria-current="page"]{color:var(--primaire)}
  body:not(.landing) .cookies{bottom:64px}

  .mosaique{display:block;margin-top:16px}
  .photo-a{height:220px}
  .aplat{position:relative;margin:-40px 0 0;padding:24px;box-shadow:6px 6px 0 var(--texte)}
  .photos-bc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
  .photo-b,.photo-c{height:150px}
  .mosaique .tampon{top:-16px;right:8px}
  .tampon{width:88px;height:88px}
  .en-tete-page .conteneur{padding-top:28px;padding-bottom:28px;padding-right:100px}
  .en-tete-page .tampon{top:-12px;right:24px}

  .rapport{display:block;padding-top:24px}
  .toc{position:static;margin-bottom:24px;border-bottom:3px double var(--filet);padding-bottom:12px}
  .sec{padding:40px 0}
  .sec.compact{padding:32px 0}
  .sec.large{padding:48px 0}
  .defs{grid-template-columns:1fr}
  .defs dt{padding-bottom:2px;border-bottom:0}
  .defs dd{padding-top:0}
  .deux-col{grid-template-columns:1fr;gap:24px}
  .deux-col .photo{order:-1}
  .encadre{padding:24px;box-shadow:6px 6px 0 var(--texte)}
  .encadre h3{font-size:24px}
  .encadre .citation{font-size:22px}
  .encadre .etapes{grid-template-columns:1fr}
  .index li{grid-template-columns:48px 1fr;gap:12px}
  .note{grid-template-columns:1fr;gap:24px}
  .grand{font-size:22px}
  .bande{padding:24px}
  .formulaire{padding:20px;box-shadow:6px 6px 0 var(--texte)}
  .carte{box-shadow:6px 6px 0 var(--texte)}
  .pied .conteneur{grid-template-columns:1fr}
  .cookies{padding:16px}
  .cookies .btn{min-width:0;flex:1}
  .landing-hero{display:flex;flex-direction:column;padding:24px 0 40px}
  .landing-hero .faits{order:3}
  .landing-hero .tampon{top:-36px;right:-6px}
  .landing-hero .formulaire h3{padding-right:84px}
  .landing-hero .formulaire-bloc{margin-top:8px}
  .simple{padding:48px 0}
}

@media (max-width:420px){
  .cookies .actions{width:100%}
}

@media print{
  body::before,.cookies,.barre-basse{display:none}
}
