/*
Theme Name: InaberInfo Blocs
Theme URI: https://www.inaberinfo.com/
Author: InaberInfo
Author URI: https://www.inaberinfo.com/
Description: Thème bloc pour InaberInfo. Système typographique à fort contraste (Archivo 800 + Instrument Serif italique), une seule couleur de marque déclinée, et l'empilement de cartes au défilement en CSS pur. Deux variations de style : Orange et Vert profond.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inaberinfo-blocs
Tags: block-theme, full-site-editing, business, one-column
*/

/* =========================================================
   InaberInfo Blocs — feuille de style du thème
   Tout le reste (couleurs, tailles, espacements) est dans
   theme.json. Ce fichier ne contient que ce que Gutenberg
   ne sait pas déclarer : les comportements.
   ========================================================= */

:root {
  --ii-header-h: 4.5rem;
  --ii-stack-top: calc(var(--ii-header-h) + 1.25rem);
  --ii-stack-top-mobile: 5rem;
  --ii-radius: 14px;
  --ii-ease: cubic-bezier(0, 0, .2, 1);
}

/* ---------------------------------------------------------
   1. LE MOT D'ACCENT
   Un seul mot par titre bascule en serif italique.
   Usage : sélectionner le mot dans l'éditeur → Bloc → Avancé
   → classe CSS additionnelle : ii-accent
   (ou <span class="ii-accent">mot</span> en mode HTML)
   --------------------------------------------------------- */
.ii-accent {
  font-family: var(--wp--preset--font-family--serif-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;      /* Instrument Serif a un œil plus petit qu'Archivo */
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--brand-dark);
}
.ii-accent--ink { color: inherit; }
/* Sur fond sombre, brand-dark est trop foncé pour se détacher : on passe à
   l'orange plein, qui donne 6,7 pour 1 sur l'encre — largement au-dessus du
   seuil. C'est le seul cas où « brand » porte du texte. */
.ii-accent--clair { color: var(--wp--preset--color--brand); }

/* Surtitre : petite capitale espacée au-dessus d'un H2 */
.ii-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-dark);
  margin-block-end: 0.75rem;
}

/* ---------------------------------------------------------
   2. LA PILE DE CARTES AU DÉFILEMENT
   La signature. Aucun JavaScript.
   Structure : Groupe .ii-stack (mise en page « flux »)
                 > Groupe .ii-card  ×4
                     > Groupe .ii-card__body
                     > Groupe .ii-card__aside
   ATTENTION 1 : aucun ancêtre de .ii-stack ne doit avoir
   overflow:hidden ni une hauteur fixe, sinon le sticky meurt.
   ATTENTION 2 : les cartes ne doivent PAS partager le même « top ».
   Si elles se collent toutes à la même hauteur, chacune recouvre la
   précédente au pixel près : l'empilement fonctionne mais reste
   invisible, on croit voir une seule carte dont le contenu change.
   C'est le décalage progressif ci-dessous qui rend la pile lisible.
   --------------------------------------------------------- */
