/* ==========================================================================
   Raccords WordPress
   --------------------------------------------------------------------------
   Tout ce que le site statique n'avait pas à connaître : la barre d'outils
   d'administration, le balisage de Contact Form 7 et les classes de contenu
   de l'éditeur. Les garder séparés de site.css permet de reporter une
   retouche du site d'origine par simple copie du fichier.

   Nicolas Lion — Nicolas Lion Informatique — https://nlion.fr
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Barre d'outils d'administration
   L'en-tête du site est fixé en haut de fenêtre, exactement là où WordPress
   pose sa barre. Sans ce décalage, la navigation disparaît derrière elle
   pour toute personne connectée — c'est-à-dire pour le client.
   -------------------------------------------------------------------------- */

body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* Le panneau de navigation mobile couvre l'écran : il doit démarrer sous la
   barre, sinon son premier lien est inatteignable. */
@media (max-width: 900px) {
  body.admin-bar .nav {
    top: 32px;
  }
}

@media screen and (max-width: 782px) {
  body.admin-bar .nav {
    top: 46px;
  }
}

/* --------------------------------------------------------------------------
   02. Contact Form 7
   Les champs portent déjà les classes du site (form__input, form__select,
   form__textarea, btn) : leur apparence vient de site.css et n'est pas
   redéfinie ici. Il ne reste qu'à replacer les enveloppes que l'extension
   insère d'office, et qui décalent la mise en page si on les laisse faire.
   -------------------------------------------------------------------------- */

/* Le rythme vertical du formulaire vient de `.form { display: grid; gap }`.
   Sous WordPress, .form est un conteneur et le vrai <form> se trouve deux
   niveaux plus bas : sans cette reprise, toutes les lignes se retrouvent
   collées les unes aux autres. */
.form .wpcf7-form {
  display: grid;
  gap: 1.35rem;
}

/* L'extension enveloppe chaque champ. Le conteneur .form__field est en
   colonne flex : cette enveloppe doit se comporter comme un bloc ordinaire
   pour ne pas casser l'alignement du libellé et du champ. */
.wpcf7-form-control-wrap {
  display: block;
  position: static;
}

/* Les champs cachés de l'extension forment sinon une ligne de grille vide,
   qui ajoute une respiration de trop avant le bouton d'envoi. */
.wpcf7-form .hidden-fields-container {
  display: none;
}

/* Case de consentement : l'extension remplace la paire case + libellé par
   trois <span> imbriqués. On rend au <label> le rôle de rangée flex que
   .form__consent attendait de ses enfants directs. */
.form__consent .wpcf7-list-item {
  margin: 0;
}

.form__consent .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.form__consent .wpcf7-list-item-label {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Messages de validation. */
.wpcf7 form .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  border-radius: var(--radius);
  border-width: 1px;
  border-style: solid;
}

.wpcf7 form.sent .wpcf7-response-output {
  color: var(--ivory);
  background: rgba(240, 180, 41, 0.12);
  border-color: var(--brass);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  color: var(--ivory);
  background: rgba(176, 27, 46, 0.14);
  border-color: var(--velvet-lt);
}

.wpcf7-not-valid-tip {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--velvet-lt);
}

.form .wpcf7-not-valid {
  border-color: var(--velvet-lt) !important;
}

/* Indicateur d'envoi. */
.wpcf7-spinner {
  margin-inline-start: 0.75rem;
  background-color: var(--accent);
}

/* --------------------------------------------------------------------------
   03. Textes de plusieurs paragraphes
   Un chapô tient normalement en un paragraphe et reprend alors le balisage
   d'origine. S'il en compte plusieurs, il est enveloppé dans un <div> de même
   classe : ses paragraphes héritent du style, il ne reste qu'à recaler les
   marges extérieures.
   -------------------------------------------------------------------------- */

div.lead > p:first-child,
div.section__intro > p:first-child,
div.cta-band__text > p:first-child,
div.hero__lead > p:first-child,
div.card__text > p:first-child,
div.sur-mesure__text > p:first-child {
  margin-top: 0;
}

div.lead > p:last-child,
div.section__intro > p:last-child,
div.cta-band__text > p:last-child,
div.hero__lead > p:last-child,
div.card__text > p:last-child,
div.sur-mesure__text > p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   04. Contenu libre de l'éditeur
   Utilisé par la page des mentions légales, seule page dont le corps est
   rédigé dans l'éditeur habituel de WordPress.
   -------------------------------------------------------------------------- */

.entry-content > *:first-child {
  margin-top: 0;
}

.entry-content h2 {
  margin-top: 3rem;
}

.entry-content h2:first-child {
  margin-top: 0;
}

.entry-content h3 {
  margin-top: 2rem;
}

.entry-content p,
.entry-content li {
  color: var(--text-muted);
}

.entry-content a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content a:hover {
  color: var(--brass-lt);
}

.entry-content ul,
.entry-content ol {
  margin: 1.25rem 0 1.25rem 1.5rem;
}

.entry-content li {
  margin-bottom: 0.5rem;
}

.entry-content code {
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--surface);
  border-radius: var(--radius);
}

.entry-content blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
  font-style: italic;
}

.entry-content img,
.entry-content iframe {
  max-width: 100%;
  height: auto;
}

.entry-content .alignleft {
  float: left;
  margin: 0.5rem 2rem 1.5rem 0;
}

.entry-content .alignright {
  float: right;
  margin: 0.5rem 0 1.5rem 2rem;
}

.entry-content .aligncenter {
  display: block;
  margin-inline: auto;
}

.entry-content .wp-caption-text,
.entry-content figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   05. Champ masqué de lutte contre les robots
   Le piège doit rester invisible à l'œil sans être retiré du document : un
   display:none serait ignoré par la plupart des robots.
   -------------------------------------------------------------------------- */

.jsc-pot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}