/* ==========================================================================
   Ajouts pour le site éditable — ne modifie pas le design de style.css
   ========================================================================== */

/* Espacement entre blocs d'une même bande */
.cms-bloc + .cms-bloc { margin-top: 24px; }
.cms-bloc > .narrow > :last-child,
.cms-bloc > .container > :last-child { margin-bottom: 0; }
.def-list dd p:last-child, .note p:last-child, .box p:last-child { margin-bottom: 0; }
.prose > :last-child { margin-bottom: 0; }

/* ---------- Mode modification (visible seulement une fois connecté) ---------- */
.barre-modif {
  position: sticky; top: 0; z-index: 90;
  background: var(--orange); color: var(--dark-950);
  font-weight: 600; font-size: 1rem;
}
.barre-modif .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 0; }
.barre-modif .salut { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; }
.barre-modif a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--dark-950); color: var(--white); text-decoration: none; font-weight: 700;
}
.barre-modif a:hover { background: var(--dark-800); }
.barre-modif a.secondaire { background: transparent; color: var(--dark-950); border: 2px solid var(--dark-950); }
.barre-modif svg { width: 18px; height: 18px; }
.brouillon-info { background: var(--orange-50); border-bottom: 1px solid var(--orange-300); color: var(--orange-600); font-weight: 600; }
.brouillon-info .container { padding: 8px 0; }

.cms-editable { position: relative; }
/* le crayon est aligné sur la largeur réelle du bloc (étroite ou large) */
.rangee-crayon { position: relative; height: 0; z-index: 5; }
.cms-editable > .narrow:not(.rangee-crayon),
.cms-editable > .container:not(.rangee-crayon) { border-radius: 12px; outline: 2px dashed transparent; outline-offset: 12px; transition: outline-color .15s; }
.cms-editable:hover > .narrow:not(.rangee-crayon),
.cms-editable:hover > .container:not(.rangee-crayon) { outline-color: var(--orange); }
.crayon {
  position: absolute; top: -22px; right: -14px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--orange); color: var(--dark-950); font-weight: 700; font-size: 0.95rem; text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.5);
}
.crayon:hover { background: var(--orange-600); color: var(--white); }
.crayon svg { width: 16px; height: 16px; }
.home-hero .cms-editable > .crayon, .section > .cms-editable > .crayon { top: -14px; right: 4px; }

/* ---------- Formulaire de contact : messages ---------- */
.form-erreur { background: var(--red-50); border-left: 5px solid var(--red); padding: 12px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0; }

/* accueil : le conteneur lui-même est modifiable */
.container.cms-editable { border-radius: 12px; outline: 2px dashed transparent; outline-offset: 12px; transition: outline-color .15s; }
.container.cms-editable:hover { outline-color: var(--orange); }