.ii-stack {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.ii-stack > .ii-card {
  position: sticky;
  top: var(--ii-stack-top);
  margin-block-start: 0 !important;   /* neutralise is-layout-flow */
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 26rem;
  border-radius: var(--ii-radius);
  overflow: hidden;
  box-shadow: var(--wp--preset--shadow--pile);
}

/* L'ÉVENTAIL.
   Deux décalages combinés, et c'est la combinaison qui fait l'effet :
   — vertical : chaque carte se cale 18 px plus bas que la précédente ;
   — horizontal : chaque carte derrière est plus étroite de 1 rem par niveau.
   Résultat, les cartes déjà empilées dépassent en haut comme les tranches
   d'un jeu de cartes étalé. Avec le seul décalage vertical, on ne voyait
   qu'un liseré ; avec les deux, on lit une pile. */
.ii-stack > .ii-card:nth-child(1) { top: calc(var(--ii-stack-top) + 0px);  margin-inline: 3rem; }
.ii-stack > .ii-card:nth-child(2) { top: calc(var(--ii-stack-top) + 18px); margin-inline: 2rem; }
.ii-stack > .ii-card:nth-child(3) { top: calc(var(--ii-stack-top) + 36px); margin-inline: 1rem; }
.ii-stack > .ii-card:nth-child(4) { top: calc(var(--ii-stack-top) + 54px); margin-inline: 0; }
.ii-stack > .ii-card:nth-child(5) { top: calc(var(--ii-stack-top) + 72px); margin-inline: 0; }

/* les enfants directs de la carte ne doivent pas hériter du rythme vertical */
.ii-card > * { margin-block-start: 0 !important; }

/* theme.json force la couleur de TOUS les titres à l'encre sombre. Sur les
   cartes à fond foncé le titre devient illisible : ici il reprend la couleur
   de texte de la carte, quelle qu'elle soit. Même chose pour le bouton
   contour, dont le trait et le libellé doivent suivre le fond. */
.ii-card :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
.ii-card .wp-block-button.is-style-outline .wp-block-button__link {
  color: inherit;
  border-color: currentColor;
}

/* Le panneau de texte : titre en haut, description et action en bas, et du
   vide entre les deux. C'est ce vide qui donne son calme à la carte — le
   titre porte la promesse, le bas porte l'action, rien ne se dispute le
   milieu. */
.ii-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.ii-card__body > * { margin-block-start: 0 !important; }
.ii-card__body p { max-width: 34ch; }
.ii-card__bas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.ii-card__bas > * { margin-block-start: 0 !important; }

/* La colonne de droite porte maintenant la photo de la prestation, et le
   chiffre se pose par-dessus. La photo est décorative — le texte de la carte
   dit déjà tout — d'où l'aria-hidden dans la composition et l'absence de
   texte alternatif à lire deux fois. */
/* La colonne de droite est entièrement la photo, à fleur de carte, sans
   marge ni filet — comme sur le modèle. */
.ii-card__aside {
  position: relative;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
}
.ii-card__aside > * { margin-block-start: 0 !important; }

.ii-card__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ii-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le chiffre et sa note, posés en cartouche sur la photo. Le fond opaque
   n'est pas décoratif : il garantit le contraste quelle que soit la photo,
   claire ou sombre — sans lui, la lisibilité dépendrait du hasard. */
.ii-card__chiffres {
  position: absolute;
  z-index: 1;
  left: 1.25rem;
  bottom: 1.25rem;
  right: 1.25rem;
  max-width: 20rem;
  background: rgba(27, 23, 20, .82);
  color: #fff;
  border-radius: 10px;
  padding: 0.7rem 0.95rem;
}
.ii-card__chiffres > * { margin-block-start: 0 !important; }
.ii-card__chiffres .ii-card__stat {
  font-size: 1.45rem;
  line-height: 1.05;
  margin-bottom: 0.2rem;
}
.ii-card__chiffres .ii-card__note {
  font-size: 0.8125rem;
  opacity: 0.9;
  max-width: none;
}

/* Le chiffre de la carte doit rester sur une seule ligne : c'est un repère,
   pas une phrase. Garder des libellés courts (« 24–48 h », « Mensuel »). */
.ii-card__stat {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 100%;
}
.ii-card__note {
  font-size: 0.875rem;
  line-height: 1.4;
  opacity: 0.82;
  max-width: 24ch;
}

/* Sous 782 px la carte passe sur une seule colonne — le chiffre sous le texte
   plutôt qu'à côté — mais l'empilement reste actif : mesuré sur un écran de
   390 px, les cartes font 414 à 471 px de haut, largement moins que la fenêtre,
   donc il reste de la place pour voir la pile se former.
   Le calage est plus serré qu'en grand écran : 5 rem du haut et 8 px de
   décalage par carte, sinon la pile mange tout l'écran. */
@media (max-width: 781px) {
  .ii-stack > .ii-card {
    grid-template-columns: 1fr;
    min-height: 0;
    top: var(--ii-stack-top-mobile);
    /* l'éventail horizontal disparaît : sur 390 px de large, retirer
       3 rem sur les côtés étranglerait la première carte. */
    margin-inline: 0;
  }
  .ii-stack > .ii-card:nth-child(2) { top: calc(var(--ii-stack-top-mobile) + 8px); }
  .ii-stack > .ii-card:nth-child(3) { top: calc(var(--ii-stack-top-mobile) + 16px); }
  .ii-stack > .ii-card:nth-child(4) { top: calc(var(--ii-stack-top-mobile) + 24px); }
  .ii-stack > .ii-card:nth-child(5) { top: calc(var(--ii-stack-top-mobile) + 32px); }
  /* la photo devient une bande sous le texte : sans hauteur imposée, une
     colonne dont le seul contenu est en position absolue s'écraserait à zéro. */
  .ii-card__aside { min-height: 13rem; }
  .ii-card__body { gap: 1.5rem; }
}

/* ---------------------------------------------------------
   2 bis. LE HÉROS EN DEUX COLONNES
   Composition HelloAsso (titre à gauche, image découpée à
   droite) sur le fond sombre d'InaberInfo.
   --------------------------------------------------------- */
.ii-hero {
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4rem);
}
.ii-hero > * { margin-block-start: 0 !important; }

