/* Geodalia · page publique (index.html), assemblage de page au-dessus de Carbon.
   Composants et grille : Carbon (vendor/carbon.css, <cds-…>). Socle commun : base.css. Préfixe : pub-.
   Couleurs et espacements : uniquement des jetons --cds-* et --gd-* ; aucune couleur en dur. */

/* ========== En-tête (cds-header) ========== */
/* Boutons à droite de l'en-tête, pleine hauteur (48 px, comme les actions globales Carbon). */
.pub-entete-actions { display: flex; align-items: stretch; height: 100%; margin-inline-start: auto; }
.pub-court { display: none; }
@media (max-width: 41.98rem) {
  .pub-entete-connexion { display: none; }   /* « Se connecter » passe dans le menu */
  .pub-long { display: none; }
  .pub-court { display: inline; }
}

/* ========== Blocs communs ========== */
.pub-surtitre { margin: 0 0 var(--cds-spacing-05); color: var(--cds-text-secondary); }
.pub-discret { color: var(--cds-text-secondary); }
.pub-chapeau { margin: var(--cds-spacing-06) 0 0; color: var(--cds-text-secondary); max-width: 40rem; }
:where(.gd-page) :is(h1, h2, h3) { margin: 0; text-wrap: balance; }
:where(.gd-page) p { margin: 0; text-wrap: pretty; }

/* Sections : écart vertical --cds-spacing-12 (bureau) / --cds-spacing-10 (mobile), filet en tête. */
.pub-section, .pub-donnees {
  padding-block: var(--cds-spacing-12);
  border-top: 1px solid var(--cds-border-subtle-00);
}
/* Tête de section : titre court dans la colonne de gauche (4 colonnes, collé sous l'en-tête au défilement), contenu dans
   les 12 colonnes de droite. Sous 66 rem, le titre passe au-dessus du contenu. L'intro ouvre le contenu, alignée sur lui. */
.pub-tete { margin-bottom: var(--cds-spacing-07); }
/* Les classes col-span de Carbon posent display: block, qui écraserait la sous-grille. */
.pub-corps.cds--subgrid { display: grid; row-gap: var(--cds-spacing-07); align-content: start; }
.pub-intro { color: var(--cds-text-secondary); max-width: 40rem; }
@media (min-width: 66rem) {
  .pub-tete { margin-bottom: 0; position: sticky; top: calc(var(--gd-entete) + var(--cds-spacing-07)); align-self: start; }
}
@media (max-width: 41.98rem) {
  .pub-section, .pub-donnees { padding-block: var(--cds-spacing-10); }
  .pub-tete { margin-bottom: var(--cds-spacing-05); }
}

/* ========== Héros ========== */
.pub-hero { padding-block: var(--cds-spacing-10) var(--cds-spacing-12); }
.pub-hero .pub-accent { display: block; color: var(--cds-link-primary); }
.pub-hero .pub-chapeau { margin-top: var(--cds-spacing-06); }
.pub-hero .pub-ouverture { max-width: 40rem; margin: var(--cds-spacing-06) 0 0; }
.pub-actions { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-05); margin-top: var(--cds-spacing-07); }
.pub-faits {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--cds-spacing-05);
  margin: var(--cds-spacing-09) 0 0; padding: 0;
}
.pub-faits > div { padding: var(--cds-spacing-04) var(--cds-spacing-05) 0 0; border-top: 1px solid var(--cds-border-subtle-00); }
.pub-faits dt { color: var(--cds-text-secondary); }
.pub-faits dd { margin: var(--cds-spacing-02) 0 0; }
@media (min-width: 42rem) and (max-width: 65.98rem) {
  /* Texte du héros sur toute la largeur (md) : faits sur une ligne. */
  .pub-faits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 65.98rem) {
  .pub-hero-texte { margin-bottom: var(--cds-spacing-09); }
}
@media (max-width: 41.98rem) {
  .pub-hero { padding-block: var(--cds-spacing-07) var(--cds-spacing-10); }
  .pub-actions cds-button { flex: 1 1 100%; }
}

