/**
 * Habillage des sections de tête.
 *
 * Palette monochrome sombre avec un seul accent : il ne sert qu'à une chose par
 * page — le bouton principal — pour qu'il garde sa valeur de signal.
 *
 * Tout est en variables : un client dont la charte impose d'autres couleurs ou
 * d'autres polices les remplace dans sa propre feuille, sans toucher au contenu
 * de ses pages ni à ce fichier.
 *
 * Les tailles suivent une échelle modulaire de rapport 1,25 plutôt que d'être
 * choisies au jugé, taille par taille. C'est ce qui fait qu'un titre de section
 * et le texte d'une carte semblent appartenir au même système au lieu d'avoir
 * été juxtaposés.
 *
 * ⚠ Une mise en page contrainte de WordPress centre CHAQUE enfant dans une
 * colonne calculée pour lui seul, avec des marges marquées importantes. Poser
 * une largeur maximale sur un enfant le décale donc de ses voisins, et aucune
 * surenchère de sélecteur n'y change rien.
 *
 * Nos groupes de texte sont donc en mise en page « flux » et non « contrainte ».
 * En flux, WordPress n'impose aucune marge automatique : les enfants occupent la
 * largeur du groupe, la longueur de ligne se règle ici, et tout le monde garde
 * le même bord gauche — celui de la grille large, qui sert de colonne de
 * référence à toute la page.
 */

:root {
  /* couleurs */
  --wy-nuit:      #0C1420;
  --wy-nuit-clair:#16202E;
  --wy-vert:      #0F8A55;
  --wy-vert-vif:  #12A667;
  --wy-papier:    #FFFFFF;
  --wy-teinte:    #F2EFE9;
  --wy-trait:     #E4E0D8;
  --wy-encre:     #101828;
  --wy-sourd:     #6B7280;
  --wy-clair:     #C8D2DE;

  /* échelle typographique, rapport 1,25 */
  --wy-t--2: .78rem;
  --wy-t--1: .92rem;
  --wy-t-0:  1.0625rem;
  --wy-t-1:  1.28rem;
  --wy-t-2:  1.6rem;
  --wy-t-3:  2rem;
  --wy-t-4:  2.5rem;
  --wy-t-5:  3.15rem;

  /* rayons d'angle — nommés pour qu'une charte cliente les règle d'un endroit.
     Une marque aux angles vifs et des cartes à 16 px ne cohabitent pas. */
  --wy-rayon:   16px;  /* grandes surfaces : visuels, sections teintées */
  --wy-rayon-s: 14px;  /* cartes et vignettes */
  --wy-rayon-p: 10px;  /* petits éléments */
  --wy-rayon-pilule: 999px;

  /* graisse des titres — une marque aux titres très gras et une autre en
     demi-gras ne se ressemblent pas, à couleurs identiques. Une valeur nommée
     évite de réécrire douze sélecteurs dans chaque charte cliente. */
  --wy-graisse-titre: 700;

  /* respiration verticale des sections */
  --wy-section-y: var(--wy-r-6);

  /* rythme vertical */
  --wy-r-1: .75rem;
  --wy-r-2: 1.25rem;
  --wy-r-3: 2rem;
  --wy-r-4: 3.25rem;
  --wy-r-5: 5rem;
  --wy-r-6: 7rem;
}

/* ---------------- surtitre ---------------- */

/* Capitales espacées, dans la police de texte. Changer de famille pour un
   surtitre est une facilité : la distinction se lit mieux par la graisse et
   l'interlettrage, et le site garde deux polices au lieu de trois. */
.wy-surtitre {
  font-size: var(--wy-t--2);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wy-vert);
  margin: 0 0 var(--wy-r-2);
  display: flex;
  align-items: center;
  gap: .8rem;
}

/* Le filet ancre le début de section dans la marge. C'est le seul ornement de
   la page, et il ne coûte pas une requête. */
.wy-surtitre::before {
  content: "";
  width: 1.7rem;
  height: 1px;
  background: currentColor;
  flex: 0 0 1.7rem;
  opacity: .6;
}

/* ---------------- appel final, bouton à droite ----------------

   Variante du bandeau d'appel : le texte à gauche, l'action à droite, sur une
   seule ligne. Le bouton sous le texte oblige l'œil à redescendre ; à droite,
   il est là où la lecture s'arrête. Sous 860 px la disposition retombe en
   colonne, sans quoi le bouton se réduit à un timbre-poste. */
.wy-final--aligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wy-r-4);
  flex-wrap: wrap;
}
.wy-final--aligne > * { margin-inline-start: 0 !important; }
.wy-final--aligne .wy-final__bloc { flex: 1 1 24rem; max-width: 40rem; }
.wy-final--aligne .wp-block-buttons { flex: 0 0 auto; }
@media (max-width: 860px) {
  .wy-final--aligne { flex-direction: column; align-items: flex-start; gap: var(--wy-r-3); }
}

/* ---------------- tuiles d'univers ---------------- */

/* Une tuile est une image et deux lignes. Toute la tenue vient du cadrage :
   même rapport pour les quatre visuels, sinon la rangée est dentelée et on
   voit la grille avant de voir les produits. */
.wy-tuile { position: relative; }

.wy-tuile__image { margin: 0 0 var(--wy-r-2); }
.wy-tuile__image img {
  width: 100%;
  /* Format paysage : les photos de produits sont larges, et un cadre portrait
     leur coupe les côtés — un stand de quatre mètres rogné à hauteur d'homme
     ne se reconnaît plus. Le paysage évite aussi d'étirer un visuel de trois
     cents pixels de haut sur quatre cents. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--wy-rayon-s);
  display: block;
  transition: transform .35s ease;
}
/* Le zoom se fait dans un cadre qui ne bouge pas : sans overflow, l'image
   déborde et pousse ses voisines d'un pixel au survol. */
.wy-tuile__image { overflow: hidden; border-radius: var(--wy-rayon-s); }
.wy-tuile:hover .wy-tuile__image img { transform: scale(1.04); }

.wy-tuile__titre {
  font-size: var(--wy-t-1);
  font-weight: var(--wy-graisse-titre, 700);
  margin: 0 0 .3rem;
  line-height: 1.25;
}
.wy-tuile__texte {
  margin: 0;
  color: var(--wy-sourd);
  font-size: var(--wy-t--1);
  line-height: 1.5;
}

/* La tuile devient une carte : le texte sur fond blanc sous l'image, et une
   flèche à droite qui dit que ça se clique. Sans elle, quatre images côte à
   côte ne se lisent pas comme des liens — on les regarde et on passe. */
.wy-tuile {
  background: var(--wy-papier);
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon-s);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wy-tuile:hover {
  border-color: var(--wy-vert);
  box-shadow: 0 20px 44px -32px rgba(16, 24, 40, .55);
  transform: translateY(-2px);
}
.wy-tuile__image { margin: 0; border-radius: 0; }
/* Le pied de la tuile : texte à gauche, flèche à droite, alignés en bas pour
   que quatre tuiles aux titres de longueurs différentes gardent leurs flèches
   sur la même ligne. */
.wy-tuile__pied {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wy-r-2);
  padding: var(--wy-r-2) var(--wy-r-2) calc(var(--wy-r-2) + .15rem);
  flex: 1 1 auto;
}
.wy-tuile__fleche {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  border: 1px solid var(--wy-trait);
  display: grid;
  place-items: center;
  color: var(--wy-vert);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.wy-tuile__fleche svg { width: .95rem; height: .95rem; fill: currentColor; }
.wy-tuile:hover .wy-tuile__fleche {
  background: var(--wy-vert);
  border-color: var(--wy-vert);
  color: #fff;
}

/* Sur téléphone, quatre colonnes de WordPress deviennent quatre lignes
   pleine largeur : des images de six cents pixels de haut à faire défiler une
   par une. Deux par rangée gardent la vue d'ensemble. */
@media (max-width: 781px) {
  .wp-block-columns.wy-tuiles {
    flex-wrap: nowrap !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wy-r-2);
  }
  .wp-block-columns.wy-tuiles > .wp-block-column { flex-basis: auto !important; }
}