/* Le rythme vertical de la colonne de texte.
   Piège dans lequel je suis tombé : un « margin-block-start: 0 !important »
   posé sur tous les enfants pour neutraliser Gutenberg écrase aussi les
   marges qu'on veut ensuite. D'où le !important sur les deux règles, et
   l'ordre qui compte. */
.ii-hero__texte > * { margin-block-start: 0 !important; }
.ii-hero__texte > * + * { margin-block-start: var(--wp--preset--spacing--40) !important; }
.ii-hero__texte > .ii-badge + * { margin-block-start: 1rem !important; }
.ii-hero__texte > h1 + * { margin-block-start: 1.5rem !important; }

/* Le titre casse en trois lignes, pas quatre : au-delà, l'empilement de
   lignes très grasses devient un mur et le mot d'accent se perd. */
.ii-hero__texte h1 { max-width: 15ch; }

/* La pastille orange, reprise du site actuel : c'est le seul endroit où
   la couleur de marque pleine porte du texte, et elle le porte en blanc. */
.ii-badge {
  display: inline-block;
  background: var(--wp--preset--color--brand-dark);
  color: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* La photo, dans une forme organique.
   Le découpage passe par un border-radius asymétrique et non par un
   clip-path SVG : le clip-path référencé se révèle fragile — chez nous il
   masquait l'image entière sans le moindre message d'erreur — alors que le
   border-radius est résolu par le moteur de rendu, s'adapte à toute taille
   et se laisse animer.
   --ii-galet est déclaré une seule fois : la photo et son liseré doivent
   partager exactement la même courbe. */
.ii-hero__media {
  --ii-galet: 58% 42% 52% 48% / 50% 56% 44% 50%;
  position: relative;
  padding: 6px;                 /* l'épaisseur du liseré */
  isolation: isolate;
}
/* Le cercle profond qui dépasse derrière : donne la profondeur. */
.ii-hero__media::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -4% -10% auto auto;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-deep);
  opacity: 0.4;
}
/* Le liseré chaud. Sans lui, une photo sombre sur un fond sombre se fond
   dans la page et la colonne de droite paraît vide. */
.ii-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--ii-galet);
  background: linear-gradient(150deg, var(--wp--preset--color--brand) 0%, transparent 55%);
  opacity: 0.9;
}
.ii-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 62% 50%;     /* garde l'établi et le matériel dans le cadre */
  border-radius: var(--ii-galet);
  /* les photos d'atelier sont prises en lumière basse : sans reprise, elles
     disparaissent sur le fond encre. */
  filter: brightness(1.28) contrast(1.06) saturate(1.05);
}

/* Sous 900 px la photo passe sous le texte et s'aplatit :
   un format portrait sur un téléphone occuperait tout l'écran. */
@media (max-width: 900px) {
  .ii-hero { grid-template-columns: 1fr; }
  .ii-hero__media { order: 2; }
  .ii-hero__media img { aspect-ratio: 3 / 2; }
  /* Le cercle décoratif débordait de 14 px à droite et provoquait un
     défilement horizontal sur téléphone. En grand écran il reste dans la
     marge du conteneur ; ici il n'y a plus de marge, donc il rentre. */
  .ii-hero__media::before { width: 38%; inset: -4% 0 auto auto; }
  .ii-hero__texte h1 { max-width: none; }
}

/* ---------------------------------------------------------
   3. L'EN-TÊTE QUI S'EFFACE
   Collant, disparaît quand on descend, revient quand on remonte.
   La classe est posée sur <html> par assets/js/entete.js
   --------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wp--preset--color--surface);
  box-shadow: var(--wp--preset--shadow--entete);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.ii-entete-cachee .wp-site-blocks > header.wp-block-template-part {
  transform: translateY(-100%);
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}

/* Le logo. La version carrée du site actuel, calée sur la hauteur d'en-tête. */
.ii-logo { display: inline-flex; line-height: 0; }
.ii-logo img,
.wp-block-site-logo img {
  height: 3rem;
  width: auto;
}
@media (max-width: 781px) {
  .ii-logo img,
  .wp-block-site-logo img { height: 2.5rem; }
}

