/* ============================================================
   EINA — École Innovante de Nouvelle Aquitaine
   Système de design partagé — chaleureux & doux, serif chic
   ============================================================ */

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

:root{
  /* Brand — extraits du logo EINA */
  --navy:        #163a72;   /* bleu marine principal */
  --navy-deep:   #11305f;
  --blue:        #2f5da6;   /* bleu moyen */
  --blue-soft:   #eaf0f9;
  --gold:        #cfa23f;   /* doré */
  --gold-deep:   #b88a2c;
  --gold-soft:   #f6ead0;
  --gold-tint:   #fbf3df;

  /* Neutres chauds */
  --cream:       #fcf8f0;   /* fond principal */
  --cream-2:     #f6efe1;
  --paper:       #fffdf8;
  --ink:         #23304a;   /* texte */
  --ink-soft:    #54607a;   /* texte secondaire */
  --line:        #ece2cf;

  /* Tints doux pour les "3A" */
  --tint-blue:   #eaf1fb;
  --tint-gold:   #fbf0d8;
  --tint-green:  #e9f2e7;
  --green:       #5c8a55;

  /* Forme & rythme */
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 32px;
  --r-xl: 44px;
  --shadow-sm: 0 4px 16px rgba(22,58,114,.06);
  --shadow:    0 14px 40px rgba(22,58,114,.10);
  --shadow-gold: 0 14px 40px rgba(184,138,44,.16);
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Montserrat',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:16.5px;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{
  font-family:'Montserrat',system-ui,sans-serif;
  color:var(--navy);
  line-height:1.12;
  font-weight:800;
  margin:0;
  letter-spacing:-.02em;
}
h1{font-size:clamp(2.3rem,5vw,4.1rem);line-height:1.05}
h2{font-size:clamp(1.8rem,3.4vw,2.85rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700}
p{margin:0 0 1em}
/* Parisienne — accent manuscrit chaleureux */
.serif-it,.script{font-family:'Parisienne',cursive;font-style:normal;font-weight:400}
.script{color:var(--gold-deep);line-height:1.2}
h1 .script,h2 .script{display:inline-block;font-size:1.15em;letter-spacing:0;font-weight:400;transform:translateY(.04em)}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(56px,8vw,108px)}
.eyebrow{
  font-family:'Montserrat',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;
  color:var(--gold-deep);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-soft);max-width:62ch}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lead{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:15px 28px;border-radius:999px;cursor:pointer;border:2px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-gold{background:var(--gold);color:var(--navy-deep)}
.btn-gold:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-gold)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy);background:#fff;transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(252,248,240,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s,background .3s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(22,58,114,.07);background:rgba(252,248,240,.96)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:82px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:52px;width:auto;max-width:none;object-fit:contain;transition:transform .3s}
.brand:hover img{transform:scale(1.04)}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-links > li{position:relative}
.nav-links > li > a{
  position:relative;display:flex;align-items:center;white-space:nowrap;padding:9px 13px;border-radius:10px;
  font-weight:600;font-size:.92rem;color:var(--ink);letter-spacing:.005em;
  transition:color .2s;
}
.nav-links > li > a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.5,0,.2,1);
}
.nav-links > li > a:hover,.nav-links > li > a.active{color:var(--navy)}
.nav-links > li:hover > a::after,.nav-links > li > a.active::after{transform:scaleX(1)}
.nav-links .has-caret > a{gap:5px}
.nav-links .has-caret > a::before{content:"";width:5px;height:5px;border-right:1.6px solid var(--gold-deep);border-bottom:1.6px solid var(--gold-deep);transform:rotate(45deg) translateY(-1px);margin-left:3px;order:2;transition:transform .25s}
.nav-links .has-caret:hover > a::before{transform:rotate(225deg) translateY(-1px)}
.nav-links a.lock{gap:7px}
.nav-links a.lock svg{width:13px;height:13px;opacity:.7}
.submenu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);min-width:238px;background:var(--paper);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:9px;
  list-style:none;margin:0;opacity:0;visibility:hidden;transition:.24s cubic-bezier(.5,0,.2,1);
}
.submenu::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--paper);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.submenu::after{content:"";position:absolute;top:0;left:16px;right:16px;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));border-radius:3px}
.nav-links > li:hover .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:block;padding:10px 14px;font-size:.9rem;font-weight:500;border-radius:10px;color:var(--ink-soft);transition:background .18s,color .18s,padding-left .18s}
.submenu a:hover{background:var(--blue-soft);color:var(--navy);padding-left:18px}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:26px;height:2.5px;background:var(--navy);border-radius:3px;margin:5px 0;transition:.25s}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media(max-width:1040px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:82px;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:14px var(--pad) 26px;box-shadow:var(--shadow);
  }
  .nav.open .nav-links > li > a{padding:13px 12px;font-size:1rem;border-radius:12px}
  .nav.open .nav-links > li > a::after{display:none}
  .nav.open .nav-links > li > a:hover,.nav.open .nav-links > li > a.active{background:var(--blue-soft)}
  .nav.open .has-caret > a::before{margin-left:auto}
  .nav.open .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:2px 0 6px 12px;background:transparent;min-width:0}
  .nav.open .submenu::before,.nav.open .submenu::after{display:none}
  .nav.open .submenu a{padding:9px 12px}
}

/* ---------- Placeholder image ---------- */
.ph{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:
    repeating-linear-gradient(45deg,#efe5d0,#efe5d0 11px,#f5ecda 11px,#f5ecda 22px);
  display:flex;align-items:center;justify-content:center;min-height:200px;
}
.ph::after{
  content:attr(data-label);
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:#a2906a;background:rgba(252,248,240,.82);padding:7px 13px;border-radius:999px;
  border:1px solid #e3d4b4;text-align:center;max-width:80%;
}
.ph-blue{background:repeating-linear-gradient(45deg,#dce6f5,#dce6f5 11px,#e7eef9 11px,#e7eef9 22px)}
.ph-blue::after{color:#5d7bab;background:rgba(255,255,255,.85);border-color:#cdddf2}
/* hotlinked photo fill */
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph-has-img::after{display:none}
.ph-has-img{background:var(--blue-soft)}

/* ---------- Cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.grid{display:grid;gap:clamp(18px,2.4vw,32px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* Blob / organic shapes */
.blob{border-radius:42% 58% 56% 44% / 50% 46% 54% 50%}

/* Pills / chips */
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--gold-tint);color:var(--gold-deep);font-weight:800;font-size:.82rem;padding:8px 16px;border-radius:999px;border:1px solid var(--gold-soft)}

/* underline accent */
.u-gold{position:relative;white-space:nowrap}
@media(max-width:640px){.u-gold{white-space:normal}}
.u-gold::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.32em;background:var(--gold-soft);z-index:-1;border-radius:4px}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#dde6f3;padding-block:clamp(48px,6vw,80px) 0}
.site-footer h4{color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.site-footer a{color:#c2d0e6;font-size:.95rem;transition:color .2s}
.site-footer a:hover{color:var(--gold-soft)}
.footer-word{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.9rem;color:#fff;letter-spacing:.14em}
.footer-word small{display:block;font-family:'Parisienne',cursive;font-weight:400;font-size:1.15rem;letter-spacing:.02em;color:var(--gold-soft);text-transform:none;margin-top:6px}
.footer-bottom{margin-top:48px;border-top:1px solid rgba(255,255,255,.14);padding:22px 0;font-size:.84rem;color:#9fb1cd;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.soc{display:flex;gap:10px}
.soc a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center}
.soc a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.soc svg{width:18px;height:18px}

/* contact info row */
.info-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.info-row .ico{flex:none;width:42px;height:42px;border-radius:12px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center}
.info-row .ico svg{width:20px;height:20px}

/* reveal on scroll — never animate opacity (a frozen opacity transition can strand content at 0
   in offscreen/preview contexts). Animate transform only: worst case = a small harmless offset. */
.reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  html.js .reveal{transform:translateY(22px);transition:transform .6s ease}
  html.js .reveal.in{transform:none}
}

/* ---------- Inner page hero — bleu immersif (Direction B) ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.page-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(70% 90% at 90% -10%, rgba(207,162,63,.20), transparent 55%),
  radial-gradient(60% 90% at 0% 110%, rgba(47,93,166,.5), transparent 55%)}
.page-hero .wrap{position:relative;padding-block:clamp(40px,6vw,76px)}
.crumbs{font-size:.84rem;color:#9fb1cd;font-weight:600;margin-bottom:18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-hero .crumbs a{color:var(--gold-soft)}
.crumbs a{color:var(--gold-deep)}
.crumbs span{opacity:.5}
.page-hero h1{max-width:18ch;color:#fff}
.page-hero .eyebrow{color:var(--gold-soft)}
.page-hero .lead{margin-top:18px;color:#cfd9ec}
.page-hero .u-gold::after{background:rgba(207,162,63,.42)}
.page-hero .btn-primary{background:var(--gold);color:var(--navy-deep)}
.page-hero .btn-primary:hover{background:var(--gold-deep);color:#fff}
.page-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.32)}
.page-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.page-hero.compact .wrap{padding-block:clamp(34px,4.5vw,56px)}

/* prose */
.prose{max-width:68ch}
.prose p{color:var(--ink-soft)}
.prose h3{margin:1.6em 0 .5em}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.split.aside{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr)}
/* 960 et non 840 : entre les deux, la colonne qui porte un formulaire ne peut
   pas descendre sous la largeur intrinsèque de ses champs et pousse l'autre
   colonne hors de l'écran. Voir le garde-fou anti-débordement plus bas. */
@media(max-width:960px){.split,.split.aside{grid-template-columns:minmax(0,1fr)}}
.feature-img .ph{aspect-ratio:4/3;min-height:0}

/* info card / pricing */
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px)}
.tile .ico{width:46px;height:46px;border-radius:13px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center;margin-bottom:16px}
.tile .ico svg{width:22px;height:22px}
.tile h3{font-size:1.25rem;margin:0 0 8px}
.tile p{color:var(--ink-soft);margin:0;font-size:.96rem}
.price{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.9rem;color:var(--navy);line-height:1.1}
.price small{font-family:'Montserrat',sans-serif;font-weight:500;font-size:.82rem;color:var(--ink-soft)}
.list-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.list-check li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.list-check .tk{flex:none;width:24px;height:24px;border-radius:50%;background:var(--tint-green);color:var(--green);display:grid;place-items:center}
.list-check .tk svg{width:14px;height:14px}

