/*
 * Gutenberg bridge for the established Studio Proches storefront.
 * The visual components themselves live in assets/editor/studio-proches.css;
 * this file only maps Gutenberg's generated markup to that design system.
 */

/* `clip` rogne comme `hidden` sans faire du contenu une zone de défilement :
   avec `hidden`, aucun élément `position: sticky` ne tenait (récapitulatif de
   la carte cadeau). `hidden` reste pour les navigateurs qui ignorent `clip`. */
.aics-marketing-content { overflow: hidden; overflow: clip; }
.aics-marketing-content > .aics-language-switcher { display: none; }

/* Seeded buttons are regular core Button blocks. Keep their content fully
 * editable while applying the same control geometry as the React storefront. */
.aics-marketing-content a.aics-button {
  display: inline-flex;
  width: auto;
  min-height: 46px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 0 22px;
  font-family: var(--sp-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.aics-marketing-content a.aics-button--primary { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.aics-marketing-content a.aics-button--primary:hover { border-color: var(--color-accent-600); background: var(--color-accent-600); color: #fff; }

/* Sur les bandeaux violets (appel final de l'accueil, encadré des pages
 * d'information), le bouton principal passe en crème : du corail sur ce violet
 * manque de contraste. Ces deux règles écrivaient `color: #fff !important`, qui
 * écrasait la variante : le libellé était blanc sur fond crème, invisible. */
.aics-marketing-content .sp-cta-final a.aics-button--primary,
.aics-marketing-content .sp-help-cta a.aics-button--primary { border-color: var(--color-bg); background: var(--color-bg); color: var(--color-text); }
.aics-marketing-content .sp-cta-final a.aics-button--primary:hover,
.aics-marketing-content .sp-help-cta a.aics-button--primary:hover { border-color: var(--c-amber); background: var(--c-amber); color: var(--color-text); }

/* Un bloc « Boutons » est UNE rangée, et c'est son CONTENEUR qui la porte —
 * même géométrie que `.sp-hero__actions` dans la vitrine React : flex, écart de
 * 12 px, retour à la ligne si la place manque.
 *
 * Les liens étaient enregistrés sans leur enveloppe Gutenberg. WordPress greffait
 * alors la mise en page du groupe sur le premier lien seul : il devenait un bloc
 * pleine ligne, et le second passait dessous, décalé des 8 px d'une marge
 * prévue pour se tenir à côté. L'écart vient désormais du conteneur, jamais d'une
 * marge entre liens voisins. */
.aics-marketing-content .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.aics-marketing-content .wp-block-button { margin: 0; }

/* Homepage hero: restore the original text roles without freezing them in the
 * block implementation. The first and second paragraphs remain normal editable
 * paragraph blocks in Gutenberg. */
/* Sur une page d'atterrissage, le fil d'Ariane précède le surtitre : ce n'est
 * plus le premier enfant, d'où le second sélecteur. */
.sp-hero__copy > p:first-child,
.sp-hero__copy > .aics-landing-breadcrumb + p {
  width: fit-content;
  margin: 0 0 26px;
  background: var(--color-bg);
  padding: 8px 16px;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sp-hero__copy > p:nth-of-type(2),
.sp-hero__copy > h1 + p {
  max-width: 56ch;
  margin: 0 0 32px;
  color: var(--c-violet-soft);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
}
.sp-hero__copy > h1 { margin: 0 0 24px; }
/* Hero « bento » (attribut `layout` du bloc, render.php) : sur la crème, le
 * texte, la photo de l'enfant détourée sur l'aplat ambre, et ses rôles dans le
 * livre, chacun dans sa tuile. Les tuiles ne se règlent que par les zones de la
 * grille : une image de rôle est en position absolue, sinon sa hauteur propre
 * agrandissait les rangées et la bannière dépassait l'écran.
 *
 * Trois grilles : 2 colonnes sur téléphone, 3 sur tablette, 12 au-delà de
 * 1 200 px. Entre 1 024 et 1 200 px, la colonne de texte à 5/12 était trop
 * étroite pour le titre : il passait sur six lignes et débordait de sa zone. */
.sp-hero.sp-hero--bento {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "copy copy" "photo photo" "r1 r2" "r3 r4" "promises promises";
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  padding: 24px var(--sp-gutter) 40px;
  background: var(--color-bg);
  color: var(--color-text);
}
.sp-hero--bento .sp-hero__copy { grid-area: copy; align-self: center; padding: 0 0 12px; }
.sp-hero--bento .sp-hero__copy > p:first-child,
.sp-hero--bento .sp-hero__copy > .aics-landing-breadcrumb + p {
  margin-bottom: 20px;
  border: 1px solid var(--color-divider);
  background: transparent;
  padding: 7px 12px;
}
.sp-hero.sp-hero--bento h1 { margin: 0 0 20px; color: var(--color-text); font-size: clamp(36px, 6.4vw, 56px); line-height: .96; letter-spacing: -.035em; }
.sp-hero--bento .sp-hero__copy > p:nth-of-type(2),
.sp-hero--bento .sp-hero__copy > h1 + p { max-width: 46ch; margin-bottom: 28px; color: var(--color-neutral-700); font-size: 17px; }
.aics-marketing-view-home .sp-hero--bento .aics-button--primary,
.sp-hero--bento .aics-button--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg); }
.aics-marketing-view-home .sp-hero--bento .aics-button--primary:hover,
.sp-hero--bento .aics-button--primary:hover { border-color: var(--color-accent-700); background: var(--color-accent-700); color: var(--color-bg); }
.sp-hero--bento .aics-button:not(.aics-button--primary) { border-color: transparent; background: var(--color-neutral-200); color: var(--color-text); }
.sp-hero--bento .aics-button:not(.aics-button--primary):hover { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.editor-styles-wrapper .sp-hero--bento .wp-block-button:not(:first-child) .wp-block-button__link { border-color: transparent; background: var(--color-neutral-200); color: var(--color-text); }

.sp-hero--bento .sp-hero__photo { position: relative; grid-area: photo; min-width: 0; min-height: 420px; overflow: hidden; background: var(--c-amber); }
.sp-hero__photo-text { position: absolute; z-index: 2; top: 20px; right: 20px; left: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
.sp-hero__photo-label { padding: 6px 10px; background: var(--color-text); color: var(--color-bg); font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
.sp-hero__photo-caption { max-width: 12ch; color: var(--color-text); font-family: var(--sp-font-heading); font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.02; }
.sp-hero__sparkle { position: absolute; z-index: 1; top: 28%; right: 8%; width: clamp(36px, 4.4vw, 64px); height: auto; fill: var(--color-bg); }
/* L'enfant est posé en bas, un peu plus large que la tuile (comme sur la
 * maquette), mais `contain` dans 82 % de la hauteur : sur une tuile basse il
 * rapetisse au lieu de cacher la phrase. Sur téléphone, la tuile est aussi
 * large que l'écran et l'image, limitée par sa hauteur, montait jusque sous la
 * phrase : 72 % seulement. */
.sp-hero__photo-image { position: absolute; bottom: 0; left: 50%; width: 112%; max-width: none; height: 72%; object-fit: contain; object-position: 50% 100%; transform: translateX(-50%); }

/* Photo du quotidien en situation : le format portrait remplit sa tuile.
 * La classe du bloc garde le cadrage détouré des autres bannières. */
.sp-hero--bento.has-story-photo .sp-hero__photo-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none;
}

.sp-hero--bento .sp-hero__role { position: relative; min-width: 0; min-height: 0; aspect-ratio: 1; margin: 0; overflow: hidden; background: var(--c-violet-soft); }
.sp-hero__role--1 { grid-area: r1; background: var(--color-accent-900); }
.sp-hero__role--2 { grid-area: r2; }
.sp-hero__role--3 { grid-area: r3; background: var(--c-amber-soft); }
.sp-hero__role--4 { grid-area: r4; background: var(--c-teal-soft); }
.sp-hero__role-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-hero__role figcaption { position: absolute; z-index: 1; bottom: 0; left: 0; padding: 7px 10px; background: var(--color-bg); color: var(--color-text); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }

.sp-hero--bento .sp-hero__promises { display: flex; grid-area: promises; flex-direction: column; justify-content: center; gap: 12px; margin: 0; padding: 20px 22px; background: var(--c-teal); color: var(--color-bg); list-style: none; }
.sp-hero__promises li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; line-height: 1.25; }
.sp-hero__promises svg { flex: none; width: 18px; height: 18px; color: var(--c-amber-soft); }

@media (min-width: 760px) {
  .sp-hero.sp-hero--bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto repeat(3, clamp(180px, 22vw, 260px));
    grid-template-areas: "copy copy copy" "photo r1 r1" "photo r2 r3" "r4 promises promises";
    gap: 16px;
    padding: 40px var(--sp-gutter) 48px;
  }
  .sp-hero--bento .sp-hero__copy { padding-bottom: 16px; }
  .sp-hero.sp-hero--bento h1 { max-width: 16ch; }
  .sp-hero--bento .sp-hero__photo { min-height: 0; }
  .sp-hero__photo-image { height: 82%; }
  .sp-hero--bento .sp-hero__role { aspect-ratio: auto; }
}
/* Douze colonnes, six rangées : la grille de la maquette Bento. Une hauteur
 * minimale et non fixe, en `1fr` : si le texte ne tient pas dans ses quatre
 * rangées (fenêtre basse, titre traduit plus long), les rangées grandissent au
 * lieu de le laisser déborder sur les tuiles du dessous. */
@media (min-width: 1200px) {
  .sp-hero.sp-hero--bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas:
      "copy copy copy copy copy photo photo photo r1 r1 r1 r1"
      "copy copy copy copy copy photo photo photo r1 r1 r1 r1"
      "copy copy copy copy copy photo photo photo r1 r1 r1 r1"
      "copy copy copy copy copy photo photo photo r2 r2 r3 r3"
      "r4 r4 promises promises promises photo photo photo r2 r2 r3 r3"
      "r4 r4 promises promises promises photo photo photo r2 r2 r3 r3";
    min-height: clamp(620px, calc(100svh - var(--sp-header-height)), 800px);
    padding: 16px max(var(--sp-gutter), (100% - var(--sp-max)) / 2) 48px;
  }
  .sp-hero--bento .sp-hero__copy { padding: 0 24px 0 0; }
  .sp-hero.sp-hero--bento h1 { max-width: none; font-size: clamp(48px, 4.1vw, 60px); }
}
.sp-hero.has-custom-image .sp-hero__art { background-image: none; }
.sp-hero.has-custom-image .sp-hero__art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
/* L'image du hero (portrait) prend toute la hauteur de la bannière au lieu
 * d'une boîte au format 640/620 : elle était limitée par sa hauteur et ne
 * remplissait qu'un tiers de sa colonne. Sur mobile, un format plus haut. */
.sp-hero.has-custom-image .sp-hero__art { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) {
  .sp-hero.has-custom-image .sp-hero__art {
    align-self: stretch;
    height: auto;
    aspect-ratio: auto;
    position: relative;
  }
  /* En absolu : l'image ne dicte pas la hauteur de la bannière (100vh moins
     l'en-tête), elle remplit celle que le texte et le min-height donnent. */
  .sp-hero.has-custom-image .sp-hero__art img {
    position: absolute;
    inset: clamp(16px, 3vh, 36px) 0 0;
    width: 100%;
    height: auto;
    max-height: none;
    block-size: calc(100% - clamp(16px, 3vh, 36px));
    object-position: center bottom;
  }
}

/* The comparison copy is made of editable core blocks, while the historical
 * component expected a `.sp-lead` paragraph and a bare link. Bridge the two
 * structures without duplicating the storefront design in the block. */
.sp-demo__copy > p { margin: 0 0 28px; color: var(--color-neutral-700); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; }
.sp-demo__copy > .wp-block-buttons { margin: 0; }
.sp-info-demo.aics-before-after { padding: 0; }

/* The section headings are regular core headings, deliberately outside the
 * dynamic catalogue/steps blocks so editors can rewrite and translate them. */
/* Les titres de section vivent dans un groupe Gutenberg (titre + intro +
 * bloc dynamique). Le groupe est transparent : pas de marge de flux entre ses
 * enfants, chaque section garde son propre rythme. */
.aics-marketing-content > .wp-block-group { margin: 0; }
.aics-marketing-content > .wp-block-group > * { margin-block: 0; }
.aics-marketing-view-home .aics-marketing-content > h2,
.aics-marketing-view-home .aics-marketing-content > .wp-block-group > h2,
.aics-marketing-view-landing .aics-marketing-content > .wp-block-group > h2 {
  margin: 0;
  background: #fff;
  padding: clamp(56px, 7vw, 96px) max(var(--sp-gutter), (100% - var(--sp-max)) / 2) 20px;
  font-family: var(--sp-font-heading);
  font-size: clamp(32px, 4.2vw, 60px);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.04;
}
.aics-marketing-view-home .aics-marketing-content > h2 + p,
.aics-marketing-view-home .aics-marketing-content > .wp-block-group > h2 + p,
.aics-marketing-view-landing .aics-marketing-content > .wp-block-group > h2 + p {
  margin: 0;
  background: #fff;
  padding: 0 max(var(--sp-gutter), (100% - var(--sp-max)) / 2) 40px;
  color: var(--color-neutral-700);
  font-size: 18px;
}
.aics-marketing-view-home .aics-marketing-content > h2 + .sp-offer,
.aics-marketing-view-home .aics-marketing-content > p + .sp-how,
.aics-marketing-view-home .aics-marketing-content > .wp-block-group > h2 + .sp-offer,
.aics-marketing-view-home .aics-marketing-content > .wp-block-group > p + .sp-how,
.aics-marketing-view-landing .aics-marketing-content > .wp-block-group > p + .sp-how { padding-top: 0; }

/* Dynamic product cards and assurance items contain an extra semantic wrapper
 * around their editable content; let the historic component rules reach it. */
.aics-product-family__body { min-height: 170px; }
.aics-commitment__content h3 { margin: 0; font-size: 19px; line-height: 1.15; }
.aics-commitment__content p { margin: 10px 0 0; color: var(--color-neutral-700); font-size: 14px; line-height: 1.5; }

/* Detailed steps may contain a Gutenberg list. It adopts the journey checklist
 * rhythm while keeping its list items editable. */
.sp-journey__body ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sp-journey__body li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.4; }
.sp-journey__body li::before { position: absolute; top: 0; left: 0; display: grid; width: 22px; height: 22px; place-items: center; background: var(--step); color: var(--step-on); content: "✓"; font-size: 12px; font-weight: 800; }

/* Information-page blocks reuse the centered intro/list/CTA components. */
.sp-info-page > h2 { margin: 0 0 28px; text-align: center; }
/* Pages légales (tools/legal-pages.php) : un texte qui se lit d'une traite,
   titres de section à gauche, gras rétabli, tableaux à défilement horizontal
   sur mobile plutôt qu'une page qui déborde. */
.aics-marketing-view-legal .sp-info-page > h2 { margin: 40px 0 12px; text-align: left; }
.aics-marketing-view-legal .sp-info-page strong { font-weight: 700; }
.aics-marketing-view-legal .sp-info-page li + li { margin-top: 6px; }
.aics-marketing-view-legal .sp-info-page .wp-block-table { margin: 20px 0; overflow-x: auto; }
.aics-marketing-view-legal .sp-info-page .wp-block-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.aics-marketing-view-legal .sp-info-page .wp-block-table th,
.aics-marketing-view-legal .sp-info-page .wp-block-table td { border: 1.5px solid var(--color-neutral-300, #dfd2be); padding: 8px 10px; text-align: left; vertical-align: top; }
.aics-marketing-view-legal .sp-info-page .wp-block-table th { background: var(--color-neutral-100, #f5efe6); font-weight: 700; }
.sp-info-page > .sp-info-steps { margin-bottom: 0; }
.sp-info-intro > p { max-width: 58ch; margin: 0 auto; color: var(--color-neutral-700); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; }
/* Ces deux composants sont CENTRÉS par `text-align` : un conteneur flex n'en
 * tient pas compte, il faut le lui dire. */
.sp-info-intro > .wp-block-buttons { justify-content: center; margin-top: 28px; }
.sp-help-cta > p { max-width: 48ch; margin: 0 auto 28px; }
.sp-help-cta > .wp-block-buttons { justify-content: center; margin-top: 0; }
/* « Comment ça marche » n'est plus dans la colonne étroite .sp-info-page (voir
 * le gabarit) : ses sections vont d'un bord à l'autre, comme sur l'accueil.
 * L'en-tête et la démo, dessinés pour cette colonne, reprennent ici la colonne
 * --sp-max des autres sections. */
.aics-how-intro { padding-inline: max(var(--sp-gutter), (100% - var(--sp-max)) / 2); }
.aics-marketing-view-comment .sp-info-demo { width: min(880px, 100% - 2 * var(--sp-gutter)); }
.sp-faq-item__icon svg { width: 16px; height: 16px; }
.aics-faq-item__answer { display: contents; }

/* Editor-only affordances. The storefront stylesheet is also loaded in the
 * editor, so previews use the same assets, colours and geometry. */
.editor-styles-wrapper .aics-language-switcher,
.aics-dynamic-preview { display: block; border: 2px dashed var(--color-neutral-400); padding: 16px; }
.aics-dynamic-preview > strong { display: block; margin-bottom: 12px; }
.editor-styles-wrapper .sp-site .wp-block-button__link { border: 2px solid var(--color-accent); border-radius: 0; background: var(--color-accent); color: #fff; font: 700 14px/1 var(--sp-font-body); }
.editor-styles-wrapper .sp-hero .wp-block-button:not(:first-child) .wp-block-button__link { border-color: var(--color-bg); background: var(--color-bg); color: var(--color-text); }

@media (max-width: 759px) {
  .aics-product-family__body { min-height: 0; }
  /* Même règle que `.sp-hero__actions` sous 759 px : les boutons du hero se
   * partagent la largeur, et passent chacun sur sa ligne quand elle manque. */
  .sp-hero__copy > .wp-block-buttons { width: 100%; }
  .sp-hero__copy .wp-block-button { flex: 1 1 auto; }
  .sp-hero__copy .wp-block-button > a.aics-button { width: 100%; }
}

/* Format « Surligner » (aics/highlight) : aussi chargé dans le canevas de
 * l'éditeur, pour que le contributeur voie le même rendu que le site. */
mark.aics-highlight {
  display: inline-block;
  margin: 0 .04em;
  padding: 0 .14em .06em;
  border-radius: 0;
  background: #e9a331;
  background: var(--c-amber, #e9a331);
  color: #2a2320;
  color: var(--color-text, #2a2320);
  font-style: normal;
  transform: rotate(-2deg);
}

/* --- Hero : un décor sous l'enfant ----------------------------------------
 * Détouré sur l'aplat violet, l'enfant « flottait ». Deux formes pleines, sans
 * dégradé ni transparence, dans la famille du violet :
 *  - un halo (disque plus clair) qui regroupe l'enfant et ses bulles de rêve ;
 *  - une colline plus sombre, sur laquelle il est assis, qui file jusqu'au
 *    bord droit de l'écran comme l'image.
 * Ordre : halo, puis colline, puis texte et image au premier plan. */
.sp-hero.has-custom-image .sp-hero__art { position: relative; }
.sp-hero.has-custom-image .sp-hero__art img { position: relative; z-index: 2; }
.sp-hero.has-custom-image .sp-hero__art::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 50%;
  bottom: 14%;
  width: min(92%, 78vh);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #6b5b9c;
  transform: translateX(-50%);
}
/* La colline court sur toute la largeur de la bannière : basse sous le texte,
 * elle se soulève sous l'enfant et file jusqu'au bord droit. */
.sp-hero.has-custom-image { position: relative; isolation: isolate; }
.sp-hero.has-custom-image > * { position: relative; z-index: 1; }
/* Pas de contexte d'empilement propre à l'illustration : le halo (z 0) passe
 * ainsi SOUS la colline, et l'image (z 2) au-dessus des deux. */
.sp-hero.has-custom-image > .sp-hero__art { z-index: auto; }
.sp-hero.has-custom-image::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(90px, 17%, 150px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V112C260 104 520 98 760 70S1150 18 1400 34v106Z' fill='%23463870'/%3E%3Cpath d='M0 112C260 104 520 98 760 70S1150 18 1400 34' fill='none' stroke='%232a2320' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .sp-hero.has-custom-image .sp-hero__art img { position: absolute; }
}
/* Ombre portée, pleine et sans flou, sous l'enfant assis : c'est elle qui le
 * pose sur la colline. Centrée sur l'enfant (légèrement à droite du milieu de
 * l'image), entre la colline (z 0) et l'image (z 2). */
.sp-hero.has-custom-image .sp-hero__art::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 57%;
  bottom: 1.5%;
  width: 52%;
  height: 6%;
  border-radius: 50%;
  background: #33285a;
  transform: translateX(-50%);
  pointer-events: none;
}

/* --- « Prêt à créer votre histoire ? » : appel final, texte seul ----------
 * Titre, phrase et bouton centrés sur le violet texturé (étoiles et points
 * ton sur ton). */
.aics-marketing-content .sp-cta-final {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23685899'%3E%3Cpath d='M28 18q0 11 11 11-11 0-11 11 0-11-11-11 11 0 11-11Z'/%3E%3Cpath d='M98 78q0 7 7 7-7 0-7 7 0-7-7-7 7 0 7-7Z'/%3E%3Cpath d='M52 104q0 5 5 5-5 0-5 5 0-5-5-5 5 0 5-5Z'/%3E%3Ccircle cx='116' cy='22' r='2.5'/%3E%3Ccircle cx='14' cy='76' r='2.5'/%3E%3Ccircle cx='76' cy='48' r='1.8'/%3E%3Ccircle cx='128' cy='124' r='1.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 140px repeat,
    var(--c-violet);
}
.aics-marketing-content .sp-section.sp-cta-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.aics-marketing-content .sp-cta-final .sp-split__copy { max-width: 720px; }
.aics-marketing-content .sp-cta-final .sp-split__copy .wp-block-buttons { justify-content: center; }
.aics-marketing-content .sp-cta-final .sp-split__copy > p { margin-inline: auto; }

/* --- « Une photo normale. Un livre pas du tout normal. » -------------------
 * La rangée suit la maquette : quatre panneaux pastel au format 4/3, séparés
 * par des flèches carrées. Les corps de carte restent blancs et utilisent les
 * polices du thème ; seules la géométrie et les couleurs des visuels changent. */
.sp-how__art.has-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
}
.sp-how__card--coral .sp-how__art.has-photo { background: var(--color-accent-100); }
.sp-how__card--teal .sp-how__art.has-photo { background: var(--c-teal-soft); }
.sp-how__card--amber .sp-how__art.has-photo { background: var(--c-amber-soft); }
.sp-how__card--violet .sp-how__art.has-photo { background: var(--c-violet-soft); }
.sp-how__card--coral .sp-how__art.has-photo ~ .sp-how__num { background: var(--color-accent); color: #fff; }
.sp-how__card--teal .sp-how__art.has-photo ~ .sp-how__num { background: var(--c-teal); color: #fff; }
.sp-how__card--amber .sp-how__art.has-photo ~ .sp-how__num { background: var(--c-amber); color: var(--color-text); }
.sp-how__card--violet .sp-how__art.has-photo ~ .sp-how__num { background: var(--c-violet); color: #fff; }
.aics-marketing-view-home .sp-how__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aics-marketing-view-home .sp-how__card h3 { margin-inline: 20px; font-size: clamp(19px, 1.65vw, 25px); }
.aics-marketing-view-home .sp-how__card p { margin-inline: 20px; font-size: 15px; }
.sp-how__art.has-photo ~ .sp-how__num {
  display: grid;
  width: 44px;
  height: 36px;
  box-sizing: border-box;
  place-items: center;
  padding: 0;
  font-size: 16px;
}
.sp-how__card:not(:last-child) .sp-how__art::after {
  right: -17px;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background-size: 16px;
}
.sp-how__print {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--color-divider);
  object-fit: cover;
  box-shadow: 7px 7px 0 rgba(42, 35, 32, .12);
  transform: rotate(2deg);
}

/* Étape 03 : le livre, sur le modèle d'un album photo carré. Couverture
 * blanche, grand aplat pastel (violet doux de la charte) avec une marge
 * blanche, photo en polaroïd au centre et légende manuscrite dessous. Le dos
 * est un léger filet d'ombre à gauche, le livre repose sur une ombre douce. */
.sp-how__book {
  position: relative;
  display: block;
  width: 66%;
  aspect-ratio: 1;
  background: #fff;
  padding: 6%;
  box-shadow:
    inset 5px 0 0 rgba(42, 35, 32, .08),
    inset 6px 0 0 rgba(255, 255, 255, .9),
    0 14px 18px -10px rgba(42, 35, 32, .55);
}
.sp-how__book-panel {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--c-violet-soft);
}
.sp-how__polaroid {
  display: flex;
  flex-direction: column;
  width: 70%;
  background: #fff;
  padding: 5% 5% 0;
  box-shadow: 0 1px 3px rgba(42, 35, 32, .18);
}
.sp-how__cover { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 55% 35%; }
.sp-how__caption {
  display: block;
  padding: .35em 0 .45em;
  color: var(--color-text);
  font-family: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: clamp(9px, .85vw, 13px);
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

/* Étape 01 : une petite feuille de sélection, avec la première histoire mise
 * en avant comme dans la maquette. */
.sp-how__picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 82%;
  max-width: 290px;
  box-sizing: border-box;
  border: 1px solid var(--color-divider);
  background: #fff;
  padding: 14px;
  box-shadow: 7px 7px 0 rgba(42, 35, 32, .12);
  transform: rotate(-1.5deg);
}
.sp-how__picker-head {
  margin-bottom: 2px;
  color: var(--color-neutral-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}
.sp-how__story {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 2px solid transparent;
  background: transparent;
  padding: 6px 8px 6px 6px;
}
.sp-how__story.is-selected { border-color: var(--color-accent); background: var(--color-accent-100); }
.sp-how__story-thumb {
  display: grid;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
}
.sp-how__story-thumb svg { width: 50%; height: 50%; }
.sp-how__story-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
.sp-how__story.is-selected .sp-how__story-thumb { outline: 0; }
.sp-how__story-thumb--teal { background: var(--c-teal); }
.sp-how__story-thumb--coral { background: var(--color-accent); }
.sp-how__story-thumb--violet { background: var(--c-violet); }
.sp-how__story-thumb--amber { background: var(--c-amber); }
.sp-how__story-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-how__story-text strong { overflow: hidden; color: var(--color-text); font-family: var(--sp-font-heading); font-size: clamp(12px, 1vw, 15px); font-weight: 800; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.aics-marketing-view-home .sp-how__story-text strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: normal; }
.sp-how__story-text small { overflow: hidden; color: var(--color-neutral-700); font-size: clamp(10px, .78vw, 11px); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.sp-how__story.is-selected small { color: var(--color-text); }
.sp-how__story-check { display: grid; place-items: center; width: 20px; height: 20px; visibility: hidden; border: 0; background: #fff; }
.sp-how__story.is-selected .sp-how__story-check {
  visibility: visible;
  background: var(--c-teal);
}
.sp-how__story.is-selected .sp-how__story-check::after,
.sp-how__style-option.is-selected .sp-how__story-check::after {
  display: block;
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: "";
  transform: translateY(-1px) rotate(-45deg);
}

/* Étape 03 : les deux photos importées, légèrement inclinées, avec le bouton d'import
 * rond. Les flèches de progression entre les cartes, elles, restent carrées. */
.sp-how__upload { position: relative; display: block; width: 52%; max-width: 240px; }
.sp-how__upload--single { width: 70%; }
.sp-how__upload--single .sp-how__print { transform: rotate(-4deg); }
.sp-how__upload--single .sp-how__upload-badge { z-index: 2; }
.sp-how__upload--pair { display: flex; align-items: center; justify-content: center; width: 82%; max-width: 290px; }
.sp-how__upload--pair .sp-how__print { width: 56%; flex: none; }
.sp-how__print--girl { position: relative; z-index: 1; transform: rotate(-7deg); }
.sp-how__print--bear { margin-left: -13%; transform: translateY(12%) rotate(8deg); }
.sp-how__upload--pair .sp-how__upload-badge { z-index: 2; top: -16px; right: -5px; }
.sp-how__upload-badge {
  position: absolute;
  top: -10px;
  right: -16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--color-divider);
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: none;
  color: #fff;
}
.sp-how__upload-badge svg { width: 22px; height: 22px; }

/* Ancienne maquette du livre : titre au-dessus du polaroïd, sur l'aplat pastel. */
.sp-how__book-panel { grid-template-rows: auto auto; align-content: center; gap: 6%; }
.sp-how__book-title {
  max-width: 88%;
  color: var(--color-text);
  font-family: var(--sp-font-heading);
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.05;
  text-align: center;
}
.sp-how__book .sp-how__polaroid { width: 60%; }
.sp-how__cover--empty { background: var(--c-violet) url("../assets/images/storefront/pattern-stars.svg") center / 48px repeat; }

/* Étape 04 : couverture illustrée et titre net composé en HTML. */
.sp-how__hardcover {
  position: relative;
  display: block;
  width: 70%;
  max-width: 210px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--color-divider);
  box-shadow: 7px 7px 0 rgba(42, 35, 32, .12);
  transform: rotate(-2deg);
}
.sp-how__hardcover img { display: block; width: 100%; height: auto; }
.sp-how__hardcover-title {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 8% 6% 16%;
  background: linear-gradient(180deg, rgba(13, 28, 69, .72), rgba(13, 28, 69, 0));
  color: #fff;
  font-family: var(--sp-font-heading);
  font-size: clamp(12px, 1.28vw, 20px);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/* Une maquette de livre contient déjà son dos, son ombre et ses titres. */
.sp-how__card.has-book-mockup .sp-how__hardcover {
  width: 74%;
  max-width: 280px;
  overflow: visible;
  border: 0;
  box-shadow: none;
  transform: none;
}
.sp-how__card.has-book-mockup .sp-how__hardcover-title { display: none; }
.sp-how__style-picker {
  display: grid;
  gap: 12px;
  width: 82%;
  max-width: 270px;
  box-sizing: border-box;
  border: 1px solid var(--color-divider);
  background: #fff;
  padding: 14px;
  box-shadow: 7px 7px 0 rgba(42, 35, 32, .12);
  transform: rotate(1.5deg);
}
.sp-how__style-option { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; align-items: center; gap: 10px; border: 1px solid var(--color-divider); background: var(--c-amber-soft); padding: 7px; }
.sp-how__style-option img { display: block; width: 56px; height: 56px; object-fit: cover; }
.sp-how__style-option > span:nth-child(2) { font-family: var(--sp-font-heading); font-size: 13px; font-weight: 800; line-height: 1.15; }
.sp-how__style-option.is-selected .sp-how__story-check { visibility: visible; background: var(--c-teal); }
.sp-how__story.is-selected .sp-how__story-thumb { background: var(--color-accent); color: #fff; }

@media (max-width: 900px) {
  .aics-marketing-view-home .sp-how__list { grid-template-columns: 1fr; }
  .sp-how__art.has-photo { aspect-ratio: 16 / 10; }
  .sp-how__card:not(:last-child)::after {
    bottom: -17px;
    width: 32px;
    height: 32px;
    border-radius: 0;
    background-size: 16px;
  }
}

@media (min-width: 901px) and (max-width: 1150px) {
  .aics-marketing-view-home .sp-how__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aics-marketing-view-home .sp-how__card:nth-child(2) .sp-how__art::after { display: none; }
}

@media (max-width: 520px) {
  .sp-how__art.has-photo { aspect-ratio: 4 / 3; }
  .sp-how__picker { width: 76%; padding: 12px; }
  .sp-how__upload { width: 58%; }
  .sp-how__upload--pair { width: 82%; }
  .sp-how__hardcover { width: 64%; }
}

/* --- Accueil : « Une photo, une histoire, un livre. » ----------------------
 * Maquette « Fil de l'histoire » (Claude Design, 2026-11-05) : trois étapes
 * sans cadre ni flèches. Pour chacune, un panneau pastel, puis un grand
 * numéro à la couleur de l'étape à côté du titre et du texte. Le titre de la
 * section et son introduction se font face au-dessus, sur toute la largeur
 * de la page à partir de 1 000 px. Les règles précédentes (cartes blanches
 * dans une grille, quatre colonnes) restent celles des pages
 * d'atterrissage. */
.aics-marketing-view-home .sp-how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.8vw, 40px); border: 0; background: transparent; }
.aics-marketing-view-home .sp-how__card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; column-gap: 16px; background: transparent; }
.aics-marketing-view-home .sp-how__card > .sp-how__art { grid-column: 1 / -1; margin-bottom: 20px; border-bottom: 0; }
.aics-marketing-view-home .sp-how__card:not(:last-child) .sp-how__art::after,
.aics-marketing-view-home .sp-how__card:not(:last-child)::after { display: none; }
.aics-marketing-view-home .sp-how__card .sp-how__art.has-photo ~ .sp-how__num {
  position: static;
  display: block;
  grid-column: 1;
  grid-row: 2 / span 2;
  width: auto;
  height: auto;
  background: none;
  padding: 0;
  color: var(--tone);
  font-family: var(--sp-font-heading);
  font-size: 46px;
  font-weight: 800;
  line-height: .86;
}
.aics-marketing-view-home .sp-how__card > h3,
.aics-marketing-view-home .sp-how__card > p { grid-column: 2; margin-inline: 0; }
.aics-marketing-view-home .sp-how__card > h3 { margin-block: 0 6px; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.15; }
.aics-marketing-view-home .sp-how__card > p { margin: 0; color: var(--color-neutral-700); font-size: 15px; line-height: 1.5; }
.aics-marketing-view-home .sp-how__card .sp-how__art--choice .sp-how__picker { gap: 8px; }
@media (min-width: 1000px) {
  .aics-marketing-view-home .aics-marketing-content > .wp-block-group:has(> .sp-how) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 44ch);
    align-items: end;
    column-gap: 48px;
    background: #fff;
    padding-inline: max(var(--sp-gutter), (100% - var(--sp-max)) / 2);
  }
  .aics-marketing-view-home .aics-marketing-content > .wp-block-group:has(> .sp-how) > * { padding-inline: 0; }
  .aics-marketing-view-home .aics-marketing-content > .wp-block-group:has(> .sp-how) > h2 { grid-column: 1; max-width: 16ch; padding-bottom: 48px; }
  .aics-marketing-view-home .aics-marketing-content > .wp-block-group:has(> .sp-how) > p { grid-column: 2; padding-bottom: 54px; }
  .aics-marketing-view-home .aics-marketing-content > .wp-block-group:has(> .sp-how) > .sp-how { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .aics-marketing-view-home .sp-how__list { grid-template-columns: 1fr; gap: 40px; }
}

/* Accueil, « De la photo au héros. » : un surtitre au-dessus du titre et un
 * bouton d'encre — le violet reste à l'appel principal de la bannière. */
.aics-marketing-view-home .sp-demo { background: var(--color-bg); }
.sp-demo__copy > p.aics-kicker { margin: 0 0 18px; color: var(--color-accent-700); font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.aics-marketing-view-home .sp-demo .aics-button--primary { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.aics-marketing-view-home .sp-demo .aics-button--primary:hover { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg); }

/* --- Pages d'atterrissage et blocs éditoriaux ------------------------------
 * « Cadeau original pour enfant »… : mise en page de l'accueil (hero violet,
 * sections pleine largeur), plus un fil d'Ariane et des blocs de texte long.
 * Aplats, filets fins, angles droits : le vocabulaire de la vitrine. */

.aics-landing-breadcrumb { flex-wrap: wrap; max-width: none; margin: 0 0 24px; padding: 0; color: var(--c-violet-soft); }
.aics-landing-breadcrumb a { color: var(--color-bg); text-decoration: underline; text-underline-offset: 3px; }
.aics-landing-breadcrumb a:hover { color: var(--c-amber); }

/* Fonds partagés par la section éditoriale, la grille d'idées et les points forts. */
.aics-editorial--cream, .aics-idea-grid--cream, .aics-highlights--cream { background: var(--color-bg); }
.aics-editorial--white, .aics-idea-grid--white, .aics-highlights--white { background: #fff; }
.aics-editorial--teal, .aics-idea-grid--teal, .aics-highlights--teal { background: var(--c-teal-soft); }
.aics-editorial--amber, .aics-idea-grid--amber, .aics-highlights--amber { background: var(--c-amber-soft); }
.aics-editorial--violet, .aics-idea-grid--violet, .aics-highlights--violet { background: var(--c-violet-soft); }

/* Section éditoriale : une colonne de lecture (~68 caractères), une image
 * facultative à côté. */
.aics-editorial__grid { display: grid; align-items: center; gap: clamp(32px, 5vw, 72px); }
.aics-editorial--text .aics-editorial__copy { max-width: 760px; }
@media (min-width: 900px) {
  .aics-editorial--image-right .aics-editorial__grid,
  .aics-editorial--image-left .aics-editorial__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .aics-editorial--image-left .aics-editorial__media { order: -1; }
}
.aics-editorial__copy > * { max-width: 68ch; }
.aics-editorial .aics-editorial__copy h2 { margin: 0 0 24px; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.06; }
.aics-editorial .aics-editorial__copy h3 { margin: 36px 0 10px; font-size: 22px; line-height: 1.2; }
.aics-editorial__copy > p,
.aics-editorial__copy > ul li,
.aics-editorial__copy > ol li { color: var(--color-neutral-800); font-size: 17px; line-height: 1.65; }
.aics-editorial__copy > p { margin: 0 0 18px; }
.aics-editorial__copy > ul,
.aics-editorial__copy > ol { margin: 0 0 22px; padding-left: 1.2em; }
.aics-editorial__copy li + li { margin-top: 8px; }
/* Le design system remet `strong` à la graisse du texte : un mot mis en valeur
 * dans un texte long doit se voir. */
.aics-editorial__copy strong,
.aics-idea-card strong,
.aics-question .aics-faq-item__answer strong { font-weight: 700; }
.aics-editorial__copy li::marker { color: var(--color-accent); font-weight: 700; }
.aics-editorial__copy a:not(.aics-button) { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
.aics-editorial__copy blockquote { margin: 28px 0; border-left: 6px solid var(--c-amber); padding: 4px 0 4px 20px; font-family: var(--sp-font-heading); font-size: 22px; line-height: 1.35; }
.aics-editorial__copy blockquote p { margin: 0; }
.aics-editorial__copy > .wp-block-buttons { margin-top: 28px; }
.aics-editorial__copy > .aics-questions { max-width: none; margin: 8px 0 0; }
.aics-editorial__media { margin: 0; }
.aics-editorial__media img { display: block; width: 100%; height: auto; border: var(--sp-border); }

/* Grille d'idées : titre et intro sur toute la largeur, cartes dessous. */
.aics-idea-grid__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 20px; }
@media (min-width: 900px) {
  .aics-idea-grid--cols-2 .aics-idea-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aics-idea-grid--cols-3 .aics-idea-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aics-idea-grid--cols-4 .aics-idea-grid__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.aics-idea-grid__list > :not(.aics-idea-card) { grid-column: 1 / -1; }
.aics-idea-grid .aics-idea-grid__list > h2 { margin: 0; }
.aics-idea-grid__list > p { max-width: 60ch; margin: 0 0 16px; color: var(--color-neutral-700); font-size: 18px; line-height: 1.5; }

/* Un surtitre a le même dessin dans tous les blocs. Les règles de paragraphe
 * des sections (`.aics-editorial__copy > p`, `.aics-idea-grid__list > p`) le
 * remettaient en texte courant (17-18 px, brun) : sur « Comment ça marche »,
 * les six « Étape N » avaient trois apparences. Même écart sous le surtitre
 * partout (18 px), y compris dans un en-tête en ligne, où l'espacement de la
 * rangée (16 px) s'ajoute à sa marge. */
.aics-marketing-content p.aics-kicker { max-width: none; margin: 0 0 18px; color: var(--sp-red); font-size: 11px; font-weight: 700; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.aics-marketing-content .sp-section__head > p.aics-kicker { flex-basis: 100%; margin-bottom: 2px; }
.aics-marketing-content .aics-idea-grid__list > p.aics-kicker { margin-bottom: -2px; } /* grille : 20 px de rangée */

/* « Comment ça marche » : la section des questions est centrée, titre et liste. */
.aics-marketing-view-comment .aics-editorial--text:has(.aics-questions) .aics-editorial__copy { max-width: 820px; margin-inline: auto; text-align: center; }
.aics-marketing-view-comment .aics-editorial--text:has(.aics-questions) .aics-questions { text-align: left; }
.aics-idea-card { --tone: var(--color-accent); --tone-soft: var(--color-accent-100); display: flex; flex-direction: column; border: var(--sp-border); border-top: 10px solid var(--tone); background: var(--color-bg); }
.aics-idea-card--teal { --tone: var(--c-teal); --tone-soft: var(--c-teal-soft); }
.aics-idea-card--amber { --tone: var(--c-amber); --tone-soft: var(--c-amber-soft); }
.aics-idea-card--violet { --tone: var(--c-violet); --tone-soft: var(--c-violet-soft); }
.aics-idea-card__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--sp-border); }
.aics-idea-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 24px; }
.aics-idea-card__label { width: fit-content; margin: 0; background: var(--tone-soft); padding: 4px 10px; color: var(--color-text); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.aics-idea-card h3 { margin: 0; font-size: 22px; line-height: 1.15; }
.aics-idea-card p:not(.aics-idea-card__label),
.aics-idea-card li { margin: 0; color: var(--color-neutral-700); font-size: 16px; line-height: 1.55; }
.aics-idea-card ul { margin: 0; padding-left: 1.1em; }
.aics-idea-card .wp-block-buttons { margin-top: auto; padding-top: 8px; }

/* Points forts (aics/highlights) : deux colonnes autour d'une liste. La liste
 * est une liste Gutenberg ordinaire ; c'est la disposition qui la dessine —
 * filets pour la liste détaillée, cases cochées pour la liste à cocher,
 * tirets à côté de la carte. Filets et cadres reprennent la grille des
 * familles de produits : un filet beige de 1 px entre les lignes. */
.aics-highlights__grid { display: grid; align-items: center; gap: clamp(32px, 5vw, 88px); }
.aics-highlights--aside-left .aics-highlights__grid > figure { order: -1; }
@media (min-width: 900px) {
  .aics-highlights--media.aics-highlights--aside-left .aics-highlights__grid,
  .aics-highlights--media.aics-highlights--aside-right .aics-highlights__grid,
  .aics-highlights--specs.aics-highlights--aside-left .aics-highlights__grid,
  .aics-highlights--specs.aics-highlights--aside-right .aics-highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aics-highlights--card.aics-highlights--aside-left .aics-highlights__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .aics-highlights--card.aics-highlights--aside-right .aics-highlights__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
.aics-highlights .aics-highlights__copy h2 { margin: 0 0 24px; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; }
.aics-highlights__copy > p:not(.aics-kicker) { max-width: 56ch; margin: 0 0 28px; color: var(--color-neutral-700); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; }
.aics-highlights__copy > ul { margin: 0; padding: 0; list-style: none; }
.aics-highlights__copy > .wp-block-buttons { margin: 32px 0 0; }
.aics-highlights__copy > :last-child { margin-bottom: 0; }
.aics-highlights__copy strong { font-weight: 700; }
.aics-highlights__copy a:not(.aics-button) { color: var(--color-accent-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Image et liste détaillée : le début en gras de chaque élément devient son
 * intitulé, au-dessus de l'explication. */
.aics-highlights__media { margin: 0; }
.aics-highlights__media img { display: block; width: 100%; height: auto; border: var(--sp-border); }
.aics-highlights--media .aics-highlights__copy > ul { border-top: 1px solid var(--color-divider); }
.aics-highlights--media .aics-highlights__copy > ul > li { border-bottom: 2px solid var(--color-divider); padding: 22px 0; color: var(--color-neutral-700); font-size: 17px; line-height: 1.6; }
.aics-highlights--media .aics-highlights__copy > ul > li > strong:first-child { display: block; margin-bottom: 6px; color: var(--color-text); font-family: var(--sp-font-heading); font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.aics-highlights--media .aics-highlights__copy > ul > li > strong:first-child + br { display: none; }

/* Fiche technique (« Un vrai livre, imprimé avec soin. ») : une ligne par
 * caractéristique entre deux filets beiges, l'intitulé en gras à gauche, sa
 * valeur à droite ; puis le bouton et, à côté, le prix « à partir de ». */
/* Les écarts viennent du `gap` et non des marges : une marge haute sur le
 * bouton et le prix décalait leur centrage, le prix tombait au-dessus. */
.aics-highlights--specs .aics-highlights__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 24px; }
.aics-highlights--specs .aics-highlights__copy > * { margin: 0; }
.aics-highlights--specs .aics-highlights__copy > h2,
.aics-highlights--specs .aics-highlights__copy > ul { flex: 1 1 100%; }
.aics-highlights--specs .aics-highlights__copy > ul { margin-bottom: 4px; }
.aics-highlights--specs .aics-highlights__copy > ul { border-top: 1px solid var(--color-divider); }
.aics-highlights--specs .aics-highlights__copy > ul > li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--color-divider); padding: 15px 0; color: var(--color-text); font-size: 16px; line-height: 1.4; text-align: right; }
.aics-highlights--specs .aics-highlights__copy > ul > li > strong:first-child { flex: none; font-weight: 700; text-align: left; }
.aics-highlights--specs .aics-highlights__copy > ul > li > br { display: none; }
.aics-highlights__price { color: var(--color-neutral-800); font-size: 15px; line-height: 1.4; }
.aics-highlights__price strong { color: var(--color-text); font-size: 17px; }

/* Texte et liste à cocher : la liste passe dans la colonne de droite, sur deux
 * colonnes. Elle s'étend sur toutes les rangées de la colonne de gauche ; la
 * dernière rangée est en `fr` pour que sa hauteur y soit versée, et non
 * répartie entre le titre et le texte (ce qui les écarterait l'un de l'autre). */
@media (min-width: 900px) {
  .aics-highlights--checklist .aics-highlights__copy { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); grid-template-rows: repeat(6, auto) 1fr; align-items: start; column-gap: clamp(40px, 6vw, 96px); }
  .aics-highlights--checklist .aics-highlights__copy > * { grid-column: 1; }
  .aics-highlights--checklist .aics-highlights__copy > ul { grid-row: 1 / -1; grid-column: 2; }
}
.aics-highlights--checklist .aics-highlights__copy > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.aics-highlights--checklist .aics-highlights__copy > ul > li { position: relative; border-top: 2px solid var(--color-divider); padding: 20px 0 20px 40px; color: var(--color-text); font-size: 17px; line-height: 1.45; }
.aics-highlights--checklist .aics-highlights__copy > ul > li::before { position: absolute; top: 20px; left: 0; display: grid; width: 24px; height: 24px; place-items: center; background: var(--color-accent); color: #fff; content: "✓"; font-size: 13px; font-weight: 800; line-height: 1; }
/* Un point peut porter une icône à la place de la coche (classe is-icon-{nom}
   choisie dans l’inspecteur, dessinée par MarketingMarkup::with_checklist_icons()). */
.aics-highlights--checklist .aics-highlights__copy > ul > li.has-icon::before { content: none; }
.aics-highlights__icon { position: absolute; top: 20px; left: 0; display: grid; width: 24px; height: 24px; place-items: center; background: var(--color-accent); color: #fff; }
.aics-highlights__icon svg { width: 16px; height: 16px; }

/* Texte et carte illustrée : liste à tirets, et la carte qui figure l'objet
 * (carte cadeau, livre) — filet fin, ombre pleine sans flou. */
.aics-highlights--card .aics-highlights__copy > ul { display: grid; gap: 12px; }
.aics-highlights--card .aics-highlights__copy > ul > li { position: relative; padding-left: 36px; color: var(--color-neutral-800); font-size: 17px; line-height: 1.5; }
.aics-highlights--card .aics-highlights__copy > ul > li::before { position: absolute; top: .75em; left: 0; width: 20px; height: 2px; background: var(--color-text); content: ""; }
.aics-highlights__card { justify-self: center; width: 100%; max-width: 560px; box-sizing: border-box; margin: 0; border: var(--sp-border); background: #fff; padding: 16px; box-shadow: 7px 7px 0 rgba(42, 35, 32, .12); }
.aics-highlights__card-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; box-sizing: border-box; object-fit: cover; border: var(--sp-border); }
.aics-highlights__card-image--empty { display: grid; place-items: center; background: var(--c-violet-soft); color: var(--color-neutral-700); font-size: 14px; }
.aics-highlights__card-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 20px 6px 6px; }
.aics-highlights__card-text { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.aics-highlights__card-label { color: var(--color-accent-700); font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.aics-highlights__card-title { color: var(--color-text); font-family: var(--sp-font-heading); font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.aics-highlights__card-note { flex: none; max-width: 14ch; color: var(--color-neutral-600); font-size: 14px; line-height: 1.35; text-align: right; }

/* --- Accueil : « Simple à créer, beau à offrir. » ---------------------------
 * Chaque argument dans sa tuile crème au filet beige, une coche (ou l’icône
 * choisie pour le point) sur un aplat
 * de couleur en tête, deux tuiles par rangée ; un nombre impair laisse la
 * dernière sur toute la largeur plutôt qu'un trou. Les couleurs ne font que
 * rythmer la grille : elles ne portent aucun sens. */
.aics-marketing-view-home .aics-highlights--checklist .aics-highlights__copy > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aics-marketing-view-home .aics-highlights--checklist .aics-highlights__copy > ul > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  padding: 20px 22px 22px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.aics-marketing-view-home .aics-highlights--checklist .aics-highlights__copy > ul > li::before {
  position: static;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--checklist-tile, var(--c-amber));
  color: var(--color-text);
  font-size: 18px;
}
.aics-marketing-view-home .aics-highlights--checklist .aics-highlights__icon { position: static; flex: none; width: 40px; height: 40px; background: var(--checklist-tile, var(--c-amber)); color: var(--color-text); }
.aics-marketing-view-home .aics-highlights--checklist .aics-highlights__icon svg { width: 22px; height: 22px; }
.aics-marketing-view-home .aics-highlights--checklist .aics-highlights__copy > ul > li:nth-child(4n+2) { --checklist-tile: var(--c-teal-soft); }
.aics-marketing-view-home .aics-highlights--checklist .aics-highlights__copy > ul > li:nth-child(4n+3) { --checklist-tile: var(--c-violet-soft); }
.aics-marketing-view-home .aics-highlights--checklist .aics-highlights__copy > ul > li:nth-child(4n) { --checklist-tile: var(--color-accent-100); }
.aics-marketing-view-home .aics-highlights--checklist .aics-highlights__copy > ul > li:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }

/* --- Accueil : « Un cadeau dont ils sont les héros. » ----------------------
 * La carte figure l'objet offert : inclinée, sur une ombre beige franche
 * (la vitrine n'a pas d'ombre floue), le bandeau du bas sur l'ambre. Elle se
 * redresse au survol. La liste passe en lignes séparées par des filets, une
 * pastille ambre en tête de chacune, au lieu des tirets. */
.aics-marketing-view-home .aics-highlights--card .aics-highlights__copy > ul { gap: 0; border-top: 1px solid var(--color-divider); }
.aics-marketing-view-home .aics-highlights--card .aics-highlights__copy > ul > li { border-bottom: 2px solid var(--color-divider); padding: 14px 0 14px 30px; color: var(--color-text); font-size: 16px; }
.aics-marketing-view-home .aics-highlights--card .aics-highlights__copy > ul > li::before { top: 21px; width: 12px; height: 12px; background: var(--c-amber); box-shadow: 0 0 0 2px var(--color-text); }
.aics-marketing-view-home .aics-highlights__card {
  max-width: 500px;
  border: 1px solid var(--color-divider);
  padding: 14px 14px 0;
  box-shadow: 10px 10px 0 var(--color-neutral-300);
  transform: rotate(-2deg);
  transition: transform .2s ease;
}
.aics-marketing-view-home .aics-highlights__card:hover { transform: rotate(0deg); }
.aics-marketing-view-home .aics-highlights__card-body { align-items: center; margin: 14px -14px 0; border-top: 1px solid var(--color-divider); background: var(--c-amber); padding: 18px 20px 20px; }
.aics-marketing-view-home .aics-highlights__card-label { color: var(--color-text); }
.aics-marketing-view-home .aics-highlights__card-note { display: inline-flex; align-items: center; max-width: none; background: var(--color-text); padding: 6px 10px; color: var(--color-bg); font-size: 13px; font-weight: 700; text-align: left; }
@media (max-width: 700px) {
  .aics-marketing-view-home .aics-highlights--checklist .aics-highlights__copy > ul { grid-template-columns: 1fr; }
  .aics-marketing-view-home .aics-highlights--checklist .aics-highlights__copy > ul > li { flex-direction: row; align-items: center; padding: 16px 18px; }
  .aics-marketing-view-home .aics-highlights__card { transform: none; box-shadow: 6px 6px 0 var(--color-neutral-300); }
}
@media (prefers-reduced-motion: reduce) {
  .aics-marketing-view-home .aics-highlights__card { transition: none; }
}

/* Questions de la page : la présentation de la FAQ générale. */
.aics-questions.sp-faq-list { width: min(820px, 100%); }
.aics-question .aics-faq-item__answer > ul,
.aics-question .aics-faq-item__answer > ol { margin: 0; padding: 0 24px 24px 44px; color: var(--color-neutral-700); font-size: 16px; line-height: 1.6; }
.aics-question .aics-faq-item__answer > p + p { margin-top: -8px; }
.aics-question .aics-faq-item__answer a { color: var(--color-accent-700); }
.aics-question__summary { margin: 0; padding: 22px 24px; font-size: 18px; font-weight: 700; line-height: 1.3; }

/* Pages liées : le maillage entre pages d'atterrissage. */
.aics-related-pages { background: var(--c-amber-soft); }
.aics-related-pages .aics-related-pages__head h2 { margin: 0 0 28px; }
.aics-related-pages__head p { max-width: 60ch; margin: -12px 0 28px; color: var(--color-neutral-700); font-size: 18px; }
.aics-related-pages__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.aics-related-pages__item a { display: flex; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; border: var(--sp-border); background: #fff; padding: 24px; color: var(--color-text); text-decoration: none; }
.aics-related-pages__item strong { font-family: var(--sp-font-heading); font-size: 22px; font-weight: 800; line-height: 1.15; }
.aics-related-pages__item span { color: var(--color-neutral-700); font-size: 15px; line-height: 1.5; }
.aics-related-pages__item .aics-related-pages__more { margin-top: auto; color: var(--color-accent); font-size: 22px; font-weight: 700; }
.aics-related-pages__item a:hover { background: var(--color-accent); color: #fff; }
.aics-related-pages__item a:hover span,
.aics-related-pages__item a:hover .aics-related-pages__more { color: #fff; }
.aics-related-pages__item a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* --- Blog : la page « Blog » et ses articles ------------------------------
 * Même vocabulaire que la vitrine : filets fins, aplats de la charte,
 * angles droits. La liste (aics/blog-posts) et les « À lire aussi » de fin
 * d'article partagent une seule carte (BlogMarkup::card()). */

/* En-tête de la page Blog : celui des pages d'information, en pleine largeur
 * (la page Blog n'est pas dans le conteneur étroit .sp-info-page). */
.aics-blog-intro { padding-inline: max(var(--sp-gutter), (100% - var(--sp-max)) / 2); border-bottom: 1px solid var(--color-divider); }

.aics-blog-posts { padding-top: clamp(32px, 4vw, 48px); }
.aics-blog-posts__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(28px, 3.5vw, 40px); }
.aics-blog-posts__filter { border: 1px solid var(--color-divider); background: #fff; padding: 8px 14px; color: var(--color-text); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.aics-blog-posts__filter:hover { background: var(--color-accent-100); }
.aics-blog-posts__filter.is-active { background: var(--color-text); color: var(--color-bg); }
.aics-blog-posts__filter:focus-visible,
.aics-blog-posts__pages a:focus-visible,
.aics-blog-posts__step:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.aics-blog-posts__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
@media (min-width: 1024px) { .aics-blog-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Carte d'article. Sans image mise en avant : un aplat de la couleur de
 * l'article, frappé d'un disque plus clair — pas de dégradé ni de texture. */
.aics-blog-card { --tone: var(--c-violet); --tone-soft: var(--c-violet-soft); display: flex; flex-direction: column; min-width: 0; border: var(--sp-border); background: #fff; }
.aics-blog-card--teal { --tone: var(--c-teal); --tone-soft: var(--c-teal-soft); }
.aics-blog-card--amber { --tone: var(--c-amber); --tone-soft: var(--c-amber-soft); }
.aics-blog-card--coral { --tone: var(--color-accent); --tone-soft: var(--color-accent-100); }
.aics-blog-card__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: var(--sp-border); background: var(--tone); }
.aics-blog-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.aics-blog-card:hover .aics-blog-card__image { transform: scale(1.03); }
.aics-blog-card__placeholder { position: absolute; inset: 0; }
.aics-blog-card__placeholder::after { position: absolute; top: 50%; left: 50%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--tone-soft); content: ""; transform: translate(-50%, -50%); }
.aics-blog-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
/* L'étiquette de catégorie sert aussi dans l'en-tête d'article. */
.aics-blog-card__category { width: fit-content; background: var(--tone-soft, var(--color-accent-100)); padding: 4px 10px; color: var(--color-text); font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1.4; text-decoration: none; text-transform: uppercase; }
.aics-blog-card__category:hover { background: var(--color-text); color: var(--color-bg); }
.aics-blog-card .aics-blog-card__title { margin: 0; font-family: var(--sp-font-heading); font-size: 23px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
.aics-blog-card__title a { color: var(--color-text); text-decoration: none; }
.aics-blog-card__title a:hover { color: var(--color-accent-700); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.aics-blog-card__title a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.aics-blog-card__excerpt { margin: 0; color: var(--color-neutral-700); font-size: 16px; line-height: 1.55; }
.aics-blog-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding-top: 4px; color: var(--color-neutral-600); font-size: 14px; line-height: 1.4; }

/* Le dernier article, en grand, ouvre la première page de la liste. */
.aics-blog-card--featured { margin-bottom: 24px; }
@media (min-width: 900px) {
  .aics-blog-card--featured { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  /* L'image remplit la hauteur du texte sans l'imposer : une photo en
     portrait étirait sinon la carte sur tout l'écran. */
  .aics-blog-card--featured .aics-blog-card__media { min-height: 400px; aspect-ratio: auto; border-right: var(--sp-border); border-bottom: 0; }
  .aics-blog-card--featured .aics-blog-card__image { position: absolute; inset: 0; }
  .aics-blog-card--featured .aics-blog-card__body { justify-content: center; gap: 16px; padding: clamp(32px, 4vw, 56px); }
}
.aics-blog-card--featured .aics-blog-card__title { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.02em; }
.aics-blog-card--featured .aics-blog-card__excerpt { font-size: 18px; }

.aics-blog-posts__empty { display: flex; flex-direction: column; align-items: center; gap: 20px; border: var(--sp-border); background: #fff; padding: clamp(40px, 6vw, 72px) 24px; text-align: center; }
.aics-blog-posts__empty p { margin: 0; color: var(--color-neutral-700); font-size: 18px; }

.aics-blog-posts__pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: clamp(36px, 5vw, 56px); }
.aics-blog-posts__pages { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.aics-blog-posts__pages a,
.aics-blog-posts__pages span { display: grid; min-width: 44px; height: 44px; box-sizing: border-box; place-items: center; border: 1px solid var(--color-divider); background: #fff; color: var(--color-text); font-weight: 700; text-decoration: none; }
.aics-blog-posts__pages a:hover { background: var(--color-accent-100); }
.aics-blog-posts__pages [aria-current] { background: var(--color-text); color: var(--color-bg); }
.aics-blog-posts__step { color: var(--color-text); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.aics-blog-posts__step:hover { color: var(--color-accent-700); }

/* Article : en-tête centré, image de couverture, colonne de lecture. */
.aics-blog-article__header { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--sp-gutter) clamp(32px, 4vw, 48px); text-align: center; }
.aics-blog-article__breadcrumb { flex-wrap: wrap; justify-content: center; max-width: none; margin: 0 0 28px; padding: 0; }
.aics-blog-article__breadcrumb [aria-current] { overflow: hidden; max-width: 32ch; text-overflow: ellipsis; white-space: nowrap; }
.aics-blog-article__header .aics-blog-card__category { margin-bottom: 20px; }
.aics-blog-article .aics-blog-article__title { margin: 0; font-family: var(--sp-font-heading); font-size: clamp(36px, 5vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
.aics-blog-article__lead { max-width: 60ch; margin: 22px 0 0; color: var(--color-neutral-800); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; text-wrap: pretty; }
.aics-blog-article__meta { justify-content: center; margin-top: 24px; }
.aics-blog-article__cover { max-width: 1060px; margin: 0 auto clamp(40px, 5vw, 56px); padding: 0 var(--sp-gutter); }
/* Une photo en portrait occuperait tout l’écran avant le premier mot. */
.aics-blog-article__cover img { display: block; width: 100%; height: auto; max-height: min(70vh, 640px); border: var(--sp-border); object-fit: cover; }
.aics-blog-article__cover figcaption { margin-top: 10px; color: var(--color-neutral-600); font-size: 14px; text-align: center; }

/* Colonne de lecture (~68 caractères) ; les blocs « large » et « pleine
 * largeur » de Gutenberg en sortent. */
.aics-blog-article__content { padding: 0 var(--sp-gutter) clamp(56px, 7vw, 88px); }
.aics-blog-article__content > * { max-width: 720px; margin-inline: auto; }
.aics-blog-article__content > .alignwide { max-width: 1060px; }
.aics-blog-article__content > .alignfull { max-width: none; margin-inline: calc(-1 * var(--sp-gutter)); }
.aics-blog-article__content > p,
.aics-blog-article__content > ul li,
.aics-blog-article__content > ol li { color: var(--color-neutral-800); font-size: 18px; line-height: 1.7; }
.aics-blog-article__content > p { margin-block: 0 22px; }
.aics-blog-article__content > h2 { margin-block: 52px 16px; font-size: clamp(27px, 3vw, 36px); line-height: 1.1; letter-spacing: -.02em; }
.aics-blog-article__content > h3 { margin-block: 36px 12px; font-size: 23px; line-height: 1.2; }
.aics-blog-article__content > h2:first-child,
.aics-blog-article__content > h3:first-child { margin-top: 0; }
.aics-blog-article__content > ul,
.aics-blog-article__content > ol { margin-block: 0 26px; padding-left: 1.3em; }
.aics-blog-article__content li + li { margin-top: 8px; }
.aics-blog-article__content li::marker { color: var(--color-accent); font-weight: 700; }
/* Le design system remet `strong` à la graisse du texte (voir les blocs
 * éditoriaux) : un mot mis en valeur dans un article doit se voir. */
.aics-blog-article__content strong { font-weight: 700; }
.aics-blog-article__content a:not(.wp-block-button__link):not(.aics-button) { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
.aics-blog-article__content > blockquote,
.aics-blog-article__content > .wp-block-quote { margin-block: 36px; border-left: 6px solid var(--c-amber); padding: 4px 0 4px 22px; font-family: var(--sp-font-heading); font-size: 24px; line-height: 1.35; }
.aics-blog-article__content blockquote p { margin: 0; }
.aics-blog-article__content blockquote cite { display: block; margin-top: 10px; color: var(--color-neutral-600); font-family: var(--sp-font-body); font-size: 15px; font-style: normal; }
.aics-blog-article__content > .wp-block-image,
.aics-blog-article__content > figure { margin-block: 36px; }
.aics-blog-article__content .wp-block-image img { display: block; max-width: 100%; height: auto; border: var(--sp-border); }
.aics-blog-article__content figcaption { margin-top: 10px; color: var(--color-neutral-600); font-size: 14px; text-align: center; }
.aics-blog-article__content > .wp-block-buttons { margin-block: 32px; }
.aics-blog-article__content > hr { margin-block: 48px; border: 0; border-top: 1px solid var(--color-divider); }
/* Un bloc de la vitrine inséré dans un article garde sa propre mise en page. */
.aics-blog-article__content > [class*="wp-block-aics-"] { max-width: none; margin-inline: calc(-1 * var(--sp-gutter)); }

.aics-blog-related { background: var(--c-amber-soft); border-top: 1px solid var(--color-divider); }
.aics-blog-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.aics-blog-related .aics-blog-related__head h2 { margin: 0; }

@media (prefers-reduced-motion: reduce) { .aics-blog-card__image { transition: none; } .aics-blog-card:hover .aics-blog-card__image { transform: none; } }

/* --- Page introuvable et résultats de recherche ---------------------------
 * Gabarits de la vitrine (templates/not-found.php, search-results.php) : ils
 * tombaient sur le thème par défaut. Ils reprennent les cartes du blog et la
 * liste des « Pages liées ». */
.sp-info-intro > .aics-not-found__code { max-width: none; margin: 0 0 8px; color: var(--color-accent); font-family: var(--sp-font-heading); font-size: clamp(56px, 8vw, 96px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.aics-search-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; margin: 28px auto 0; }
.aics-search-form input[type="search"] { flex: 1 1 260px; min-height: 48px; box-sizing: border-box; border: 1px solid var(--color-neutral-500); border-radius: 0; background: #fff; padding: 0 14px; color: var(--color-text); font: inherit; font-size: 16px; }
.aics-search-form input[type="search"]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.aics-search-form .aics-button { min-height: 48px; }
.aics-search-intro__count { margin: 20px 0 0; color: var(--color-neutral-600); font-size: 15px; }
.aics-not-found__links,
.aics-search-results { margin-bottom: clamp(40px, 5vw, 56px); }
.aics-search-results h2 { margin: 0 0 20px; font-size: clamp(24px, 2.6vw, 32px); }
.aics-blog-posts__pages .page-numbers.dots { border-color: transparent; background: transparent; }
/* Libellé réservé aux lecteurs d'écran : le thème, qui le définissait, n'est
 * pas chargé par le gabarit de la vitrine. */
.aics-marketing-content .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* --- Page d'une histoire (templates/story-page.php) -------------------------
 * Chaque section porte son fond sur toute la largeur ; son contenu est tenu à
 * la largeur de la vitrine par le rembourrage, sans conteneur intermédiaire.
 * Aplats, filets fins de 1 px, angles droits : la charte des blocs. */
.aics-story { --story-inline: max(var(--sp-gutter), calc((100% - var(--sp-max)) / 2)); }
.aics-story__preview { margin: 0; border-bottom: 1px solid var(--color-divider); background: var(--c-amber-soft); padding: 10px var(--story-inline); font-size: 14px; font-weight: 700; }

.aics-story__hero { border-bottom: 1px solid var(--color-divider); background: var(--color-accent-100); }
.aics-story__hero-inner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: var(--sp-max); margin: 0 auto; padding: 0 var(--sp-gutter) clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .aics-story__hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.aics-story__breadcrumb { flex-wrap: wrap; margin: 0 0 28px; padding: 28px 0 0; }
.aics-story__breadcrumb [aria-current] { overflow: hidden; max-width: 32ch; text-overflow: ellipsis; white-space: nowrap; }
.aics-story__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--color-accent-700); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.aics-story__kicker .sp-badge { position: static; }
.aics-story .aics-story__title { margin: 0; font-family: var(--sp-font-heading); font-size: clamp(36px, 5vw, 62px); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
.aics-story__headline { max-width: 58ch; margin: 20px 0 0; color: var(--color-neutral-800); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; text-wrap: pretty; }
.aics-story__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
.aics-story__facts div { border: 1px solid var(--color-divider); background: #fff; padding: 8px 12px; }
.aics-story__facts dt { color: var(--color-neutral-600); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aics-story__facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; }
.aics-story__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Les actions secondaires restent lisibles sur les aplats lilas et sable. */
:is(.aics-story, .aics-story-related) .aics-button:not(.aics-button--primary):not(.aics-button--order) { border-color: var(--color-accent); background: #fff; color: var(--color-accent-700); }
:is(.aics-story, .aics-story-related) .aics-button:not(.aics-button--primary):not(.aics-button--order):hover { border-color: var(--color-accent-700); background: var(--color-accent-700); color: #fff; }
:is(.aics-story, .aics-story-related) .aics-button:not(.aics-button--primary):not(.aics-button--order):focus-visible { outline: 3px solid var(--color-accent-700); outline-offset: 3px; }
:is(.aics-story, .aics-story-related) .aics-button:not(.aics-button--primary):not(.aics-button--order):active { border-color: var(--color-accent-900); background: var(--color-accent-900); color: #fff; }
.aics-story__cover { margin: 0; padding-top: clamp(0px, 3vw, 28px); }
.aics-story__cover img { display: block; width: 100%; height: auto; max-height: min(72vh, 620px); border: var(--sp-border); background: #fff; object-fit: cover; }

.aics-story__section { padding: clamp(48px, 6vw, 80px) var(--story-inline); border-bottom: 1px solid var(--color-divider); }
.aics-story__section h2 { margin: 0 0 20px; font-family: var(--sp-font-heading); font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.aics-story__section h3 { margin: 32px 0 12px; font-family: var(--sp-font-heading); font-size: 22px; font-weight: 800; line-height: 1.2; }
.aics-story__section p { max-width: 64ch; margin: 0 0 16px; color: var(--color-neutral-800); font-size: 18px; line-height: 1.5; }

/* Pas de lettrine : la grande initiale flottante coupait le premier mot (« U n matin ») et déformait les lignes qui l'entourent. Le premier paragraphe, plus grand, ouvre le résumé. */
.aics-story__synopsis p:first-of-type { color: var(--color-text); font-size: 20px; line-height: 1.5; }

/* Aperçu 3D du livre (blocks/story-preview.js). */
.aics-story__book { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; background: var(--c-amber-soft); }
@media (min-width: 900px) { .aics-story__book { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.aics-story__book-cover { position: relative; display: block; width: min(100%, 420px); margin: 0 auto; padding: 0; border: var(--sp-border); background: #fff; box-shadow: 8px 8px 0 var(--color-neutral-300); color: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.aics-story__book-cover:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--color-neutral-300); }
.aics-story__book-cover:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 4px; }
.aics-story__book-cover img { display: block; width: 100%; height: auto; }
.aics-story__book-badge { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border: var(--sp-border); background: var(--color-accent); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.aics-story__book .aics-story__checklist { margin-bottom: 28px; }
.aics-story__section .aics-story__book-note { max-width: 56ch; margin: 20px 0 0; color: var(--color-neutral-700); font-size: 13px; line-height: 1.5; }
.aics-story__characters-grid { display: grid; gap: 28px 20px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.aics-story__character figure { margin: 0 0 14px; }
.aics-story__character img { display: block; width: 100%; height: auto; aspect-ratio: 1; border: var(--sp-border); object-fit: cover; }
.aics-story__character h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.aics-story__character p { margin: 0; font-size: 16px; line-height: 1.55; }
.aics-story__badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: var(--sp-border); background: var(--c-amber-soft); font-family: var(--sp-font-body, inherit); font-size: 12px; font-weight: 800; line-height: 1.4; letter-spacing: .02em; }
.aics-story__character.is-customizable img { outline: 3px solid var(--c-teal); outline-offset: -3px; }
/* Note de bas de section : petite, et nettement séparée des personnages. `.aics-story__section p` (18 px) l'emporterait sans ce sélecteur. */
.aics-story__section .aics-story__legend { max-width: none; margin: clamp(56px, 8vw, 104px) 0 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); }
.aics-story__gallery { min-width: 0; background: #fff; }
.aics-story__gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.aics-story__gallery-head h2 { margin: 0; }
.aics-story__slider-controls { display: flex; flex: none; gap: 8px; }
.aics-story__slider-controls[hidden] { display: none; }
.aics-story__slider-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: var(--sp-border); background: #fff; color: var(--color-text); font-size: 20px; line-height: 1; cursor: pointer; }
.aics-story__slider-button:hover:not(:disabled) { background: var(--c-amber-soft); box-shadow: 3px 3px 0 var(--color-neutral-300); }
.aics-story__slider-button:disabled { opacity: .35; cursor: default; }
.aics-story__slider-button:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; }
/* Une seule rangée qui défile : la section ne grandit plus avec le nombre de pages. */
.aics-story__slider { min-width: 0; max-width: 100%; display: flex; gap: 20px; margin: 0; padding: 0 0 14px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 0; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.aics-story__slider:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 4px; }
.aics-story__slide { flex: 0 0 clamp(220px, 24vw, 320px); margin: 0; scroll-snap-align: start; }
@media (max-width: 700px) { .aics-story__slide { flex-basis: 78%; } }
.aics-story__gallery figure { margin: 0; }
.aics-story__gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; border: var(--sp-border); object-fit: cover; }
.aics-story__gallery figcaption { margin-top: 10px; color: var(--color-neutral-700); font-size: 14px; line-height: 1.45; }
.aics-story__slide-style { display: block; margin-bottom: 2px; color: var(--color-text); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.aics-story__about { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .aics-story__about { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.aics-story__list { margin: 0; padding-left: 1.3em; }
.aics-story__list li { color: var(--color-neutral-800); font-size: 18px; line-height: 1.6; }
.aics-story__list li + li { margin-top: 8px; }
.aics-story__list li::marker { color: var(--color-accent); font-weight: 700; }
.aics-story__card { border: var(--sp-border); background: var(--c-amber-soft); padding: clamp(24px, 3vw, 36px); }
.aics-story__card h3 { margin-top: 0; }
.aics-story__checklist { margin: 0 0 24px; padding: 0; list-style: none; }
.aics-story__checklist li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.5; }
.aics-story__checklist li + li { margin-top: 10px; }
.aics-story__checklist li::before { position: absolute; top: 3px; left: 0; width: 18px; height: 18px; background: var(--c-teal); content: ""; clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }

.aics-story__style { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; background: var(--c-teal-soft); }
@media (min-width: 900px) { .aics-story__style { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.aics-story .aics-story__style-name { color: var(--color-text); font-size: 20px; font-weight: 800; }
.aics-story__style-preview { margin: 0; }
.aics-story__style-preview img,
.aics-story__style-preview .aics-story__style-preview-swatch { display: block; width: 100%; height: auto; max-height: 560px; aspect-ratio: 3 / 4; border: var(--sp-border); object-fit: cover; }
.aics-story__style-preview figcaption { display: grid; gap: 4px; margin-top: 14px; }
.aics-story__style-preview figcaption strong { font-family: var(--sp-font-heading); font-size: 20px; font-weight: 800; line-height: 1.2; }
.aics-story__style-preview figcaption span { color: var(--color-neutral-800); font-size: 16px; line-height: 1.5; }
.aics-story__styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.aics-story__styles li { display: block; min-width: 0; margin: 0; }
/* Une carte de style : un bouton, qui montre son exemple à droite. */
.aics-story__style-card { display: grid; grid-template-columns: minmax(0, 1fr); box-sizing: border-box; min-width: 0; gap: 6px; width: 100%; margin: 0; padding: 6px; border: 2px solid transparent; background: transparent; color: var(--color-text); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer; }
.aics-story__style-card:hover { border-color: var(--color-divider); background: #fff; }
.aics-story__style-card:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; }
.aics-story__style-card.is-active { border-color: var(--color-accent); background: #fff; box-shadow: 4px 4px 0 var(--color-neutral-300); }
.aics-story__style-card-tag { justify-self: start; max-width: 100%; box-sizing: border-box; white-space: nowrap; padding: 1px 4px; border: 1px solid var(--color-divider); background: var(--c-amber-soft); font-size: 9px; font-weight: 800; line-height: 1.4; text-transform: uppercase; letter-spacing: .03em; }
.aics-story__style-card img,
.aics-story__swatch { display: block; box-sizing: border-box; max-width: 100%; width: 100%; aspect-ratio: 3 / 4; border: 1px solid var(--color-divider); object-fit: cover; }

.aics-story__tags .sp-tags { margin: 0; }
.aics-story__keyword { display: inline-flex; background: var(--color-neutral-200); color: var(--color-text); cursor: default; }

.aics-story__faq details { max-width: 860px; border: 1px solid var(--color-divider); background: #fff; }
.aics-story__faq details + details { margin-top: 12px; }
.aics-story__faq summary { cursor: pointer; padding: 18px 22px; font-size: 18px; font-weight: 800; line-height: 1.35; }
.aics-story__faq summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.aics-story__faq details[open] summary { border-bottom: 1px solid var(--color-divider); }
.aics-story__faq details p { margin: 0; padding: 16px 22px; font-size: 17px; }
.aics-story__faq details p + p { padding-top: 0; }

.aics-story__closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: var(--color-accent); padding: clamp(40px, 5vw, 64px) var(--story-inline); color: #fff; }
.aics-story .aics-story__closing h2 { max-width: 30ch; margin: 0; color: #fff; font-family: var(--sp-font-heading); font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.1; }
.aics-marketing-content .aics-story__closing a.aics-button--primary { border-color: var(--color-bg); background: var(--color-bg); color: var(--color-text); }
.aics-marketing-content .aics-story__closing a.aics-button--primary:hover { border-color: var(--c-amber); background: var(--c-amber); }

.aics-story-related { background: var(--c-amber-soft); border-top: 1px solid var(--color-divider); padding-inline: max(var(--sp-gutter), calc((100% - var(--sp-max)) / 2)); }
.aics-story-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.aics-story-related .aics-story-related__head h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; }
.aics-story-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1180px) { .aics-story-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .aics-story-related__grid { grid-template-columns: 1fr; } }

/* Distribution de l'histoire : les rôles se lisent avant les filtres du catalogue. */
.sp-story-cast { margin: 0 0 18px; }
.sp-story-cast__label { display: block; margin-bottom: 8px; color: var(--color-neutral-700); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sp-story-cast__roles { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sp-story-cast__roles li { max-width: 100%; border: 1px solid var(--color-text); background: var(--c-amber-soft); padding: 6px 10px; color: var(--color-text); font-size: 13px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }

/* Le titre d'une carte du catalogue mène à la page de l'histoire, comme sa
   couverture. Il ne change pas au survol (demande du 2026-11-05). */
.sp-showcase-card__body h3 a,
.sp-showcase-card__body h2 a { color: inherit; text-decoration: none; }
.sp-apercu__more { display: inline-block; margin-top: 14px; }