/* ---------------------------------------------------------
   3 bis. LE MENU MOBILE
   Le panneau plein écran de l'ancien site : le même dégradé
   (bleu nuit → ardoise → brun de marque), les liens en
   capitales blanches séparés par un filet, et les intitulés
   de groupe dans la couleur de marque.
   --------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
  background: linear-gradient(160deg,
    var(--wp--preset--color--ink) 0%,
    #1f2937 55%,
    var(--wp--preset--color--brand-deep) 100%) !important;
  color: #fff;
  padding: 1.25rem clamp(1.25rem, 5vw, 2rem) 2.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7rem 0;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
  border-bottom: 0;
}
/* Les sous-menus sont REPLIÉS et s'ouvrent au clic.
   Sans ça, WordPress déroule tout dans le panneau mobile : vingt-trois
   entrées à plat, où « Accueil » et « Suppression de virus » ont le même
   poids. Trois catégories restent seules visibles et se déplient au toucher.

   L'état est porté par la classe .ii-ouvert, posée par assets/js/menu-mobile.js
   et PAS par l'attribut aria-expanded du cœur : dans le panneau mobile,
   WordPress maintient aria-expanded à true en permanence, il n'est donc
   utilisable ni comme condition ni comme sélecteur. Voir l'en-tête du script. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
  flex: 0 0 100%;
  display: none;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child.ii-ouvert > .wp-block-navigation__submenu-container {
  display: block;
}

/* Le chevron. Le cœur le masque dans le panneau mobile — d'où le !important,
   qui n'est pas une facilité : sa règle est plus spécifique que la nôtre. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-icon {
  display: inline-flex !important;
  align-items: center;
  margin-left: 0.6rem;
  transition: transform .25s var(--ii-ease);
}
.wp-block-navigation__responsive-container.is-menu-open
  .has-child.ii-ouvert > .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu__toggle {
  width: auto !important;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

/* les entrées de sous-menu : plus petites, décalées, sans filet */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.82;
  padding: 0.45rem 0 0.45rem 1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent !important;
  border: 0 !important;
  color: #fff;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: #fff;
}
/* le bouton téléphone reste visible et lisible dans le panneau */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link {
  background: var(--wp--preset--color--brand-dark);
  color: #fff;
}
/* le logo repris en haut du panneau */
.ii-menu-logo { margin-bottom: 0.5rem; }
.ii-menu-logo img { height: 2.75rem; width: auto; }

/* ---------------------------------------------------------
   4. LES TUILES DE CONTENU
   Rayon 14, survol qui soulève de 4 px, lien étiré.
   --------------------------------------------------------- */
.ii-tile {
  position: relative;
  border-radius: var(--ii-radius);
  overflow: hidden;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  transition: transform .25s var(--ii-ease), box-shadow .25s ease;
}
.ii-tile:hover,
.ii-tile:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--wp--preset--shadow--carte);
}
/* lien étiré : la tuile entière devient cliquable */
.ii-tile .ii-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ii-tile .ii-tile__link {
  text-decoration: none;
  color: inherit;          /* le titre reste à l'encre : l'orange est réservé aux vrais liens */
}
.ii-tile:hover .ii-tile__link { color: var(--wp--preset--color--brand-dark); }

/* Les tuiles à photo.
   Onze photos venues d'origines différentes forment vite un patchwork. Elles
   reçoivent donc toutes le même traitement : cadrage 16/10 identique, légère
   désaturation et un souffle de chaud, pour qu'elles se répondent au lieu de
   se contredire. Au survol la photo se réchauffe et avance très légèrement. */
