:root{
  --creme:#FFF3E7;--creme-fonce:#F7E6D5;--terre:#C17E60;--terre-fonce:#A5654A;
  --terre-pale:#F3DFD2;--encre:#33261F;--gris:#8A776C;--bord:#EADACA;--blanc:#FFFFFF;
  --r:10px;--rail:262px;
  --symbole:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20365.66%20382.17%27%3E%3Cpath%20d%3D%27M181.89%2C181.79c.4%2C0%2C.81%2C0%2C1.21%2C0%2C82.81-.15%2C150.11-67.36%2C150.52-150.04h-69.35c-.41%2C44.5-36.68%2C80.61-81.3%2C80.69-.22%2C0-.44%2C0-.65%2C0-21.52-.13-41.73-8.55-56.99-23.75-15.26-15.21-23.75-35.41-23.94-56.94H32.03c.2%2C40.09%2C15.94%2C77.74%2C44.35%2C106.06%2C28.25%2C28.15%2C65.67%2C43.74%2C105.5%2C43.98ZM184.24%2C201.65c-.39%2C0-.79%2C0-1.19%2C0-39.85.07-77.3%2C15.66-105.43%2C43.89-27.96%2C28.06-43.39%2C65.28-43.5%2C104.87h40.37c.11-28.83%2C11.37-55.93%2C31.73-76.37%2C20.52-20.59%2C47.83-31.96%2C76.9-32.02%2C29.06.05%2C56.42%2C11.22%2C77.01%2C31.74%2C20.53%2C20.46%2C31.89%2C47.67%2C32.01%2C76.65h40.37c-.12-39.79-15.7-77.16-43.89-105.24-27.95-27.85-64.98-43.28-104.39-43.51Z%27%2F%3E%3C%2Fsvg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;color-scheme:light only;background-color:#FFF3E7;-webkit-text-size-adjust:100%}
body{height:100%;font-family:'Plus Jakarta Sans',system-ui,sans-serif;background-color:#FFF3E7;
  color:var(--encre);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme: dark){
  html,body{background-color:#FFF3E7;color:#33261F}
  .auth-panneau,.barre,.zone,.contenu,.visio-boite{background-color:#FFF3E7}
  .rail,.champ input,.recherche input,.puce,.couv,.visio-apercu,.btn-second,.carte-large,.intro,.onglet,.gamme,.echeance{background-color:#FFFFFF}
  .lien.est-actif,.raccourci.est-actif{background-color:#F3DFD2}
  .btn-primaire,.puce.est-actif,.avatar,.onglet.est-actif{background-color:#C17E60;color:#FFFFFF}
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--terre);outline-offset:2px}

/* ============ CONNEXION ============ */
.auth{display:grid;grid-template-columns:1.25fr 1fr;height:100vh}
.auth.is-gone{display:none}
.auth-visuel{position:relative;overflow:hidden;padding:48px;background:linear-gradient(165deg,#D69A7C,#C17E60 45%,#8E5641);display:flex;flex-direction:column;justify-content:space-between}
.auth-visuel p{position:relative;color:rgba(255,243,231,.78);font-size:13px}
.auth-visuel .haut{position:relative;color:#fff;font-weight:800;font-size:13px;letter-spacing:.26em}
.halo{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:660px;height:660px;border-radius:50%;background:radial-gradient(circle,rgba(255,243,231,.30),transparent 62%)}
.flacon{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);width:146px;height:392px;border-radius:74px 74px 14px 14px;background:linear-gradient(100deg,#E4CFBE,#FFFFFF 24%,#FFFDFB 56%,#EBD6C5 84%,#C39D82);box-shadow:0 50px 90px rgba(70,38,24,.34)}
.flacon::before{content:"";position:absolute;left:0;right:0;top:72px;height:24px;background:linear-gradient(100deg,#B9917A,#FFF7F0 32%,#FFFFFF 48%,#C9A489 72%,#A17A62)}
.flacon::after{content:"";position:absolute;left:50%;top:186px;transform:translateX(-50%);width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(193,126,96,.55)}
.auth-panneau{display:flex;flex-direction:column;justify-content:space-between;padding:48px 60px;background-color:var(--creme)}
.marque{font-weight:800;font-size:13px;letter-spacing:.26em}
.marque span{display:block;font-weight:500;font-size:10.5px;letter-spacing:.2em;color:var(--gris);margin-top:5px}
.auth-form{max-width:344px;width:100%}
.salut{font-size:clamp(32px,3.6vw,42px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.sous{margin:14px 0 34px;color:var(--gris);font-size:14.5px;max-width:32ch}
.champ{margin-bottom:16px}
.champ label{display:block;font-size:12.5px;font-weight:600;color:var(--gris);margin-bottom:7px}
.champ input{width:100%;padding:12px 14px;background-color:var(--blanc);border:1px solid var(--bord);border-radius:var(--r)}
.champ input:focus{outline:none;border-color:var(--terre)}
.btn-primaire{width:100%;margin-top:14px;padding:14px;background-color:var(--terre);color:#fff;border-radius:var(--r);font-weight:600;transition:background-color .18s}
.btn-primaire:hover{background-color:var(--terre-fonce)}
.aide{margin-top:18px;font-size:13px;color:var(--gris)}
.aide a{color:var(--terre);font-weight:600;text-decoration:none}
.auth-legal{font-size:12px;color:var(--gris)}

/* ============ CADRE ============ */
.app{
  display:none;height:100vh;grid-template-columns:var(--rail) 1fr;
  transition:grid-template-columns .34s cubic-bezier(.4,0,.2,1);
}
.app.is-visible{display:grid}
.rail{background-color:var(--blanc);border-right:1px solid var(--bord);padding:24px 0;display:flex;flex-direction:column;overflow-y:auto}
.rail-marque{padding:0 22px 22px;font-weight:800;font-size:12px;letter-spacing:.26em}
.rail nav{flex:1;padding:0 12px}
.rail-titre{padding:14px 10px 8px;font-size:11.5px;font-weight:600;color:var(--gris)}
.lien{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;text-align:left;font-size:14px;font-weight:500;transition:background-color .15s,color .15s}
.lien:hover{background-color:var(--creme)}
.lien .n{margin-left:auto;font-size:12px;font-weight:600;color:var(--gris);font-variant-numeric:tabular-nums}
.lien.est-actif{background-color:var(--terre-pale);color:var(--terre-fonce);font-weight:600}
.lien.est-actif .n{color:var(--terre-fonce)}
.sous-liens{margin:2px 0 8px 10px;padding-left:10px;border-left:1px solid var(--bord)}
.sous-lien{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border-radius:7px;text-align:left;font-size:13.5px;color:var(--gris)}
.sous-lien:hover{color:var(--encre);background-color:var(--creme)}
.sous-lien .n{margin-left:auto;font-size:11.5px;font-variant-numeric:tabular-nums}
.sous-lien.est-actif{color:var(--terre-fonce);font-weight:600;background-color:var(--creme)}
.rail-pied{margin:14px 22px 0;padding-top:18px;border-top:1px solid var(--bord);display:flex;align-items:center;gap:11px}
.avatar{width:34px;height:34px;border-radius:50%;flex:none;background-color:var(--terre);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700}
.rail-pied strong{display:block;font-size:13.5px;font-weight:600}
.rail-pied small{font-size:11.5px;color:var(--gris)}

.zone{overflow-y:auto;height:100vh;background-color:var(--creme);min-width:0}
.barre{position:sticky;top:0;z-index:5;background-color:rgba(255,243,231,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--bord);padding:14px 34px;display:flex;align-items:center;gap:14px}
.recherche{flex:1;max-width:560px;position:relative}
.recherche input{width:100%;padding:10px 12px 10px 36px;background-color:var(--blanc);border:1px solid var(--bord);border-radius:var(--r)}
.recherche input:focus{outline:none;border-color:var(--terre)}
.recherche svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--gris)}
.contenu{padding:32px 34px 70px;background-color:var(--creme)}
.entete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.fil{font-size:12.5px;font-weight:600;color:var(--terre);margin-bottom:6px}
.retour{font-size:12.5px;font-weight:600;color:var(--terre);margin-bottom:8px}
.retour:hover{text-decoration:underline;text-underline-offset:3px}
.entete h1{font-size:31px;font-weight:700;letter-spacing:-.03em}
.entete .compte{color:var(--gris);font-size:14px;margin-top:5px}
.filtres{display:flex;gap:7px;flex-wrap:wrap}
.puce{padding:7px 14px;background-color:var(--blanc);border:1px solid var(--bord);border-radius:999px;font-size:13px;font-weight:500;color:var(--gris)}
.puce:hover{border-color:var(--terre);color:var(--terre)}
.puce.est-actif{background-color:var(--terre);border-color:var(--terre);color:#fff}

/* ============ ACCUEIL ============ */
.une{
  display:grid;grid-template-columns:1.25fr 1fr;gap:0;margin-bottom:34px;
  border:1px solid var(--bord);border-radius:16px;overflow:hidden;background-color:var(--blanc);
}
.une-texte{padding:32px 34px}
.une-visuel{background:linear-gradient(150deg,#F3DFD2,#D89C7D 55%,#A5654A);position:relative;min-height:230px}
.une-visuel::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.45),transparent 58%)}
.etiquette{display:inline-block;padding:5px 11px;border-radius:999px;background-color:var(--terre-pale);color:var(--terre-fonce);font-size:11.5px;font-weight:700;margin-bottom:14px}
.une h2{font-size:27px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.une p{margin-top:12px;color:var(--gris);font-size:14.5px;line-height:1.6;max-width:52ch}
.une .cta{display:inline-block;margin-top:20px;padding:12px 22px;background-color:var(--terre);color:#fff;border-radius:var(--r);font-weight:600}
.une .cta:hover{background-color:var(--terre-fonce)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:38px}
.bloc h3{font-size:15px;font-weight:700;margin-bottom:14px}
.echeances{display:grid;gap:10px}
.echeance{display:flex;align-items:center;gap:14px;padding:14px 16px;background-color:var(--blanc);border:1px solid var(--bord);border-radius:12px}
.echeance .jour{flex:none;width:46px;text-align:center}
.echeance .jour b{display:block;font-size:19px;font-weight:800;line-height:1;letter-spacing:-.02em}
.echeance .jour small{font-size:10.5px;font-weight:600;color:var(--terre);text-transform:uppercase}
.echeance div p{font-size:14px;font-weight:600;line-height:1.3}
.echeance div small{font-size:12.5px;color:var(--gris)}
.raccourcis-rapides{display:grid;gap:8px}
.rapide{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background-color:var(--blanc);border:1px solid var(--bord);border-radius:12px;text-align:left;font-size:14px;font-weight:600}
.rapide:hover{border-color:var(--terre)}
.rapide small{margin-left:auto;font-size:12px;font-weight:500;color:var(--gris)}
.etoile-mini{color:var(--terre);flex:none}

/* ============ GAMMES ============ */
.gammes{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:16px}
.gamme{padding:20px;background-color:var(--blanc);border:1px solid var(--bord);border-radius:14px;text-align:left;transition:transform .18s,border-color .18s}
.gamme:hover{transform:translateY(-2px);border-color:var(--terre)}
.gamme .pastille-couleur{width:34px;height:34px;border-radius:10px;margin-bottom:14px}
.gamme h3{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.gamme small{display:block;margin-top:5px;font-size:12.5px;color:var(--gris)}

/* ============ DOSSIERS ============ */
.dossiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:44px}
.carte-large{display:block;width:100%;text-align:left;padding:22px;background-color:var(--blanc);border:1px solid var(--bord);border-radius:14px;transition:transform .18s,box-shadow .18s,border-color .18s}
.carte-large:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(51,38,31,.10);border-color:var(--terre)}
.carte-large .periode{display:inline-block;padding:4px 10px;border-radius:999px;background-color:var(--terre-pale);color:var(--terre-fonce);font-size:11.5px;font-weight:700;margin-bottom:12px}
.carte-large h3{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.carte-large p{margin-top:8px;font-size:13.5px;color:var(--gris);line-height:1.55}
.carte-large .pied{margin-top:16px;padding-top:14px;border-top:1px solid var(--bord);display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--terre)}
.carte-large .pied em{font-style:normal;color:var(--gris);font-weight:500}

.intro{background-color:var(--blanc);border:1px solid var(--bord);border-radius:14px;padding:28px 30px;margin-bottom:34px;max-width:820px}
.intro .periode{display:inline-block;padding:4px 10px;border-radius:999px;background-color:var(--terre-pale);color:var(--terre-fonce);font-size:11.5px;font-weight:700;margin-bottom:14px}
.intro p{font-size:15px;line-height:1.65;max-width:70ch}
.intro p + p{margin-top:12px}
.intro ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.intro li{position:relative;padding-left:20px;font-size:14.5px}
.intro li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background-color:var(--terre)}

/* ============ ONGLETS & SECTIONS ============ */
.onglets{display:inline-flex;gap:4px;padding:4px;background-color:var(--creme-fonce);border-radius:12px;margin-bottom:26px}
.onglet{padding:9px 20px;border-radius:9px;font-size:14px;font-weight:600;color:var(--gris)}
.onglet:hover{color:var(--encre)}
.onglet.est-actif{background-color:var(--blanc);color:var(--terre-fonce);box-shadow:0 1px 3px rgba(51,38,31,.10)}
.rubrique{margin-bottom:40px}
.rubrique-tete{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.rubrique-tete h2{font-size:16px;font-weight:700}
.rubrique-tete .etape{color:var(--terre);font-weight:800;margin-right:2px}
.rubrique-tete span{font-size:12.5px;color:var(--gris)}
.rubrique-tete i{flex:1;height:1px;background-color:var(--bord)}

/* ============ FICHES ============ */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px 20px}
.fiche{position:relative;text-align:left;display:block;width:100%}
.couv{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background-color:var(--blanc);border:1px solid var(--bord);transition:transform .2s,box-shadow .2s}
.fiche:hover .couv{transform:translateY(-3px);box-shadow:0 14px 26px rgba(51,38,31,.12)}
.fiche h3{margin-top:11px;font-size:14.5px;font-weight:600;line-height:1.35}
.meta{margin-top:3px;font-size:12.5px;color:var(--gris);font-variant-numeric:tabular-nums}
.badge{position:absolute;left:9px;top:9px;z-index:2;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:700;background-color:rgba(51,38,31,.78);color:#fff}
.badge.ppt{background-color:var(--terre-fonce)}
.neuf{position:absolute;left:9px;bottom:9px;z-index:2;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:700;background-color:var(--terre);color:#fff}
.etoile:hover{color:var(--terre)}
.doc{position:absolute;inset:16px 16px auto;color:var(--encre)}
.doc .t{font-size:11px;font-weight:700;line-height:1.3;margin-bottom:10px;padding-right:26px}
.doc .l{height:3px;border-radius:2px;background-color:var(--creme-fonce);margin-bottom:5px}
.doc .l:nth-child(3){width:88%}.doc .l:nth-child(4){width:70%}
.doc .l:nth-child(5){width:82%}.doc .l:nth-child(6){width:44%}
.slide{position:absolute;inset:16px;border-radius:6px;background-color:var(--creme);border:1px solid var(--bord);padding:14px;display:flex;flex-direction:column;gap:7px}
.slide .t{font-size:11px;font-weight:700;line-height:1.3;padding-right:22px}
.slide .bloc{flex:1;border-radius:4px;background-color:var(--terre-pale)}
.slide .rangee{display:flex;gap:6px}
.slide .rangee i{flex:1;height:16px;border-radius:3px;background-color:var(--creme-fonce)}
.filet{position:absolute;left:16px;right:16px;bottom:16px;height:2px;background-color:var(--terre);opacity:.85;border-radius:2px}
.tampon{position:absolute;right:15px;bottom:26px;font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--terre)}
.photo{position:absolute;inset:0}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background-color:rgba(255,255,255,.94);display:grid;place-items:center}
.play::after{content:"";border-left:12px solid var(--terre);border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;margin-left:3px}
.duree{position:absolute;right:9px;bottom:9px;z-index:2;padding:3px 8px;border-radius:6px;background-color:rgba(51,38,31,.78);color:#fff;font-size:11px;font-weight:600}
.vide{padding:70px 0;text-align:center;color:var(--gris)}
.vide strong{display:block;color:var(--encre);font-size:17px;font-weight:600;margin-bottom:6px}

/* ============ VISIONNEUSE ============ */
.visio{position:fixed;inset:0;z-index:50;display:none;background-color:rgba(51,38,31,.55);backdrop-filter:blur(6px);padding:34px;place-items:center}
.visio.is-open{display:grid}
.visio-boite{background-color:var(--creme);border-radius:14px;width:min(920px,100%);max-height:100%;overflow:auto;display:grid;grid-template-columns:1.05fr 1fr}
.visio-apercu{background-color:var(--blanc);border-right:1px solid var(--bord);padding:36px;display:grid;place-items:center;min-height:330px}
.visio-apercu .couv{width:216px;aspect-ratio:3/4}
.visio-infos{padding:36px;display:flex;flex-direction:column}
.visio-infos .cat{font-size:12.5px;font-weight:600;color:var(--terre);margin-bottom:8px}
.visio-infos h2{font-size:23px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.visio-infos>p{color:var(--gris);font-size:14px;margin-top:12px}
.chapitres{margin-top:20px}
.chapitres h4{font-size:13px;font-weight:700;margin-bottom:8px}
.chapitres button{display:flex;gap:12px;width:100%;padding:8px 10px;border-radius:8px;text-align:left;font-size:13.5px}
.chapitres button:hover{background-color:var(--blanc)}
.chapitres b{color:var(--terre);font-variant-numeric:tabular-nums;font-weight:700;flex:none}
.details{margin-top:auto;padding-top:22px;font-size:13.5px}
.details div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--bord);color:var(--gris)}
.details div span{color:var(--encre);font-weight:600;text-align:right}
.actions{display:flex;gap:9px;margin-top:20px}
.actions .btn-primaire{margin:0;flex:1}
.btn-second{padding:14px 18px;background-color:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);font-weight:600}
.btn-second:hover{border-color:var(--terre);color:var(--terre)}
.btn-second.est-actif{border-color:var(--terre);color:var(--terre);background-color:var(--terre-pale)}
/* La croix est ancrée sur la boîte, pas sur le coin de l'écran :
   c'est là que l'œil la cherche. */
.visio-boite{position:relative}
.fermer{
  position:absolute;right:14px;top:14px;z-index:10;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background-color:var(--blanc);color:var(--encre);
  border:1px solid var(--bord);
  box-shadow:0 2px 8px rgba(51,38,31,.12);
  transition:background-color .15s,color .15s,transform .12s;
}
.fermer:hover{background-color:var(--terre);border-color:var(--terre);color:#fff}
.fermer:active{transform:scale(.94)}

/* ============ MOBILE ============ */
.menu-mobile{display:none}
@media(max-width:980px){
  .auth{grid-template-columns:1fr}
  .auth-visuel{display:none}
  .auth-panneau{padding:34px 26px;justify-content:center;gap:54px}
  .app.is-visible{grid-template-columns:1fr}
  .rail{position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:40;transform:translateX(-100%);transition:transform .24s ease;box-shadow:0 0 40px rgba(51,38,31,.14)}
  .rail.is-open{transform:none}
  .menu-mobile{display:grid;place-items:center;width:38px;height:38px;background-color:var(--blanc);border:1px solid var(--bord);border-radius:9px;flex:none}
  .barre{padding:12px 18px;gap:10px}
  .contenu{padding:22px 18px 60px}
  .entete h1{font-size:24px}
  .une{grid-template-columns:1fr}
  .une-visuel{min-height:150px;order:-1}
  .une-texte{padding:24px}
  .duo{grid-template-columns:1fr;gap:28px}
  .dossiers{grid-template-columns:1fr;gap:14px}
  .gammes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .intro{padding:22px}
  .grille{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:20px 14px}
  .visio{padding:0}
  .visio-boite{grid-template-columns:1fr;border-radius:0;height:100%}
  .visio-apercu{border-right:none;border-bottom:1px solid var(--bord);padding:26px}
  .visio-apercu .couv{width:148px}
  .visio-infos{padding:24px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============ APERÇU INTÉGRÉ ============ */
.visio-boite{grid-template-columns:1.5fr 1fr;width:min(1120px,100%)}
.visio-apercu{padding:0;background-color:#F7E6D5;align-content:stretch;min-height:440px}
.apercu-cadre{width:100%;height:100%;min-height:440px;border:none;background-color:#fff}
.apercu-image{width:100%;height:100%;max-height:78vh;object-fit:contain;background-color:#fff}
.apercu-video{width:100%;height:100%;max-height:78vh;background-color:#000}
.chargement,.apercu-absent{align-self:center;justify-self:center;color:var(--gris);font-size:14px;padding:30px;text-align:center}
.visio-apercu .couv{width:190px;aspect-ratio:3/4;margin:0 auto}

/* Chapitres cliquables */
.chapitres button{cursor:pointer}
.chapitres button:focus-visible{outline:2px solid var(--terre);outline-offset:-2px}

/* Pastille « mis à jour » */
.neuf.maj{background-color:var(--encre)}

/* ============ BANDEAU DE BIENVENUE ============ */
.bienvenue{
  position:relative;margin-bottom:30px;padding:28px 30px;
  background-color:var(--blanc);border:1px solid var(--bord);border-radius:16px;
}
.bienvenue h2{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:18px}
.bienvenue-trois{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bienvenue-trois strong{display:block;font-size:14.5px;font-weight:700;color:var(--terre-fonce);margin-bottom:5px}
.bienvenue-trois p{font-size:13.5px;color:var(--gris);line-height:1.55}
.bienvenue-astuce{margin-top:20px;padding-top:16px;border-top:1px solid var(--bord);font-size:13.5px;color:var(--gris)}
.bienvenue-fermer{
  margin-top:16px;padding:10px 20px;border-radius:var(--r);
  background-color:var(--terre);color:#fff;font-weight:600;font-size:14px;
}
.bienvenue-fermer:hover{background-color:var(--terre-fonce)}

@media(max-width:980px){
  .visio-boite{grid-template-columns:1fr}
  .visio-apercu{min-height:0}
  .apercu-cadre{min-height:56vh;height:56vh}
  .apercu-image,.apercu-video{max-height:48vh}
  .bienvenue{padding:22px}
  .bienvenue-trois{grid-template-columns:1fr;gap:16px}
}

/* ============ LOGOS ============ */
.logo{display:block;height:auto;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.logo-en-blanc{filter:brightness(0) invert(1)}
.logo-en-encre{filter:brightness(0)}

/* Menu de gauche */
.rail-marque.a-logo{padding:0 22px 22px}
.rail-marque .logo{max-height:36px;max-width:170px}

/* ============ CONNEXION — PANNEAU DE DROITE ============ */
.auth-panneau{
  display:flex;flex-direction:column;justify-content:center;
  gap:0;padding:56px clamp(40px,5.5vw,88px);
  position:relative;
}
.auth-tete{position:absolute;top:clamp(36px,5vw,56px);left:clamp(40px,5.5vw,88px)}
.marque.a-logo{display:block}
.marque .logo{height:var(--logo-h,60px);max-height:none;max-width:min(320px,60vw)}

/* Sans logo chargé, le nom reste lisible et à la bonne échelle */
.marque{font-weight:800;font-size:15px;letter-spacing:.24em}

.surtitre{
  margin-top:14px;
  font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terre);
}

.auth-form{max-width:400px;width:100%}
.salut{
  font-size:clamp(34px,3.6vw,50px);font-weight:700;
  letter-spacing:-.035em;line-height:1.02;text-wrap:balance;
}
.sous{margin:18px 0 40px;color:var(--gris);font-size:16px;line-height:1.55;max-width:34ch}

.champ{margin-bottom:18px}
.champ label{display:block;font-size:13px;font-weight:600;color:var(--gris);margin-bottom:8px}
.champ input{
  width:100%;padding:15px 16px;font-size:15.5px;
  background-color:var(--blanc);border:1px solid var(--bord);border-radius:12px;
  transition:border-color .18s,box-shadow .18s;
}
.champ input:focus{outline:none;border-color:var(--terre);box-shadow:0 0 0 3px rgba(193,126,96,.14)}

.btn-primaire{
  width:100%;margin-top:18px;padding:16px;
  background-color:var(--terre);color:#fff;border-radius:12px;
  font-weight:600;font-size:15.5px;letter-spacing:.01em;
  transition:background-color .18s,transform .12s;
}
.btn-primaire:hover{background-color:var(--terre-fonce)}
.btn-primaire:active{transform:translateY(1px)}
.aide{margin-top:22px;font-size:14px;color:var(--gris)}
.auth-legal{position:absolute;bottom:clamp(30px,4vw,48px);left:clamp(40px,5.5vw,88px);font-size:12.5px;color:var(--gris)}

/* ============ CONNEXION — VISUEL DE GAUCHE ============ */
/* Le visuel porte son propre habillage : rien n'est superposé par le thème.
   Le côté droit est arrondi, comme le bas des bandeaux. */
.auth-visuel{
  padding:0;
  overflow:hidden;
}
.auth-visuel.a-photo::before{content:none}
.auth-visuel.a-photo::after,
.auth-visuel .halo,
.auth-visuel .flacon{border-radius:inherit}

@media(max-width:980px){
  .auth-visuel{border-radius:0}
}

@media(max-width:980px){
  .auth-panneau{padding:100px 26px 60px;justify-content:flex-start}
  .auth-tete{top:34px;left:26px}
  .marque .logo{height:calc(var(--logo-h,60px) * .78)}
  .salut{font-size:clamp(30px,8vw,38px)}
  .sous{font-size:15px;margin-bottom:32px}
  .auth-legal{position:static;margin-top:40px}
}

/* ============ CORRECTIF LIENS ============ */
/* Les éléments de navigation sont devenus des liens : sans cette remise à zéro,
   le navigateur les affiche en bleu souligné. */
.app a,
.auth a{color:inherit;text-decoration:none}
.app a:hover,
.auth a:hover{text-decoration:none}
.retour,
.aide a{color:var(--terre)}
.aide a:hover{text-decoration:underline;text-underline-offset:3px}
.lien,.sous-lien,.puce,.onglet,.gamme,.carte-large,.rapide,.fiche h3{text-decoration:none}
.une .cta{color:#fff}

/* Le logo du menu de gauche suit son propre réglage */
.rail-marque .logo{
  height:var(--rail-logo-h,52px);max-height:none;
  max-width:calc(var(--rail) - 44px);   /* la colonne, moins ses marges */
}
.rail-marque.a-logo{padding:0 22px 26px}

/* ============ ÉTAT VIDE ============ */
.vide{
  padding:56px 30px;text-align:center;color:var(--gris);
  background-color:var(--blanc);border:1px dashed var(--bord);border-radius:16px;
}
.vide strong{display:block;color:var(--encre);font-size:18px;font-weight:600;margin-bottom:8px}
.vide .action{
  display:inline-block;margin-top:20px;padding:12px 22px;
  background-color:var(--terre);color:#fff;border-radius:var(--r);font-weight:600;font-size:14px;
}
.vide .action:hover{background-color:var(--terre-fonce)}

/* ============ UNE DE SECOURS ============ */
.une-vide{
  display:grid;grid-template-columns:1.25fr 1fr;
  margin-bottom:34px;border:1px solid var(--bord);border-radius:16px;
  overflow:hidden;background-color:var(--blanc);
}
.une-vide .texte{padding:34px}
.une-vide h2{font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.une-vide p{margin-top:12px;color:var(--gris);font-size:14.5px;line-height:1.6;max-width:48ch}
.une-vide .visuel{background:linear-gradient(150deg,#F3DFD2,#D89C7D 55%,#A5654A);min-height:210px}

@media(max-width:980px){
  .une-vide{grid-template-columns:1fr}
  .une-vide .visuel{min-height:130px;order:-1}
  .une-vide .texte{padding:24px}
}

/* ============ ACTIONS SUR LA VIGNETTE ============ */
.fiche-actions{
  position:absolute;right:8px;top:8px;z-index:3;
  display:flex;gap:6px;
  opacity:0;transform:translateY(-4px);
  transition:opacity .16s,transform .16s;
}
.fiche:hover .fiche-actions,
.fiche:focus-within .fiche-actions{opacity:1;transform:none}

.action-ronde{
  width:30px;height:30px;border-radius:50%;flex:none;
  background-color:rgba(255,255,255,.94);
  display:grid;place-items:center;color:var(--gris);
  box-shadow:0 1px 4px rgba(51,38,31,.16);
  transition:color .15s,background-color .15s;
}
.action-ronde:hover{color:var(--terre);background-color:#fff}
.etoile.est-actif{color:var(--terre)}

/* Les favoris déjà cochés restent visibles sans survol */
.fiche .etoile.est-actif{opacity:1}
.fiche-actions:has(.est-actif){opacity:1;transform:none}

/* Sur mobile il n'y a pas de survol : les actions restent affichées */
@media(hover:none){
  .fiche-actions{opacity:1;transform:none}
}

/* La vignette d'un document occupe tout le cadre */
/* Le fichier est affiché en entier dans le cadre, sans recadrage :
   un logo ou une affiche ne doit pas être amputé. */
.couv .photo{background-color:var(--blanc)}
.couv .photo.contenu{background-repeat:no-repeat}

/* ============ ALERTE ============ */
.alerte{
  margin-bottom:24px;padding:14px 18px;
  background-color:var(--terre-pale);color:var(--terre-fonce);
  border-radius:12px;font-size:14.5px;font-weight:500;
}

/* ============ MENTIONS DE LA CONNEXION ============ */
.mention-visuel{
  position:absolute;z-index:3;
  top:clamp(36px,5vw,56px);left:clamp(36px,4vw,52px);
  margin:0;font-size:12.5px;font-weight:600;letter-spacing:.06em;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 12px rgba(51,38,31,.45);
}
/* Voile haut et bas, sur toute la largeur, pour la lisibilité des mentions */
.auth-visuel.a-photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(51,38,31,.34) 0,rgba(51,38,31,0) 22%),
    linear-gradient(0deg,rgba(51,38,31,.34) 0,rgba(51,38,31,0) 22%);
}

.mention-visuel-bas{
  position:absolute;z-index:3;
  bottom:clamp(34px,4vw,48px);left:clamp(36px,4vw,52px);right:clamp(36px,4vw,52px);
  margin:0;font-size:12.5px;font-weight:600;letter-spacing:.06em;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 12px rgba(51,38,31,.45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

@media(max-width:980px){
  .mention-visuel{top:24px;left:24px}
  .mention-visuel-bas{bottom:24px;left:24px}
}

/* ============ PIED DU MENU ============ */
.rail-pied{display:block}
.deconnexion{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;margin:0 0 12px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--gris);
  transition:background-color .15s,color .15s;
}
.deconnexion:hover{background-color:var(--creme);color:var(--terre-fonce)}
.deconnexion svg{flex:none}
.rail-pied .compte{display:flex;align-items:center;gap:11px}

/* ============ BOUTON DE DEMANDE ============ */
.btn-demande{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  margin-left:auto;padding:10px 18px;border-radius:999px;
  background-color:var(--terre);color:#fff!important;
  font-size:14px;font-weight:600;white-space:nowrap;
  transition:background-color .18s,transform .12s;
}
.btn-demande:hover{background-color:var(--terre-fonce)}
.btn-demande:active{transform:translateY(1px)}
.btn-demande svg{flex:none}

@media(max-width:760px){
  .btn-demande{padding:10px;border-radius:50%}
  .btn-demande span{display:none}
}

/* =========================================================================
   REFONTE 2026
   Surfaces blanches, filets structurants, typographie large.
   Ce bloc arrive en dernier : il prime sur les règles précédentes.
   ========================================================================= */

/* ---------- Grille plus généreuse ---------- */
.grille{grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:22px}

/* ---------- La carte devient une surface ---------- */
.fiche{
  position:relative;
  background-color:var(--blanc);
  border:1px solid var(--bord);
  border-radius:18px;
  overflow:hidden;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.fiche:hover{
  border-color:var(--terre);
  box-shadow:0 18px 36px rgba(51,38,31,.10);
  transform:translateY(-3px);
}
.fiche-lien{display:block;width:100%;text-align:left}
.fiche-media{display:block;position:relative}
.fiche-media .couv{
  aspect-ratio:4/5;border-radius:0;border:none;
  background-color:var(--creme);
}
.fiche:hover .couv{transform:none;box-shadow:none}

.fiche-corps{display:block;padding:16px 18px 16px}
.fiche h3{
  margin:0;font-size:15.5px;font-weight:600;line-height:1.35;
  letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fiche-bas{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--bord);
}
.fiche .meta{margin:0;font-size:12.5px;color:var(--gris);font-variant-numeric:tabular-nums}
.fiche-ouvrir{
  width:30px;height:30px;border-radius:50%;flex:none;
  border:1px solid var(--bord);
  display:grid;place-items:center;color:var(--encre);
  transition:background-color .18s,border-color .18s,color .18s;
}
.fiche:hover .fiche-ouvrir{background-color:var(--terre);border-color:var(--terre);color:#fff}

/* Les actions se posent sur le média */
.fiche-actions{right:10px;top:10px}

/* ---------- En-têtes de section ---------- */
.rubrique{margin-bottom:52px}
.rubrique-tete{
  display:flex;align-items:center;gap:14px;
  padding-bottom:16px;margin-bottom:24px;
  border-bottom:1px solid var(--bord);
}
.rubrique-tete h2{
  font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.025em;
}
.rubrique-tete i{display:none}
.rubrique-tete .compteur{
  margin-left:auto;flex:none;
  padding:4px 12px;border-radius:999px;border:1px solid var(--bord);
  font-size:12px;font-weight:600;color:var(--gris);font-variant-numeric:tabular-nums;
}

/* ---------- En-tête de page ---------- */
.contenu{padding-top:40px}
.entete{
  align-items:flex-end;
  padding-bottom:26px;margin-bottom:34px;
  border-bottom:1px solid var(--bord);
}
.entete h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.04em;line-height:1.02}
.fil{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:10px;
}
.retour{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;margin-bottom:12px;
  border:1px solid var(--bord);border-radius:999px;
  font-size:12.5px;font-weight:600;background-color:var(--blanc);
}
.retour:hover{border-color:var(--terre);text-decoration:none}

/* ---------- Filtres en pilules ---------- */
.puce{
  padding:9px 17px;font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
}

/* ---------- Onglets ---------- */
.onglets{background-color:transparent;padding:0;gap:8px;margin-bottom:32px}
.onglet{
  padding:10px 22px;border-radius:999px;border:1px solid var(--bord);
  background-color:var(--blanc);font-size:13.5px;
}
.onglet.est-actif{background-color:var(--encre);border-color:var(--encre);color:#fff;box-shadow:none}

/* ---------- La une ---------- */
.une,.une-vide{border-radius:20px;margin-bottom:46px}
.une-texte,.une-vide .texte{padding:38px 40px}
.une h2,.une-vide h2{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.035em;line-height:1.08}
.etiquette{
  padding:6px 14px;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  background-color:transparent;border:1px solid var(--terre);color:var(--terre);
}
.une .cta,.une-vide .cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:26px;padding:13px 26px;border-radius:999px;
  background-color:var(--encre);color:#fff!important;font-weight:600;font-size:14.5px;
}
.une .cta:hover,.une-vide .cta:hover{background-color:var(--terre)}

/* ---------- Blocs de l'accueil ---------- */
.duo{gap:26px}
.bloc h3{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid var(--bord);
}
.echeance,.rapide{border-radius:14px;transition:border-color .18s}
.echeance:hover,.rapide:hover{border-color:var(--terre)}

/* ---------- Barre du haut ---------- */
.barre{padding:16px 34px}
.recherche input{padding:12px 14px 12px 40px;border-radius:999px;font-size:14.5px}
.recherche svg{left:16px}
.btn-demande{font-size:13px;font-weight:700;letter-spacing:.04em;padding:12px 22px}

/* ---------- Menu ---------- */
.rail-titre{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding-top:22px;
}
.lien{padding:10px 12px;border-radius:10px}
.lien.est-actif{background-color:var(--encre);color:#fff}
.lien.est-actif .n{color:rgba(255,255,255,.6)}

/* ---------- Visionneuse ---------- */
.visio-boite{border-radius:20px}
.visio-infos h2{font-size:26px;letter-spacing:-.035em}
.visio-infos .cat{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.actions .btn-primaire,.btn-second{border-radius:999px}

@media(max-width:980px){
  .grille{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:14px}
  .fiche-corps{padding:13px 14px}
  .fiche h3{font-size:14px}
  .une-texte,.une-vide .texte{padding:26px 24px}
  .entete{padding-bottom:20px;margin-bottom:26px}
}

/* ============ BANNIÈRE DE SECTION ============ */
.banniere{
  position:relative;
  min-height:clamp(180px,22vw,260px);
  margin-bottom:30px;
  border-radius:20px;overflow:hidden;
  background-color:var(--creme-fonce);
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
}
/* Voile depuis le bas : le titre reste lisible sur n'importe quelle photo */
.banniere::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(51,38,31,.62) 0,rgba(51,38,31,.12) 55%,rgba(51,38,31,0) 100%);
}
.banniere-texte{position:relative;z-index:2;padding:32px 36px;max-width:40ch}
.banniere-texte .fil{color:rgba(255,255,255,.82);margin-bottom:8px}
.banniere-texte h1{
  margin:0;color:#fff;
  font-size:clamp(28px,3.6vw,42px);font-weight:700;
  letter-spacing:-.04em;line-height:1.02;
  text-shadow:0 1px 20px rgba(51,38,31,.35);
}

/* Le titre est déjà dans le bandeau : on ne le répète pas en dessous */
.contenu.a-banniere .entete{
  padding-bottom:20px;margin-bottom:28px;
  justify-content:flex-end;
}
.contenu.a-banniere .entete h1,
.contenu.a-banniere .entete .fil{display:none}
.contenu.a-banniere .entete .compte{margin-top:0}
.contenu.a-banniere #entete-texte{margin-right:auto}

@media(max-width:980px){
  .banniere{min-height:150px;border-radius:16px;margin-bottom:22px}
  .banniere-texte{padding:22px 22px}
}

/* =========================================================================
   DIRECTION 2026 — bandeau pleine largeur, menu à icônes, symbole
   ========================================================================= */

/* ---------- Symbole ---------- */
.symbole{display:block}
.banniere-symbole{
  position:absolute;right:34px;bottom:-40px;z-index:1;
  color:rgba(255,255,255,.13);pointer-events:none;
}
@media(max-width:980px){
  .banniere-symbole{right:12px;bottom:-28px;transform:scale(.62);transform-origin:bottom right}
}

/* ---------- Étiquette au filet ---------- */
.etiquette-filet{
  display:flex;align-items:center;gap:14px;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:16px;
}
.etiquette-filet i{width:34px;height:1.5px;background-color:currentColor;flex:none;opacity:.7}

/* ---------- Bandeau pleine largeur ---------- */
.banniere{
  position:relative;
  margin:-40px -34px 38px;
  /* Pleine largeur en haut, arrondi en bas : le bandeau se détache du fond. */
  border-radius:0 0 28px 28px;
  min-height:clamp(210px,24vw,288px);
  align-items:stretch;
}
.banniere::after{border-radius:inherit}
.banniere-symbole{border-radius:inherit}
.banniere::after{
  background:linear-gradient(90deg,rgba(51,38,31,.80) 0,rgba(51,38,31,.42) 52%,rgba(51,38,31,.16) 100%);
}
.banniere-corps{
  position:relative;z-index:2;width:100%;
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding:38px 34px 34px;
}
.banniere-texte{max-width:52ch;padding:0}
.banniere-texte .etiquette-filet{color:rgba(255,255,255,.86)}
.banniere-texte h1{
  font-size:clamp(30px,4.4vw,52px);font-weight:600;letter-spacing:-.045em;
}
.banniere-desc{
  margin-top:16px;color:rgba(255,255,255,.86);
  font-size:15.5px;line-height:1.55;max-width:56ch;
}
.banniere-filtres .filtres{gap:8px}
/* Fond assombri translucide : les pilules tiennent sur n'importe quelle photo,
   sans masquer le visuel pour autant. */
.banniere-filtres .puce{
  background-color:rgba(38,27,21,.42);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.30);
  color:#fff;
  text-shadow:0 1px 6px rgba(38,27,21,.35);
}
.banniere-filtres .puce:hover{
  background-color:rgba(38,27,21,.58);
  border-color:rgba(255,255,255,.55);
}
.banniere-filtres .puce.est-actif{
  background-color:var(--terre);border-color:var(--terre);color:#fff;
  text-shadow:none;
  box-shadow:0 2px 10px rgba(38,27,21,.25);
}

.contenu.a-banniere{padding-top:40px}
.contenu.a-banniere .entete{border-bottom:none;padding-bottom:0;margin-bottom:26px}

/* ---------- Menu à icônes ---------- */
/* Aucune largeur fixe ici : le rail suit la colonne de la grille,
   qui vaut 262 px déployé et 78 px replié. */
.lien{gap:12px;font-size:14px}
.lien .icone{flex:none;opacity:.72}
.lien.est-actif .icone{opacity:1}
.lien .chevron{margin-left:auto;display:grid;place-items:center;opacity:.4}
.lien.est-actif .chevron{opacity:.8}
.sous-liens{border-left:none;margin-left:16px;padding-left:0}
.sous-lien{gap:10px;padding:7px 12px}
.sous-lien .point{
  width:5px;height:5px;border-radius:50%;flex:none;
  background-color:var(--chrome,#D8C6B4);border:1px solid var(--bord);
}
.sous-lien.est-actif .point{background-color:var(--terre);border-color:var(--terre)}
.deconnexion{gap:11px}

/* ---------- État vide ---------- */
.vide{
  padding:64px 30px;border-radius:20px;border:1px solid var(--bord);
  background-color:rgba(255,255,255,.55);
}
.vide-symbole{margin:0 auto 22px;color:var(--terre);opacity:.55}
.vide strong{
  display:block;font-size:clamp(22px,2.4vw,28px);font-weight:600;
  letter-spacing:-.03em;margin-bottom:10px;
}
.vide-detail{display:block;font-size:14.5px}
.vide .action{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:24px;padding:12px 24px;border-radius:999px;
  background-color:transparent;border:1px solid var(--bord);color:var(--encre);
  font-weight:600;font-size:14px;
}
.vide .action:hover{border-color:var(--terre);color:var(--terre)}

/* ---------- Présentation d'espace, sous le bandeau ---------- */
.rappel{
  display:grid;
  grid-template-columns:minmax(240px,340px) 1fr;
  gap:44px;align-items:start;
  margin:0 0 46px;padding-bottom:40px;
  border-bottom:1px solid var(--bord);
}
.rappel-texte .etiquette-filet{color:var(--terre)}
.rappel-texte h2{
  font-size:clamp(26px,3.2vw,40px);font-weight:600;
  letter-spacing:-.04em;line-height:1.04;
}
.rappel-desc{
  margin-top:18px;color:var(--gris);
  font-size:15px;line-height:1.65;max-width:44ch;
}
.rappel-cartes{
  display:grid;min-width:0;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:14px;
}
.rappel-carte{
  display:flex;flex-direction:column;gap:14px;min-width:0;
  padding:20px 18px;
  background-color:var(--blanc);border:1px solid var(--bord);border-radius:18px;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.rappel-carte:hover{border-color:var(--terre);transform:translateY(-3px);box-shadow:0 16px 30px rgba(51,38,31,.09)}
.rappel-carte.est-actif{border-color:var(--terre);background-color:var(--terre-pale)}
.rappel-carte .rond{
  width:42px;height:42px;border-radius:50%;flex:none;
  border:1px solid var(--bord);display:grid;place-items:center;color:var(--terre);
  background-color:var(--creme);
}
.rappel-carte.est-actif .rond{background-color:var(--blanc);border-color:var(--terre)}
.rappel-carte .nom{
  font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.015em;
}
.rappel-carte .pied-carte{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:14px;
}
.rappel-carte .n{font-size:12.5px;font-weight:600;color:var(--gris);font-variant-numeric:tabular-nums}
.rappel-carte .fleche{color:var(--encre);display:grid;place-items:center}
.rappel-carte:hover .fleche{color:var(--terre)}

@media(max-width:1100px){
  .rappel{grid-template-columns:1fr;gap:26px;padding-bottom:32px;margin-bottom:34px}
  .rappel-desc{max-width:none}
}
@media(max-width:980px){
  .banniere{margin:-22px -18px 26px;min-height:180px;border-radius:0 0 20px 20px}
  .banniere-corps{padding:26px 20px 22px;gap:18px}
  .banniere-desc{font-size:14.5px}
  .rappel-cartes{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .rappel-carte{flex-direction:row;align-items:center;gap:12px;padding:14px}
  .rappel-carte .rond{width:36px;height:36px}
  .rappel-carte .pied-carte{margin:0 0 0 auto;padding:0;gap:10px}
}

/* ============ MENU RÉDUCTIBLE ============ */
.rail-tete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:0 18px 4px 22px;
}
.rail-tete .rail-marque{padding:0 0 22px}
.rail-bascule{
  width:32px;height:32px;border-radius:9px;flex:none;
  display:grid;place-items:center;color:var(--gris);
  border:1px solid transparent;
  transition:background-color .15s,color .15s,border-color .15s;
}
.rail-bascule:hover{background-color:var(--creme);color:var(--terre);border-color:var(--bord)}

/* --- État replié --- */
.app.est-reduit{grid-template-columns:78px 1fr}
.app.est-reduit .rail{
  width:100%;min-width:0;
  /* Visible dans les deux sens : les infobulles doivent pouvoir sortir
     de la colonne. Le menu replié est court, il n'a pas besoin de défiler. */
  overflow:visible;
}
.app.est-reduit .rail nav,
.app.est-reduit .rail-tete,
.app.est-reduit .rail-pied,
.app.est-reduit .lien,
.app.est-reduit .deconnexion{min-width:0;max-width:100%}

.app.est-reduit .rail-tete{
  flex-direction:column;align-items:center;gap:6px;padding:0 10px 4px;
}
.app.est-reduit .rail-marque{padding:0 0 10px}
/* Le logo cède la place au symbole seul */
.app.est-reduit .rail-marque .logo{display:none}
.app.est-reduit .rail-marque::after{
  content:"";display:block;width:26px;height:27px;margin:0 auto;
  background-color:var(--terre);
  -webkit-mask:var(--symbole) center/contain no-repeat;
  mask:var(--symbole) center/contain no-repeat;
}

.app.est-reduit .rail nav{padding:0 10px}
/* Les libellés s'effacent au lieu de disparaître d'un coup :
   leur largeur se referme en même temps que la colonne. */
.libelle,
.lien .n{
  display:inline-block;white-space:nowrap;
  transition:opacity .18s ease,max-width .34s cubic-bezier(.4,0,.2,1);
  max-width:200px;opacity:1;overflow:hidden;
}
.app.est-reduit .libelle,
.app.est-reduit .lien .n{max-width:0;opacity:0;margin:0}

.app.est-reduit .rail-titre,
.app.est-reduit .chevron,
.app.est-reduit .sous-liens,
.app.est-reduit .rail-pied .compte div{display:none}

.app.est-reduit .lien,
.app.est-reduit .deconnexion{
  justify-content:center;padding:11px 0;gap:0;
}
.app.est-reduit .lien .icone{opacity:.85}
.app.est-reduit .lien.est-actif .icone{opacity:1}

.app.est-reduit .rail-pied{margin:14px 10px 0;text-align:center}
.app.est-reduit .rail-pied .compte{justify-content:center}

/* Séparateur discret à la place des intertitres masqués */
.app.est-reduit nav .rail-titre + .lien{margin-top:14px}
.app.est-reduit nav > .lien + .rail-titre{
  display:block;height:1px;padding:0;margin:14px 12px;
  background-color:var(--bord);font-size:0;overflow:hidden;
}

/* Infobulle au survol, puisque le libellé est masqué */
.app.est-reduit .lien,
.app.est-reduit .deconnexion,
.app.est-reduit .rail-bascule{position:relative}
.app.est-reduit .lien::after,
.app.est-reduit .deconnexion::after{
  content:attr(title);
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  padding:7px 12px;border-radius:8px;white-space:nowrap;
  background-color:var(--encre);color:#fff;
  font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;
  opacity:0;pointer-events:none;transition:opacity .14s;
  z-index:60;
}
.app.est-reduit .lien:hover::after,
.app.est-reduit .deconnexion:hover::after{opacity:1}

@media(max-width:980px){
  /* En tiroir, la réduction n'a pas de sens */
  .rail-bascule{display:none}
  .app.est-reduit{grid-template-columns:1fr}
  .app.est-reduit .rail{width:var(--rail)}
  .app.est-reduit .rail-titre,
  .app.est-reduit .sous-liens,
  .app.est-reduit .rail-pied .compte div{display:revert}
  .app.est-reduit .libelle,
  .app.est-reduit .lien .n{max-width:200px;opacity:1}
  .app.est-reduit .rail-marque .logo{display:block}
  .app.est-reduit .rail-marque::after{content:none}
  .app.est-reduit .lien,
  .app.est-reduit .deconnexion{justify-content:flex-start;padding:10px 12px;gap:12px}
  .app.est-reduit .rail-tete{flex-direction:row;padding:0 18px 4px 22px}
}

/* ============ MISES EN AVANT DE L'ACCUEIL ============ */
.avants{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:48px;
}
.avant{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:300px;padding:34px;border-radius:22px;
  background-color:var(--creme-fonce);
  background-size:cover;background-position:center;
  color:#fff;
  transition:transform .22s,box-shadow .22s;
}
.avant:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(51,38,31,.16)}
.avant::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(0deg,rgba(38,27,21,.82) 0,rgba(38,27,21,.42) 48%,rgba(38,27,21,.14) 100%);
}
.avant-symbole{
  position:absolute;right:-24px;top:-30px;z-index:1;
  color:rgba(255,255,255,.10);pointer-events:none;
}
.avant-corps{position:relative;z-index:2;display:block;max-width:46ch}
.avant .etiquette-filet{color:rgba(255,255,255,.88);display:flex}
.avant-titre{
  display:block;font-size:clamp(24px,2.6vw,32px);font-weight:600;
  letter-spacing:-.035em;line-height:1.06;
}
.avant-sous{
  display:block;margin-top:10px;font-size:13.5px;font-weight:600;
  letter-spacing:.05em;color:rgba(255,255,255,.80);
}
.avant-texte{
  display:block;margin-top:14px;font-size:15px;line-height:1.6;
  color:rgba(255,255,255,.88);
}
.avant-cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:24px;padding:12px 24px;border-radius:999px;
  background-color:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.34);
  font-size:14px;font-weight:600;
}
.avant:hover .avant-cta{background-color:var(--terre);border-color:var(--terre)}

/* Le premier bloc occupe toute la largeur */
.avant-large{grid-column:1 / -1;min-height:clamp(320px,32vw,400px);padding:40px 44px}
.avant-large .avant-titre{font-size:clamp(30px,3.6vw,46px)}
.avant-large .avant-texte{font-size:16px;max-width:52ch}

/* Sans image chargée, on reste dans la palette */
.avant:not([style]){
  background-image:linear-gradient(135deg,#D89C7D,#C17E60 52%,#8E5641);
}
.avant-vide{opacity:.92}

@media(max-width:980px){
  .avants{grid-template-columns:1fr;gap:14px;margin-bottom:34px}
  .avant{min-height:240px;padding:24px;border-radius:18px}
  .avant-large{min-height:280px;padding:26px}
  .avant-texte{font-size:14.5px}
}

/* ============ SYMBOLE DANS LE BANDEAU ============ */
.banniere-marque{
  color:#fff;opacity:.26;
  margin:0 0 -6px -6px;
  filter:none;
}
@media(max-width:980px){
  .banniere-marque{transform:scale(.6);transform-origin:left bottom;margin-bottom:-14px}
}
/* Le filigrane géant faisait doublon avec le symbole du texte */
.banniere-symbole{display:none}

/* ============ ÉTIQUETTE SANS FILET ============ */
/* Sous un grand titre, le tiret alourdit plus qu'il ne structure. */
.rappel-texte .etiquette-filet i{display:none}
.rappel-texte .etiquette-filet{gap:0}

/* ============ TRANSITIONS DE PAGE ============ */
@keyframes sme-entree{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@keyframes sme-bandeau{
  from{opacity:0;transform:scale(1.03)}
  to{opacity:1;transform:none}
}

.contenu{animation:sme-entree .40s cubic-bezier(.22,.61,.36,1) both}
.banniere{animation:sme-bandeau .55s cubic-bezier(.22,.61,.36,1) both}
.avants{animation:sme-entree .46s cubic-bezier(.22,.61,.36,1) .04s both}
.rappel{animation:sme-entree .44s cubic-bezier(.22,.61,.36,1) .06s both}

/* Les vignettes arrivent en cascade, sans jamais dépasser un tiers de seconde */
.grille .fiche{animation:sme-entree .42s cubic-bezier(.22,.61,.36,1) both}
.grille .fiche:nth-child(1){animation-delay:.02s}
.grille .fiche:nth-child(2){animation-delay:.05s}
.grille .fiche:nth-child(3){animation-delay:.08s}
.grille .fiche:nth-child(4){animation-delay:.11s}
.grille .fiche:nth-child(5){animation-delay:.14s}
.grille .fiche:nth-child(6){animation-delay:.17s}
.grille .fiche:nth-child(7){animation-delay:.20s}
.grille .fiche:nth-child(n+8){animation-delay:.23s}

/* Sortie : la zone s'estompe pendant que la page suivante se charge */
.zone{transition:opacity .17s ease,transform .17s ease}
body.en-sortie .zone{opacity:0;transform:translateY(-6px)}
body.en-sortie .rail{opacity:.72;transition:opacity .17s ease}

/* La visionneuse s'ouvre en douceur */
.visio.is-open .visio-boite{animation:sme-entree .28s cubic-bezier(.22,.61,.36,1) both}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .app,.libelle,.lien .n{transition:none!important}
  .zone{transition:none}
  body.en-sortie .zone{opacity:1;transform:none}
}

/* ============ PAGE DE CONNEXION — BOUTONS ============ */
.auth-actions{
  position:absolute;z-index:3;
  top:clamp(34px,4vw,48px);right:clamp(40px,5.5vw,88px);
  display:flex;align-items:center;gap:10px;
}
.auth-cta{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:999px;
  border:1px solid var(--bord);background-color:var(--blanc);
  font-size:13.5px;font-weight:600;color:var(--encre);
  white-space:nowrap;
  transition:background-color .18s,border-color .18s,color .18s,transform .14s;
}
.auth-cta:hover{border-color:var(--terre);color:var(--terre);transform:translateY(-1px)}
.auth-cta .icone{opacity:.6}
.auth-cta:hover .icone{opacity:1}
.auth-cta.est-plein{
  background-color:var(--terre);border-color:var(--terre);color:#fff;
}
.auth-cta.est-plein:hover{background-color:var(--terre-fonce);border-color:var(--terre-fonce);color:#fff}
.auth-cta.est-plein .icone{opacity:.9}

/* Le panneau laisse la place aux boutons */
.auth-panneau{padding-top:clamp(110px,12vw,150px)}

/* ============ PAGE DE CONNEXION — ARRONDI ACCENTUÉ ============ */
.auth-visuel{border-radius:0 56px 56px 0}

/* ============ PAGE DE CONNEXION — ANIMATIONS ============ */
@keyframes sme-visuel{
  from{opacity:0;transform:scale(1.05)}
  to{opacity:1;transform:none}
}
.auth-visuel{animation:sme-visuel .8s cubic-bezier(.22,.61,.36,1) both}
.mention-visuel{animation:sme-entree .6s cubic-bezier(.22,.61,.36,1) .34s both}
.mention-visuel-bas{animation:sme-entree .6s cubic-bezier(.22,.61,.36,1) .40s both}

.auth-tete{animation:sme-entree .55s cubic-bezier(.22,.61,.36,1) .06s both}
.auth-actions{animation:sme-entree .55s cubic-bezier(.22,.61,.36,1) .12s both}
.auth-form .salut{animation:sme-entree .6s cubic-bezier(.22,.61,.36,1) .16s both}
.auth-form .sous{animation:sme-entree .6s cubic-bezier(.22,.61,.36,1) .22s both}
.auth-form .champ:nth-of-type(1){animation:sme-entree .6s cubic-bezier(.22,.61,.36,1) .28s both}
.auth-form .champ:nth-of-type(2){animation:sme-entree .6s cubic-bezier(.22,.61,.36,1) .33s both}
.auth-form .btn-primaire{animation:sme-entree .6s cubic-bezier(.22,.61,.36,1) .38s both}
.auth-form .aide{animation:sme-entree .6s cubic-bezier(.22,.61,.36,1) .44s both}
.auth-legal{animation:sme-entree .6s cubic-bezier(.22,.61,.36,1) .50s both}

@media(max-width:1180px){
  .auth-cta:not(.est-plein){display:none}
}
@media(max-width:980px){
  .auth-visuel{border-radius:0}
  .auth-actions{
    position:static;margin-bottom:26px;
    justify-content:flex-start;flex-wrap:wrap;
  }
  .auth-cta:not(.est-plein){display:inline-flex}
  .auth-panneau{padding-top:34px}
}