/* form */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-weight:700;font-size:.9rem;color:var(--navy)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;padding:13px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}

/* utility */
.tac{text-align:center}
.mt-s{margin-top:14px}.mt{margin-top:28px}.mt-l{margin-top:48px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   ESPACE PARENTS
   ============================================================ */
/* nav lock link */
.nav-links a.lock{display:inline-flex;align-items:center;gap:7px}
.nav-links a.lock svg{width:14px;height:14px;opacity:.7}

/* --- Login --- */
.auth{min-height:calc(100vh - 84px);display:grid;place-items:center;position:relative;overflow:hidden;
  background:var(--navy);padding:clamp(28px,5vw,60px) var(--pad)}
.auth::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 70% at 88% 8%, rgba(207,162,63,.22), transparent 55%),
  radial-gradient(60% 70% at 0% 100%, rgba(47,93,166,.55), transparent 55%)}
.auth-card{position:relative;width:100%;max-width:440px;background:var(--paper);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:clamp(28px,4vw,44px)}
.auth-card .logo{height:54px;width:auto;margin:0 auto 22px;display:block}
.auth-card h1{font-size:clamp(1.5rem,3vw,2rem);text-align:center}
.auth-card .sub{text-align:center;color:var(--ink-soft);margin:8px 0 26px;font-size:.96rem}
.auth-hint{background:var(--blue-soft);border:1px solid #d9e5f6;border-radius:14px;padding:12px 16px;font-size:.85rem;color:var(--navy);margin-top:18px}
.auth-hint b{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:.02em}
.auth-err{display:none;background:#fdeceb;border:1px solid #f6c9c5;color:#b3261e;border-radius:12px;padding:11px 15px;font-size:.9rem;font-weight:700;margin-bottom:6px}
.auth-err.show{display:block}

/* --- Dashboard shell --- */
.dash{display:grid;grid-template-columns:268px 1fr;min-height:calc(100vh - 84px)}
/* Portail : masque le menu public une fois connecté + barre dédiée */
.portal-bar{display:none}
body.logged .site-header{display:none}
body.logged .portal-bar{display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:70;height:64px;background:var(--paper);border-bottom:1px solid var(--line);padding:0 clamp(14px,3vw,26px);box-shadow:0 2px 14px rgba(22,58,114,.06)}
.pb-brand{display:flex;align-items:center}
.pb-brand img{height:42px;width:auto}
.pb-badge{display:inline-flex;align-items:center;gap:7px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-tint);border:1px solid var(--gold-soft);padding:6px 13px;border-radius:999px}
.pb-badge svg{width:14px;height:14px}
.pb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.pb-link{display:inline-flex;align-items:center;gap:7px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.9rem;color:var(--navy);padding:9px 16px;border-radius:999px;transition:.16s}
.pb-link svg{width:16px;height:16px}
.pb-link:hover{background:var(--blue-soft)}
.pb-logout{display:inline-flex;align-items:center;gap:7px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink-soft);background:none;border:1px solid var(--line);padding:9px 16px;border-radius:999px;cursor:pointer;transition:.16s}
.pb-logout svg{width:16px;height:16px}
.pb-logout:hover{border-color:var(--navy);color:var(--navy);background:#fff}
.dash-backsite{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:11px;color:#c2d0e6;font-weight:700;font-size:.9rem;cursor:pointer;transition:.16s}
.dash-backsite svg{width:18px;height:18px;flex:none}
.dash-backsite:hover{background:rgba(255,255,255,.07);color:#fff}
.dash-side{background:var(--navy);color:#dde6f3;padding:18px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto;scrollbar-width:none}
.dash-side::-webkit-scrollbar{display:none}
.dash-who{display:flex;align-items:center;gap:12px;padding:0 8px 14px;margin-bottom:5px;border-bottom:1px solid rgba(255,255,255,.12)}
.dash-who .av{width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--navy-deep);display:grid;place-items:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.1rem;flex:none}
.dash-who b{color:#fff;font-size:.98rem;display:block;line-height:1.2}
.dash-who span{font-size:.8rem;color:#9fb1cd}
.dash-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.dash-nav a{position:relative;display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:11px;color:#c2d0e6;font-weight:600;font-size:.92rem;cursor:pointer;transition:background .18s,color .18s}
.dash-nav a svg{width:19px;height:19px;flex:none;opacity:.85;transition:opacity .18s,color .18s}
.dash-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.dash-nav a:hover svg{opacity:1}
.dash-nav a.active{background:var(--gold);color:var(--navy-deep);font-weight:700}
.dash-nav a.active svg{opacity:1}
.dash-nav a.active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:4px;height:22px;background:var(--gold);border-radius:0 4px 4px 0}
.dash-nav a .dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(207,162,63,.22)}
.dash-nav a.active .dot{background:var(--navy-deep);box-shadow:none}
.dash-logout{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-top:6px;border-radius:11px;color:#9fb1cd;font-weight:700;font-size:.9rem;cursor:pointer;border:1px solid rgba(255,255,255,.14)}
.dash-logout:hover{background:rgba(255,255,255,.06);color:#fff}
.dash-logout svg{width:18px;height:18px}
.dash-main{padding:var(--dm-pad);--dm-pad:clamp(20px,3.5vw,48px);background:var(--cream);min-width:0}
.dash-head{margin-bottom:30px}
.dash-head h1{font-size:clamp(1.6rem,3vw,2.3rem)}

/* mobile top bar + drawer */
.dash-topbar{display:none}
.dash-backdrop{display:none}
.dash-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;padding:0 11px}
.dash-burger span{display:block;height:2.5px;background:var(--navy);border-radius:3px}
@media(max-width:900px){
  body.logged .portal-bar{display:none}
  .dash{grid-template-columns:1fr}
  .dash-side{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:284px;max-width:86vw;z-index:130;transform:translateX(-102%);transition:transform .32s cubic-bezier(.5,0,.2,1);box-shadow:0 0 50px rgba(0,0,0,.35);padding-top:22px}
  .dash.drawer-open .dash-side{transform:none}
  .dash-backdrop{display:block;position:fixed;inset:0;background:rgba(12,22,45,.5);opacity:0;visibility:hidden;transition:.3s;z-index:120}
  .dash.drawer-open .dash-backdrop{opacity:1;visibility:visible}
  .dash-topbar{display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:60;background:rgba(252,248,240,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:11px 14px;margin:calc(-1*var(--dm-pad)) calc(-1*var(--dm-pad)) 22px}
  .dt-title{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--navy);font-size:1.02rem}
  .dt-logo{height:30px;width:auto}
  .dt-av{margin-left:auto;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy-deep);display:grid;place-items:center;font-weight:800;font-size:.9rem}
}
.dt-logo{display:none}
.dash-head p{color:var(--ink-soft);margin:8px 0 0}

.view{display:none}
.view.active{display:block;animation:fadeUp .4s ease}
@keyframes fadeUp{from{transform:translateY(10px)}to{transform:none}}

/* status badges */
.badge{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.78rem;padding:6px 13px;border-radius:999px;white-space:nowrap}
.badge svg{width:14px;height:14px}
.badge.done{background:var(--tint-green);color:#3c7a3a;border:1px solid #cfe6c9}
.badge.todo{background:var(--gold-tint);color:var(--gold-deep);border:1px solid var(--gold-soft)}

/* ===== TABLEAU DE BORD (refonte) ===== */
.dash-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--navy),var(--navy-deep));color:#fff;border-radius:var(--r-lg);padding:clamp(24px,3vw,34px) clamp(24px,3vw,38px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.dh-glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(207,162,63,.28),transparent 70%);right:-80px;top:-140px;pointer-events:none}
.dh-left{display:flex;align-items:center;gap:18px;position:relative;z-index:1}
.dh-av{width:64px;height:64px;border-radius:20px;background:var(--gold);color:var(--navy-deep);display:grid;place-items:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.8rem;flex:none;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.dh-hello{margin:0;color:#cfd9ec;font-size:.95rem;font-weight:600}
.dh-name{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);margin:2px 0 8px}
.dh-meta{display:flex;flex-wrap:wrap;gap:8px}
.dh-chip{font-size:.8rem;font-weight:700;padding:5px 13px;border-radius:999px;background:var(--gold);color:var(--navy-deep)}
.dh-chip.ghost{background:rgba(255,255,255,.12);color:#e6eefb;text-transform:capitalize}
.dh-right{position:relative;z-index:1}
.dh-year{color:#cfd9ec;font-size:.82rem;text-align:right;display:block;line-height:1.4}
.dh-year b{color:var(--gold-soft);font-size:1.1rem}

/* à finaliser */
.todo-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px clamp(22px,2.6vw,30px);margin-bottom:22px;box-shadow:var(--shadow-sm)}
.todo-card.done{display:flex;align-items:center;gap:18px;background:var(--tint-green);border-color:#cfe6c9}
.todo-card.done .tc-icon{width:52px;height:52px;border-radius:50%;background:#3c7a3a;color:#fff;display:grid;place-items:center;flex:none}
.todo-card.done .tc-icon svg{width:26px;height:26px}
.todo-card.done h2{color:#2f6a2d;font-size:1.3rem}
.todo-card.done p{margin:2px 0 0;color:#4a7a47}
.tc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.tc-kicker{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep)}
.tc-head h2{font-size:1.35rem;margin:4px 0 0}
.tc-ring{--p:0;width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--gold-soft) 0)}
.tc-ring span{width:44px;height:44px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-weight:800;font-size:.82rem;color:var(--navy)}
.tc-list{display:flex;flex-direction:column;gap:10px}
.tc-item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;transition:.16s}
.tc-item:hover{border-color:var(--gold);background:var(--gold-tint);transform:translateX(3px)}
.tc-dot{width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 0 4px rgba(207,162,63,.18)}
.tc-label{flex:1;font-weight:600;color:var(--navy)}
.tc-cta{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.86rem;color:var(--gold-deep);white-space:nowrap}
.tc-cta svg{width:15px;height:15px}

/* statistiques */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
@media(max-width:820px){.stat-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.stat-row{grid-template-columns:1fr}}
.stat{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;gap:6px}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.st-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px}
.st-ic svg{width:22px;height:22px}
.stat.blue .st-ic{background:var(--tint-blue);color:var(--blue)}
.stat.gold .st-ic{background:var(--gold-tint);color:var(--gold-deep)}
.stat.rose .st-ic{background:#fdeceb;color:#c0564e}
.stat.green .st-ic{background:var(--tint-green);color:var(--green)}
.st-val{font-family:'Montserrat',sans-serif;font-weight:800;font-size:2rem;color:var(--navy);line-height:1}
.st-val.sm{font-size:1.5rem}
.st-lbl{font-size:.85rem;color:var(--ink-soft);font-weight:600}

/* deux colonnes */
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
@media(max-width:820px){.dash-cols{grid-template-columns:1fr}}
.dash-block{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px clamp(18px,2.4vw,26px);box-shadow:var(--shadow-sm)}
.db-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.db-head h2{font-size:1.15rem}
.db-tag{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-deep);background:var(--gold-tint);padding:4px 11px;border-radius:999px}
.db-link{background:none;border:0;color:var(--gold-deep);font-weight:800;font-size:.86rem;cursor:pointer}
.db-link:hover{text-decoration:underline}

/* agenda */
.agenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ag-item{display:flex;align-items:center;gap:15px}
.ag-date{width:52px;height:52px;border-radius:14px;background:var(--navy);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.ag-date b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.25rem;line-height:1}
.ag-date small{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-soft)}
.ag-txt{display:flex;flex-direction:column}
.ag-txt b{color:var(--navy);font-size:.98rem}
.ag-txt small{color:var(--ink-soft);font-size:.85rem}

/* aperçu messages */
.msg-preview{display:flex;flex-direction:column;gap:4px}
.mp-item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:none;border:0;border-radius:12px;padding:11px 12px;cursor:pointer;transition:.15s}
.mp-item:hover{background:var(--cream)}
.mp-av{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.82rem;flex:none}
.mp-av.gold{background:var(--gold);color:var(--navy-deep)}
.mp-txt{flex:1;min-width:0}
.mp-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.mp-top b{color:var(--navy);font-size:.92rem}
.mp-top time{font-size:.72rem;color:var(--ink-soft);flex:none}
.mp-sub{display:block;font-size:.85rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-item.unread .mp-top b,.mp-item.unread .mp-sub{font-weight:700;color:var(--navy)}
.mp-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}

/* accès rapides */
.quick-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:26px}
@media(max-width:820px){.quick-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.quick-tiles{grid-template-columns:repeat(2,1fr)}}
.qtile{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 10px;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.88rem;color:var(--navy);transition:.18s}
.qtile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-soft)}
.qt-ic{position:relative;width:46px;height:46px;border-radius:14px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center;transition:.18s}
.qtile:hover .qt-ic{background:var(--gold-tint);color:var(--gold-deep)}
.qt-ic svg{width:23px;height:23px}
.qt-badge{position:absolute;top:-9px;right:-9px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#e0392b;color:#fff;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.78rem;display:grid;place-items:center;border:2.5px solid var(--paper);box-shadow:0 3px 10px rgba(224,57,43,.5);z-index:2}
@media(prefers-reduced-motion:no-preference){.qt-badge{animation:qtPulse 2s ease-in-out infinite}}
@keyframes qtPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,57,43,.5)}50%{box-shadow:0 0 0 6px rgba(224,57,43,0)}}

