/* Adaptation du design de Cédric au balisage Gutenberg — maintenue à la main.
   Chargée APRÈS la feuille de design : chaque règle ne fait que reporter une
   règle de la livraison sur la structure produite par les blocs (figure autour
   des images, ul/li du bloc navigation, div des blocs boutons, eyebrow en <p>). */

/* — L'en-tête vit dans un bloc partie de modèle : c'est l'enveloppe qui colle — */
.wp-block-template-part:has(> header.site){position:sticky; top:0; z-index:40;}

/* — Bloc navigation : on efface les boîtes ul/li, les règles nav.main d'origine
     s'appliquent alors directement aux liens — */
nav.main ul, nav.main li{display:contents;}
nav.wp-block-navigation.main{gap:28px; background:none;}
nav.main .wp-block-navigation-item__content{color:inherit;}
nav.footer-liens ul, nav.footer-liens li{display:contents;}
nav.wp-block-navigation.footer-liens{gap:6px 18px;}

/* — Boutons : les règles .btn / .btn--primary / .btn--outline / .btn--sm de la
     livraison, reportées sur le lien du bloc bouton — */
.wp-block-buttons{display:flex; flex-wrap:wrap;}
.wp-block-buttons.hero-ctas{gap:14px;}
/* Les classes btn--* sont posées par Gutenberg sur la <div class="wp-block-button">
   qui enveloppe le lien : les règles .btn--primary / .btn--outline des feuilles de
   design la peignaient en rectangle rose (ou bordé) derrière le lien arrondi.
   Seul le lien porte le style du bouton. */
.wp-block-button[class*="btn--"],
.wp-block-button[class*="btn--"]:hover{background:none; border:0; padding:0;}
.wp-block-button__link{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:30px;
  font-family:var(--corps); font-weight:500; font-size:14px; line-height:1.65;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  background:none; color:inherit;
}
.wp-block-button.btn--primary .wp-block-button__link{background:var(--rose); color:#fff;}
.wp-block-button.btn--primary .wp-block-button__link:hover{background:var(--rose-deep);}
.wp-block-button.btn--outline .wp-block-button__link{border-color:var(--anthracite); color:var(--anthracite); background:transparent;}
.wp-block-button.btn--outline .wp-block-button__link:hover{background:var(--anthracite); color:var(--papier);}
.wp-block-button.btn--sm .wp-block-button__link{padding:8px 16px; font-size:13px;}

/* Bouton « Contact » de l'en-tête — valeur finale de la cascade de la
   livraison : header.site .nav-inner > .btn--primary (22/10) bat les règles
   antérieures à toutes les largeurs. */
header.site .entete-contact .wp-block-button__link{padding:11px 22px; font-size:14px; line-height:1.65; white-space:nowrap;}
@media (max-width:860px){
  header.site .nav-inner > .entete-contact{margin-left:auto;}
}

/* « Parlons-en » d'un point de départ et « En discuter » d'une carte service */
.niveau-cta{margin-top:4px;}
.service-details-body-inner > .wp-block-buttons{margin-top:4px;}
.service-details-body-inner > .service-note + .wp-block-buttons,
.service-details-body-inner > .callout-box + .wp-block-buttons{margin-top:14px;}

/* — Images : le bloc image enveloppe chaque <img> d'un <figure> — */
.wp-block-image{margin:0;}
.hero-photo > .wp-block-image{height:100%; margin:0;}
.hero-photo > .wp-block-image img{height:100%;}
.expert-photo > .wp-block-image{margin:0;}
.fleur-fond img{width:100%; height:auto; display:block;}
.hommage-photo{margin:0;}
.hommage-photo img{display:block; width:100%; aspect-ratio:4 / 3; border-radius:16px; object-fit:cover; object-position:50% 12%;}
@media (max-width:760px){
  .hommage-photo{width:160px;}
  .hommage-photo img{border-radius:12px;}
}

/* — L'eyebrow passe de <span> à <p> : on le re-protège des règles « X p » — */
p.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500;
  color:var(--rose-deep); line-height:1.65; margin:0 0 14px;
}
.section-head p.eyebrow, .contact-info p.eyebrow, .legal-page p.eyebrow{font-size:13px; color:var(--rose-deep);}
#niveaux .section-head p.eyebrow{grid-column:1; grid-row:auto; justify-self:start; margin-bottom:8px; font-size:13px; line-height:1.65;}