/* ---------------- section et en-tête ---------------- */

.wy-section {
  /* Le rythme vertical n'est pas le même selon le site. Une page de
     prestation respire ; un catalogue de cent soixante-dix références où
     chaque section porte une grille d'images étouffe sous la même valeur —
     deux cent vingt pixels de blanc entre deux rangées de produits, on croit
     la page cassée. Une variable, et la charte du site tranche. */
  padding-block: var(--wy-section-y, var(--wy-r-6));
  padding-inline: 1.5rem;
}
.wy-section--teintee { background: var(--wy-teinte); }

/* L'en-tête est aligné sur la grille large — donc sur le bord gauche des cartes
   qui le suivent. Un titre centré au-dessus de colonnes qui, elles, partent du
   bord, c'est le décalage qui saute aux yeux en premier sur une page. */
.wy-entete-section { margin-bottom: var(--wy-r-4); }
.wy-entete-section > * { max-width: 44rem; }
.wy-titre-section {
  font-size: clamp(1.75rem, 3.4vw, var(--wy-t-4));
  font-weight: var(--wy-graisse-titre, 700);
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
.wy-intro-section {
  font-size: var(--wy-t-1);
  line-height: 1.6;
  color: var(--wy-sourd);
  margin: var(--wy-r-2) 0 0;
}

/* ---------------- ouverture pleine largeur ---------------- */

/* Gouttière commune : le contenu d'un bandeau pleine largeur se cale sur le
   même bord gauche que les grilles larges du reste de la page.
   Le retrait est porté par les enfants et non par le bandeau : un pourcentage
   dans une marge intérieure se calcule sur le bloc parent, qui n'est pas de la
   largeur de l'écran pour un bloc en pleine largeur. Sur les enfants, en
   revanche, le pourcentage se calcule bien sur le bandeau lui-même.

   Le sélecteur passe par .wp-block-group pour être plus précis que les règles
   de marge des titres et paragraphes plus bas, qui emploient la notation courte
   et remettraient ce retrait à zéro. */
.wp-block-group.wy-hero > *,
.wp-block-group.wy-final > * {
  margin-inline-start: max(0px, calc((100% - var(--wp--style--global--wide-size, 83.75rem)) / 2));
}

.wy-hero {
  padding-inline: 1.5rem;
  background: var(--wy-nuit);
  color: #fff;
  padding-block: clamp(4.5rem, 11vw, 8.5rem) clamp(6rem, 13vw, 10rem);
  position: relative;
  overflow: hidden;
}
/* La longueur de ligne se règle sur les enfants, jamais sur le groupe : en
   mise en page « flux », rien ne vient les recentrer. */
.wy-hero > * { max-width: 46rem; }


/* ---- bandeau de réassurance ----

   Trois promesses sous les boutons, chacune en deux lignes. C'est le dernier
   endroit où l'on peut lever un doute avant que la personne ne clique — et le
   premier qu'elle relit avant de payer.

   Une puce dessinée en CSS plutôt qu'une icône : rien à charger, et elle
   change de couleur avec la charte sans qu'on y touche. */
.wy-reassure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--wy-r-2) var(--wy-r-3);
  margin-top: var(--wy-r-3);
  max-width: none !important;
}
.wy-reassure__item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  font-size: var(--wy-t--1);
  line-height: 1.4;
}
/* La puce grandit et se pose sur un rond clair : à 1,15 rem elle se lisait
   comme une coche de liste, pas comme un pictogramme de garantie. */
.wy-reassure__item::before {
  content: "";
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: .15rem;
  border-radius: 50%;
  background: var(--wy-vert);
  /* La coche est un masque : une seule forme, la couleur vient de la charte. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 6.3a1 1 0 0 1 0 1.4l-9.6 9.6a1 1 0 0 1-1.4 0L3.7 11.7a1 1 0 1 1 1.4-1.4l4.9 4.9 8.9-8.9a1 1 0 0 1 1.4 0z'/%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='M20.3 6.3a1 1 0 0 1 0 1.4l-9.6 9.6a1 1 0 0 1-1.4 0L3.7 11.7a1 1 0 1 1 1.4-1.4l4.9 4.9 8.9-8.9a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wy-reassure__item b { display: block; font-weight: 600; color: var(--wy-encre); }
.wy-reassure__item span { color: var(--wy-sourd); }


/* Halo diffus, tracé en dégradé plutôt qu'en image : aucun fichier à charger,
   et il se redimensionne sans jamais pixeliser. */
.wy-hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(46% 58% at 78% 8%, rgba(15, 138, 85, .30), transparent 62%),
    radial-gradient(40% 50% at 12% 96%, rgba(37, 99, 235, .20), transparent 60%);
  pointer-events: none;
}
.wy-hero > * { position: relative; }
.wy-hero .wy-surtitre {
  color: rgba(255, 255, 255, .74);
  margin-bottom: var(--wy-r-3);
}

.wy-hero__titre {
  font-size: clamp(2.15rem, 4.6vw, var(--wy-t-5));
  font-weight: var(--wy-graisse-titre, 700);
  line-height: 1.08;
  letter-spacing: -.028em;
  margin: 0 0 var(--wy-r-2);
  text-wrap: balance;
}
.wy-hero__texte {
  font-size: var(--wy-t-1);
  line-height: 1.62;
  color: var(--wy-clair);
  margin: 0 0 var(--wy-r-3);
}
.wy-hero__actions { gap: .85rem; }

/* Bouton principal : le seul endroit de la page où l'accent apparaît en aplat. */
.wy-hero .wy-bouton-vert .wp-block-button__link,
.wy-final .wy-bouton-vert .wp-block-button__link {
  background: var(--wy-vert);
  color: #fff;
  border: 0;
  font-weight: 600;
  font-size: var(--wy-t-0);
  padding: .95rem 1.7rem;
  transition: background .2s ease, transform .15s ease;
}
.wy-hero .wy-bouton-vert .wp-block-button__link:hover,
.wy-final .wy-bouton-vert .wp-block-button__link:hover { background: var(--wy-vert-vif); }
.wy-hero .wy-bouton-vert .wp-block-button__link:active { transform: translateY(1px); }