/* overview cards */
.ov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:680px){.ov-grid{grid-template-columns:1fr}}
.ov-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:14px;transition:transform .25s,box-shadow .25s;cursor:pointer}
.ov-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ov-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:14px;transition:transform .25s,box-shadow .25s,border-color .25s;cursor:pointer;overflow:hidden}
.ov-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));opacity:0;transition:opacity .25s}
.ov-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-soft)}
.ov-card:hover::before{opacity:1}
.ov-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ov-card .ic{width:52px;height:52px;border-radius:15px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center;flex:none}
.ov-card .ic svg{width:24px;height:24px}
.ov-card h3{font-size:1.18rem;margin:0}
.ov-card p{color:var(--ink-soft);font-size:.93rem;margin:0;flex:1;line-height:1.55}
.ov-card .go{color:var(--gold-deep);font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:8px;margin-top:2px}
.ov-card .go svg{width:16px;height:16px;flex:none;transition:transform .25s}
.ov-card:hover .go svg{transform:translateX(4px)}

/* nav group accordion */
.nav-solo{margin-bottom:2px}
.dash-nav .nav-sec{border-top:1px solid rgba(255,255,255,.09);margin:4px 8px 0;padding-top:4px}
.dash-nav .nav-group{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;cursor:pointer;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:10px 6px;text-align:left;transition:color .18s}
.dash-nav .nav-group:hover{color:var(--gold-soft)}
.nav-caret{width:15px;height:15px;flex:none;transition:transform .25s;opacity:.7}
.nav-sec.open .nav-caret{transform:rotate(180deg)}
.nav-items{display:none;padding-bottom:0}
.nav-sec.open .nav-items{display:block;padding-bottom:4px;animation:navReveal .24s ease}
@keyframes navReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dash-nav a .pill{margin-left:auto;background:var(--gold);color:var(--navy-deep);font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:999px;line-height:1.5}
.dash-nav a.active .pill{background:var(--navy-deep);color:#fff}

/* generic dash section head with action */
.dash-head.row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ===== FACTURES ===== */
.inv-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
@media(max-width:680px){.inv-summary{grid-template-columns:1fr}}
.inv-stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px}
.inv-stat .lbl{font-size:.82rem;color:var(--ink-soft);font-weight:600}
.inv-stat .val{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.9rem;color:var(--navy);line-height:1.1;margin-top:6px}
.inv-stat.due .val{color:var(--gold-deep)}
.inv-list{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.inv-row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:18px;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line);transition:background .18s}
.inv-row:last-child{border-bottom:0}
.inv-row:hover{background:var(--cream)}
.inv-row .ic{width:42px;height:42px;border-radius:11px;background:var(--blue-soft);color:var(--navy);display:grid;place-items:center;flex:none}
.inv-row .ic svg{width:20px;height:20px}
.inv-row .meta b{display:block;color:var(--navy);font-weight:700}
.inv-row .meta span{font-size:.84rem;color:var(--ink-soft)}
.inv-row .amt{font-weight:800;color:var(--navy);font-size:1.05rem;white-space:nowrap}
.inv-status{font-size:.76rem;font-weight:800;padding:5px 12px;border-radius:999px;white-space:nowrap}
.inv-status.paid{background:var(--tint-green);color:#3c7a3a}
.inv-status.open{background:var(--gold-tint);color:var(--gold-deep)}
.inv-dl{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);background:#fff;cursor:pointer;transition:.18s}
.inv-dl:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.inv-dl svg{width:18px;height:18px}
@media(max-width:640px){.inv-row{grid-template-columns:auto 1fr auto;row-gap:10px}.inv-row .inv-status{grid-column:2/4}.inv-row .inv-dl{grid-row:1/3}}

/* ===== MESSAGERIE (client e-mail) ===== */
.mail{display:grid;grid-template-columns:340px 1fr;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-height:560px}
@media(max-width:820px){.mail{grid-template-columns:1fr}.mail-read:not(.has-mail){display:none}}
.mail-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.mail-folders{padding:12px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--line)}
.mf{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;font-weight:700;font-size:.92rem;color:var(--ink-soft);cursor:pointer;transition:.16s}
.mf svg{width:19px;height:19px;flex:none}
.mf:hover{background:var(--cream);color:var(--navy)}
.mf.active{background:var(--blue-soft);color:var(--navy)}
.mf-count{margin-left:auto;background:var(--gold);color:var(--navy-deep);font-size:.72rem;font-weight:800;min-width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.mail-list{flex:1;overflow-y:auto;min-width:0}
.mail-empty-list{padding:30px 20px;color:var(--ink-soft);text-align:center;font-size:.9rem}
.mail-item{display:flex;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s;position:relative}
.mail-item:hover{background:var(--cream)}
.mail-item.active{background:var(--blue-soft)}
.mail-item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.mail-item .av{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;flex:none;font-size:.86rem}
.mail-item .av.gold{background:var(--gold);color:var(--navy-deep)}
.mail-item .mi-main{flex:1;min-width:0}
.mail-item .mi-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.mail-item .mi-top b{font-size:.92rem;color:var(--navy);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-item .mi-top time{font-size:.72rem;color:var(--ink-soft);flex:none}
.mail-item .mi-subject{font-size:.9rem;color:var(--ink);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-item .mi-prev{font-size:.82rem;color:var(--ink-soft);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-item.unread .mi-top b,.mail-item.unread .mi-subject{font-weight:800;color:var(--navy)}
.mail-item .mi-flags{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.mail-item .unread{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.mail-item .clip{width:15px;height:15px;color:var(--ink-soft)}
/* reading pane */
.mail-read{overflow-y:auto;background:#fff}
.mail-empty{height:100%;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#aab4c6}
.mail-empty svg{width:64px;height:64px}
.mail-empty p{font-size:.95rem}
.mr-head{padding:28px clamp(22px,3vw,40px) 20px;border-bottom:1px solid var(--line)}
.mr-subject{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0 0 18px}
.mr-from{display:flex;align-items:center;gap:14px}
.mr-from .av{width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.mr-from .av.gold{background:var(--gold);color:var(--navy-deep)}
.mr-fromtext{flex:1;min-width:0}
.mr-fromtext b{color:var(--navy);font-size:1.02rem}
.mr-fromtext small{display:block;color:var(--ink-soft);font-size:.84rem;margin-top:1px}
.mr-from time{font-size:.82rem;color:var(--ink-soft);flex:none;align-self:flex-start}
.mr-tag{display:inline-block;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px;background:var(--tint-blue);color:var(--blue);margin-left:8px;vertical-align:middle}
.mr-tag.group{background:var(--gold-tint);color:var(--gold-deep)}
.mr-to{font-size:.82rem;color:var(--ink-soft);margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.mr-body{padding:24px clamp(22px,3vw,40px);color:var(--ink);line-height:1.7;font-size:.98rem}
.mr-body p{margin:0 0 1em}
.mr-body p:last-child{margin-bottom:0}
.mr-atts{padding:0 clamp(22px,3vw,40px) 24px;display:flex;flex-wrap:wrap;gap:12px}
.mr-atts-h{width:100%;font-weight:700;font-size:.82rem;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:2px}
.mr-atts-h svg{width:16px;height:16px;color:var(--gold-deep)}
.att-chip{display:inline-flex;align-items:center;gap:12px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:11px 14px;cursor:pointer;transition:.16s;text-align:left}
.att-chip:hover{border-color:var(--navy);background:#fff;box-shadow:var(--shadow-sm)}
.att-ic{width:40px;height:40px;border-radius:9px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:.66rem;font-weight:800;letter-spacing:.02em;flex:none}
.att-meta b{display:block;color:var(--navy);font-size:.88rem;font-weight:700}
.att-meta small{color:var(--ink-soft);font-size:.78rem}
.att-chip svg{width:18px;height:18px;color:var(--navy);flex:none}
.mr-actions{padding:0 clamp(22px,3vw,40px) 28px}
.mr-actions .btn svg{width:17px;height:17px}
.mr-note{margin:0 clamp(22px,3vw,40px) 28px;background:var(--gold-tint);border:1px solid var(--gold-soft);border-radius:12px;padding:14px 18px;font-size:.88rem;color:var(--gold-deep)}
/* quick actions bar */
.msg-quick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.msg-quick .mq-lbl{font-weight:700;font-size:.85rem;color:var(--ink-soft)}
.mq-chip{font-family:'Montserrat',sans-serif;font-weight:600;font-size:.86rem;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:.18s}
.mq-chip:hover{border-color:var(--gold);background:var(--gold-tint);color:var(--gold-deep)}
/* compose modal */
.compose-modal{position:fixed;inset:0;z-index:210;background:rgba(12,22,45,.6);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:24px}
.compose-modal.open{display:flex;animation:fadeUp .28s ease}
.compose-card{width:100%;max-width:560px;background:var(--paper);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;max-height:92vh;display:flex;flex-direction:column}
.compose-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.compose-head b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.2rem;color:var(--navy)}
.compose-head button{width:36px;height:36px;border-radius:50%;border:0;background:var(--cream);color:var(--ink-soft);font-size:1rem;cursor:pointer}
.compose-head button:hover{background:var(--line)}
.compose-body{padding:22px 24px;overflow-y:auto}
.cf-label{display:block;font-weight:700;font-size:.82rem;color:var(--navy);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.compose-body .cf-label:not(:first-child){margin-top:22px}
.cf-input{width:100%;font-family:inherit;font-size:.98rem;padding:13px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}
.cf-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.recip-list{display:flex;flex-direction:column;gap:10px}
.recip{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:.16s}
.recip:hover{border-color:var(--blue)}
.recip:has(input:checked){border-color:var(--navy);background:var(--blue-soft)}
.recip input{width:19px;height:19px;accent-color:var(--navy);cursor:pointer;flex:none}
.recip .av{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy-deep);display:grid;place-items:center;font-weight:800;flex:none;font-size:.9rem}
.recip b{display:block;color:var(--navy);font-size:.94rem}
.recip small{color:var(--ink-soft);font-size:.82rem}
.quick-actions{display:flex;flex-wrap:wrap;gap:9px}
.compose-body textarea{width:100%;font-family:inherit;font-size:.96rem;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);resize:vertical;line-height:1.5}
.compose-body textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.compose-foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid var(--line);background:var(--cream)}
.compose-ok{display:none;align-items:center;gap:7px;color:#3c7a3a;font-weight:800;font-size:.9rem;margin-right:auto}
.compose-ok.show{display:inline-flex}
.compose-ok svg{width:17px;height:17px}
.cf-atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.att-pill{display:inline-flex;align-items:center;gap:8px;background:var(--blue-soft);border:1px solid #d9e5f6;color:var(--navy);font-size:.82rem;font-weight:600;padding:6px 8px 6px 12px;border-radius:10px}
.att-pill button{width:20px;height:20px;border-radius:50%;border:0;background:rgba(22,58,114,.1);color:var(--navy);cursor:pointer;font-size:.7rem;line-height:1;display:grid;place-items:center}
.att-pill button:hover{background:var(--navy);color:#fff}
.attach-btn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:700;font-size:.88rem;color:var(--navy);background:#fff;border:1.5px dashed var(--line);border-radius:12px;padding:11px 16px;cursor:pointer;transition:.16s}
.attach-btn:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-tint)}
.attach-btn svg{width:18px;height:18px}
@media(max-width:560px){.msg-quick .mq-lbl{width:100%}}

/* ===== PHOTOS (style album) ===== */
.album{margin-bottom:38px}
.album-head{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.album-head h3{margin:0}
.album-head .count{font-size:.82rem;color:var(--ink-soft);font-weight:600}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px 22px;padding:6px 4px}
.photo-frame{background:#fff;padding:11px 11px 0;border-radius:3px;box-shadow:0 5px 16px rgba(22,58,114,.14),0 1px 3px rgba(22,58,114,.1);cursor:pointer;display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.5,0,.2,1),box-shadow .28s;transform:rotate(-1.4deg)}
.photo-frame:nth-child(even){transform:rotate(1.5deg)}
.photo-frame:nth-child(3n){transform:rotate(-.6deg)}
.photo-frame:hover{transform:rotate(0deg) translateY(-6px) scale(1.03);box-shadow:0 18px 40px rgba(22,58,114,.24);z-index:3}
.photo-frame .pic{aspect-ratio:1;overflow:hidden;background:var(--blue-soft)}
.photo-frame .pic img{width:100%;height:100%;object-fit:cover}
.photo-frame figcaption{font-family:'Parisienne',cursive;font-size:1.35rem;color:#6a6152;text-align:center;padding:8px 4px 14px;line-height:1}

/* ===== LIGHTBOX ===== */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(12,22,45,.93);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:clamp(20px,5vw,60px)}
.lightbox.open{display:flex;animation:fadeUp .3s ease}
.lb-figure{margin:0;max-width:min(860px,90vw);background:#fff;padding:16px 16px 0;border-radius:4px;box-shadow:0 40px 90px rgba(0,0,0,.55);display:flex;flex-direction:column}
.lb-figure .lb-pic{max-height:74vh;overflow:hidden;background:#eee;display:flex;align-items:center;justify-content:center}
.lb-figure img{max-width:100%;max-height:74vh;object-fit:contain;display:block}
.lb-figure figcaption{text-align:center;padding:12px 10px 16px}
.lb-figure figcaption span{font-family:'Parisienne',cursive;font-size:1.7rem;color:#4a4234;display:block;line-height:1.1}
.lb-figure figcaption small{font-family:'Montserrat',sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.lb-close{position:absolute;top:22px;right:26px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:1.3rem;cursor:pointer;transition:background .2s}
.lb-close:hover{background:rgba(255,255,255,.3)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.lb-nav svg{width:26px;height:26px}
.lb-nav:hover{background:rgba(255,255,255,.3)}
.lb-nav.prev{left:clamp(12px,3vw,34px)}.lb-nav.next{right:clamp(12px,3vw,34px)}
.lb-count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#fff;font-size:.86rem;font-weight:600;background:rgba(0,0,0,.32);padding:7px 18px;border-radius:999px}
@media(max-width:560px){.lb-nav{width:46px;height:46px}.lb-figure{padding:10px 10px 0}}

/* ===== CANTINE ===== */
.cal-info{display:flex;gap:13px;align-items:flex-start;background:var(--gold-tint);border:1px solid var(--gold-soft);border-radius:16px;padding:15px 20px;margin-bottom:18px;font-size:.92rem;color:var(--navy);line-height:1.5}
.cal-info svg{width:22px;height:22px;color:var(--gold-deep);flex:none;margin-top:1px}
.cal-info b{color:var(--gold-deep)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-nav button{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;display:grid;place-items:center;transition:.18s}
.cal-nav button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.cal-nav button svg{width:18px;height:18px}
.cal-month{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--navy);font-size:1.2rem;min-width:180px;text-align:center;text-transform:capitalize}
.cal-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.84rem;color:var(--ink-soft);margin-bottom:18px}
.cal-legend span{display:inline-flex;align-items:center;gap:7px}
.cal-legend i{width:14px;height:14px;border-radius:5px;display:inline-block}
.calendar{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm)}
.cal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.cal-dow{text-align:center;font-weight:700;font-size:.8rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;padding-bottom:6px}
.cal-day{border:1.5px solid var(--line);border-radius:12px;padding:9px 10px;display:flex;flex-direction:column;cursor:pointer;transition:.16s;background:#fff;position:relative;min-height:70px}
.cal-day .d{font-weight:700;color:var(--navy);font-size:.95rem}
.cal-day .tag{margin-top:auto;font-size:.7rem;font-weight:700;color:var(--ink-soft)}
.cal-day:hover:not(.off):not(.locked){border-color:var(--gold);background:var(--gold-tint)}
.cal-day.booked{background:var(--tint-green);border-color:#bcdcb5}
.cal-day.booked .d{color:#3c7a3a}
.cal-day.booked .tag{color:#3c7a3a}
.cal-day.booked::after{content:"✓";position:absolute;top:8px;right:10px;color:#3c7a3a;font-weight:800}
.cal-day.off{background:repeating-linear-gradient(45deg,#f4f0e6,#f4f0e6 6px,#efe9db 6px,#efe9db 12px);cursor:not-allowed;opacity:.7}
.cal-day.off .d{color:#a99e86}
.cal-day.locked{cursor:not-allowed;opacity:.55}
.cal-day.deadline{opacity:1;background:#f6f2ea;border-color:#e6ddcc}
/* Garderie — créneaux matin/soir */
.gard-day{min-height:92px}
.gard-day.booked{background:#eef6ec;border-color:#bcdcb5}
.gard-day.booked::after{display:none}
.gard-day .slots{margin-top:auto;display:flex;gap:5px;padding-top:6px}
.gard-day .slot{flex:1;font-family:'Montserrat',sans-serif;font-size:.66rem;font-weight:700;padding:5px 2px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink-soft);cursor:pointer;transition:.14s}
.gard-day .slot:hover{border-color:var(--gold);color:var(--gold-deep)}
.gard-day .slot.on{background:var(--navy);border-color:var(--navy);color:#fff}
.gard-day.locked .slot{pointer-events:none}
/* Garderie — barre de raccourcis */
.gard-tools{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px;display:flex;flex-direction:column;gap:14px}
.gt-presets{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.gt-presets .mq-chip.clear{margin-left:auto;border-color:#f0d3cf;color:#b3261e}
.gt-presets .mq-chip.clear:hover{background:#fdeceb;border-color:#e3a9a3}
.gt-builder{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 22px;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.gt-field{display:flex;flex-direction:column;gap:8px}
.gt-lbl{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.gt-days{display:flex;gap:6px}
.gt-days button{width:44px;height:38px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-soft);font-family:'Montserrat',sans-serif;font-weight:700;font-size:.82rem;cursor:pointer;transition:.15s}
.gt-days button:hover{border-color:var(--gold)}
.gt-days button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.gt-seg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.gt-seg button{border:0;background:none;padding:9px 14px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.85rem;color:var(--ink-soft);cursor:pointer;transition:.15s;border-right:1.5px solid var(--line)}
.gt-seg button:last-child{border-right:0}
.gt-seg button:hover{background:var(--cream)}
.gt-seg button.active{background:var(--gold);color:var(--navy-deep)}
#gtApply{padding:11px 22px}
@media(max-width:640px){.gt-builder{flex-direction:column;align-items:stretch}#gtApply{width:100%;justify-content:center}}
.cal-day.deadline .d{color:#9a8f78}
.cal-day.deadline .tag{color:#b08a3a;font-weight:800}
.cal-day.deadline::after{content:"";position:absolute;top:8px;right:9px;width:13px;height:11px;border:1.6px solid #c3a875;border-top:0;border-radius:0 0 3px 3px}
.cal-day.deadline::before{content:"";position:absolute;top:5px;right:11px;width:9px;height:7px;border:1.6px solid #c3a875;border-bottom:0;border-radius:5px 5px 0 0}
.cal-empty{visibility:hidden}
.cal-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px;padding:18px 22px;background:var(--navy);border-radius:16px;color:#fff}
.cal-summary b{color:var(--gold-soft);font-size:1.3rem;font-family:'Montserrat';font-weight:800}
.cal-summary .muted{color:#cfd9ec;font-size:.9rem}

/* panels */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);margin-bottom:24px}
.panel > h2{font-size:1.5rem}
.panel .legal{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:18px 20px;color:var(--ink-soft);font-size:.94rem;margin:18px 0}
.panel .legal strong{color:var(--navy)}
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold-deep);font-weight:800;font-size:.9rem;cursor:pointer;margin-bottom:18px}
.back-link svg{width:16px;height:16px}

/* signature pad */
.sigbox{border:2px dashed var(--line);border-radius:16px;background:repeating-linear-gradient(0deg,transparent,transparent 38px,#f0e9da 38px,#f0e9da 39px);position:relative;overflow:hidden}
.sigbox canvas{display:block;width:100%;height:180px;touch-action:none;cursor:crosshair}
.sigbox .hint{position:absolute;left:18px;bottom:12px;font-size:.82rem;color:#b6a988;pointer-events:none;font-style:italic}
.sig-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px}
.sig-clear{background:none;border:0;color:var(--ink-soft);font-weight:700;font-size:.88rem;cursor:pointer;text-decoration:underline}
.signed-stamp{display:none;align-items:center;gap:14px;background:var(--tint-green);border:1px solid #cfe6c9;border-radius:16px;padding:18px 22px}
.signed-stamp.show{display:flex}
.signed-stamp .ck{width:44px;height:44px;border-radius:50%;background:#3c7a3a;color:#fff;display:grid;place-items:center;flex:none}
.signed-stamp .ck svg{width:24px;height:24px}
.signed-stamp b{color:#2f6a2d;display:block}
.signed-stamp span{color:#4a7a47;font-size:.88rem}
.signed-stamp img{height:48px;width:auto;margin-left:auto;background:#fff;border-radius:8px;padding:4px;border:1px solid #cfe6c9}

/* consent checkbox */
.consent{display:flex;gap:13px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:15px 18px;cursor:pointer;margin:8px 0}
.consent input{margin-top:3px;width:20px;height:20px;accent-color:var(--navy);flex:none;cursor:pointer}
.consent span{font-size:.93rem;color:var(--ink)}

/* fiche fieldsets */
.fset{border:1px solid var(--line);border-radius:16px;padding:22px 22px 8px;margin-bottom:22px}
.fset > legend{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.01em;color:var(--navy);font-size:1.15rem;padding:0 10px;display:flex;align-items:center;gap:10px}
.fset > legend .n{width:26px;height:26px;border-radius:8px;background:var(--gold);color:var(--navy-deep);display:grid;place-items:center;font-size:.85rem;font-weight:800}
.form-row.three{grid-template-columns:repeat(3,1fr)}
.form-row.four{grid-template-columns:1.4fr .8fr 1fr 1fr}
@media(max-width:680px){.form-row.three,.form-row.four{grid-template-columns:1fr}}
.checks{display:flex;flex-wrap:wrap;gap:10px}
.chk{display:inline-flex;align-items:center;gap:9px;background:var(--cream);border:1.5px solid var(--line);border-radius:12px;padding:10px 15px;cursor:pointer;font-weight:600;font-size:.93rem;user-select:none}
.chk input{width:18px;height:18px;accent-color:var(--navy);cursor:pointer}
.chk:has(input:checked){background:var(--blue-soft);border-color:var(--blue);color:var(--navy)}
.note-line{font-size:.85rem;color:var(--ink-soft);font-style:italic;margin-top:6px}
.subhead{font-weight:800;color:var(--navy);font-size:.95rem;margin:6px 0 12px}
.repeat-card{border:1px dashed var(--line);border-radius:14px;padding:16px;margin-bottom:14px;background:var(--cream)}
.file-field{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.file-field input[type=file]{font-size:.88rem}

/* save bar */
.savebar{position:sticky;bottom:0;background:rgba(252,248,240,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:16px 0;margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.save-ok{display:none;color:#3c7a3a;font-weight:800;align-items:center;gap:8px}
.save-ok.show{display:inline-flex}
.save-ok svg{width:18px;height:18px}

/* livret */
.livret{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.livret-top{background:var(--navy);color:#fff;padding:28px clamp(22px,3vw,36px);display:flex;align-items:center;gap:20px;flex-wrap:wrap;position:relative;overflow:hidden}
.livret-top::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 90% 0%,rgba(207,162,63,.22),transparent 55%)}
.livret-top img{height:46px;width:auto;position:relative}
.livret-top h2{color:#fff;position:relative;margin:0}
.livret-top .meta{position:relative;margin-left:auto;text-align:right;font-size:.86rem;color:#cfd9ec}
.livret-body{padding:clamp(22px,3vw,36px)}
.lv-block{margin-bottom:26px}
.lv-block h3{font-size:1.15rem;border-bottom:2px solid var(--gold-soft);padding-bottom:8px;margin-bottom:14px}
.lv-skill{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.lv-skill:last-child{border-bottom:0}
.lv-dots{display:flex;gap:6px}
.lv-dots i{width:13px;height:13px;border-radius:50%;background:var(--line)}
.lv-dots i.on{background:var(--gold)}
.lv-comment{background:var(--blue-soft);border-left:4px solid var(--blue);border-radius:0 12px 12px 0;padding:16px 20px;font-style:italic;color:var(--navy)}

/* ===== MA FAMILLE ===== */
.secure-banner{display:flex;align-items:center;gap:10px;background:none;color:var(--ink-soft);border:0;border-radius:0;padding:0;margin:-6px 0 20px}
.sb-shield{width:auto;height:auto;border-radius:0;background:none;color:var(--green);display:inline-flex;flex:none}
.sb-shield svg{width:17px;height:17px}
.sb-text{font-size:.85rem;line-height:1.4}
.sb-text b{display:inline;color:var(--navy);font-size:.85rem;font-weight:700}
.sb-text span{color:var(--ink-soft);font-size:.85rem}
.fam-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:2px}
.fam-tab{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.92rem;color:var(--ink-soft);background:none;border:0;border-bottom:3px solid transparent;padding:11px 14px;cursor:pointer;transition:.16s;margin-bottom:-2px}
.fam-tab svg{width:17px;height:17px}
.fam-tab:hover{color:var(--navy)}
.fam-tab.active{color:var(--navy);border-bottom-color:var(--gold)}
.fam-pane{display:none}
.fam-pane.active{display:block;animation:fadeUp .3s ease}
@media(max-width:560px){.fam-tab{font-size:.84rem;padding:10px}.fam-tab svg{display:none}}
.fam-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin-bottom:20px;overflow:hidden}
.fam-head{display:flex;align-items:center;gap:15px;padding:20px clamp(20px,2.6vw,28px);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--cream),var(--paper))}
.fam-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none}
.fam-ic svg{width:24px;height:24px}
.fam-ic.blue{background:var(--tint-blue);color:var(--blue)}
.fam-ic.gold{background:var(--gold-tint);color:var(--gold-deep)}
.fam-ic.green{background:var(--tint-green);color:var(--green)}
.fam-head h2{font-size:1.2rem;margin:0}
.fam-head p{margin:2px 0 0;color:var(--ink-soft);font-size:.9rem}
.fam-body{padding:clamp(20px,2.6vw,28px)}
.fam-sub{font-weight:800;color:var(--navy);font-size:.92rem;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.fam-opt,.fam-badge-year{font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-deep);background:var(--gold-tint);border:1px solid var(--gold-soft);padding:3px 9px;border-radius:999px}
.fam-badge-year{vertical-align:middle;margin-left:6px}
.upload-zone{position:relative;border:2px dashed var(--line);border-radius:16px;background:var(--cream);transition:.18s;margin-bottom:18px}
.upload-zone:hover{border-color:var(--gold);background:var(--gold-tint)}
.upload-zone.filled{border-style:solid;border-color:#cfe6c9;background:var(--tint-green)}
.uz-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:28px 20px;cursor:pointer}
.uz-ic{width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold-deep);margin-bottom:4px}
.uz-ic svg{width:24px;height:24px}
.uz-empty b{color:var(--navy);font-size:.98rem}
.uz-hint{font-size:.85rem;color:var(--ink-soft)}
.uz-hint u{color:var(--gold-deep);cursor:pointer}
.uz-file{display:flex;align-items:center;gap:14px;padding:16px 18px}
.uz-file-ic{width:44px;height:44px;border-radius:11px;background:#3c7a3a;color:#fff;display:grid;place-items:center;font-size:.66rem;font-weight:800;flex:none}
.uz-file-meta{flex:1;min-width:0}
.uz-file-meta b{display:block;color:var(--navy);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uz-file-meta small{color:#3c7a3a;font-size:.8rem;font-weight:600}
.uz-remove{width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.06);color:var(--ink);cursor:pointer;flex:none}
.uz-remove:hover{background:var(--navy);color:#fff}
.privacy{background:var(--blue-soft);border:1px solid #d9e5f6;border-radius:16px;padding:18px 20px}
.privacy-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.privacy-ic{width:34px;height:34px;border-radius:10px;background:var(--navy);color:var(--gold-soft);display:grid;place-items:center;flex:none}
.privacy-ic svg{width:19px;height:19px}
.privacy-head b{color:var(--navy);font-size:1rem}
.privacy-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.privacy-list li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--ink);line-height:1.5}
.privacy-list li svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:2px}
.privacy-list b{color:var(--navy)}

/* ===== Affinages responsive ===== */
@media(max-width:560px){
  .dash-hero{padding:22px}
  .dh-left{gap:14px}
  .dh-av{width:52px;height:52px;font-size:1.5rem;border-radius:16px}
  .dh-right{width:100%;text-align:left}
  .dh-year{text-align:left}
  .tc-head{flex-direction:row}
  .tc-item{flex-wrap:wrap;gap:8px 13px}
  .tc-cta{margin-left:auto}
  .calendar{padding:14px}
  .cal-grid{gap:6px}
  .cal-day{min-height:58px;padding:7px 6px;border-radius:10px}
  .cal-day .d{font-size:.85rem}
  .cal-day .tag{font-size:.6rem}
  .gard-day{min-height:78px}
  .gard-day .slot{font-size:.58rem;padding:4px 1px}
  .cal-month{min-width:0;font-size:1rem}
  .cal-summary{padding:14px 16px}
  .mr-head,.mr-body{padding-left:18px;padding-right:18px}
  .mr-from{flex-wrap:wrap}
  .mr-from time{order:3;width:100%}
  .att-chip{width:100%}
  .inv-summary{gap:12px}
  .gt-days button{flex:1}
  .gt-seg{width:100%}
  .gt-seg button{flex:1}
}
@media(max-width:820px){
  .mail{min-height:0}
  .mail-side{border-right:0;border-bottom:1px solid var(--line)}
  .mail-list{max-height:340px}
  .mail-read.has-mail{border-top:2px solid var(--gold-soft)}
}

@media print{
  .site-header,.site-footer,.dash-side,.dash-topbar,.savebar,.no-print{display:none!important}
  .dash{grid-template-columns:1fr}
  body{background:#fff}
  .livret,.panel{border:0;box-shadow:none}
}

/* --- garde-fous anti-débordement --- *
 *
 * POURQUOI À TOUTES LES LARGEURS, ET PLUS SEULEMENT SOUS 640 px.
 *
 * Un <input> a une largeur intrinsèque par défaut (environ 20 caractères) et,
 * dans une grille, un élément a `min-width:auto` : sa piste ne peut donc pas
 * descendre sous cette largeur. Résultat, dans les mises en page à deux
 * colonnes (contact, inscription), la colonne du formulaire refusait de
 * rétrécir et poussait la colonne voisine HORS DE L'ÉCRAN, entre le point de
 * bascule en une colonne et la largeur où tout tenait. Le site débordait donc
 * de 70 à 120 px sur toute la bande des tablettes et des petits portables,
 * une zone qu'aucun test en 1440 ou 390 px ne traverse.
 * Constaté le 28 septembre 2026 sur /contact, /inscription et /ecole.
 */
.field{min-width:0}
.field input,.field select,.field textarea{min-width:0;max-width:100%;width:100%}
.form-row > *{min-width:0}
.cf-input{min-width:0}
/* Une adresse e-mail ou un numéro ne se coupe pas tout seul : sur un écran de
   320 px, ateliermontessori.eina@gmail.com fait 291 px à lui seul et sortait
   de la page. */
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}
/* min-height combiné à aspect-ratio déduit la largeur de la hauteur : sur un
   très petit écran, le cadre 16/10 de la carte réclamait 320 px de large. */
.ph{max-width:100%}
@media(max-width:640px){
  .btn-row{justify-content:flex-start!important;min-width:0}
  .btn{max-width:100%}
}

/* --- FAQ (module eina) : accordéon balisé FAQPage --- */
.mod-eina-faq-item{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);margin-bottom:12px;overflow:hidden}
.mod-eina-faq-item[open]{box-shadow:var(--shadow-sm)}
.mod-eina-faq-item summary{cursor:pointer;list-style:none;padding:18px 54px 18px 22px;font-weight:700;color:var(--navy);position:relative;font-size:1.02rem}
.mod-eina-faq-item summary::-webkit-details-marker{display:none}
.mod-eina-faq-item summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.mod-eina-faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.mod-eina-faq-item summary:hover{background:var(--cream)}
.mod-eina-faq-body{padding:0 22px 20px;color:var(--ink-soft);font-size:.97rem}
.mod-eina-faq-body p{margin:0 0 10px}
.mod-eina-faq-body p:last-child{margin-bottom:0}
.mod-eina-faq-body a{color:var(--gold-deep);font-weight:600}
.mod-eina-faq-body ul{margin:6px 0 0;padding-left:20px}
.mod-eina-faq-body li{margin-bottom:5px}

/* --- Actualités (module eina) --- */
.mod-eina-chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.mod-eina-chips .chip{cursor:pointer;text-decoration:none}
.mod-eina-chips .chip.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.mod-eina-pagination{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:38px}
.mod-eina-page{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;font-weight:700;color:var(--navy);background:var(--paper)}
.mod-eina-page:hover{border-color:var(--navy)}
.mod-eina-page.is-current{background:var(--navy);border-color:var(--navy);color:#fff}
.mod-eina-article-cover{width:100%;height:auto;border-radius:var(--r-lg);display:block;margin-bottom:26px}
.mod-eina-article .prose>*:first-child{margin-top:0}

/* --- Formulaires branchés (module eina) --- */

/* Message d'erreur d'envoi, inséré sous le bouton par formulaires.js. */
.eina-form-err{
  margin:14px 0 0;padding:12px 15px;border-radius:12px;
  background:#fdeeec;border:1px solid #f0c8c1;color:#9b2f22;
  font-size:.94rem;font-weight:600;line-height:1.5
}

/* Confirmation affichée à la place du formulaire une fois la demande partie.
   Masquée tant que rien n'est envoyé : formulaires.js lève le hidden. */
.eina-form-ok{
  background:var(--tint-green);border:1px solid #cfe6c9;color:#2f6a2d;
  border-radius:16px;padding:22px 24px;margin-top:8px;
  scroll-margin-top:110px;outline:none
}
.eina-form-ok[hidden]{display:none}
.eina-form-ok strong{display:block;font-family:'Montserrat',sans-serif;font-size:1.15rem;margin-bottom:6px}
.eina-form-ok p{margin:0;font-size:.97rem;line-height:1.6;color:#3c7a3a}

/* --- Cartes d'actualité (module eina) ---
   Partagées par la section « Les dernières nouvelles » de l'accueil et par la
   liste /blog. Elles vivaient dans le <style> en ligne de accueil.php : la
   liste du blog, qui utilise le même gabarit, s'affichait donc sans marges,
   texte débordant de la carte. */
.news-card{overflow:hidden;display:flex;flex-direction:column}
.news-card .ph{aspect-ratio:16/10;border-radius:var(--r-lg) var(--r-lg) 0 0;min-height:0}
.news-card .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.news-card .date{font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--gold-deep);font-weight:600}
.news-card h2,.news-card h3{font-size:1.18rem;margin:8px 0 0;line-height:1.35}
.news-card p{color:var(--ink-soft);font-size:.95rem;margin:8px 0 0}
/* nowrap et flèche dimensionnée : sans taille explicite, le SVG s'étirait et
   « Lire la suite » passait sur trois lignes dans une carte étroite. */
.news-card a.more{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  margin-top:auto;padding-top:14px;color:var(--navy);font-weight:800;font-size:.92rem
}
.news-card a.more svg{width:17px;height:17px;flex:none}
.news-card:hover a.more{gap:11px}
/* Sans image, la carte se dimensionne à son texte au lieu d'être étirée à la
   hauteur de ses voisines : sinon un grand aplat vide s'ouvre sous le titre. */
.news-card.is-sans-image{align-self:start}

/* --- Fil d'Ariane du socle ---
   siteBreadcrumb() (noyau) émet toujours un <nav class="site-breadcrumb"><ol>
   visible, et aucune feuille de style ne le prenait en charge : chaque page
   intérieure affichait « 1. Accueil / 2. Contact » en liste numérotée brute,
   au-dessus du bandeau, en plus du fil d'Ariane dessiné à la main dans le hero.
   On style ici le vrai fil d'Ariane, et les pages appellent siteBreadcrumb()
   à l'intérieur du hero : une seule source, correctement balisée. */
.site-breadcrumb{margin-bottom:18px}
.site-breadcrumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:.84rem;color:#9fb1cd;font-weight:600
}
.site-breadcrumb li{display:flex;gap:8px;align-items:center}
.site-breadcrumb li+li::before{content:"\203A";opacity:.5}
.site-breadcrumb a{color:var(--gold-deep)}
.page-hero .site-breadcrumb a{color:var(--gold-soft)}
.site-breadcrumb a:hover{text-decoration:underline}

/* --- Bandeau « À la une » de la page Actualités (module eina) ---
   Repris de la maquette validée, où ces règles vivaient dans le <style> en
   ligne de actualites.html. */
.feat-news{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--paper)
}
.feat-news .ph{min-height:320px;border-radius:0}
.feat-news .ph-img{width:100%;height:100%;object-fit:cover;display:block}
.feat-news .body{padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;justify-content:center}
/* La colonne de droite est étroite : le titre courant du site y passerait sur
   quatre lignes. On le ramène à une taille qui tient en deux ou trois. */
.feat-news h2{font-size:clamp(1.45rem,2.1vw,1.95rem);line-height:1.2}
.feat-news .feat-date{color:var(--gold-deep);font-weight:700;margin:10px 0 0}
@media(max-width:760px){
  .feat-news{grid-template-columns:1fr}
  .feat-news .ph{min-height:200px}
}

/* Avertissement de démonstration de l'espace parents. */
.auth-demo-avert{
  margin:14px 0 0;padding:13px 16px;border-radius:12px;
  background:#fbf0dc;border:1px solid #efd9a8;color:#7a5a12;
  font-size:.88rem;line-height:1.55
}
.auth-demo-avert a{color:#7a5a12;font-weight:700;text-decoration:underline}

/* --- Proportions des images ---
   Les <img> du site portent tous width et height (ajoutés à la passe SEO pour
   éviter les sauts de mise en page au chargement). Ces attributs comptent comme
   une largeur : une règle CSS qui ne fixe QUE la hauteur laisse alors la largeur
   d'origine, et l'image s'étire. C'est ce qui est arrivé au logo de l'écran de
   connexion de l'espace parents, affiché en 352x54 au lieu de 156x54.
   Filet : toute image qui n'a qu'une hauteur imposée garde ses proportions. */
img[width][height]{max-width:100%}
.brand img,.pb-brand img,.dt-logo,.auth-card .logo,.livret-top img,.signed-stamp img{
  width:auto;height:auto;object-fit:contain
}
.brand img{height:52px}
.pb-brand img{height:42px}
.auth-card .logo{height:54px}
.livret-top img{height:46px}
.signed-stamp img{height:48px}
@media(max-width:900px){.dt-logo{height:30px}}