/* ==========================================================================
   patterns-a.css : ajouts propres aux patterns A (heros, logos-clients,
   metiers, chiffres, expertises). Chargé APRÈS theme.css.
   Ne contient que ce que la maquette B (HTML libre) ne couvre pas :
   différences de wrappers des blocs WordPress, marges des groupes,
   listes, boutons natifs, classes propres aux blocs.
   ========================================================================== */

/* --- Patterns A : remise à zéro des marges de flux (blockGap) -------------
   Les groupes sont en flux « default » : WordPress peut leur ajouter des
   marges haut entre enfants. Les grilles et flex de la maquette gèrent
   leurs espaces avec gap. */
:is(.heros,.logos,.chiffres,.section-metiers,.section-expertises)>*,
.heros .wrap>*,.heros-gauche>*,.panneau>*,
.logos .wrap>*,.rang>*,
.tete>*,.bento>*,.case>*,.duo>*,.panneau-exp>*,.corps>*,
.chiffres .wrap>*,.liste-chiffres>*,.chiffre>*,.chiffres .bas>*,
.actions>*{margin-block:0}
:is(.heros,.logos,.chiffres,.section-metiers,.section-expertises) .wp-block-heading{margin:0}
:is(.heros,.logos,.chiffres,.section-metiers,.section-expertises) p{margin-block:0}

/* Sections pleine largeur : pas de marge parasite (le héros recule sous l'en-tête) */
.logos.alignfull,.chiffres.alignfull,.section-metiers.alignfull,.section-expertises.alignfull{margin-block:0}
.heros.alignfull{margin-block-start:-77px;margin-block-end:0}

/* Les enfants directs d'un groupe sont alignés par la maquette, jamais centrés par WP */
:is(.heros,.logos,.chiffres,.section-metiers,.section-expertises)>.wrap{max-width:var(--max)}

/* --- Patterns A : boutons natifs (.wp-block-button) ----------------------
   Rendu des .btn / .btn--ligne de la maquette sur le lien du bloc Bouton.
   Wrapper : .btn-bloc (plein) et .btn-bloc.btn-bloc--ligne (contour). */
.wp-block-buttons.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0;padding:0}
.wp-block-buttons.actions>.wp-block-button{margin:0}
.btn-bloc .wp-block-button__link{display:inline-flex;align-items:center;gap:.6em;min-height:46px;padding:.8rem 1.4rem;border-radius:999px;font:600 var(--t-s)/1 var(--f);font-variation-settings:"wdth" 110;text-decoration:none;white-space:nowrap;background:var(--menthe);color:var(--nuit);border:1.5px solid var(--menthe);transition:transform .2s,box-shadow .25s}
.btn-bloc .wp-block-button__link:hover{background:var(--menthe);color:var(--nuit);transform:translateY(-1px);box-shadow:0 0 0 6px rgba(101,216,192,.16)}
.btn-bloc--ligne .wp-block-button__link,.btn-bloc--ligne .wp-block-button__link:hover{background:transparent;color:var(--texte);border-color:var(--ligne-forte)}
.btn-bloc--ligne .wp-block-button__link:hover{border-color:var(--texte);box-shadow:none}
/* Flèche décorative (équivalent du svg de la maquette), sur le bouton plein uniquement */
.btn-bloc:not(.btn-bloc--ligne) .wp-block-button__link::after,
p.lien a::after{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%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 16 16' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.btn-bloc:not(.btn-bloc--ligne) .wp-block-button__link:hover::after,
p.lien a:hover::after{transform:translateX(3px)}

/* --- Patterns A : lien « En savoir plus » (paragraphe .lien > a) --------- */
p.lien,.case p.lien,.panneau-exp p.lien{display:block;font-size:var(--t-s);font-weight:600;color:var(--menthe);max-width:none}
p.lien a{display:inline-flex;align-items:center;gap:.45em;color:var(--menthe);text-decoration:none;min-height:44px}
p.lien a:hover{text-decoration:underline;text-underline-offset:.2em}

/* --- Héros ---------------------------------------------------------------
   Correctif maquette : .panneau{display:grid} l'emportait sur l'attribut hidden. */
.panneau[hidden]{display:none}
.heros-gauche{min-width:0}
.heros .wrap{min-width:0}
.panneau .wp-block-heading.titre{font-size:var(--t-3xl);font-weight:800;letter-spacing:-.02em;line-height:1.08;font-variation-settings:"wdth" 110}
.panneau .wp-block-heading.titre em{font-style:normal;color:var(--menthe)}
.panneau p.accroche{font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ciel);font-variation-settings:"wdth" 118}
/* Boutons d'onglets (core/html) : focus visible sur fond sombre déjà couvert par :focus-visible global */
.onglets button{min-height:44px}

