/* Espace d'administration — pensé pour être lisible et utilisable par tous :
   grand texte, fort contraste, gros boutons, une seule colonne. */
:root{
  --fond:#f4f1ea; --carte:#ffffff; --texte:#1a1a1a; --doux:#555; --ligne:#cfc8b8;
  --bleu:#1b4f8f; --bleu-fonce:#123a6b; --vert:#1c7a3a; --vert-fonce:#14602d;
  --rouge:#b3261e; --rouge-fonce:#8f1d17; --jaune:#fff3c4; --orange:#8a4b00;
  font-size:20px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--fond); color:var(--texte); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.5;}
h1{font-size:1.9rem; margin:.4em 0 .3em; line-height:1.2;}
h2{font-size:1.4rem; margin:0 0 .6em; line-height:1.25;}
h3{font-size:1.15rem; margin:1.2em 0 .5em;}
p{margin:.4em 0 .8em;}
a{color:var(--bleu);}
:focus-visible{outline:4px solid #ffb300; outline-offset:2px;}
.chargement{padding:40px; font-size:1.2rem;}

/* Boutons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em; text-align:center;
  min-height:60px; padding:12px 22px; border-radius:14px; border:3px solid transparent;
  font:inherit; font-weight:700; font-size:1rem; cursor:pointer; text-decoration:none; line-height:1.2;
  transition:background .15s, transform .05s;
}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.principal{background:var(--bleu); color:#fff;}
.btn.principal:hover:not(:disabled){background:var(--bleu-fonce);}
.btn.secondaire{background:#fff; color:var(--bleu-fonce); border-color:var(--bleu);}
.btn.secondaire:hover:not(:disabled){background:#e8f0fa;}
.btn.danger{background:#fff; color:var(--rouge); border-color:var(--rouge);}
.btn.danger:hover:not(:disabled){background:var(--rouge); color:#fff;}
.btn.publier{background:var(--vert); color:#fff; font-size:1.15rem; min-height:68px; padding:12px 28px;}
.btn.publier:hover:not(:disabled){background:var(--vert-fonce);}
.btn.publier:disabled{background:#8a8a8a;}
.btn.grand{min-height:72px; font-size:1.15rem; width:100%;}
.btn.petit{min-height:48px; padding:8px 14px; font-size:.9rem;}

/* Connexion */
.connexion{max-width:560px; margin:0 auto; padding:32px 20px 60px;}
.connexion-logo{display:block; height:90px; margin:0 auto 10px; background:#0b0908; padding:10px 18px; border-radius:14px;}
.connexion h1{text-align:center;}
.connexion-texte{text-align:center; font-size:1.1rem;}
.connexion form{background:var(--carte); border:2px solid var(--ligne); border-radius:18px; padding:24px;}
.connexion-retour{text-align:center; margin-top:20px;}
label,.etiquette{display:block; font-weight:700; margin:1em 0 .3em; font-size:1.05rem;}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%; min-height:58px; padding:12px 14px; font:inherit; font-size:1.05rem;
  border:3px solid var(--ligne); border-radius:12px; background:#fff; color:var(--texte);
}
input:focus,select:focus,textarea:focus{border-color:var(--bleu); outline:none; box-shadow:0 0 0 4px rgba(27,79,143,.25);}
textarea{resize:vertical; min-height:100px; line-height:1.5;}
.mdp-ligne{display:flex; gap:10px;}
.mdp-ligne input{flex:1;}
.alerte{background:#fde7e5; border:2px solid var(--rouge); color:#7a1812; padding:12px 14px; border-radius:12px; font-weight:600;}

/* Barres du haut */
.barre-haut{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 20px; background:#0b0908; color:#fff; flex-wrap:wrap;}
.marque{display:flex; align-items:center; gap:14px; color:#fff; text-decoration:none; font-weight:700; font-size:1.1rem;}
.marque img{height:46px;}
.barre-utilisateur{display:flex; align-items:center; gap:12px;}
.qui{font-size:.95rem; opacity:.9;}
.barre-publier{position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 20px; border-bottom:4px solid; box-shadow:0 4px 12px rgba(0,0,0,.12);}
.barre-publier .etat{margin:0; font-weight:600; flex:1 1 320px;}
.actions-publier{display:flex; gap:12px; flex-wrap:wrap;}
.barre-publier.ok{background:#e3f4e8; border-color:var(--vert);}
.barre-publier.brouillon{background:var(--jaune); border-color:#e0a800;}
.barre-publier.attente-barre{background:#e8eef7; border-color:var(--bleu);}
.barre-publier.alerte-barre{background:#fde7e5; border-color:var(--rouge);}

/* Contenu */
.contenu{max-width:900px; margin:0 auto; padding:24px 20px 80px;}
.intro{font-size:1.1rem; background:#fff; border-left:8px solid var(--bleu); padding:14px 18px; border-radius:6px;}
.aide{color:var(--doux); font-size:.9rem; margin:.1em 0 .5em;}
.aide-groupe{color:var(--doux);}
.groupe{margin:34px 0;}
.groupe h2{border-bottom:3px solid var(--ligne); padding-bottom:6px;}
.tuiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px;}
.tuile{display:flex; align-items:center; gap:14px; padding:16px 18px; min-height:96px; background:var(--carte); border:3px solid var(--ligne); border-radius:16px; text-decoration:none; color:var(--texte); transition:border-color .15s, box-shadow .15s;}
.tuile:hover,.tuile:focus-visible{border-color:var(--bleu); box-shadow:0 6px 18px rgba(27,79,143,.18);}
.tuile-icone{font-size:2.2rem; line-height:1;}
.tuile-texte{display:flex; flex-direction:column; gap:2px;}
.tuile-texte strong{font-size:1.1rem;}
.tuile-texte small{color:var(--doux); font-size:.85rem;}
.retour{margin-bottom:10px;}
.bas-ecran{display:flex; gap:12px; flex-wrap:wrap; margin-top:36px;}
.bloc{background:var(--carte); border:2px solid var(--ligne); border-radius:18px; padding:22px 22px 14px; margin:20px 0;}
.champ{margin:0 0 20px;}
.champ>label:first-child,.champ>.etiquette:first-child{margin-top:0;}
.oui-non{display:flex; gap:12px;}
.oui-non .btn{flex:1; max-width:200px;}
.vide{color:var(--doux); font-style:italic;}
.ok{color:var(--vert-fonce); font-weight:700;}
.ko{color:var(--rouge); font-weight:700;}
.neutre{color:var(--doux);}

/* Images */
.image-champ{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.apercu-image{max-width:260px; max-height:180px; border-radius:12px; border:3px solid var(--ligne); background:#eee; object-fit:contain;}
.apercu-vide{width:260px; height:120px; display:flex; align-items:center; justify-content:center; border:3px dashed var(--ligne); border-radius:12px; color:var(--doux);}
.image-actions{display:flex; flex-direction:column; gap:10px;}
.yt-etat{display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap;}
.yt-vignette{height:64px; border-radius:8px; border:2px solid var(--ligne);}

/* Listes */
.liste{margin:8px 0 18px;}
.liste-titre{margin-top:0;}
.item{border:3px solid var(--ligne); border-radius:16px; background:#faf8f3; margin:0 0 14px; overflow:hidden;}
.item.ouvert{border-color:var(--bleu); background:#fff;}
.item-tete{display:flex; flex-direction:column; gap:8px; padding:10px;}
.item-titre{display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:8px 12px; background:transparent; border:0; text-align:left; font:inherit; cursor:pointer; border-radius:12px;}
.item-titre:hover{background:#eef3fa;}
.pastille{flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:var(--bleu); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;}
.item-nom{flex:1; font-weight:700; font-size:1.05rem; display:flex; flex-direction:column;}
.item-nom small{font-weight:400; color:var(--doux); font-size:.8rem;}
.item-fleche{flex:0 0 auto; color:var(--bleu-fonce); font-weight:700;}
.item-actions{display:flex; gap:8px; flex-wrap:wrap; padding-left:6px;}
.item-corps{padding:6px 18px 10px; border-top:2px solid var(--ligne);}
.item-corps .liste{background:#f4f1ea; border-radius:12px; padding:12px; margin-top:14px;}
.ajouter{margin-top:6px; width:100%;}
.textes{display:flex; flex-direction:column; gap:10px; margin-bottom:10px;}
.texte-ligne{display:flex; gap:10px;}
.texte-ligne input{flex:1;}

/* Photos */
.grille-photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin:10px 0 20px;}
.grille-photos.grosse{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.photo-choix,.photo-carte{display:flex; flex-direction:column; gap:6px; background:#fff; border:3px solid var(--ligne); border-radius:12px; padding:8px; font:inherit; text-align:left;}
.photo-choix{cursor:pointer;}
.photo-choix:hover,.photo-choix:focus-visible{border-color:var(--bleu);}
.photo-choix.actuelle{border-color:var(--vert); box-shadow:0 0 0 3px var(--vert);}
.photo-choix img,.photo-carte img{width:100%; height:110px; object-fit:cover; border-radius:8px; background:#ddd;}
.photo-carte:not(.petite) img{height:150px;}
.photo-choix span,.photo-carte .nom{font-size:.8rem; color:var(--doux); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.envoi{margin-bottom:16px;}

/* Listes simples */
.liste-simple{list-style:none; margin:0; padding:0;}
.liste-simple li{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 0; border-bottom:2px solid var(--ligne);}
.liste-simple small{color:var(--doux);}
.boutons-ligne{display:flex; gap:10px; flex-wrap:wrap;}
.liste-puces li{margin-bottom:.7em;}
.form-simple input,.form-simple select{margin-bottom:6px;}

/* Aide */
.etapes{list-style:none; padding:0; margin:20px 0;}
.etape{display:flex; gap:18px; background:#fff; border:2px solid var(--ligne); border-radius:16px; padding:18px; margin-bottom:14px;}
.numero{flex:0 0 auto; width:56px; height:56px; border-radius:50%; background:var(--vert); color:#fff; font-size:1.6rem; font-weight:800; display:flex; align-items:center; justify-content:center;}
.etape h3{margin:0 0 4px;}
.etape p{margin:0;}

/* Dialogues */
.fond-dialogue{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow:auto; z-index:1000;}
.dialogue{background:#fff; border-radius:20px; padding:26px; max-width:560px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.4);}
.dialogue.large{max-width:900px;}
.dialogue h2{margin-top:0;}
.dialogue-boutons{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}
.dialogue-boutons .btn{flex:1 1 200px;}
.grande-icone{font-size:3.5rem; text-align:center;}
.attente{display:flex; align-items:center; gap:16px; font-size:1.2rem; margin:0;}
.roue{width:34px; height:34px; border:5px solid var(--ligne); border-top-color:var(--bleu); border-radius:50%; animation:tour 1s linear infinite; flex:0 0 auto;}
@keyframes tour{to{transform:rotate(360deg);}}

@media (max-width:640px){
  :root{font-size:19px;}
  .barre-haut{padding:8px 12px;}
  .marque span{font-size:.95rem;}
  .marque img{height:38px;}
  .barre-publier{padding:8px 12px; gap:6px;}
  .barre-publier .etat{flex:1 1 100%; font-size:.85rem; line-height:1.3;}
  .actions-publier{flex:1 1 100%;}
  .actions-publier .btn{flex:1 1 100%; min-height:54px;}
  .actions-publier #b-voir{display:none;}
  .contenu{padding:16px 12px 80px;}
  .bloc{padding:16px 14px 8px;}
  .apercu-vide,.apercu-image{width:100%; max-width:none;}
  .image-actions{width:100%;}
  .image-actions .btn{width:100%;}
  .oui-non .btn{max-width:none;}
}
form .btn.grand{margin-top:18px;}
.apercu-accueil{display:none;}
@media (max-width:640px){ .apercu-accueil{display:block;} }
.item-titre{flex-wrap:wrap;}
.item-nom{min-width:0; flex:1 1 150px; overflow-wrap:anywhere;}
@media (max-width:640px){
  .item-tete{padding:6px;}
  .item-titre{gap:8px; padding:6px 8px;}
  .pastille{width:34px; height:34px; font-size:.9rem;}
  .item-fleche{flex:1 1 100%; padding-left:42px; font-size:.95rem;}
  .item-actions{padding-left:0;}
  .item-actions .btn{flex:1 1 auto; padding:6px 10px;}
  .item-corps{padding:4px 10px 8px;}
  .item-corps .liste{padding:8px;}
  .item-corps .item-corps{padding:4px 6px 8px;}
}