/* ==========================================================================
   WEBIPHI — Blocs communs                                     wbp-blocks.css
   Tout ce qui se répète d'une page à l'autre : fil d'Ariane, héros de page,
   cartes, listes à coches, étapes, chiffres, FAQ, appel final, formulaire,
   bandeau défilant, pied de page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fil d'Ariane
   -------------------------------------------------------------------------- */
.wbp-crumb{padding-top:20px}
.wbp-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.8125rem;color:var(--wbp-muted)}
.wbp-crumb li{display:flex;align-items:center;gap:8px}
.wbp-crumb li:not(:last-child)::after{content:'';width:4px;height:4px;border-radius:50%;
  background:var(--wbp-line);flex:none}
.wbp-crumb a:hover{color:var(--wbp-brand-mid);text-decoration:underline}
.wbp-crumb [aria-current]{color:var(--wbp-ink-2)}

/* --------------------------------------------------------------------------
   Héros de page intérieure
   Le halo est en ::before sur un conteneur en overflow:clip — posé sur la
   section elle-même il élargirait la page de 400px à droite.
   -------------------------------------------------------------------------- */
.wbp-phero{position:relative;overflow:clip;background:var(--wbp-bg-alt);
  border-bottom:1px solid var(--wbp-line)}
.wbp-phero::before{
  content:'';position:absolute;top:-30%;right:-8%;width:42vw;height:42vw;
  max-width:620px;max-height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(163,20,50,.10) 0%,rgba(163,20,50,0) 68%);
  pointer-events:none;
}
.wbp-phero__in{position:relative;padding-block:clamp(40px,5vw,72px) clamp(52px,6vw,88px)}
.wbp-phero__grid{display:grid;gap:clamp(34px,4vw,60px);align-items:center}
@media (min-width:981px){.wbp-phero__grid{grid-template-columns:1.05fr .95fr}}
.wbp-phero__copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.wbp-phero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
/* Sur un écran étroit, deux boutons empilés mais de largeurs différentes font
   désordre. On les met tous à la ligne complète — c'est aussi la cible la
   plus facile à atteindre au pouce. */
@media (max-width:560px){
  .wbp-phero__cta,.wbp-hero__cta,.wbp-cta__btns{width:100%}
  .wbp-phero__cta .wbp-btn,
  .wbp-hero__cta .wbp-btn,
  .wbp-cta__btns .wbp-btn{flex:1 1 100%}
}
.wbp-phero__note{font-size:.875rem;color:var(--wbp-muted)}
.wbp-phero__note b{color:var(--wbp-ink-2);font-weight:600}
.wbp-phero__media{position:relative}
.wbp-phero__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--wbp-radius-lg);box-shadow:var(--wbp-shadow-l);
}

/* Pastille flottante posée sur une image — le détail qui sort la photo du
   bloc et donne la profondeur. */
.wbp-float{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-radius:var(--wbp-radius);
  background:#fff;border:1px solid var(--wbp-line);box-shadow:var(--wbp-shadow-m);
  max-width:min(270px,72%);
}
.wbp-float--bl{left:-14px;bottom:-18px}
.wbp-float--tr{right:-14px;top:-18px}
.wbp-float__k{font-family:var(--wbp-cond);font-size:1.75rem;font-weight:500;
  line-height:1;color:var(--wbp-brand);flex:none}
.wbp-float__l{font-size:.8125rem;line-height:1.35;color:var(--wbp-muted)}
.wbp-float__l b{display:block;color:var(--wbp-ink);font-weight:600;font-size:.875rem}
@media (max-width:600px){
  .wbp-float--bl{left:0;bottom:-14px}
  .wbp-float--tr{right:0;top:-14px}
}

/* --------------------------------------------------------------------------
   Bandeau de page — remplace le héros sur les pages intérieures
   Sur une page service, un héros pleine hauteur répète ce que le fil
   d'Ariane dit déjà et repousse le contenu utile de 500 px. Ici : on sait
   où on est, on a un bouton, et l'image prend le relais juste en dessous.
   -------------------------------------------------------------------------- */