/* Curseur avant / après (maison : input range natif, --cut posé par public.js). */
.pub-ba-fig { margin-block: 0; min-width: 0; }
.pub-ba {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--cds-layer-01); outline: 1px solid var(--cds-border-subtle-00);
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.pub-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub-ba .pub-ba-apres { clip-path: inset(0 0 0 var(--cut, 50%)); }
.pub-ba-trait {
  position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; margin-left: -1px;
  background: var(--cds-button-primary); pointer-events: none;
}
.pub-ba-poignee {
  /* Bornée pour rester entière aux extrémités (0 et 100). */
  position: absolute; top: 50%; left: clamp(calc(var(--cds-spacing-09) / 2), var(--cut, 50%), calc(100% - var(--cds-spacing-09) / 2)); width: var(--cds-spacing-09); height: var(--cds-spacing-09);
  margin: calc(var(--cds-spacing-09) / -2) 0 0 calc(var(--cds-spacing-09) / -2);
  display: flex; align-items: center; justify-content: center; gap: 0;
  background: var(--cds-button-primary); color: var(--cds-text-on-color); pointer-events: none;
  transition: background-color 110ms cubic-bezier(.2, 0, .38, .9);
}
.pub-ba:hover .pub-ba-poignee { background: var(--cds-button-primary-hover); }
.pub-ba:active .pub-ba-poignee { background: var(--cds-button-primary-active); }
.pub-ba { cursor: ew-resize; }
/* Le glisser (souris et doigt) est géré par public.js sur toute l'image : un curseur natif ne réagit au toucher que sur
   son pouce (1 px ici), et iOS ignore les touchers sur la piste. Le champ reste pour le clavier et les lecteurs d'écran. */
.pub-ba input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
/* Pouce natif d'un pixel : la valeur suit exactement le pointeur (pas de décalage d'un demi-pouce). */
.pub-ba input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 100%; }
.pub-ba input::-moz-range-thumb { width: 1px; height: 100%; border: 0; }
/* Focus clavier : anneau Carbon (2 px --cds-focus) autour de l'image et filet intérieur sur la poignée. */
.pub-ba:has(input:focus-visible) { outline: 2px solid var(--cds-focus); outline-offset: 2px; }
.pub-ba:has(input:focus-visible) .pub-ba-poignee { box-shadow: inset 0 0 0 2px var(--cds-focus), inset 0 0 0 3px var(--cds-focus-inset); }
.pub-ba-etiquette {
  position: absolute; top: var(--cds-spacing-05); padding: var(--cds-spacing-02) var(--cds-spacing-03); pointer-events: none;
  background: var(--cds-background-inverse); color: var(--cds-text-inverse);
}
.pub-ba-etiquette--g { left: var(--cds-spacing-05); }
.pub-ba-etiquette--d { right: var(--cds-spacing-05); }
/* Thème sombre : rendu inversé sur fond sombre. invert(.912) amène le blanc du rendu à #161616 (--cds-background
   de Gray 100) ; hue-rotate(180deg) rend leur teinte aux classes. Les étiquettes restent en fond inversé, lisibles. */
