@charset "UTF-8";
/* ============================================================================
   PAGES FIXES - design_handoff_pages (L'auteur, Contact, Liens)
   Charge par functions.php pour les pages sans modele special (page.php du theme enfant), apres list.css
   qui porte le cadre blanc, le fil d'Ariane et l'en-tete communs avec les categories (.wpd-arch).
   Markup : page.php (.wpd-fixe > .wpd-arch-head + .entry.wpd-entry), contenu de la page dans l'editeur.
   article.css n'est pas touche : on en reprend les VARIABLES (--fs-corps, --lh-corps, --f-texte, --c-bleu...)
   mais pas les selecteurs, tous limites a body.single-post.
   Formulaire : extension Jetpack "Formulaires" (classes grunion-* / contact-form*), restylee sans la modifier.
   ========================================================================== */

/* ---------- En-tete : meme bloc que les categories, filet + 32px avant le contenu ---------- */
body .wpd-fixe .wpd-fixe-head { padding: 16px 0 24px; margin-bottom: 24px; }   /* + 8px de gap du conteneur */

/* ---------- Texte (.entry) ---------- */
body .wpd-fixe .wpd-entry {
  font-family: var(--f-texte);
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
  color: var(--c-texte);
  overflow-wrap: anywhere;
}
/* mesure de lecture : le texte, pas les grilles ni le formulaire (qui ont leur propre largeur) */
body .wpd-fixe .wpd-entry > :is(p, h2, h3, h4, ul, ol, blockquote) { max-width: 70ch; }
body .wpd-fixe .wpd-entry > p {
  margin: 0 0 22px;
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
  text-align: left;
  text-wrap: pretty;
}
body .wpd-fixe .wpd-entry > p:empty,
body .wpd-fixe .wpd-entry > p:has(> br:only-child) { display: none; }
body .wpd-fixe .wpd-entry > :is(h2, h3, h4) {
  margin: 32px 0 12px;
  font-family: var(--f-titre);
  font-weight: 500;
  line-height: var(--lh-titre);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-bleu-fonce);
}
body .wpd-fixe .wpd-entry > h2 { font-size: var(--fs-h2); }
body .wpd-fixe .wpd-entry > :is(h3, h4) { font-size: var(--fs-h3); }
body .wpd-fixe .wpd-entry > :is(ul, ol) { margin: 0 0 22px; padding-left: 1.25em; }
body .wpd-fixe .wpd-entry > :is(ul, ol) li { margin: 0 0 var(--esp-2); }
body .wpd-fixe .wpd-entry > :is(ul, ol) li::marker { color: var(--c-bleu); }
body .wpd-fixe .wpd-entry > p a,
body .wpd-fixe .wpd-entry > :is(ul, ol) li a {
  color: var(--c-bleu);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body .wpd-fixe .wpd-entry > p a:hover,
body .wpd-fixe .wpd-entry > :is(ul, ol) li a:hover { color: var(--c-bleu-fonce); text-decoration-thickness: 2px; }
body .wpd-fixe .wpd-entry > p a:visited { color: #3D3A8F; }
body .wpd-fixe .wpd-entry > p :is(strong, b) { font-weight: 600; color: #101C29; }
body .wpd-fixe .wpd-entry > p :is(em, i) { font-style: italic; }
body .wpd-fixe .wpd-entry img { max-width: 100%; height: auto; }
body .wpd-fixe .wpd-pages { margin: 0 0 22px; }

/* ---------- L'auteur : signature (paragraphe avec la classe "signature") ---------- */
body .wpd-fixe .wpd-entry > p.signature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: fit-content;
  min-width: 220px;
  margin-top: 32px;
  padding-top: 12px;
  border-top: 2px solid var(--c-bleu);
}
body .wpd-fixe .wpd-entry > p.signature br { display: none; }
body .wpd-fixe .wpd-entry > p.signature :is(strong, b) {
  font-family: var(--f-titre);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-bleu-fonce);
}
body .wpd-fixe .wpd-entry > p.signature a { font-size: 16px; line-height: 1.4; text-decoration: none; }
body .wpd-fixe .wpd-entry > p.signature a:hover { text-decoration: underline; }

/* ---------- Contact : formulaire Jetpack ---------- */
body .wpd-fixe .jetpack-contact-form-container {
  --jetpack--contact-form--error-color: #B42318;
  max-width: 70ch;
  margin: 0;
}
body .wpd-fixe .contact-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
  margin: 0;
  font-family: var(--f-texte);
}
/* Nom et E-mail cote a cote (ordinateur), empiles (mobile) ; les autres champs et le bouton en pleine largeur */
body .wpd-fixe .contact-form .grunion-field-wrap,
body .wpd-fixe .contact-form .contact-submit,
body .wpd-fixe .contact-form .contact-form__error,
body .wpd-fixe .contact-form .pushbutton-wide { grid-column: 1 / -1; width: auto; margin: 0; }
body .wpd-fixe .contact-form > p:not(:has(*)) { display: none; }   /* paragraphes vides (le navigateur en laisse apres avoir sorti le bouton) : pas d'espace en trop */
body .wpd-fixe .contact-form .grunion-field-name-wrap,
body .wpd-fixe .contact-form .grunion-field-email-wrap { grid-column: auto; }
body .wpd-fixe .contact-form .grunion-field-wrap { display: flex; flex-direction: column; gap: 0; }   /* l'espace libelle/champ est la marge du libelle : le message d'erreur masque n'en ajoute pas */