.wy-hero .wy-bouton-clair .wp-block-button__link {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .36);
  background: transparent;
  font-weight: 600;
  font-size: var(--wy-t-0);
  padding: .95rem 1.7rem;
  transition: border-color .2s ease, background .2s ease;
}
.wy-hero .wy-bouton-clair .wp-block-button__link:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .07);
}

.wy-hero .wp-block-button__link:focus-visible,
.wy-final .wp-block-button__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---- ouverture claire ----

   ⚠ Ce bloc doit rester APRÈS les règles du bandeau sombre. Les sélecteurs ont
   la même spécificité des deux côtés : placé avant, il perd, et le surtitre
   comme le bouton secondaire restent blancs sur fond blanc. Constaté en
   direct.

   Un bandeau sombre affirme, un bandeau clair montre. Sur un site marchand,
   la photo du produit est l'argument : la poser sur du blanc lui rend son
   contraste, là où un fond foncé la fait passer pour une illustration.
   Même structure, même balisage — seule la classe change. */
.wy-hero.wy-hero--clair {
  background: linear-gradient(180deg, var(--wy-teinte) 0%, var(--wy-papier) 100%);
  color: var(--wy-encre);
  padding-block: clamp(3rem, 7vw, 5rem) clamp(3.5rem, 8vw, 6rem);
}
.wy-hero--clair .wy-hero__titre { color: var(--wy-encre); }
.wy-hero--clair .wy-hero__texte { color: var(--wy-sourd); }
.wy-hero--clair .wy-surtitre { color: var(--wy-vert); }
/* Le bouton secondaire était un contour blanc, invisible sur fond clair. */
.wy-hero--clair .wy-bouton-clair .wp-block-button__link {
  color: var(--wy-vert);
  border-color: var(--wy-vert);
  background: transparent;
}
.wy-hero--clair .wy-bouton-clair .wp-block-button__link:hover {
  background: var(--wy-vert);
  color: #fff;
}

/* Le contour au clavier était blanc, prévu pour un fond sombre. */
.wy-hero--clair .wp-block-button__link:focus-visible {
  outline-color: var(--wy-vert);
}

/* ---------------- ouverture avec visuel ---------------- */

/* En deux colonnes, le retrait de grille est déjà porté par la colonne large :
   les enfants n'ont plus à le reprendre, sinon il se cumule. */
.wy-hero--visuel { padding-inline: 1.5rem; }
.wp-block-group.wy-hero--visuel > * { margin-inline-start: auto; margin-inline-end: auto; }
.wy-hero--visuel .wy-hero__titre,
.wy-hero--visuel .wy-hero__texte,
.wy-hero--visuel .wy-surtitre,
.wy-hero--visuel .wy-hero__actions { max-width: none; }

.wy-hero__grille { gap: 3.5rem; margin-bottom: 0; }

/* Le visuel porte une ombre portée sourde : posé à plat sur le bandeau, il
   ressemble à une capture d'écran collée.
   Le rapport est forcé un peu plus haut que celui du fichier — une image large
   et basse à côté d'un bloc de texte de quatre lignes paraît fuir. */
.wy-hero__image { margin: 0; }
.wy-hero__image img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--wy-rayon);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .75);
}

/* ---------------- texte à côté d'une image ---------------- */

.wy-duo { gap: 3.5rem; margin-bottom: 0; }
.wy-duo__image { margin: 0; }
.wy-duo__image img {
  width: 100%;
  height: auto;
  border-radius: var(--wy-rayon);
}
.wy-duo p:not(.wy-intro-section) {
  font-size: var(--wy-t-0);
  line-height: 1.7;
  color: var(--wy-sourd);
  margin: 1.1rem 0 0;
}
.wy-duo .wy-titre-section,
.wy-duo .wy-intro-section { max-width: none; }

/* ---------------- chiffres à cheval sur la limite ---------------- */

/* La carte remonte dans le bandeau sombre : c'est ce chevauchement qui donne
   du relief à une page qui n'a aucune photographie. */
.wy-preuves {
  /* La bande haute prolonge le bandeau d'ouverture pour que la carte semble
     posée dessus. Elle prend donc sa couleur — pas une couleur à elle. */
  background: linear-gradient(to bottom, var(--wy-preuves-fond, var(--wy-nuit)) 0 4.5rem, transparent 4.5rem);
  padding-inline: 1.5rem;
  margin-top: -4.5rem;
}
/* Sous une ouverture claire, la bande sombre devient un trait violet sorti de
   nulle part. Le sélecteur de voisinage la fait suivre automatiquement : rien
   à régler à la main sur la page. */
.wy-hero--clair + .wy-preuves { --wy-preuves-fond: var(--wy-papier); }
.wy-preuves__carte {
  background: var(--wy-papier);
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon);
  box-shadow: 0 1px 2px rgba(12, 20, 32, .04), 0 26px 54px -30px rgba(12, 20, 32, .42);
  padding: var(--wy-r-3) 2.3rem;
  gap: 2rem;
}
.wy-preuve__valeur {
  font-size: clamp(1.6rem, 3vw, var(--wy-t-3));
  font-weight: var(--wy-graisse-titre, 700);
  letter-spacing: -.026em;
  line-height: 1.1;
  color: var(--wy-encre);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.wy-preuve__libelle {
  font-size: var(--wy-t--1);
  line-height: 1.45;
  color: var(--wy-sourd);
  margin: .35rem 0 0;
}

/* ---------------- cartes d'arguments ---------------- */

.wy-cartes { gap: 1.5rem; }

.wy-carte-arg {
  background: var(--wy-papier);
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon-s);
  padding: 2rem 1.9rem 2.1rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wy-carte-arg:hover {
  border-color: color-mix(in srgb, var(--wy-vert) 45%, var(--wy-trait));
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -26px rgba(12, 20, 32, .4);
}

/* L'index dit au lecteur combien d'arguments l'attendent et où il en est. Sur
   trois colonnes de texte nu, personne ne compte. */
.wy-carte-arg__index,
.wy-etape__numero {
  font-size: var(--wy-t--2);
  font-weight: var(--wy-graisse-titre, 700);
  letter-spacing: .12em;
  color: var(--wy-vert);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--wy-r-2);
}
.wy-carte-arg__titre,
.wy-etape__titre {
  font-size: var(--wy-t-1);
  font-weight: var(--wy-graisse-titre, 700);
  line-height: 1.26;
  letter-spacing: -.012em;
  margin: 0 0 .6rem;
}
.wy-carte-arg p:not(.wy-carte-arg__index),
.wy-etape p:not(.wy-etape__numero) {
  font-size: var(--wy-t-0);
  line-height: 1.66;
  color: var(--wy-sourd);
  margin: 0;
}

/* ---------------- étapes ---------------- */

/* Le filet supérieur remplace l'encadré : quatre cartes à la suite finiraient
   par ressembler à un tableau, et la lecture n'a plus de sens de parcours. */