@media (prefers-color-scheme: dark) { .pub-ba img { filter: invert(.912) hue-rotate(180deg); } }
.pub-legende { margin-top: var(--cds-spacing-05); grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.pub-ba-fig figcaption { margin-top: var(--cds-spacing-03); color: var(--cds-text-helper); }
@media (max-width: 41.98rem) {
  .pub-ba-etiquette { top: var(--cds-spacing-03); }
  .pub-ba-etiquette--g { left: var(--cds-spacing-03); }
  .pub-ba-etiquette--d { right: var(--cds-spacing-03); }
}

/* ========== Offres (cds-tile) ========== */
.pub-offre { display: flex; flex-direction: column; padding: var(--cds-spacing-07); }
.pub-offre-haut { display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-05); margin-bottom: var(--cds-spacing-06); }
.pub-offre h3 { margin-bottom: var(--cds-spacing-05); }
.pub-prix { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--cds-spacing-03) var(--cds-spacing-05); margin-bottom: var(--cds-spacing-07); }
.pub-prix p:last-child { color: var(--cds-text-secondary); padding-bottom: var(--cds-spacing-03); }
/* « Réservé aux professionnels » et l'offre de découverte, juste sous le prix. */
.pub-pro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-03); margin: calc(-1 * var(--cds-spacing-04)) 0 var(--cds-spacing-07); color: var(--cds-text-secondary); }
.pub-pro cds-tag { margin: 0; }
.pub-desc { margin-bottom: var(--cds-spacing-06); }
.pub-offre-bas { margin-top: auto; padding-top: var(--cds-spacing-07); }
@media (max-width: 41.98rem) {
  .pub-offre { padding: var(--cds-spacing-05); }
  .pub-offre-bas cds-button { width: 100%; }
}

/* Listes clé / valeur et tableau d'exemples (cds-structured-list). */
.pub-kv { margin-bottom: var(--cds-spacing-06); }
.pub-kv cds-structured-list-cell:first-child,
.pub-fiche cds-structured-list-cell:first-child {
  width: 30%; padding-inline-end: var(--cds-spacing-05);
  color: var(--cds-text-primary); font-weight: 600;
}
.pub-kv cds-structured-list-cell:last-child, .pub-fiche cds-structured-list-cell:last-child { color: var(--cds-text-secondary); }
.pub-fiche cds-structured-list-cell:first-child { width: 25%; }
.pub-exemples { margin-top: var(--cds-spacing-03); }
.pub-exemples > p:first-child { margin-bottom: var(--cds-spacing-03); }
.pub-exemples > p:last-child { margin-top: var(--cds-spacing-03); }
.pub-tableau .pub-nombre { text-align: end; }
/* L'en-tête Carbon pose block-size: 2.5rem en plus de ses marges internes (57 px) : hauteur au contenu. */
.pub-tableau cds-structured-list-header-cell { block-size: auto; padding-block: var(--cds-spacing-03); }
.pub-tableau :is(cds-structured-list-header-cell, cds-structured-list-cell):last-child { padding-inline-end: 0; }
.pub-legende-etroite { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); padding-block: var(--cds-spacing-02); }
@media (max-width: 41.98rem) {
  /* Étroit : libellé au-dessus de la valeur, qui prend toute la largeur. */
  :is(.pub-kv, .pub-fiche) :is(cds-structured-list-row, cds-structured-list-cell) { display: block; }
  :is(.pub-kv, .pub-fiche) cds-structured-list-cell:first-child { width: auto; padding-block-end: 0; }
  :is(.pub-kv, .pub-fiche) cds-structured-list-cell:last-child { border-block-start: 0; padding-block-start: var(--cds-spacing-02); }
}

/* Plan DXF (SVG maison, couleurs aux jetons). */
.pub-plan-fig { margin: 0 0 var(--cds-spacing-06); }
.pub-plan { margin-inline: calc(var(--cds-spacing-03) * -1); }
.pub-plan img { display: block; width: 100%; height: auto; }
.pub-calques { display: grid; gap: var(--cds-spacing-03); margin-top: var(--cds-spacing-04); color: var(--cds-text-secondary); }
.pub-calques-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cds-spacing-02) var(--cds-spacing-04); }
.pub-calques code { padding: 0; border: 0; background: none; color: var(--cds-text-primary); }