/* — Cartes Comprendre · Adopter · Piloter : seule la description reste élastique — */
.cap-item p.cap-label, .cap-item p.cap-more-ligne{flex:0 0 auto;}
.cap-item p.cap-more-ligne{margin:0;}

/* Flèches des liens « En savoir plus » et « Découvrir l'équipe » (le SVG inline
   de la livraison devient un masque CSS : le texte du lien reste pur). */
.cap-more::after, .team-more::after{
  content:""; flex-shrink:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cap-more::after{width:13px; height:13px;}
.team-more::after{width:15px; height:15px;}

/* — « Ce que X vous apporte » : les cartes passent de <li> à des groupes — */
.value-grid > .value-item{
  background:#FBF6F2; border:1px solid var(--trait); border-radius:14px; padding:16px 18px;
  display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start;
}
.expert--dev .value-grid > .value-item{grid-template-columns:40px 1fr; gap:14px;}

/* — Tableaux des formations : le bloc tableau enveloppe d'un <figure> —
     On neutralise le style du bloc Tableau de WordPress (bordure sur les quatre
     côtés de chaque cellule, colonnes égales de .has-fixed-layout) : seul reste
     le filet bas de la livraison, et la largeur des colonnes suit le contenu. */
.wp-block-table.training-table{margin:0 0 6px;}
.wp-block-table.training-table table{width:100%; border-collapse:collapse; font-size:14px; table-layout:auto; border:0;}
.wp-block-table.training-table td{padding:8px 10px; border:0; border-bottom:1px solid var(--trait); word-break:normal;}
.training-table td:last-child{text-align:right; color:var(--rose-deep); font-weight:500; white-space:nowrap;}
.training-group--humain .training-table td:last-child{color:var(--grey); font-weight:400;}

/* — Pied de page : la signature justifiée sous le logo (width:0 ; min-width:100%)
     ne comptait pas dans la largeur du bloc logo. Quand le navigateur l'affiche
     plus grande que prévu (taille de police minimale, p. ex. Opera GX), elle
     débordait sur les coordonnées. Avec max-content, elle reste justifiée sur la
     largeur du logo en temps normal, et élargit le bloc au lieu de déborder. — */
footer .brand .tagline{width:max-content;}

/* Bureau : coordonnées collées au logo (plus de space-between), puis le bloc
   liens + copyright, aligné à gauche. Si les trois ne tiennent pas côte à côte
   dans la largeur du site (1120 px), le bloc liens passe juste en dessous, à gauche
   sous le logo (écart vertical réduit à 16 px). */
@media (min-width:861px){
  .footer-inner{justify-content:flex-start; row-gap:16px;}
  .footer-fin{justify-items:start; text-align:left;}
  nav.wp-block-navigation.footer-liens{justify-content:flex-start;}
}

/* — Divers — */
#equipe .section-head{margin-bottom:32px;} /* remplace le style en ligne de la livraison */

/* — Livraison du 04/11/2026 — */
/* Fleur du formulaire, désormais dans le bloc de texte : .wp-block-image{margin:0}
   (plus haut) écrasait l'écart de 40 px voulu sous le texte d'introduction. */
.wp-block-image.fleur-fond{margin:40px 0 0;}
/* L'eyebrow « Parlons de vos besoins » est un <p> : les règles de la livraison
   « #contact .contact-info p » (retrait de 14 px, marge basse nulle sur mobile)
   l'atteignaient alors qu'elles ne visent que le texte. La bulle reste au bord,
   alignée avec la fleur, et garde son écart de 14 px avec le titre. */
#contact .contact-info p.eyebrow{margin-left:0; margin-bottom:14px;}