.wy-etapes-grille { gap: 2.5rem; margin-bottom: 0; }
.wy-etapes-grille + .wy-etapes-grille { margin-top: 2.5rem; }

.wy-etape {
  border-top: 1px solid var(--wy-trait);
  padding-top: 1.4rem;
}
.wy-etape__numero { margin-bottom: .7rem; }

/* ---------------- cartes de coordonnées ---------------- */

.wy-carte-info {
  background: var(--wy-papier);
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon-s);
  padding: 1.8rem 1.8rem 1.9rem;
}
.wy-carte-info__titre {
  font-size: var(--wy-t-1);
  font-weight: var(--wy-graisse-titre, 700);
  line-height: 1.26;
  letter-spacing: -.012em;
  margin: 0 0 .6rem;
}
.wy-carte-info p {
  font-size: var(--wy-t-0);
  line-height: 1.7;
  color: var(--wy-sourd);
  margin: 0;
}

/* ---------------- questions dépliables ---------------- */

/* Une liste de questions n'a pas besoin d'encadré : un filet entre chacune
   suffit à les séparer, et la page reste calme. */
.wy-questions > * { max-width: 52rem; }

.wy-question {
  border-top: 1px solid var(--wy-trait);
  padding: 0;
}
.wy-questions > .wy-question:last-child { border-bottom: 1px solid var(--wy-trait); }

.wy-question summary {
  font-size: var(--wy-t-1);
  font-weight: var(--wy-graisse-titre, 700);
  line-height: 1.4;
  letter-spacing: -.008em;
  color: var(--wy-encre);
  cursor: pointer;
  list-style: none;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  transition: color .2s ease;
}
.wy-question summary::-webkit-details-marker { display: none; }
.wy-question summary:hover { color: var(--wy-vert); }
.wy-question summary:focus-visible { outline: 2px solid var(--wy-vert); outline-offset: 2px; }

/* La croix tourne pour devenir un moins : le mouvement dit ce que le clic a
   fait, ce qu'un triangle statique ne dit pas. */
.wy-question summary::after,
.wy-question summary::before {
  content: "";
  position: absolute;
  right: .4rem;
  top: 50%;
  width: .85rem;
  height: 2px;
  background: var(--wy-vert);
  transition: transform .25s ease;
}
.wy-question summary::before { transform: translateY(-50%); }
.wy-question summary::after { transform: translateY(-50%) rotate(90deg); }
.wy-question[open] summary::after { transform: translateY(-50%) rotate(0deg); }

.wy-question p {
  font-size: var(--wy-t-0);
  line-height: 1.7;
  color: var(--wy-sourd);
  margin: 0 0 1.5rem;
  max-width: 46rem;
}

/* ---------------- cartes d'article ---------------- */

.wy-journal .wp-block-post-template { gap: 2.5rem 1.75rem; }

.wy-journal .wp-block-post {
  display: flex;
  flex-direction: column;
}
.wy-article-carte__image { margin: 0 0 1.1rem; }
.wy-article-carte__image img {
  width: 100%;
  border-radius: var(--wy-rayon-s);
  transition: transform .35s ease;
}
.wy-journal .wp-block-post:hover .wy-article-carte__image img { transform: scale(1.02); }
/* Le rognage se fait dans le cadre, pas sur l'image : sans cela, l'agrandissement
   au survol pousse le voisin d'un pixel et toute la grille tremble. */
.wy-article-carte__image { overflow: hidden; border-radius: var(--wy-rayon-s); }

.wy-article-carte__date {
  font-size: var(--wy-t--2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wy-vert);
  margin: 0 0 .55rem;
}
.wy-article-carte__titre {
  font-size: var(--wy-t-1);
  font-weight: var(--wy-graisse-titre, 700);
  line-height: 1.28;
  letter-spacing: -.014em;
  margin: 0 0 .7rem;
  text-wrap: balance;
}
.wy-article-carte__titre a { color: inherit; text-decoration: none; }
.wy-article-carte__titre a:hover { color: var(--wy-vert); }
.wy-article-carte__extrait {
  font-size: var(--wy-t-0);
  line-height: 1.66;
  color: var(--wy-sourd);
  margin: 0;
}
.wy-article-carte__extrait .wp-block-post-excerpt__more-link {
  display: inline-block;
  margin-top: .7rem;
  font-weight: 600;
  color: var(--wy-vert);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ---------------- article ---------------- */

.wy-article__visuel { margin: 0 0 var(--wy-r-4); }
.wy-article__visuel img { width: 100%; border-radius: var(--wy-rayon); }

/* La colonne de lecture, réglée sur les enfants : en flux, rien ne les
   recentre, et le corps garde le bord gauche du titre et du visuel. */
.wy-article__corps > * { max-width: 42rem; }
.wy-article__corps h2 {
  font-size: var(--wy-t-2);
  font-weight: var(--wy-graisse-titre, 700);
  line-height: 1.22;
  letter-spacing: -.018em;
  margin: var(--wy-r-4) 0 var(--wy-r-1);
}
.wy-article__corps h3 {
  font-size: var(--wy-t-1);
  font-weight: var(--wy-graisse-titre, 700);
  line-height: 1.28;
  margin: var(--wy-r-3) 0 .6rem;
}
.wy-article__corps p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #2A3242;
  margin: 0 0 1.2rem;
}
.wy-article__corps > :first-child { margin-top: 0; }

.wy-entete-page__date {
  font-size: var(--wy-t--2);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wy-vert);
  margin: 0 0 var(--wy-r-1);
}

/* ---------------- bandeau de titre de page ---------------- */

/* Les pages intérieures n'ont pas de bandeau sombre — ce serait lourd à chaque
   fois. Elles ont ce bandeau teinté, qui pose le titre sur la même colonne que
   le reste et donne à la page un début franc. */
.wy-entete-page {
  background: var(--wy-teinte);
  border-bottom: 1px solid var(--wy-trait);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  padding-inline: 1.5rem;
}
/* Une section garde son grand retrait en haut quand elle suit une autre
   section. Juste sous le bandeau de titre, en revanche, ce retrait creuse un
   trou de cent pixels que rien ne justifie. */
.wy-entete-page + .wy-section,
.wy-entete-page + .wy-preuves { padding-top: var(--wy-r-4); }

.wy-entete-page__titre {
  font-size: clamp(2rem, 4.2vw, var(--wy-t-4));
  font-weight: var(--wy-graisse-titre, 700);
  line-height: 1.12;
  letter-spacing: -.024em;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

/* ---------------- citation ---------------- */

/* Sans encadré : un témoignage enfermé dans une boîte grise se lit comme une
   note de bas de page. Composé en grand et détaché, il se lit. */
.wy-citation > * { max-width: 40rem; }
.wy-citation__texte {
  font-size: clamp(1.4rem, 2.8vw, var(--wy-t-3));
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -.018em;
  color: var(--wy-encre);
  margin: 0 0 var(--wy-r-2);
  text-wrap: balance;
  border-left: 2px solid var(--wy-vert);
  padding-left: 1.6rem;
}
.wy-citation__auteur {
  font-size: var(--wy-t--1);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wy-sourd);
  margin: 0;
  padding-left: calc(1.6rem + 2px);
}