/* --- Logos clients -------------------------------------------------------
   Sans JS (ou tant que theme.js n'a pas posé data-defile sur .logos) :
   liste statique en grille, aucun mouvement, bouton pause masqué.
   Avec data-defile : défilement + bouton pause (règles de theme.css). */
ul.wp-block-list.piste{list-style:none;margin:0;padding:0}
ul.wp-block-list.piste>li{margin:0;padding:0}
.logos:not([data-defile]) .piste{animation:none;flex-wrap:wrap;width:auto;padding-inline:16px;gap:1rem 2rem}
.logos:not([data-defile]) .rang{-webkit-mask-image:none;mask-image:none}
.logos:not([data-defile]) .pause-btn{display:none}
.logos .pause-btn{min-height:44px}
.logos .wrap{min-width:0}
@media (prefers-reduced-motion:reduce){
  /* theme.css masque le 2e rang (il l'était déjà dans la liste lecteur d'écran de la maquette) :
     ici les 2 listes sont lisibles et visibles, on les montre toutes les deux */
  .rang.inverse{display:block}
  .rang+.rang{margin-top:var(--s-3)}
  .pause-btn{display:none}
}
@media (min-width:720px){
  .logos:not([data-defile]) .piste{padding-inline:32px}
}

/* --- Métiers (bento) ------------------------------------------------------ */
.section-metiers .tete .kicker{margin:0}
.case ul,.case ol{margin:0}
.case .pic{flex:none}
/* Groupes .case : <article> natif, grille de la maquette conservée */
.case.wp-block-group{align-content:start}
/* Emplacement photo vide (groupe .ph) : fond de repère en attendant la photo */
.case .ph.wp-block-group,.panneau-exp .ph.wp-block-group{background:linear-gradient(135deg,var(--surface),#0A4F6B);min-height:0}
.case .ph.wp-block-group{margin-top:var(--s-2)}

/* --- Chiffres ------------------------------------------------------------
   La maquette utilise dl/dt/dd ; en blocs natifs : .liste-chiffres (grille),
   .chiffre (élément), .chiffre-valeur (très grand chiffre), .chiffre-label. */
.chiffres .liste-chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) 0;margin:0}
.chiffres .chiffre{display:flex;flex-direction:column;gap:var(--s-2);padding-inline:var(--s-4);border-left:1px solid var(--ligne-forte)}
.chiffres .chiffre-valeur{margin:0;font-weight:800;font-size:clamp(2.6rem,1.6rem + 4vw,5.2rem);line-height:.9;letter-spacing:-.04em;font-variation-settings:"wdth" 125;font-variant-numeric:tabular-nums;color:var(--texte);max-width:none}
.chiffres .chiffre-valeur small{font-size:.45em;color:var(--menthe);vertical-align:top;margin-left:.05em}
.chiffres .chiffre-label{margin:0;color:var(--doux);font-size:var(--t-s);line-height:1.35}
.chiffres .bas .wp-block-buttons.actions{flex:none}
@media (min-width:900px){.chiffres .liste-chiffres{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --- Expertises ----------------------------------------------------------- */
/* Le surtitre « Nos expertises » est un h2 (hiérarchie h2 > h3) stylé comme .kicker */
.tete h2.kicker,.tete .wp-block-heading.kicker{font-size:var(--t-xs);line-height:1.65;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--menthe);font-variation-settings:"wdth" 118}
.panneau-exp.wp-block-group{grid-template-rows:auto 1fr}
.panneau-exp .ph.wp-block-group{border-radius:0;aspect-ratio:16/8}
/* Slogan : le texte anglais est dans <bdi lang="en"> ; le contour ne vise que le <span> interne */
.slogan bdi{display:block}
ul.wp-block-list.puces{list-style:none;margin:0;padding:0}
ul.wp-block-list.puces>li{margin:0}
/* Pastilles mises en avant (équivalent de li.fort : le bloc Liste n'accepte pas de classe par item) */
.puces--fort-2>li:nth-child(-n+2),.puces--fort-1>li:first-child{background:rgba(101,216,192,.14);border-color:transparent;color:var(--menthe)}