/* Libelles : 16px / 600 ; "(obligatoire)" devient une ligne "Obligatoire" dessous, "Facultatif" pour le reste */
body .wpd-fixe .contact-form .grunion-field-label {
  display: block;
  margin: 0 0 8px;
  font: 600 16px/1.3 var(--f-texte);
  color: var(--c-texte);
}
body .wpd-fixe .contact-form .grunion-label-required { display: block; margin-top: 2px; font-size: 0; }
body .wpd-fixe .contact-form .grunion-label-required::after {
  content: "Obligatoire";
  font-size: 14px;
  font-weight: 400;
  color: #5B6B80;
}
body .wpd-fixe .contact-form .grunion-field-label:not(:has(.grunion-label-required))::after {
  content: "Facultatif";
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  color: #5B6B80;
}

/* Champs : 48px, cadre 1px, sans arrondi ; zone de message : 8 lignes, redimensionnable en hauteur */
body .wpd-fixe .contact-form .grunion-field-wrap :is(input:not([type="hidden"]), textarea).grunion-field {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #C5CFDB;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  font: 400 17px/1.4 var(--f-texte);
  color: var(--c-texte);
}
body .wpd-fixe .contact-form .grunion-field-wrap input.grunion-field { height: 48px; }
body .wpd-fixe .contact-form .grunion-field-wrap textarea.grunion-field {
  height: 224px;
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
}
body .wpd-fixe .contact-form .grunion-field-wrap :is(input, textarea).grunion-field:focus {
  border-color: var(--c-bleu);
  outline: 1px solid var(--c-bleu);
  outline-offset: 0;
}
body .wpd-fixe .contact-form .grunion-field-wrap :is(input, textarea).grunion-field[aria-invalid="true"] { border-color: #B42318; }

/* Bouton : a gauche, 48px, bleu marine ; survol bleu */
body .wpd-fixe .contact-form .pushbutton-wide {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: auto;
  height: 48px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: var(--c-bleu-fonce);
  font: 500 16px/1 var(--f-texte);
  color: #fff;
  cursor: pointer;
}
body .wpd-fixe .contact-form .pushbutton-wide:hover { background: var(--c-bleu); }
body .wpd-fixe .contact-form .pushbutton-wide:focus-visible { outline: 2px solid var(--c-bleu); outline-offset: 2px; }

/* Erreurs (sous le champ concerne, et resume au-dessus du bouton) et confirmation : 16px, erreurs en #B42318 */
body .wpd-fixe .contact-form .contact-form__input-error { font-size: 16px; line-height: 1.4; color: #B42318; }
/* Resume au-dessus du bouton : Jetpack le peint en rouge plein (texte blanc) ; encadre rouge pale a la place */
body .wpd-fixe .contact-form .contact-form__error {
  padding: 12px 16px;
  border: 1px solid #F4B8B2;
  background: #FEF3F2;
  font-size: 16px;
  line-height: 1.4;
  color: #B42318;
}
body .wpd-fixe .contact-form .contact-form__error a { color: inherit; }
body .wpd-fixe .contact-form-submission {
  max-width: 70ch;
  margin: 0 0 28px;
  font: 400 16px/1.6 var(--f-texte);
  color: var(--c-texte);
}

/* ---------- Liens : grille de cartes (blocs Groupe .grille-liens > .carte-lien) ----------
   Sur ce theme (classique), WordPress enveloppe le contenu d'un bloc Groupe dans un
   <div class="wp-block-group__inner-container"> : la grille et la colonne de la carte s'appliquent a ce
   conteneur (et directement au Groupe s'il n'y en a pas). */
body .wpd-fixe .wpd-entry .grille-liens {
  max-width: none;
  margin: 0;
  padding: 0;
}
body .wpd-fixe .wpd-entry .grille-liens > .wp-block-group__inner-container,
body .wpd-fixe .wpd-entry .grille-liens:not(:has(> .wp-block-group__inner-container)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}
body .wpd-fixe .wpd-entry .carte-lien {
  position: relative;
  margin: 0;
  padding: 0;
  border: 1px solid #E3E8EF;
  background: #fff;
}
body .wpd-fixe .wpd-entry .carte-lien > .wp-block-group__inner-container,
body .wpd-fixe .wpd-entry .carte-lien:not(:has(> .wp-block-group__inner-container)) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body .wpd-fixe .wpd-entry .carte-lien:has(a):hover { border-color: var(--c-bleu); }

/* Zone logo : 120px, fond gris clair ; mix-blend-mode fond les JPG a fond blanc dans ce gris */
body .wpd-fixe .wpd-entry .carte-lien__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 120px;
  margin: 0;
  padding: 20px;
  background: #F4F6F9;
  border-bottom: 1px solid #E3E8EF;
}
body .wpd-fixe .wpd-entry .carte-lien__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 64px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
body .wpd-fixe .wpd-entry .carte-lien__nom {
  margin: 0;
  padding: 18px 20px 0;
  font-family: var(--f-titre);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-texte);
}
body .wpd-fixe .wpd-entry .carte-lien__nom a { color: inherit; text-decoration: none; }
/* Toute la carte est cliquable : le lien du nom s'etend sur la carte (un seul lien par carte) */
body .wpd-fixe .wpd-entry .carte-lien__nom a::after { content: ""; position: absolute; inset: 0; }
body .wpd-fixe .wpd-entry .carte-lien:hover .carte-lien__nom a { color: var(--c-bleu); }
body .wpd-fixe .wpd-entry .carte-lien__texte {
  max-width: none;
  margin: 0;
  padding: 6px 20px 0;
  font-size: 16px;
  line-height: 1.5;
  color: #4A5A6E;
}
body .wpd-fixe .wpd-entry .carte-lien__domaine {
  max-width: none;
  margin: 0;
  padding: 10px 20px 20px;
  font-size: 14px;
  line-height: 1.4;
  color: #5B6B80;
}
body .wpd-fixe .wpd-entry .carte-lien__domaine::after { content: " \2197"; }

@media only screen and (max-width: 600px) {
  body .wpd-fixe .wpd-entry > p { font-size: 17px; }
}