.wbp-pband{background:var(--wbp-bg-alt);border-bottom:1px solid var(--wbp-line)}
.wbp-pband__in{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px 36px;flex-wrap:wrap;
  padding-block:6px clamp(22px,2.4vw,30px);
}
.wbp-pband__t{display:flex;flex-direction:column;gap:12px;flex:1 1 440px;min-width:0}
.wbp-pband__t h1{font-size:clamp(1.85rem,1.3rem + 2vw,2.6rem)}
.wbp-pband .wbp-btn{flex:none}

/* Bande d'image pleine largeur.
   Elle sort du conteneur avec une marge négative calculée : la page a une
   largeur maximale, l'image non. Un 100vw simple provoquerait une barre de
   défilement horizontale dès qu'une barre verticale existe. */
.wbp-pstrip{position:relative;overflow:clip}
.wbp-pstrip img{
  width:100%;display:block;
  aspect-ratio:16/5;object-fit:cover;
}
/* Plus on est étroit, plus l'image doit être haute : en 16/5 sur un
   téléphone, il ne reste qu'une tranche illisible. */
@media (max-width:980px){.wbp-pstrip img{aspect-ratio:16/8}}
@media (max-width:600px){.wbp-pstrip img{aspect-ratio:4/3}}

/* La pastille chiffrée se pose sur l'image, calée sur la grille du texte. */
.wbp-pstrip .wbp-float{
  left:max(var(--wbp-pad), (100% - var(--wbp-maxw)) / 2 + var(--wbp-pad));
  bottom:clamp(16px,2.4vw,28px);
}
@media (max-width:600px){.wbp-pstrip .wbp-float{left:var(--wbp-pad);bottom:12px}}

/* Chapô d'ouverture, sous l'image. */
.wbp-pintro{padding-block:clamp(30px,4vw,48px) 0}
.wbp-pintro p{
  font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);
  line-height:1.6;color:var(--wbp-ink-2);
  max-width:64ch;
}

/* --------------------------------------------------------------------------
   Grilles et cartes
   -------------------------------------------------------------------------- */
.wbp-grid{display:grid;gap:clamp(16px,2vw,24px)}
.wbp-grid--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.wbp-grid--3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.wbp-grid--4{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}

.wbp-card{
  display:flex;flex-direction:column;gap:13px;
  padding:clamp(22px,2.4vw,30px);
  background:#fff;border:1px solid var(--wbp-line);border-radius:var(--wbp-radius);
  transition:transform .28s var(--wbp-ease), box-shadow .28s, border-color .28s;
}
.wbp-card h3{font-size:1.125rem}
.wbp-card p{font-size:.9375rem;line-height:1.6;color:var(--wbp-muted)}
.wbp-card--link:hover{transform:translateY(-4px);box-shadow:var(--wbp-shadow-m);
  border-color:var(--wbp-brand-line)}
.wbp-card--link:hover .wbp-ic{background:var(--wbp-brand)}
.wbp-card--link:hover .wbp-ic svg{stroke:var(--wbp-cream)}
.wbp-card__foot{margin-top:auto;padding-top:6px}
/* Carte sur fond alterné : le blanc pur ressort, la bordure s'efface. */
.wbp-sec--alt .wbp-card{border-color:transparent;box-shadow:var(--wbp-shadow-s)}

/* --------------------------------------------------------------------------
   Liste à coches
   -------------------------------------------------------------------------- */
/* L'item n'est PAS un conteneur flex, et c'est délibéré : en flex, chaque
   <b> ou <em> d'une phrase devient un élément à part entière et hérite du
   gap — « jusqu'à <b>12 pages</b>, dont… » se retrouve troué de 11px avant
   et après le gras. La coche est donc posée en absolu, et la ligne reste du
   texte ordinaire qui se coupe normalement. */
.wbp-checks{display:flex;flex-direction:column;gap:11px}
.wbp-checks li{position:relative;padding-left:31px;font-size:.9375rem;
  line-height:1.55;color:var(--wbp-ink-2)}
.wbp-checks li::before{
  content:'';position:absolute;left:0;top:2px;
  width:20px;height:20px;border-radius:50%;
  background:var(--wbp-brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A0719' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/11px;
}
.wbp-checks--cream li{color:rgba(239,228,214,.88)}
.wbp-checks--cream li::before{
  background:rgba(239,228,214,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EFE4D6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/11px;
}

/* --------------------------------------------------------------------------
   Section scindée texte / image
   -------------------------------------------------------------------------- */
.wbp-split{display:grid;gap:clamp(32px,4vw,64px);align-items:center}
@media (min-width:981px){
  .wbp-split{grid-template-columns:1fr 1fr}
  .wbp-split--reverse .wbp-split__media{order:-1}
}
.wbp-split__copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.wbp-split__media{position:relative}
.wbp-split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--wbp-radius-lg);box-shadow:var(--wbp-shadow-m)}