/* ---------------- appel à l'action de fin de page ---------------- */

.wy-final {
  background: var(--wy-nuit);
  color: #fff;
  padding-block: var(--wy-r-6);
  padding-inline: 1.5rem;
}
.wy-final > * { max-width: 42rem; }
.wy-final__titre {
  font-size: clamp(1.75rem, 3.4vw, var(--wy-t-4));
  font-weight: var(--wy-graisse-titre, 700);
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0 0 var(--wy-r-2);
  text-wrap: balance;
}
.wy-final__texte {
  font-size: var(--wy-t-1);
  line-height: 1.62;
  color: var(--wy-clair);
  margin: 0 0 var(--wy-r-3);
}

/* ---------------- bande teintée et respirations ---------------- */

.wy-bande {
  background: var(--wy-teinte);
  padding-block: var(--wy-r-5);
  padding-inline: 1.5rem;
}
.wy-teinte { background: var(--wy-teinte); border-radius: var(--wy-rayon-s); }

/* ---------------- petits écrans ---------------- */

@media (max-width: 781px) {
  :root { --wy-r-6: 4rem; --wy-r-5: 3rem; --wy-r-4: 2.25rem; }
  .wy-preuves {
    margin-top: -3rem;
    background: linear-gradient(to bottom, var(--wy-nuit) 0 3rem, transparent 3rem);
  }
  .wy-preuves__carte { padding: 1.6rem 1.5rem; gap: 1.5rem; }
  .wy-etapes-grille + .wy-etapes-grille { margin-top: 0; }
  .wy-citation__texte { padding-left: 1.1rem; }
  .wy-citation__auteur { padding-left: calc(1.1rem + 2px); }
}

@media (prefers-reduced-motion: reduce) {
  .wy-carte-arg,
  .wy-hero .wp-block-button__link,
  .wy-final .wp-block-button__link { transition: none; }
  .wy-carte-arg:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Tarifs                                                              */
/* ------------------------------------------------------------------ */

.wy-tarifs { gap: 1.5rem; align-items: stretch; }

.wy-tarif {
  background: var(--wy-papier);
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon);
  padding: 2rem 1.9rem 2.2rem;
  display: flex;
  flex-direction: column;
}

/* La carte mise en avant est détourée, pas agrandie : agrandir décale les
   lignes d'une carte à l'autre, et c'est justement ce qu'on vient comparer. */
.wy-tarif--phare {
  background: var(--wy-nuit);
  border-color: var(--wy-nuit);
  color: #fff;
  box-shadow: 0 30px 60px -34px rgba(12, 20, 32, .5);
}
.wy-tarif--phare .wy-tarif__note { color: var(--wy-clair); }
.wy-tarif--phare .wy-tarif__liste { color: var(--wy-clair); }
.wy-tarif--phare .wy-tarif__prix { color: #fff; }

.wy-tarif__nom {
  font-size: var(--wy-t--2);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wy-vert);
  margin: 0 0 var(--wy-r-2);
}
.wy-tarif--phare .wy-tarif__nom { color: #fff; opacity: .8; }

.wy-tarif__prix {
  font-size: clamp(1.7rem, 3vw, var(--wy-t-3));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.026em;
  color: var(--wy-encre);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.wy-tarif__note {
  font-size: var(--wy-t--1);
  color: var(--wy-sourd);
  margin: .4rem 0 var(--wy-r-3);
}

.wy-tarif__liste {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wy-r-3);
  font-size: var(--wy-t-0);
  line-height: 1.55;
  color: var(--wy-sourd);
  flex: 1;
}
.wy-tarif__liste li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .65rem;
}
/* Une coche dessinée en CSS plutôt qu'une icône : rien à charger, et elle prend
   la couleur d'accent du client sans qu'on refasse le fichier. */
.wy-tarif__liste li::before,
.wy-atouts li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .52em;
  width: .5rem;
  height: .28rem;
  border-left: 2px solid var(--wy-vert);
  border-bottom: 2px solid var(--wy-vert);
  transform: rotate(-45deg);
}
.wy-tarif--phare .wy-tarif__liste li::before { border-color: #fff; }

.wy-tarif .wp-block-buttons { margin: 0; }
.wy-tarif .wy-bouton-vert .wp-block-button__link {
  background: var(--wy-vert);
  color: #fff;
  border: 0;
  border-radius: var(--wy-rayon-pilule);
  font-weight: 600;
  font-size: var(--wy-t-0);
  padding: .85rem 1.5rem;
  width: 100%;
  text-align: center;
  transition: background .2s ease;
}
.wy-tarif .wy-bouton-vert .wp-block-button__link:hover { background: var(--wy-vert-vif); }
.wy-tarif--phare .wy-bouton-vert .wp-block-button__link { background: #fff; color: var(--wy-nuit); }
.wy-tarif--phare .wy-bouton-vert .wp-block-button__link:hover { background: var(--wy-clair); }

/* ------------------------------------------------------------------ */
/* Liste de ce qui est compris                                         */
/* ------------------------------------------------------------------ */

/* Dans une carte, la liste n'a pas la place de tenir sur deux colonnes : trois
   lignes s'y répartissaient en une à gauche et deux à droite, ce qui se lit
   mal et casse l'ordre de lecture. On revient à une colonne. */
.wy-carte-info .wy-atouts { columns: 1; }

.wy-atouts {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 2.5rem;
  font-size: var(--wy-t-0);
  line-height: 1.6;
  color: var(--wy-sourd);
}
.wy-atouts li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .9rem;
  break-inside: avoid;
}

/* ------------------------------------------------------------------ */
/* Logos clients                                                       */
/* ------------------------------------------------------------------ */

/* En gris et à faible opacité : une ligne de logos en couleur attire l'œil plus
   que le titre au-dessus, alors qu'elle n'est là que pour rassurer. */
.wy-logos {
  background: var(--wy-teinte);
  padding-block: var(--wy-r-4);
  padding-inline: 1.5rem;
}
.wy-logos__mention {
  font-size: var(--wy-t--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wy-sourd);
  text-align: center;
  margin: 0 0 var(--wy-r-3);
}
.wy-logos__piste {
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 0;
}
.wy-logos__piste img {
  max-height: 44px;
  width: auto;
  filter: grayscale(1);
  opacity: .55;
  /* Un logo livré sur fond blanc laisserait un rectangle clair sur la bande
     teintée. En fusion « multiplier », le blanc disparaît et le tracé reste :
     le client peut déposer ses fichiers tels qu'on les lui a donnés. */
  mix-blend-mode: multiply;
  transition: opacity .25s ease, filter .25s ease;
}
.wy-logos__piste .wp-block-column:hover img { filter: none; opacity: 1; }

/* ------------------------------------------------------------------ */
/* Équipe                                                              */
/* ------------------------------------------------------------------ */

.wy-equipe { gap: 2rem; }

.wy-membre__photo { margin: 0 0 1.1rem; overflow: hidden; border-radius: var(--wy-rayon-s); }
.wy-membre__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--wy-rayon-s);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.wy-membre:hover .wy-membre__photo img { transform: scale(1.03); }