/* Liste d'attente du dessin DXF : dans un <cds-layer level="1"> pour que le champ prenne la couche au-dessus de la tuile. */
.pub-attente-couche { display: block; margin-top: auto; }
.pub-attente { padding-top: var(--cds-spacing-03); }
.pub-attente-libelle { margin-bottom: var(--cds-spacing-03); color: var(--cds-text-secondary); }
.pub-attente-ligne { display: flex; align-items: flex-start; }
.pub-attente-ligne cds-text-input { flex: 1 1 auto; min-width: 0; }
.pub-attente-ligne cds-button, .pub-attente-ligne cds-inline-loading { flex: none; }
.pub-attente-ligne cds-inline-loading { inline-size: auto; min-block-size: 2.5rem; padding-inline: var(--cds-spacing-05); }
.pub-attente cds-inline-notification { max-width: none; margin: var(--cds-spacing-05) 0 0; }
.pub-attente-ok { margin-top: var(--cds-spacing-05); }
.pub-attente-ok cds-inline-notification { margin: 0; }
.pub-attente-ok:focus { outline: none; }
.pub-attente-ok:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 1px; }

/* ========== Commande en 4 étapes ========== */
.pub-etapes { margin: 0; padding: 0; list-style: none; row-gap: var(--cds-spacing-07); }
.pub-etape { padding-top: var(--cds-spacing-05); border-top: 1px solid var(--cds-border-strong-01); }
.pub-etape h3 { margin: var(--cds-spacing-06) 0 var(--cds-spacing-03); }
.pub-etape p { color: var(--cds-text-secondary); max-width: 22rem; }

/* ========== Vos données (bandeau .cds--g100) ========== */
.pub-donnees { border-top: 0; }
@media (prefers-color-scheme: dark) {
  /* En sombre, le bandeau garde son rôle par ses deux filets. */
  .pub-donnees { background-color: var(--cds-layer-01); border-block: 1px solid var(--cds-border-subtle-01); }
}
.pub-engagement { margin-top: calc(var(--cds-spacing-07) * -1 + var(--cds-spacing-05)); }
.pub-points { margin: 0; row-gap: var(--cds-spacing-07); }
.pub-point { padding-top: var(--cds-spacing-05); border-top: 1px solid var(--cds-border-strong-01); }
.pub-point dd { margin: var(--cds-spacing-03) 0 0; color: var(--cds-text-secondary); max-width: 22rem; }

/* ========== Questions fréquentes (cds-accordion) ========== */
.pub-faq p { max-width: 40rem; }
/* Titres et réponses sur la verticale de la grille (le retrait de 16 px du composant est retiré). */
.pub-faq cds-accordion-item::part(title), .pub-faq cds-accordion-item::part(content) { padding-inline-start: 0; }
/* Questions sur deux lignes (mobile) : marge verticale dans la ligne de 48 px. */
.pub-faq cds-accordion-item::part(expando) { padding-block: var(--cds-spacing-03); }

/* ========== Pied de page (maison, sur la grille) ========== */
.pub-pied {
  padding-block: var(--cds-spacing-10) var(--cds-spacing-07);
  background: var(--cds-layer-01); border-top: 1px solid var(--cds-border-subtle-01);
}
.pub-pied .cds--css-grid { row-gap: var(--cds-spacing-07); }
/* Logo en bloc (sans ligne de texte autour) : son haut s'aligne sur celui des titres de colonne. */
.pub-pied-marque .gd-logo { display: flex; width: max-content; }
.pub-pied-marque p { margin-top: var(--cds-spacing-05); max-width: 18rem; }
.pub-pied-col h2 { margin-bottom: var(--cds-spacing-05); }
.pub-pied-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--cds-spacing-04); }
.pub-pied-col li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-03); color: var(--cds-text-secondary); }
.pub-pied-col a { color: var(--cds-link-primary); text-decoration: none; }
.pub-pied-col a:hover { text-decoration: underline; }
.pub-pied-bas {
  margin-top: var(--cds-spacing-07); padding-top: var(--cds-spacing-05);
  border-top: 1px solid var(--cds-border-subtle-01); color: var(--cds-text-helper);
}

/* Les classes de colonne Carbon (col-span) posent display:block : on rétablit la sous-grille. */
.pub-etapes.cds--subgrid, .pub-points.cds--subgrid { display: grid; }