.ii-tile--photo { display: flex; flex-direction: column; }
.ii-tile__photo {
  overflow: hidden;
  background: var(--wp--preset--color--brand-wash);
}
.ii-tile__photo img,
.ii-tile > figure img {
  display: block;
  width: 100%;
  /* height:auto est INDISPENSABLE, ce n'est pas une précaution de style.
     WordPress écrit les attributs width et height sur chaque image ; les
     deux dimensions sont alors définies et « aspect-ratio » est purement et
     simplement ignoré. Résultat sans cette ligne : chaque vignette garde la
     hauteur de son fichier d'origine, les tuiles vont du simple au double et
     la grille part en escalier. */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04) sepia(0.08);
  transition: transform .45s var(--ii-ease), filter .35s ease;
}
.ii-tile--photo:hover .ii-tile__photo img,
.ii-tile--photo:focus-within .ii-tile__photo img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.04) sepia(0.02);
}
.ii-tile__corps {
  padding: var(--wp--preset--spacing--30);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ii-tile__corps > * { margin-block-start: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .ii-tile--photo:hover .ii-tile__photo img { transform: none; }
}

/* ---------------------------------------------------------
   5. LA BANDE DE PREUVE
   Des chiffres, pas des photos. Chiffres alignés en colonne.
   --------------------------------------------------------- */
/* Quatre faits, quatre colonnes égales, séparées par un filet.
   Le bloc « colonnes » de Gutenberg est en flex avec des bases variables :
   les colonnes prenaient des largeurs différentes et les libellés, longs
   d'une à trois lignes, laissaient un bas en escalier. Une grille de quatre
   parts égales et des libellés courts règlent les deux d'un coup. Le filet
   n'est pas décoratif : sans lui, les chiffres flottent dans le vide et la
   bande ne se lit plus comme un tableau de bord. */
.ii-preuve { font-variant-numeric: tabular-nums; }
.ii-preuve .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
}
.ii-preuve .wp-block-column {
  flex-basis: auto;
  padding: 0 clamp(1rem, 2.5vw, 2.25rem);
  border-left: 1px solid var(--wp--preset--color--line);
}
.ii-preuve .wp-block-column:first-child {
  border-left: 0;
  padding-left: 0;
}
.ii-preuve .ii-preuve__chiffre {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  margin-block-end: 0.45rem;
}
.ii-preuve .ii-preuve__label {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--wp--preset--color--ink-soft);
  max-width: 20ch;
  margin: 0;
}

/* Sur téléphone, quatre colonnes deviennent illisibles : deux par deux. */
@media (max-width: 781px) {
  .ii-preuve .wp-block-columns {
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
  }
  .ii-preuve .wp-block-column { padding-inline: 1rem; }
  .ii-preuve .wp-block-column:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
}

/* ---------------------------------------------------------
   6. FAQ (bloc Détails natif de Gutenberg)
   --------------------------------------------------------- */
.wp-block-details {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  background: var(--wp--preset--color--surface);
  padding: 0;
  margin-block-start: 0.5rem !important;
}
.wp-block-details summary {
  padding: 1rem 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: var(--wp--preset--color--brand-dark);
}
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details > *:not(summary) {
  padding: 0 1.25rem 1.15rem;
  margin-block-start: 0 !important;
  font-size: var(--wp--preset--font-size--petit);
  color: var(--wp--preset--color--ink-soft);
}

/* ---------------------------------------------------------
   7. DIVERS
   --------------------------------------------------------- */
.ii-mesure { max-width: 66ch; }
.ii-filet { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin: 0; }

/* liste à puces personnalisée pour les listes de prestations */
.ii-liste { list-style: none; padding-left: 0; }
.ii-liste li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-size: var(--wp--preset--font-size--petit);
}
.ii-liste li:last-child { border-bottom: 0; }
.ii-liste li::before {
  content: "›";
  color: var(--wp--preset--color--brand-dark);
  font-weight: 700;
  margin-right: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ii-entete-cachee .wp-site-blocks > header.wp-block-template-part { transform: none; }
}

/* ------------------------------------------------------------
   BOUTON « HAUT DE PAGE »
   Le marqueur .ii-haut-visible est posé sur <html> par entete.js
   au-delà de 600 px de défilement. Tant qu'il n'est pas là, le
   bouton est transparent ET inerte : pointer-events plutôt que
   visibility, pour qu'aucun clic ne se perde dessus en haut de
   page, et pour qu'il sorte de l'ordre de tabulation.
   ------------------------------------------------------------ */
.ii-haut {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 80;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-dark);
  box-shadow: 0 6px 20px rgba(27, 23, 20, 0.22);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.15s ease;
}
.ii-haut-visible .ii-haut {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* La flèche : deux bords tournés à 45°, pas un caractère.
   Le décalage de 2 px recentre optiquement le chevron, qui sans lui
   paraît trop bas dans le cercle. */
.ii-haut::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg) translate(1px, 1px);
}
.ii-haut:hover { background: var(--wp--preset--color--brand-deep); }
.ii-haut:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 3px;
}

/* Le libellé existe vraiment : masqué à l'œil, lu par les lecteurs
   d'écran. Un aria-label aurait suffi, mais un texte réel survit à
   une traduction automatique et à un navigateur en mode lecture. */
.ii-haut__texte {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le défilement doux vaut aussi pour les ancres internes des pages
   de service (« voir ce que je répare », « suis-je infecté »).
   Il est désactivé plus bas dans le bloc prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (max-width: 600px) {
  .ii-haut {
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    width: 2.7rem;
    height: 2.7rem;
  }
}