.wy-membre__nom {
  font-size: var(--wy-t-1);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.012em;
  margin: 0 0 .25rem;
}
.wy-membre__role {
  font-size: var(--wy-t--2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wy-vert);
  margin: 0 0 .7rem;
}
.wy-membre p:not(.wy-membre__role) {
  font-size: var(--wy-t-0);
  line-height: 1.65;
  color: var(--wy-sourd);
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Galerie                                                             */
/* ------------------------------------------------------------------ */

.wy-galerie { gap: 1.5rem; }
.wy-galerie .wp-block-column { overflow: hidden; border-radius: var(--wy-rayon-s); }
.wy-galerie figure { margin: 0; }
.wy-galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.wy-galerie .wp-block-column:hover img { transform: scale(1.045); }

@media (max-width: 781px) {
  .wy-atouts { columns: 1; }
  .wy-logos__piste { gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wy-membre__photo img,
  .wy-galerie img,
  .wy-logos__piste img { transition: none; }
  .wy-membre:hover .wy-membre__photo img,
  .wy-galerie .wp-block-column:hover img { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Catalogue                                                           */
/* ------------------------------------------------------------------ */

/* Ces règles ne s'appliquent que si une boutique est installée : sur un site
   vitrine, aucune de ces classes n'existe et elles ne coûtent rien. Elles sont
   ici plutôt que dans la feuille de marque du client pour que le catalogue
   ressemble au reste du site partout, sans qu'on le réécrive à chaque fois. */

.wy-boutique__barre {
  margin-bottom: var(--wy-r-3);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--wy-trait);
  font-size: var(--wy-t--1);
  color: var(--wy-sourd);
  gap: 1rem;
}
.wy-boutique__barre select {
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon-p);
  padding: .5rem 2rem .5rem .8rem;
  font: inherit;
  background-color: var(--wy-papier);
}

/* WooCommerce pose bien la classe « colonnes-3 » mais laisse sa grille se
   replier à deux dès qu'un écran n'est pas très large. On la fixe ici, avec
   nos propres seuils. */
.wy-boutique .wp-block-post-template,
.wy-boutique .wc-block-product-template {
  gap: 1.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .wy-boutique .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wy-boutique .wc-block-product-template { grid-template-columns: 1fr; }
}

/* Le bloc des messages de boutique reste dans le flux même vide, et creuse un
   trou de cent pixels sous le titre. */
.wc-block-store-notices:empty { display: none; }

.wy-boutique .wc-block-product,
.wy-boutique .wp-block-post {
  background: var(--wy-papier);
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon);
  padding: 1rem 1rem 1.6rem;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wy-boutique .wc-block-product:hover,
.wy-boutique .wp-block-post:hover {
  border-color: color-mix(in srgb, var(--wy-vert) 45%, var(--wy-trait));
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -26px rgba(12, 20, 32, .4);
}

.wy-produit__image { margin: 0 0 1.1rem; border-radius: var(--wy-rayon-p); overflow: hidden; }
.wy-produit__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.wy-boutique .wc-block-product:hover .wy-produit__image img { transform: scale(1.04); }

.wy-produit__titre {
  font-size: var(--wy-t-1);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -.012em;
  margin: 0 0 .5rem;
}
.wy-produit__titre a { color: inherit; text-decoration: none; }
.wy-produit__titre a:hover { color: var(--wy-vert); }

.wy-produit__accroche {
  font-size: var(--wy-t--1);
  line-height: 1.6;
  color: var(--wy-sourd);
  margin: 0 0 1rem;
  flex: 1;
}
.wy-produit__prix {
  font-size: var(--wy-t-1);
  font-weight: 700;
  color: var(--wy-vert);
  font-variant-numeric: tabular-nums;
  margin: 0 0 1rem;
}
.wy-produit__prix del { color: var(--wy-sourd); font-weight: 500; margin-right: .4rem; }
.wy-produit__prix ins { text-decoration: none; }

.wy-produit__bouton .wp-block-button__link,
.wy-produit__bouton a.button {
  background: var(--wy-vert);
  color: #fff;
  border: 0;
  border-radius: var(--wy-rayon-pilule);
  font-weight: 600;
  font-size: var(--wy-t--1);
  padding: .75rem 1.4rem;
  transition: background .2s ease;
}
.wy-produit__bouton .wp-block-button__link:hover,
.wy-produit__bouton a.button:hover { background: var(--wy-vert-vif); }

/* La pastille de promotion se pose sur l'image, pas à côté du prix : c'est là
   qu'on la cherche. */
.wy-boutique .wc-block-product-sale-badge {
  background: var(--wy-vert);
  color: #fff;
  border: 0;
  border-radius: var(--wy-rayon-pilule);
  font-size: var(--wy-t--2);
  font-weight: 700;
  letter-spacing: .06em;
  padding: .3rem .8rem;
}

@media (prefers-reduced-motion: reduce) {
  .wy-boutique .wc-block-product,
  .wy-produit__image img { transition: none; }
  .wy-boutique .wc-block-product:hover { transform: none; }
  .wy-boutique .wc-block-product:hover .wy-produit__image img { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Apparitions au défilement                                           */
/* ------------------------------------------------------------------ */

/* L'état masqué n'est posé qu'à partir du moment où le JavaScript a marqué
   l'élément : si le fichier ne se charge pas, la page reste entièrement
   lisible. C'est l'inverse du réglage habituel, qui masque en CSS et compte
   sur le JavaScript pour révéler — et laisse une page blanche quand il manque. */

.wy-anime {
  opacity: 0;
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.wy-anime.wy-vu {
  opacity: 1;
  transform: none;
}

/* Vingt-quatre pixels : assez pour qu'on perçoive un mouvement, trop peu pour
   qu'on le regarde. Un déplacement plus ample fait « site de démonstration ». */
.wy-anime:not(.wy-effet-fondu):not(.wy-effet-gauche):not(.wy-effet-droite):not(.wy-effet-zoom) {
  transform: translateY(24px);
}
.wy-effet-fondu.wy-anime  { transform: none; }
.wy-effet-monte.wy-anime  { transform: translateY(24px); }
.wy-effet-gauche.wy-anime { transform: translateX(-28px); }
.wy-effet-droite.wy-anime { transform: translateX(28px); }
.wy-effet-zoom.wy-anime   { transform: scale(.965); }

.wy-retard-1.wy-anime { transition-delay: .12s; }
.wy-retard-2.wy-anime { transition-delay: .24s; }
.wy-retard-3.wy-anime { transition-delay: .38s; }

/* Les grilles s'égrènent au lieu d'arriver d'un bloc. Le décalage se règle en
   CSS et non au chargement : une carte de plus n'oblige à toucher à rien. */
.wy-cartes > .wp-block-column,
.wy-etapes-grille > .wp-block-column,
.wy-preuves__carte > .wp-block-column,
.wy-journal .wp-block-post {
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.wy-anime .wy-cartes > .wp-block-column,
.wy-anime .wy-etapes-grille > .wp-block-column,
.wy-anime .wy-preuves__carte > .wp-block-column,
.wy-anime .wy-journal .wp-block-post {
  opacity: 0;
  transform: translateY(18px);
}
.wy-vu .wy-cartes > .wp-block-column,
.wy-vu .wy-etapes-grille > .wp-block-column,
.wy-vu .wy-preuves__carte > .wp-block-column,
.wy-vu .wy-journal .wp-block-post {
  opacity: 1;
  transform: none;
}
.wy-vu .wy-cartes > .wp-block-column:nth-child(2),
.wy-vu .wy-etapes-grille > .wp-block-column:nth-child(2),
.wy-vu .wy-preuves__carte > .wp-block-column:nth-child(2),
.wy-vu .wy-journal .wp-block-post:nth-child(2) { transition-delay: .09s; }
.wy-vu .wy-cartes > .wp-block-column:nth-child(3),
.wy-vu .wy-etapes-grille > .wp-block-column:nth-child(3),
.wy-vu .wy-preuves__carte > .wp-block-column:nth-child(3),
.wy-vu .wy-journal .wp-block-post:nth-child(3) { transition-delay: .18s; }
.wy-vu .wy-cartes > .wp-block-column:nth-child(4),
.wy-vu .wy-preuves__carte > .wp-block-column:nth-child(4),
.wy-vu .wy-journal .wp-block-post:nth-child(4) { transition-delay: .27s; }

/* Le halo du bandeau d'ouverture respire lentement. Vingt secondes : assez lent
   pour qu'on ne le remarque jamais consciemment, ce qui est le but. */
@keyframes wy-halo {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .82; transform: scale(1.06); }
}
.wy-hero::before { animation: wy-halo 20s ease-in-out infinite; }

/* Le visuel du bandeau se pose un instant après le texte : l'œil lit d'abord,
   regarde ensuite. */
.wy-hero--visuel.wy-vu .wy-hero__image { transition-delay: .18s; }
.wy-hero--visuel .wy-hero__image {
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
.wy-hero--visuel.wy-anime .wy-hero__image { opacity: 0; transform: translateY(22px) scale(.985); }
.wy-hero--visuel.wy-vu   .wy-hero__image { opacity: 1; transform: none; }

/* Rien de tout cela pour qui a demandé moins de mouvement — y compris le halo,
   qui tourne en boucle et serait le plus gênant des trois. */
@media (prefers-reduced-motion: reduce) {
  .wy-anime,
  .wy-anime .wy-cartes > .wp-block-column,
  .wy-anime .wy-etapes-grille > .wp-block-column,
  .wy-anime .wy-preuves__carte > .wp-block-column,
  .wy-anime .wy-journal .wp-block-post,
  .wy-hero--visuel.wy-anime .wy-hero__image {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .wy-hero::before { animation: none; }
}

/* ------------------------------------------------------------------ */
/* Styles de bloc proposés dans l'éditeur                              */
/* ------------------------------------------------------------------ */

/* Les mêmes habillages que dans nos sections, applicables à n'importe quel
   bloc depuis le bandeau « Styles ». Les classes sont posées par WordPress
   sous la forme « is-style-<nom> ». */

.is-style-wy-surtitre {
  font-size: var(--wy-t--2);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wy-vert);
  margin: 0 0 var(--wy-r-2);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.is-style-wy-surtitre::before {
  content: "";
  width: 1.7rem;
  height: 1px;
  background: currentColor;
  flex: 0 0 1.7rem;
  opacity: .6;
}

.is-style-wy-titre-section {
  font-size: clamp(1.75rem, 3.4vw, var(--wy-t-4));
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.is-style-wy-carte {
  background: var(--wy-papier);
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon-s);
  padding: 2rem 1.9rem;
}

/* ==================================================================
   Deuxième série de composants
   ==================================================================

   Ces classes servent les compositions ajoutées en 1.13. Même principe que
   le reste du fichier : aucune couleur écrite en dur, tout passe par les
   variables, de sorte qu'une charte cliente les habille sans les connaître.
   ================================================================== */

/* Bento : une grande tuile et trois petites. Utile pour présenter un univers
   sans aligner quatre cartes identiques, qui se lisent comme un tableau. */
.wy-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: var(--wy-r-3);
  max-width: none !important;
}
.wy-bento > .wp-block-column,
.wy-bento > .wp-block-group {
  background: var(--wy-papier);
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon-s);
  padding: 1.7rem 1.7rem 1.8rem;
  margin: 0;
}
.wy-bento > *:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 781px) {
  .wy-bento { grid-template-columns: 1fr; }
  .wy-bento > *:first-child { grid-column: auto; grid-row: auto; }
}

/* Avis avec portrait : la photo ronde à gauche, la phrase à droite. Un visage
   fait plus pour la crédibilité d'un témoignage que trois lignes de plus. */
.wy-portrait { gap: 1.6rem; align-items: flex-start; }
.wy-portrait__photo { margin: 0; }
.wy-portrait__photo img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 50%;
}
.wy-portrait__phrase {
  font-size: var(--wy-t-1);
  line-height: 1.5;
  color: var(--wy-encre);
  margin-bottom: .6rem;
}

/* Badges : labels, certifications, adhésions. En ligne, discrets, encadrés. */
.wy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: var(--wy-r-2);
}
.wy-badges p {
  margin: 0;
  padding: .5rem 1rem;
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon-pilule);
  background: var(--wy-papier);
  font-size: var(--wy-t--1);
  color: var(--wy-sourd);
}

/* Encadré de remarque : une précision qu'on ne veut pas noyer dans le texte. */
.wy-note {
  border-left: 3px solid var(--wy-vert);
  background: var(--wy-teinte);
  border-radius: 0 var(--wy-rayon-p) var(--wy-rayon-p) 0;
  padding: 1.2rem 1.5rem;
  margin-block: var(--wy-r-2);
}
.wy-note p { margin: 0; font-size: var(--wy-t-0); }
.wy-note strong { color: var(--wy-encre); }

/* Sommaire d'ancres : sur une page longue, il évite le défilement à l'aveugle
   et donne à Google la structure de la page. */
.wy-sommaire {
  background: var(--wy-teinte);
  border-radius: var(--wy-rayon-s);
  padding: 1.4rem 1.7rem;
}
.wy-sommaire ul { margin: 0; padding-left: 1.1rem; }
.wy-sommaire li { margin-bottom: .35rem; font-size: var(--wy-t--1); }

/* Liste numérotée à gros chiffres : pour des engagements ou des règles, quand
   l'ordre compte et qu'on veut que chaque ligne se retienne. */
.wy-numerotee { counter-reset: wy-n; list-style: none; padding: 0; margin: var(--wy-r-2) 0 0; }
.wy-numerotee li {
  counter-increment: wy-n;
  position: relative;
  padding-left: 3.1rem;
  margin-bottom: 1.1rem;
  font-size: var(--wy-t-0);
  line-height: 1.6;
  color: var(--wy-sourd);
}
.wy-numerotee li::before {
  content: counter(wy-n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -.1em;
  font-size: var(--wy-t-1);
  font-weight: var(--wy-graisse-titre);
  color: var(--wy-vert);
  font-variant-numeric: tabular-nums;
}

/* Offre unique : une seule formule, présentée large plutôt qu'en carte
   étroite. Trois cartes quand on ne vend qu'une chose sonne faux. */
.wy-offre-unique {
  background: var(--wy-papier);
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon);
  padding: 2.2rem 2.3rem;
}
.wy-offre-unique .wy-tarif__prix { margin-bottom: .2rem; }

/* Bandeau d'urgence : le numéro de téléphone, en grand, sur fond sombre. Pour
   un métier où l'on appelle plutôt qu'on n'écrit. */
.wy-urgence {
  background: var(--wy-nuit);
  color: var(--wy-clair);
  padding-block: var(--wy-r-4);
  padding-inline: 1.5rem;
}
.wy-urgence h2, .wy-urgence h3 { color: var(--wy-papier); margin-bottom: .4rem; }
.wy-urgence p { color: var(--wy-clair); }
.wy-urgence__numero {
  font-size: var(--wy-t-4);
  font-weight: var(--wy-graisse-titre);
  color: var(--wy-papier);
  letter-spacing: .02em;
  margin: .2rem 0 0;
}

/* Promotion datée : l'offre et sa date de fin, côte à côte. Sans date, une
   promotion permanente ne fait plus agir personne. */
.wy-promo {
  background: var(--wy-vert);
  color: #fff;
  border-radius: var(--wy-rayon-s);
  padding: 1.5rem 1.8rem;
}
.wy-promo h2, .wy-promo h3, .wy-promo p { color: #fff; }
.wy-promo__fin { font-size: var(--wy-t--1); opacity: .85; margin: .3rem 0 0; }

/* Formulaire de côté : le texte à gauche, le formulaire dans une carte à
   droite. La disposition qui convertit le mieux sur une page de contact. */
.wy-formulaire-cote { gap: 3rem; align-items: flex-start; }
.wy-formulaire-cote__carte {
  background: var(--wy-papier);
  border: 1px solid var(--wy-trait);
  border-radius: var(--wy-rayon);
  padding: 1.9rem 1.9rem 2rem;
}

/* Fiche de détail : une caractéristique par ligne, en deux colonnes, comme
   une fiche technique. */
.wy-detail { margin-top: var(--wy-r-2); }
.wy-detail p {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .75rem 0;
  margin: 0;
  border-bottom: 1px solid var(--wy-trait);
  font-size: var(--wy-t--1);
  color: var(--wy-sourd);
}
.wy-detail p strong { color: var(--wy-encre); font-weight: 600; }


/* ==================================================================
   Composants des variantes (1.15)
   ================================================================== */

/* Frise verticale : la même méthode qu'en colonnes, mais lisible sur téléphone
   sans réduire le texte. Sur une page longue, elle se parcourt mieux. */
.wy-frise-v { position: relative; margin-top: var(--wy-r-3); padding-left: 2.6rem; }
.wy-frise-v::before {
  content: "";
  position: absolute;
  left: .62rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: var(--wy-trait);
}
.wy-frise-v > .wp-block-group { position: relative; margin: 0 0 1.9rem; }
.wy-frise-v > .wp-block-group::before {
  content: "";
  position: absolute;
  left: -2.28rem;
  top: .45rem;
  width: .82rem;
  height: .82rem;
  border-radius: 50%;
  background: var(--wy-vert);
  box-shadow: 0 0 0 4px var(--wy-papier);
}
.wy-frise-v .wy-etape__numero { color: var(--wy-vert); margin-bottom: .1rem; }

/* Bande d'images pleine largeur : six vignettes qui se touchent presque, pour
   un aperçu rapide sans ouvrir une galerie. */
.wy-bande-images {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .6rem;
  margin-top: var(--wy-r-3);
  max-width: none !important;
}
.wy-bande-images .wp-block-image { margin: 0; }
.wy-bande-images img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--wy-rayon-p);
}
@media (max-width: 781px) { .wy-bande-images { grid-template-columns: repeat(3, 1fr); } }