/* --------------------------------------------------------------------------
   Étapes — la méthode en 4 temps
   La ligne de liaison est un pseudo-élément sur la grille, pas une bordure
   par carte : sinon elle dépasse après la dernière étape.
   -------------------------------------------------------------------------- */
.wbp-steps{position:relative;display:grid;gap:clamp(20px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.wbp-step{display:flex;flex-direction:column;gap:12px;position:relative;
  padding-top:34px}
.wbp-step::before{
  content:'';position:absolute;top:13px;left:0;right:0;height:1px;
  background:var(--wbp-line);
}
.wbp-step:last-child::before{right:auto;width:28px}
.wbp-step__n{
  position:absolute;top:0;left:0;
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--wbp-brand);color:var(--wbp-cream);
  font-family:var(--wbp-cond);font-size:.875rem;font-weight:500;
}
.wbp-step h3{font-size:1.0625rem}
.wbp-step p{font-size:.9375rem;color:var(--wbp-muted);line-height:1.6}
@media (max-width:700px){
  .wbp-step::before{display:none}
  .wbp-step{padding-top:0;padding-left:44px}
  .wbp-step__n{top:2px}
}

/* --------------------------------------------------------------------------
   Chiffres
   -------------------------------------------------------------------------- */
.wbp-stats{display:grid;gap:clamp(22px,3vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.wbp-stat{display:flex;flex-direction:column;gap:5px}
.wbp-stat__k{
  font-family:var(--wbp-cond);font-weight:400;
  font-size:clamp(2.6rem,1.8rem + 3vw,4rem);line-height:1;
  color:var(--wbp-brand);
  font-variant-numeric:tabular-nums;  /* le compteur ne doit pas gigoter */
}
.wbp-stat__l{font-size:.9375rem;line-height:1.45;color:var(--wbp-muted)}
.wbp-stat--cream .wbp-stat__k{color:var(--wbp-cream)}
.wbp-stat--cream .wbp-stat__l{color:rgba(239,228,214,.72)}

/* --------------------------------------------------------------------------
   FAQ — <details>/<summary> natif.
   Un accordéon maison en JS se met toujours à diverger du clavier ; celui du
   navigateur est correct par construction, et il reste ouvrable sans script.
   -------------------------------------------------------------------------- */
.wbp-faq{display:flex;flex-direction:column;border-top:1px solid var(--wbp-line)}
.wbp-faq__i{border-bottom:1px solid var(--wbp-line)}
.wbp-faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 4px;cursor:pointer;list-style:none;
  font-size:1.0625rem;font-weight:600;line-height:1.4;color:var(--wbp-ink);
  transition:color .18s;
}
.wbp-faq__q::-webkit-details-marker{display:none}
.wbp-faq__q:hover{color:var(--wbp-brand)}
.wbp-faq__q::after{
  content:'';flex:none;width:22px;height:22px;margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A31432' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center/18px;
  transition:transform .3s var(--wbp-ease);
}
.wbp-faq__i[open] .wbp-faq__q{color:var(--wbp-brand)}
.wbp-faq__i[open] .wbp-faq__q::after{transform:rotate(135deg)}
.wbp-faq__a{padding:0 4px 24px;max-width:70ch}
.wbp-faq__a p + p{margin-top:12px}
.wbp-faq__a a{color:var(--wbp-brand-mid);font-weight:600;text-decoration:underline}

/* --------------------------------------------------------------------------
   Appel final — l'aplat bordeaux de fin de page
   -------------------------------------------------------------------------- */
.wbp-cta{position:relative;overflow:clip;
  background:linear-gradient(125deg,var(--wbp-brand) 0%,var(--wbp-brand-deep) 100%);
  color:var(--wbp-cream)}
.wbp-cta::before{
  content:'';position:absolute;left:-10%;bottom:-60%;width:56vw;height:56vw;
  max-width:760px;max-height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,228,214,.10) 0%,rgba(239,228,214,0) 70%);
  pointer-events:none;
}
.wbp-cta__in{position:relative;display:grid;gap:clamp(30px,4vw,56px);align-items:center}
@media (min-width:981px){.wbp-cta__in{grid-template-columns:1.1fr .9fr}}
.wbp-cta h2{color:#fff}
.wbp-cta__copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.wbp-cta__lead{font-size:1.0625rem;line-height:1.6;color:rgba(239,228,214,.82);max-width:54ch}
.wbp-cta__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.wbp-cta__aside{
  padding:clamp(24px,3vw,34px);border-radius:var(--wbp-radius-lg);
  background:rgba(255,255,255,.07);border:1px solid rgba(239,228,214,.18);
  backdrop-filter:blur(6px);
}
.wbp-cta__aside h3{color:#fff;font-size:1.0625rem;margin-bottom:16px}

/* --------------------------------------------------------------------------
   Bandeau défilant — la même bande dupliquée deux fois, translatée de -50 %.
   Le duplicata porte aria-hidden : sinon un lecteur d'écran lit la liste deux
   fois de suite.
   -------------------------------------------------------------------------- */
.wbp-ticker{
  overflow:hidden;
  padding-block:15px;
  background:var(--wbp-brand);color:var(--wbp-cream);
  /* Les bords s'estompent : la bande ne doit pas paraître coupée net. */
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.wbp-ticker__track{display:flex;width:max-content;animation:wbp-slide 38s linear infinite}
.wbp-ticker:hover .wbp-ticker__track{animation-play-state:paused}
.wbp-ticker__row{display:flex;align-items:center;flex:none}
.wbp-ticker__i{
  display:flex;align-items:center;gap:12px;padding-inline:26px;
  font-family:var(--wbp-cond);font-size:.9375rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.wbp-ticker__i::after{content:'';width:5px;height:5px;border-radius:50%;
  background:rgba(239,228,214,.45);margin-left:14px}
@keyframes wbp-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .wbp-ticker__track{animation:none;width:100%;overflow-x:auto}
}

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */
.wbp-form{display:flex;flex-direction:column;gap:18px}
.wbp-form__row{display:grid;gap:18px}
@media (min-width:620px){.wbp-form__row--2{grid-template-columns:1fr 1fr}}
.wbp-field{display:flex;flex-direction:column;gap:7px}
.wbp-field label{font-size:.875rem;font-weight:600;color:var(--wbp-ink)}
.wbp-field label span{color:var(--wbp-brand-mid)}
.wbp-field input,
.wbp-field select,
.wbp-field textarea{
  width:100%;padding:14px 16px;
  font-family:inherit;font-size:1rem;color:var(--wbp-ink);
  background:#fff;border:1.5px solid var(--wbp-line);border-radius:var(--wbp-radius-s);
  transition:border-color .18s, box-shadow .18s;
}
.wbp-field textarea{min-height:132px;resize:vertical}
.wbp-field input:focus,
.wbp-field select:focus,
.wbp-field textarea:focus{
  outline:none;border-color:var(--wbp-brand);
  box-shadow:0 0 0 3px rgba(106,7,25,.12);
}
/* :focus-visible ne s'applique pas aux champs de saisie de la même façon que
   sur les boutons : on garde quand même l'anneau natif au clavier. */
.wbp-field input:focus-visible,
.wbp-field select:focus-visible,
.wbp-field textarea:focus-visible{outline:3px solid var(--wbp-brand-mid);outline-offset:1px}
.wbp-field__hint{font-size:.8125rem;color:var(--wbp-muted)}
.wbp-field__err{font-size:.8125rem;font-weight:600;color:#B3122E;display:none}
.wbp-field.is-invalid input,
.wbp-field.is-invalid select,
.wbp-field.is-invalid textarea{border-color:#B3122E}
.wbp-field.is-invalid .wbp-field__err{display:block}

.wbp-check{display:flex;align-items:flex-start;gap:11px;font-size:.875rem;
  line-height:1.5;color:var(--wbp-muted)}
.wbp-check input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--wbp-brand)}
.wbp-check a{color:var(--wbp-brand-mid);text-decoration:underline}

/* Le pot de miel : invisible à l'œil ET au lecteur d'écran, mais rempli par
   la plupart des robots. display:none serait ignoré par certains d'entre eux. */
.wbp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.wbp-form__ok,
.wbp-form__ko{
  display:none;gap:12px;padding:16px 18px;border-radius:var(--wbp-radius-s);
  font-size:.9375rem;line-height:1.5;
}
.wbp-form__ok{background:#F0F7F1;border:1px solid #CBE4CF;color:#1D5A2A}
.wbp-form__ko{background:#FDF1F3;border:1px solid var(--wbp-brand-line);color:#8A0F27}
.wbp-form.is-sent .wbp-form__ok{display:flex}
.wbp-form.is-failed .wbp-form__ko{display:flex}

/* --------------------------------------------------------------------------
   Raccourcis simples (page 404). Les pages service utilisent .wbp-also, plus bas.
   -------------------------------------------------------------------------- */
.wbp-rel{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.wbp-rel a{
  display:flex;align-items:center;gap:13px;padding:16px 18px;
  background:#fff;border:1px solid var(--wbp-line);border-radius:var(--wbp-radius);
  font-weight:600;font-size:.9375rem;color:var(--wbp-ink);
  transition:transform .22s var(--wbp-ease), box-shadow .22s, border-color .22s;
}
.wbp-rel a:hover{transform:translateY(-3px);box-shadow:var(--wbp-shadow-m);
  border-color:var(--wbp-brand-line)}
.wbp-rel a:hover .wbp-ic{background:var(--wbp-brand)}
.wbp-rel a:hover .wbp-ic svg{stroke:var(--wbp-cream)}

/* Services voisins, en bas des 22 pages service (16/10/2026).
   Chaque carte dit pourquoi le service va avec celui de la page, et son prix.
   Lien étiré : le <a> est dans le <h3> (un nom de lien court pour le
   lecteur d'écran), son ::after couvre toute la carte pour le clic.
   Le soulèvement passe par `translate` et non `transform` : .wbp-reveal
   pilote déjà transform sur la carte, les deux se marcheraient dessus. */
.wbp-also__head{display:grid;gap:12px 48px;margin-bottom:32px}
.wbp-also__head h2{margin-top:14px}
.wbp-also__lead{color:var(--wbp-ink-2);max-width:42ch}
@media (min-width:981px){
  .wbp-also__head{grid-template-columns:1fr auto;align-items:end}
}

.wbp-also{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media (min-width:700px){.wbp-also{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.wbp-also{grid-template-columns:repeat(4,1fr)}}
/* Variante à trois cartes (contact, articles du journal). */
@media (min-width:1080px){.wbp-also--3{grid-template-columns:repeat(3,1fr)}}

.wbp-also__card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:24px 24px 20px;
  background:#fff;border:1px solid var(--wbp-line);border-radius:var(--wbp-radius);
  transition:translate .25s var(--wbp-ease);
}
.wbp-also__card .wbp-ic{margin-bottom:6px}
.wbp-also__card h3{font-size:1.125rem;line-height:1.3;margin:0}
.wbp-also__card h3 a{color:var(--wbp-ink);text-decoration:none}
/* La zone cliquable ET l'ombre de survol : une ombre qui apparaît en
   opacité coûte moins qu'un box-shadow animé. */
.wbp-also__card h3 a::after{
  content:'';position:absolute;inset:-1px;border-radius:var(--wbp-radius);
  box-shadow:var(--wbp-shadow-m);opacity:0;
  transition:opacity .25s var(--wbp-ease);
}
.wbp-also__card h3 a:focus-visible{outline:none}
.wbp-also__card:focus-within{outline:2px solid var(--wbp-brand-mid);outline-offset:3px}
.wbp-also__card p{margin:0;color:var(--wbp-ink-2);font-size:1rem;line-height:1.55}

.wbp-also__foot{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--wbp-line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:.9375rem;font-weight:600;color:var(--wbp-brand-mid);
}
.wbp-also__foot b{font-weight:600}
/* Flèche dessinée en CSS : un trait et une pointe, pas d'icône de plus. */
.wbp-also__foot i{
  flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--wbp-brand-soft) no-repeat center/16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A31432' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition:transform .25s var(--wbp-ease);
}

/* « Déjà compris » : la carte rassure au lieu de vendre, on la distingue. */
.wbp-also__card--in{background:var(--wbp-brand-soft);border-color:var(--wbp-brand-line)}
.wbp-also__card--in .wbp-ic{background:#fff}
.wbp-also__card--in .wbp-also__foot{border-top-color:var(--wbp-brand-line)}
.wbp-also__card--in .wbp-also__foot i{background-color:#fff}

@media (hover:hover) and (pointer:fine){
  .wbp-also__card:hover{translate:0 -4px}
  .wbp-also__card:hover h3 a::after{opacity:1}
  .wbp-also__card:hover .wbp-also__foot i{transform:translateX(4px)}
  .wbp-also__card:hover .wbp-ic{background:var(--wbp-brand)}
  .wbp-also__card:hover .wbp-ic svg{stroke:var(--wbp-cream)}
}
@media (prefers-reduced-motion:reduce){
  .wbp-also__card,.wbp-also__foot i{transition:none}
  .wbp-also__card:hover{translate:none}
}

/* --------------------------------------------------------------------------
   Corps de texte long (mentions légales, article)
   -------------------------------------------------------------------------- */
.wbp-prose{max-width:72ch}
.wbp-prose h2{font-size:1.5rem;margin-top:44px;margin-bottom:14px}
.wbp-prose h3{font-size:1.125rem;margin-top:28px;margin-bottom:10px}
.wbp-prose p{margin-bottom:16px}
.wbp-prose ul{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.wbp-prose ul li{padding-left:20px;position:relative}
.wbp-prose ul li::before{content:'';position:absolute;left:2px;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--wbp-brand-line)}
.wbp-prose a{color:var(--wbp-brand-mid);font-weight:600;text-decoration:underline}
.wbp-prose strong{color:var(--wbp-ink)}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
/* Fond encre, comme le héros : la page est tenue par deux blocs noirs, en
   haut et en bas. Le bordeaux reste pour les aplats du milieu. */
.wbp-foot{background:var(--wbp-dark);color:var(--wbp-muted-dark);
  border-top:1px solid var(--wbp-line-dark);font-size:.9375rem}
/* Trois colonnes, pas quatre, et des listes courtes : le méga-menu couvre
   déjà les dix-neuf services sur chaque page. */
.wbp-foot__top{
  display:grid;gap:clamp(26px,3.4vw,44px);
  padding-block:clamp(38px,4.6vw,58px) clamp(24px,3vw,34px);
}
@media (min-width:760px){.wbp-foot__top{grid-template-columns:1.7fr 1fr 1fr}}
.wbp-foot__brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start;
  max-width:44ch}
.wbp-foot__brand b{color:#fff;font-weight:600}

/* Le wordmark géant, dessiné au défilement.
   Il déborde volontairement en largeur et se fait rogner par le conteneur :
   c'est ce qui lui donne son échelle. Sa hauteur est plafonnée pour qu'il
   ne mange pas un écran entier sur mobile. */
.wbp-footmark{
  margin-block:clamp(10px,2vw,22px);
  border-top:1px solid rgba(239,228,214,.14);
  padding-top:clamp(18px,2.6vw,30px);
}
.wbp-footmark svg{
  display:block;width:100%;height:auto;max-height:clamp(46px,9vw,124px);
  overflow:visible;
}
.wbp-footmark path{
  fill:none;stroke:rgba(255,255,255,.34);stroke-width:6;
  stroke-linecap:round;stroke-linejoin:round;
}
.wbp-js .wbp-footmark path{stroke-dasharray:1;stroke-dashoffset:1}
.wbp-js .wbp-footmark.is-in path{
  animation:wbp-draw 1.1s cubic-bezier(.65,0,.35,1) forwards;
}
.wbp-js .wbp-footmark.is-in path:nth-child(1){animation-delay:.02s}
.wbp-js .wbp-footmark.is-in path:nth-child(2){animation-delay:.10s}
.wbp-js .wbp-footmark.is-in path:nth-child(3){animation-delay:.18s}
.wbp-js .wbp-footmark.is-in path:nth-child(4){animation-delay:.26s}
.wbp-js .wbp-footmark.is-in path:nth-child(5){animation-delay:.33s}
.wbp-js .wbp-footmark.is-in path:nth-child(6){animation-delay:.40s}
.wbp-js .wbp-footmark.is-in path:nth-child(7){animation-delay:.47s}
@media (prefers-reduced-motion:reduce){
  .wbp-js .wbp-footmark path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
}
.wbp-foot h2{font-family:var(--wbp-cond);font-size:.75rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--wbp-muted-dark);
  margin-bottom:16px}
.wbp-foot__col ul{display:flex;flex-direction:column;gap:11px}
.wbp-foot__col a{transition:color .18s}
.wbp-foot__col a:hover{color:var(--wbp-brand-glow)}
.wbp-foot__contact{display:flex;flex-direction:column;gap:13px}
/* « > » indispensable : sans lui la règle attrape aussi les <span> imbriqués
   dans une ligne, qui deviennent des conteneurs flex — le <br> ne fait alors
   plus rien et la seconde ligne se colle à côté de la première. */
.wbp-foot__contact > a,
.wbp-foot__contact > span{display:flex;align-items:flex-start;gap:11px;line-height:1.45}
.wbp-foot__contact svg{width:17px;height:17px;flex:none;margin-top:3px;
  stroke:#fff;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.wbp-foot__contact a:hover{color:#fff}
.wbp-foot__bot{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  justify-content:space-between;
  padding-block:22px;border-top:1px solid var(--wbp-line-dark);
  font-size:.8125rem;
}
.wbp-foot__legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.wbp-foot__legal a:hover{color:#fff;text-decoration:underline}

/* --------------------------------------------------------------------------
   Carte d'article du journal (17/10/2026) — accueil et journal.html
   Lien étiré sur le titre, comme .wbp-also : un seul lien par carte pour
   le lecteur d'écran, toute la carte cliquable à la souris.
   .wbp-post--wide : image à gauche à partir de 700px (article mis en avant).
   -------------------------------------------------------------------------- */
.wbp-posts{list-style:none;margin:0;padding:0;display:grid;gap:24px}
@media (min-width:700px){.wbp-posts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.wbp-posts{grid-template-columns:repeat(3,1fr)}}

.wbp-post{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--wbp-line);border-radius:var(--wbp-radius);
  overflow:hidden;transition:translate .25s var(--wbp-ease);
}
.wbp-post__img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}
.wbp-post__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 24px 24px}
.wbp-post__cat{
  align-self:flex-start;padding:5px 11px;border-radius:999px;
  background:var(--wbp-brand-soft);color:var(--wbp-brand-mid);
  font-size:.75rem;font-weight:600;line-height:1.2;
}
.wbp-post h3{margin:2px 0 0;font-size:1.25rem;line-height:1.3;text-wrap:balance}
.wbp-post h3 a{color:var(--wbp-ink)}
.wbp-post h3 a::after{content:'';position:absolute;inset:0;z-index:1}
.wbp-post h3 a:focus-visible{outline:none}
.wbp-post:focus-within{outline:2px solid var(--wbp-brand-mid);outline-offset:3px}
.wbp-post p{margin:0;font-size:1rem;line-height:1.6;color:var(--wbp-ink-2)}
/* Pas de flex : la date et le temps de lecture restent une ligne de texte. */
.wbp-post__meta{display:block;margin-top:auto;padding-top:8px;font-size:.875rem;color:var(--wbp-muted)}

@media (min-width:700px){
  .wbp-post--wide{display:grid;grid-template-columns:1.1fr 1fr}
  .wbp-post--wide .wbp-post__img{height:100%;aspect-ratio:auto;min-height:260px}
  .wbp-post--wide .wbp-post__body{justify-content:center;padding:32px}
  .wbp-post--wide h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem)}
}

@media (hover:hover) and (pointer:fine){
  .wbp-post:hover{translate:0 -4px;box-shadow:var(--wbp-shadow-m)}
  .wbp-post:hover h3 a{color:var(--wbp-brand)}
}
@media (prefers-reduced-motion:reduce){
  .wbp-post{transition:none}
  .wbp-post:hover{translate:none}
}
/* Page journal.html : renvoi vers l'ancien journal WordPress. */
.wbp-journal-old{margin-top:36px;font-size:.9375rem;color:var(--wbp-muted)}
.wbp-journal-old a{color:var(--wbp-brand-mid);font-weight:600;text-decoration:underline;text-underline-offset:3px}