/* Bandeau de chiffres sur fond sombre : la variante à poser entre deux
   sections claires, quand les chiffres doivent arrêter le défilement. */
.wy-chiffres-sombre {
  background: var(--wy-nuit);
  color: var(--wy-clair);
  padding-block: var(--wy-r-4);
  padding-inline: 1.5rem;
}
.wy-chiffres-sombre .wy-preuve__valeur { color: var(--wy-papier); }
.wy-chiffres-sombre .wy-preuve__libelle { color: var(--wy-clair); }
.wy-chiffres-sombre .wy-titre-section { color: var(--wy-papier); }

/* Portraits en grille : six personnes, format carré, sans le texte long de la
   variante à trois. Pour une équipe qu'on veut montrer en entier. */
.wy-equipe-grille {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
  margin-top: var(--wy-r-3);
  max-width: none !important;
}
.wy-equipe-grille .wp-block-group { margin: 0; text-align: center; }
.wy-equipe-grille .wp-block-image { margin: 0 0 .6rem; }
.wy-equipe-grille img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--wy-rayon-p);
}
.wy-equipe-grille .wy-membre__nom { font-size: var(--wy-t--1); margin: 0; }
.wy-equipe-grille .wy-membre__role { font-size: var(--wy-t--2); margin: 0; }
@media (max-width: 900px) { .wy-equipe-grille { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .wy-equipe-grille { grid-template-columns: repeat(2, 1fr); } }

/* Note globale : le chiffre d'abord, la provenance ensuite. Une note sans
   source ne vaut rien, et se retourne contre celui qui l'affiche. */
.wy-note-globale { text-align: center; }
.wy-note-globale__valeur {
  font-size: var(--wy-t-5);
  font-weight: var(--wy-graisse-titre);
  color: var(--wy-encre);
  line-height: 1;
  margin: 0;
}
.wy-note-globale__source { font-size: var(--wy-t--1); color: var(--wy-sourd); margin: .4rem 0 0; }

/* Deux images à comparer, côte à côte, avec leur légende. */
.wy-comparaison { gap: 1.4rem; }
.wy-comparaison .wp-block-image { margin: 0 0 .5rem; }
.wy-comparaison img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--wy-rayon-s);
}
.wy-comparaison .wy-membre__role { margin: 0; }

/* Un tableau ne se comprime pas : à quatre colonnes sur un téléphone, soit il
   déborde de l'écran, soit ses libellés se coupent lettre par lettre. On le
   fait défiler horizontalement dans son cadre, ce qui laisse la page droite. */
.wy-section .wp-block-table,
.wy-bande .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wy-section .wp-block-table table,
.wy-bande .wp-block-table table { min-width: 34rem; }