/*
Theme Name:   Dumareau Saint-Saens
Theme URI:    https://etude-dumareau-saint-saens-bordeaux.notaires.fr/
Description:  Theme enfant Kadence pour l'etude notariale Dumareau Saint-Saens (Bordeaux). Identite : sceau bleu marine, creme chaud, or, Spectral. Toutes les polices et icones sont auto-hebergees (aucun appel CDN).
Author:       RR Consulting - Rodolphe Raffard
Author URI:   https://www.rr-consulting.fr/
Template:     kadence
Version:      0.1.0
Text Domain:  dumareau
*/

/* ==========================================================================
   1. POLICES AUTO-HEBERGEES
   Aucun appel a fonts.googleapis.com : profession reglementee, l'IP du
   visiteur ne doit pas partir chez un tiers (RGPD). Les .woff2 se posent
   dans assets/fonts/ - voir assets/fonts/README.md pour les recuperer.
   ========================================================================== */

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/spectral-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/hanken-grotesk-var.woff2') format('woff2-variations');
}

/* ==========================================================================
   2. JETONS DE DESIGN
   Source de verite = design/home-v3.html, palette "p-bleu" validee client
   le 29/07/2026. Ne pas reintroduire les variantes bordeaux et vert sapin.
   Les memes valeurs sont declarees dans theme.json pour l'editeur de blocs :
   toute modification doit etre reportee dans LES DEUX fichiers.
   ========================================================================== */

:root {
  --paper:  #f1ece0;
  --paper2: #e6dfce;
  --card:   #faf6ec;
  --ink:    #1f2533;
  --ink2:   #4d556a;
  --prim:   #20324f;
  --prim2:  #172539;
  --gold:   #a87b35;
  --gold2:  #c6a263;
  --line:   #d3cab4;
  --line2:  #e1d6bf;

  --radius-btn:  10px;
  --radius-card: 14px;
  --radius-img:  9px;

  /* DEUX LARGEURS, ET L'ECART EST VOULU - arbitre par Rodolphe le 06/08/2026.
     -----------------------------------------------------------------------
     `--wrap`         : l'en-tete et le pied de page. Large, la barre respire.
     `--wrap-contenu` : les sections. Plus etroit, la page reste une page.

     Ces deux valeurs avaient DEJA diverge, mais par accident et sans que
     personne le sache (1320 ecrit en dur dans `header.css`, 1140 dans
     `style.css`). Elles sont maintenant nommees : l'ecart se lit comme un
     choix, il se modifie a un seul endroit, et il ne peut plus deriver en
     silence.

     Ne pas confondre avec la LISIBILITE, qui ne se regle avec aucun des deux :
     la mesure des colonnes de texte a ses propres valeurs, plus bas. */
  --wrap:         1320px;
  --wrap-contenu: 1140px;

  /* RYTHME VERTICAL - LE SEUL ENDROIT A TOUCHER POUR RESPIRER PLUS OU MOINS.
     La maquette montait a 84px, juge trop lourd une fois en ligne : sur un
     ecran reel, l'espace se cumule avec celui des contenus, ce qu'une demo
     statique ne laisse pas voir. Toutes les sections en derivent, donc une
     seule valeur a changer pour reprendre tout le rythme de la page.
     Descendu de 60 a 50 le 07/08 (et le mobile de 40 a 33, meme ratio de 5/6)
     apres relecture de `/expertises/` : le vrai ecart entre deux sections
     n'est pas le padding seul mais padding + marge basse du dernier
     paragraphe, soit 76px la ou on croyait en lire 60. */
  --pad-section:    50px;
  --pad-section-sm: 37px;

  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-ui:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   2 bis. PONT KADENCE - LE BLOC LE PLUS IMPORTANT DU FICHIER
   --------------------------------------------------------------------------
   Kadence ne code AUCUNE couleur en dur : il dessine tout - boutons, titres,
   liens, en-tete, pied de page, navigation - a partir de ces variables. Tant
   qu'on ne les remappe pas, le site sort en bleu #2B6CB0 et gris #1A202C,
   c'est-a-dire la charte Kadence par defaut, quoi qu'on ecrive plus bas.

   POURQUOI CA GAGNE SANS UN SEUL !important : cette feuille est mise en file
   APRES le CSS de Kadence (verifie dans le <head> : Kadence en position 10,
   ce fichier en 15). A specificite egale sur :root, le dernier arrive gagne.
   La bagarre de selecteurs est donc inutile - et surtout elle serait a
   refaire a chaque composant.

   CONSEQUENCE HEUREUSE : tout ce qui sera monte plus tard dans le Customizer
   (en-tete, pied de page, menu) tombera automatiquement dans la charte, sans
   une ligne de CSS supplementaire. C'est ce qui rend l'ossature duplicable.

   Ne jamais regler ces couleurs dans le Customizer : elles vivraient en base
   de donnees, hors Git, non versionnees et non reproductibles sur un autre
   site. Ici elles sont dans un fichier, relisibles et duplicables.
   ========================================================================== */

:root {
  /* Accent : boutons, liens, elements actifs */
  --global-palette1: var(--prim);
  --global-palette2: var(--prim2);

  /* Titres et texte fort */
  --global-palette3: var(--ink);
  --global-palette4: var(--ink);

  /* Texte courant et discret */
  --global-palette5: var(--ink2);
  --global-palette6: var(--ink2);

  /* Fonds : alterne / page / carte */
  --global-palette7: var(--paper2);
  --global-palette8: var(--paper);
  --global-palette9: var(--card);
  --global-palette9rgb: 250, 246, 236;

  --global-palette-highlight:      var(--gold);
  --global-palette-highlight-alt:  var(--gold2);
  --global-palette-highlight-alt2: var(--card);

  /* Bouton principal : marine, texte creme, survol marine fonce */
  --global-palette-btn-bg:       var(--prim);
  --global-palette-btn-bg-hover: var(--prim2);
  --global-palette-btn:          var(--paper);
  --global-palette-btn-hover:    var(--paper);

  /* Bouton secondaire : contour or, survol plein or */
  --global-palette-btn-sec-bg:       transparent;
  --global-palette-btn-sec-bg-hover: var(--gold);
  --global-palette-btn-sec:          var(--ink);
  --global-palette-btn-sec-hover:    #fff;

  --global-body-font-family:        var(--font-ui);
  --global-heading-font-family:     var(--font-serif);
  --global-primary-nav-font-family: var(--font-ui);
  --global-fallback-font:           Georgia, serif;

  /* Largeurs : 1140 px de contenu et 40 px de marge laterale, comme la
     maquette (Kadence est a 1290/24 par defaut, nettement plus large).
     calc-content-width est recalculee ici : Kadence la fige avec 1290px en
     dur, donc redefinir la seule content-width ne suffirait pas et les
     alignements de blocs resteraient trop larges. */
  --global-content-width:        1140px;
  --global-content-edge-padding: 40px;
  --global-content-narrow-width: 760px;
  --global-content-wide-width:   calc(1140px + 200px);
  --global-calc-content-width:   calc(1140px - var(--global-content-edge-padding) - var(--global-content-edge-padding));
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

body {
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.sf {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(40px, 5.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.18;
}

/* --------------------------------------------------------------------------
   3.1 REPRISE DE L'HERITAGE COUPE PAR KADENCE
   --------------------------------------------------------------------------
   Le probleme, en une phrase : la charte pose la couleur sur la SECTION
   (`.dum-bandeau-rdv { color: var(--paper) }`) et laisse les titres en
   heriter, exactement comme la maquette. Mais Kadence declare `h2 { color }`
   DIRECTEMENT sur le titre - et une declaration directe bat toujours
   l'heritage, quelle que soit la specificite du parent. Resultat sans ce
   bloc : titre encre sur fond marine, illisible.

   DEUX REGLAGES DE SPECIFICITE, VOLONTAIRES, A NE PAS "SIMPLIFIER" :
   1. `:where(...)` ne pese rien, donc l'ensemble vaut 0,1,0 - la seule classe
      `.dum-section`. C'est assez pour battre le `h2` de Kadence (0,0,1).
   2. Ce bloc est place AVANT la section 5. Les regles de section y valent
      aussi 0,1,0 (`.dum-lede`, `.dum-surtitre`...) : a specificite egale le
      dernier gagne, donc elles gardent la main sur leurs couleurs propres.
      DEPLACER CE BLOC PLUS BAS DECOLORERAIT TOUTE LA PAGE.

   Les boutons sont exclus : ce sont des liens, ils portent leur propre
   couleur et l'heritage les rendrait invisibles sur leur fond.
   -------------------------------------------------------------------------- */

.dum-section :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote),
.dum-section :where(a:not(.wp-block-button__link)) {
  color: inherit;
}

/* TROISIEME MECANISME KADENCE : le rythme vertical des titres.
   `content.min.css` impose `margin: 1.5em 0 0.5em` a tous les titres via
   `.single-content h1...h6`, soit une specificite de 0,1,1 - superieure a une
   classe seule. Sur le H1 de la banniere, 1.5em valait 60px la ou la charte
   en demande 6 : c'est l'origine des "marges beaucoup trop grosses", et ca
   touchait potentiellement tous les titres du site.

   On remet le compteur a zero avec la MEME specificite (0,1,1 : une classe +
   un element, `:is()` prenant le poids de son argument). A egalite, le
   dernier charge gagne - c'est nous. Les regles de titre de la section 5,
   ecrites plus bas et elles aussi en 0,1,1, reprennent ensuite la main pour
   poser le vrai rythme de chaque section.

   REGLE A SUIVRE POUR TOUT NOUVEAU TITRE : le styler avec au moins une classe
   ET un element (`.dum-ma-section h2`), jamais une classe seule, sinon
   Kadence repasse devant. */
.dum-section :is(h1, h2, h3, h4, h5, h6) {
  margin-block: 0;
  margin-inline: 0;
}

/* `margin-inline: auto` UNIQUEMENT sur les titres enfants DIRECTS d'une
   section - et surtout pas sur tous.
   Pourquoi il en faut : la regle de Kadence est un RACCOURCI
   (`margin: 1.5em 0 .5em`), qui remet donc aussi les marges laterales a zero.
   Or c'est `margin-inline: auto`, pose par `.dum-section > *`, qui centre les
   blocs limites a 1140px. Sans lui, le titre du bandeau partait 142px trop a
   gauche des que l'ecran depassait 1140px.
   Pourquoi il ne faut pas l'etendre : dans un conteneur flex - les cartes de
   guides, d'annonces, de notaires - `margin: auto` empeche l'element de
   s'etirer. Le titre se reduit alors a la largeur de son texte et se centre,
   desaxe par rapport au surtitre et au resume juste en dessous. Le defaut ne
   se voit qu'en mobile, ou les titres sont plus courts que leur ligne.
   Les titres imbriques n'ont de toute facon rien a centrer : ce sont leurs
   conteneurs qui portent la largeur. */
.dum-section > :is(h1, h2, h3, h4, h5, h6) {
  margin-inline: auto;
}

/* QUATRIEME MECANISME : l'ecart entre blocs.
   Kadence pose `margin-bottom: var(--global-md-spacing)` (32px) sur TOUS les
   elements de contenu - pas seulement les sections : 79 elements en etaient
   porteurs, y compris les lignes d'expertise, les cartes et les colonnes.
   D'ou les bandes de fond entre les aplats et les espacements doubles.

   Meme specificite que Kadence (0,1,1 : une classe + un element ou une
   classe), et cette feuille est chargee apres, donc on gagne. Les regles de
   la section 5 sont, elles, toutes en 0,2,x depuis la reprise du 05/08 :
   elles repassent devant et reposent le vrai rythme.

   DOCTRINE : dans une section, l'espacement se fait au PADDING et au GAP.
   La marge est reservee aux exceptions, et doit alors etre ecrite en 0,2,x. */
.dum-section :is(p, ul, ol, figure, blockquote, hr, address, table, div),
.dum-section :is(.wp-block-group, .wp-block-columns, .wp-block-column),
.dum-section :is(.wp-block-buttons, .wp-block-image, .wp-block-separator) {
  margin-block: 0;
}

/* Les images demandent un cran de plus : Kadence les vise avec
   `.single-content figure.wp-block-image`, soit 0,2,1 - au-dessus de tout ce
   qui precede. On s'aligne exactement (classe + classe + element) et on
   gagne par l'ordre de chargement. C'est le sous-cas le plus specifique
   rencontre ; s'il en apparait d'autres, la methode est la meme : relever la
   regle adverse dans les outils du navigateur et l'egaler, sans surenchere. */
.dum-section figure.wp-block-image {
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   3.2 CONFORT DE LECTURE ET ACCESSIBILITE
   Absents de la maquette, qui est une demo statique. Sur un site reel ils ne
   sont pas optionnels - en particulier pour une profession reglementee.
   -------------------------------------------------------------------------- */

/* Repartit les mots sur les lignes d'un titre au lieu de laisser une veuve
   d'un mot en derniere ligne. C'est ce qui fait qu'un titre sur trois lignes
   a l'air compose plutot que casse au hasard. */
:where(h1, h2, h3) {
  text-wrap: balance;
}

:where(p, li) {
  text-wrap: pretty;
}

/* Le contour du navigateur est invisible sur nos fonds creme. Un anneau or,
   visible au clavier uniquement (:focus-visible, pas :focus) : la souris ne
   le declenche pas. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

html {
  scroll-behavior: smooth;
}

/* Respecte le reglage systeme "reduire les animations" (vestibulaire, ou
   simple preference). Les etats restent, seul le mouvement disparait. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   4. COMPOSANTS
   Rythme par coupures de couleur (creme / pierre / encre), aplats PLEINS.
   ZERO degrade, zero texture sur les aplats : arbitrage client, ne pas
   reintroduire.
   ========================================================================== */

/* Bouton principal. La couleur est posee ICI et pas laissee a theme.json :
   Kadence emet son propre CSS de bouton APRES les styles globaux issus de
   theme.json, donc une couleur declaree la-bas seule est ecrasee - c'est
   exactement ce qui sortait le bouton en bleu Kadence #2B6CB0.
   Le pont (section 2 bis) suffirait maintenant a le colorer correctement,
   mais on l'ecrit quand meme en clair : l'apparence d'un composant de charte
   ne doit pas dependre de la facon dont le theme parent lit ses variables. */
.btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--radius-btn);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  background: var(--prim);
  color: var(--paper);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover,
.wp-block-button__link:hover {
  background: var(--prim2);
  color: var(--paper);
  transform: translateY(-1px);
}

.btn:active,
.wp-block-button__link:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Bouton « retour en haut »
   Discret : creme et filet or, il ne rivalise pas avec les boutons d'action
   de la page. Il ne devient marine plein qu'au survol.
   -------------------------------------------------------------------------- */

.dum-haut {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40; /* sous l'en-tete collant (50), au-dessus du contenu */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--card);
  color: var(--prim);
  font-size: 17px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(31, 37, 51, 0.16);

  /* Etat par defaut : efface. `visibility` en plus de l'opacite, sinon le
     bouton reste cliquable une fois transparent. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s,
              background 0.2s ease, color 0.2s ease;
}

.dum-haut.est-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dum-haut:hover {
  background: var(--prim);
  color: var(--paper);
  border-color: var(--prim);
}

/* `hidden` est pose dans le balisage et retire par le JavaScript : sans cette
   regle, le navigateur l'ignorerait des qu'on fixe un `display`. */
.dum-haut[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .dum-haut {
    right: 14px;
    bottom: 14px;
  }
}

/* Sceau a double anneau (motif cire) - marqueur d'identite, header et footer */
.seal {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.seal::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.45;
}

/* Lettrine de l'edito.
   Produite par ::first-letter, jamais en isolant la lettre dans le texte :
   la mise en forme doit survivre a une reecriture du paragraphe. */
.dum-lettrine::first-letter {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--prim);
  float: left;
  font-size: 62px;
  line-height: 0.82;
  padding: 7px 12px 0 0;
}

/* --------------------------------------------------------------------------
   Actualites (flux RSS des Notaires de France, plugin dumareau-flux)
   -------------------------------------------------------------------------- */

.dum-actus__head {
  margin-bottom: 32px;
}

.dum-actus__source {
  color: var(--ink2);
  font-size: 14px;
  margin-top: 6px;
}

.dum-actus__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.dum-actus__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dum-actus__date {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.02em;
}

/* Ligne de provenance : date, source. Elle est portee par CHAQUE carte depuis
   le 07/08, et pas seulement par le titre de section - celui-ci est masque
   sur `/actualites/`, et la page affichait douze articles sans dire d'ou ils
   venaient. */
.dum-actus__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink2);
  margin-block: 0;
}

.dum-actus__origine {
  color: var(--gold);
}

/* Une puce entre la date et la source, dessinee plutot qu'ecrite : elle
   disparait avec la date quand le flux n'en fournit pas. */
.dum-actus__origine::before {
  content: "\00b7";
  margin-inline-end: 8px;
}

.dum-actus__titre {
  font-size: 19px;
  line-height: 1.3;
  margin-block: 0;
}

.dum-actus__resume {
  color: var(--ink2);
  font-size: 15px;
  margin-block: 0;
}

/* Pousse le lien en bas quelle que soit la longueur du resume : les cartes
   d'une meme ligne gardent leurs liens alignes. */
.dum-actus__lien {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--prim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dum-actus__lien:hover {
  color: var(--gold);
}

.dum-actus__lien:hover .dum-actus__ext {
  transform: translateX(3px);
}

.dum-actus__ext {
  transition: transform 0.2s;
}

.dum-actus--repli {
  color: var(--ink2);
}

/* Zone d'endossement de l'embleme officiel "Notaire" : il reste VISIBLE
   (repere de confiance recherche par le public) mais isole du logo. */
.ndf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 8px 13px;
}

/* ==========================================================================
   5. COMPOSITIONS DE LA HOME (block patterns)
   Traduction de design/home-v3.html en blocs Gutenberg. Les compositions
   vivent dans /patterns et ne contiennent QUE de la structure : toute la
   mise en forme est ici, pour que l'equipe puisse reecrire les textes sans
   pouvoir casser le design.
   Convention : .dum-<section>__<element>, une seule enveloppe .dum-section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 Enveloppe commune
   Les sections sont en pleine largeur (alignfull) pour que les aplats de
   couleur fassent bande d'un bord a l'autre. C'est le contenu qui est
   recentre a 1140 px, pas la section.
   PREREQUIS : la page doit etre en mise en page "pleine largeur" dans
   Kadence (Reglages de la page > Mise en page), sinon alignfull est bride.
   -------------------------------------------------------------------------- */

/* QUATRIEME MECANISME KADENCE : l'ecart entre blocs.
   `content.min.css` pose `margin-bottom: var(--global-md-spacing)` (32px) sur
   les elements de contenu via `.single-content <element>`, soit 0,1,1 - encore
   une specificite superieure a une classe seule. Resultat : une bande de fond
   creme de 32px entre CHAQUE aplat de couleur, qui casse net le rythme par
   coupures. C'est l'origine des « espaces blancs entre les blocs ».

   Classe doublee volontairement (0,2,0) plutot qu'un `div.dum-section` :
   la regle tient meme si une section devient un jour autre chose qu'un div.
   Les sections doivent se toucher bord a bord - tout l'espacement passe par
   le padding, jamais par la marge. */
.dum-section.dum-section {
  padding-block: var(--pad-section);
  margin-block: 0;

  /* ON NEUTRALISE `alignfull` DE KADENCE, ET C'EST CE QUI REGLE LE CENTRAGE.
     Kadence fait deborder les blocs pleine largeur avec
     `margin-inline: calc(50% - 100vw/2)`. Or `100vw` COMPREND la barre de
     defilement, pas le conteneur : la section partait donc 4px trop a gauche
     et finissait 11px trop tot a droite. Tout le contenu centre a l'interieur
     heritait de ce decalage - d'ou l'impression que « rien n'est centre »,
     alors que `text-align: center` etait bien la.
     Nos sections n'ont aucun besoin de ce mecanisme : la page est reglee en
     pleine largeur non encadree, le conteneur fait deja toute la largeur. */
  margin-inline: 0;
  width: 100%;
  max-width: 100%;
}

.dum-section > * {
  max-width: var(--wrap-contenu);
  margin-left: auto;
  margin-right: auto;
  padding-inline: 40px;
}

/* Les grilles de la home sont pilotees ici, pas par les reglages de colonnes
   de l'editeur : les proportions font partie de la charte. */
.dum-section .wp-block-columns {
  display: grid;
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   5.2 Elements partages
   -------------------------------------------------------------------------- */

.dum-section .dum-surtitre {
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-block: 0;
}

/* Filet + point : le marqueur discret repris sur toutes les sections d'ouverture. */
.dum-section .dum-filet {
  position: relative;
  border: 0;
  height: 1px;
  width: 46px;
  background: var(--gold);
  margin-block: 18px 6px;
  /* WordPress centre les separateurs (`.wp-block-separator` a margin auto).
     Le filet est un repere aligne sur le bord gauche de la colonne : il faut
     donc annuler ce centrage explicitement. L ancien raccourci `margin: 18px
     0 6px` le faisait sans le dire ; en passant en `margin-block` pour ne pas
     casser les centrages ailleurs, il a fallu le rendre explicite ici. */
  margin-inline: 0;
  opacity: 1;
}

.dum-section .dum-filet::after {
  content: "";
  position: absolute;
  right: -12px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.dum-section .dum-lede {
  font-size: 18px;
  color: var(--ink2);
  max-width: 36ch;
  line-height: 1.6;
}

.dum-section .dum-actions.wp-block-buttons {
  gap: 14px;
  flex-wrap: wrap;
}

/* Bouton centre SOUS une grille de cartes, plutot que dans l'en-tete de
   section. Utilise sur la home (annonces, guides) : l'oeil s'arrete la apres
   avoir regarde les cartes, remonter chercher un lien est moins naturel. */
.dum-section .dum-actions--centre.wp-block-buttons {
  justify-content: center;
  margin-block: 36px 0;
}

/* Bouton secondaire : contour or, fond transparent. */
.dum-section .dum-btn--or .wp-block-button__link {
  background: transparent;
  border-color: var(--gold);
  color: var(--ink);
}

.dum-section .dum-btn--or .wp-block-button__link:hover {
  background: var(--gold);
  color: #fff;
}

/* Tetes de section */
.dum-section .dum-section__tete h2 {
  margin-top: 12px;
}

.dum-section .dum-section__tete--centre {
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 44px;
}

.dum-section .dum-section__tete--barre {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Carte generique (equipe, guides, annonces) */
.dum-section .dum-carte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: 0.2s;
}

/* Fleche des liens de lecture : posee en CSS pour que le texte du lien reste
   propre a editer (pas de caractere decoratif dans le contenu). */
.dum-section .dum-expertise__lien a::after,
.dum-section .dum-guide__lien a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 7px;
  transition: transform 0.2s;
}

.dum-section .dum-expertise:hover .dum-expertise__lien a::after,
.dum-section .dum-guide:hover .dum-guide__lien a::after {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   5.3 Banniere principale
   -------------------------------------------------------------------------- */

.dum-section.dum-hero {
  padding-block: var(--pad-section) 0;
}

.dum-section .dum-hero__grille {
  grid-template-columns: 1.12fr 0.88fr;
  gap: 56px;
  align-items: center;
}

/* 16ch et pas les 13ch de la maquette : a 60px, 13ch cassait l'accroche en
   CINQ lignes dans une colonne qui en offre 562. Trois effets d'un coup -
   le titre respire, la banniere gagne 127px de hauteur, et `text-wrap:
   balance` se declenche enfin (Chrome le desactive au-dela de quatre lignes,
   par cout de calcul). La taille du titre, elle, ne bouge pas : la charte
   est conservee, c'est la gouttiere qui etait trop serree. */
/* Selecteur volontairement double (`.dum-hero .dum-hero__titre`, soit 0,2,0)
   et non la classe seule : c'etait LE titre que Kadence emportait, faute de
   specificite suffisante face a `.single-content h1`. Ne pas le "simplifier". */
.dum-section.dum-hero .dum-hero__titre {
  /* 20ch et non 16, aligne sur `.dum-page-hero__titre` qui porte deja cette
     valeur sur les 12 autres pages.
     -------------------------------------------------------------------------
     16ch avait ete cale sur l'accroche d'origine (52 caracteres, 3 lignes).
     L'accroche SEO du 07/08 en fait 59 : a 16ch elle tombait a 4 lignes et
     poussait les boutons sous la ligne de flottaison sur un ecran large et
     court. MESURE, pas devine : a 16 et 17ch le titre fait 4 lignes, a partir
     de 18ch il en fait 3. 20ch prend donc la marche avec de la tolerance.

     REDUIRE LA TAILLE DE POLICE NE SERT A RIEN ICI, et c'est contre-intuitif :
     `ch` est relatif a la police, donc la colonne retrecit exactement au meme
     rythme que le texte. Mesure a 1850px : de 60px a 38px, le titre reste a
     5 lignes, il devient seulement plus petit. Le nombre de lignes se pilote
     par le `max-width` ou par la longueur du texte, jamais par `font-size`.

     En pratique le cap ne mord qu'au-dela de ~1500px : en dessous, c'est la
     colonne du hero (562px) qui limite avant lui. */
  max-width: 20ch;
  /* 22px de marge haute et non 6 : l accroche commence par un « A » accentue,
     dont l accent remonte au-dessus de sa ligne parce que l interlignage est
     serre (1,06). Avec 6px, le glyphe mordait sur le filet or place juste
     au-dessus. Toute accroche commencant par une capitale accentuee (A, E, E)
     pose le meme probleme : ne pas redescendre cette valeur. */
  margin-block: 22px 22px;
  /* Aligne a gauche, PAS centre : la neutralisation des titres pose
     `margin-inline: auto` pour recentrer ceux des sections centrees (bandeau,
     tetes centrees). Ce titre-ci a un `max-width` de 16ch et vit dans une
     colonne alignee a gauche : auto le decalerait vers le milieu de sa colonne,
     desaxe par rapport au surtitre et a l accroche juste en dessous. */
  margin-inline: 0;
}

.dum-section .dum-hero__texte .dum-lede {
  margin-bottom: 30px;
}

.dum-section .dum-hero__visuel {
  position: relative;
}

/* Le "passe-partout" creme autour de la photo : c'est lui qui donne
   l'impression d'un tirage encadre plutot que d'une image collee. */
.dum-section .dum-figure {
  position: relative;
  margin-block: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px;
}

.dum-section .dum-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.5;
  object-fit: cover;
  border-radius: var(--radius-img);
  background: var(--prim);
}

.dum-section .dum-figure figcaption {
  position: absolute;
  left: 13px;
  bottom: 13px;
  margin-block: 0;
  background: var(--ink);
  color: #e7d8bf;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  padding: 11px 15px;
  border-bottom-left-radius: var(--radius-img);
  border-top-right-radius: var(--radius-img);
}

.dum-section .dum-figure__sceau {
  position: absolute;
  top: -28px;
  right: -28px;
  width: 130px;
  margin-block: 0;
  filter: drop-shadow(0 10px 26px rgba(31, 37, 51, 0.25));
}

.dum-section .dum-figure__sceau img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   5.4 Bandeau de confiance
   -------------------------------------------------------------------------- */

.dum-section.dum-confiance {
  padding-block: 12px;
  margin-top: 54px;
  background: var(--paper2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.dum-section .dum-confiance__liste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 30px;
  flex-wrap: wrap;
  min-height: 62px;
}

.dum-section .dum-confiance__liste p {
  position: relative;
  margin-block: 0;
  font-size: 13px;
  color: var(--ink2);
}

.dum-section .dum-confiance__liste strong {
  color: var(--ink);
}

/* Le point dore est un separateur, pas du contenu : ajouter ou retirer une
   mention ne demande donc aucune retouche. */
.dum-section .dum-confiance__liste p:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -17px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   5.5 Le mot de l'etude
   -------------------------------------------------------------------------- */

.dum-section.dum-edito {
  padding-block: var(--pad-section) var(--pad-section-sm);
}

.dum-section .dum-edito__grille {
  grid-template-columns: 0.42fr 0.58fr;
  gap: 54px;
  align-items: start;
}

.dum-section .dum-edito__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--prim);
  margin-block: 0;
}

.dum-section.dum-edito h2 {
  margin-top: 14px;
}

.dum-section.dum-edito p:not(.dum-edito__label) {
  font-size: 16.5px;
  color: var(--ink2);
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   5.6 Reperes chiffres
   -------------------------------------------------------------------------- */

.dum-section.dum-reperes {
  padding-block: 0;
  background: var(--ink);
  color: #e7d8bf;
}

.dum-section.dum-reperes > * {
  padding-inline: 0;
}

.dum-section .dum-reperes__grille {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.dum-section .dum-repere {
  padding: 38px 26px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.dum-section .dum-repere:first-child {
  border-left: none;
}

.dum-section .dum-repere__chiffre {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--gold2);
  line-height: 1;
  margin-block: 0;
}

.dum-section .dum-repere__libelle {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: rgba(231, 216, 191, 0.72);
  margin-block: 9px 0;
}

/* --------------------------------------------------------------------------
   5.7 Expertises
   -------------------------------------------------------------------------- */

.dum-section.dum-expertises {
  padding-block: var(--pad-section);
  background: var(--paper2);
}

.dum-section.dum-expertises .dum-section__tete {
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 8px;
}

.dum-section .dum-expertise {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  border-bottom: 1px solid var(--line2);
  padding-block: 26px;
  transition: 0.2s;
}

.dum-section .dum-expertise:hover {
  background: var(--card);
  border-color: transparent;
  border-radius: 12px;
}

.dum-section .dum-expertise__no {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--gold);
  width: 46px;
  margin-block: 0;
}

.dum-section .dum-expertise__corps h3 {
  font-size: 23px;
  margin-block: 0;
}

.dum-section .dum-expertise__corps p {
  color: var(--ink2);
  font-size: 15px;
  margin-block: 3px 0;
}

.dum-section .dum-expertise__lien {
  margin-block: 0;
  white-space: nowrap;
}

.dum-section .dum-expertise__lien a {
  color: var(--prim);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   5.8 Equipe
   -------------------------------------------------------------------------- */

.dum-section.dum-equipe {
  background: var(--paper);
}

.dum-section .dum-cartes {
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.dum-section .dum-carte--notaire {
  padding: 36px 28px;
  text-align: center;
}

.dum-section .dum-carte--notaire:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}

/* Pastille d'initiales : tient lieu de portrait tant que le shooting photo
   n'est pas fait. Remplacer par un bloc Image le jour ou les portraits
   arrivent, le reste de la carte ne bouge pas. */
.dum-section .dum-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--prim);
  border: 1.5px solid var(--gold);
  color: var(--gold2);
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
}

.dum-section .dum-avatar::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.4;
}

.dum-section .dum-carte--notaire h3 {
  font-size: 21px;
  margin-block: 0;
}

.dum-section .dum-carte__role {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-block: 8px 12px;
}

.dum-section .dum-carte--notaire p:not(.dum-carte__role):not(.dum-avatar) {
  font-size: 14.5px;
  color: var(--ink2);
  margin-block: 0;
}

/* Mention de l'equipe au-dela des trois associes. La source
   (contenu-source/texte/01-presentation-office.md) decrit une equipe de
   notaires, diplomes notaires et collaborateurs : sans cette ligne, les trois
   cartes laissent croire que l'etude s'arrete la. Elle disparaitra le jour ou
   Victor donnera la liste nominative et que /equipe/ pourra les afficher.
   Marge alignee sur le gap de 26px des cartes (cf piege n 11 : une grille de
   cartes ne pilote pas l'ecart de ce qui la suit). */
.dum-section .dum-equipe__mention {
  margin-block: 26px 0;
  font-size: 14.5px;
  color: var(--ink2);
}

/* --------------------------------------------------------------------------
   5.9 Annonces immobilieres
   Ces classes seront reprises telles quelles par le rendu dynamique du flux
   immobilier.notaires.fr (lot 3) : ne pas les renommer.
   -------------------------------------------------------------------------- */

.dum-section.dum-annonces {
  background: var(--paper2);
}

.dum-section .dum-bien {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 0 20px;
  /* Ancre de la zone cliquable ci-dessous. */
  position: relative;
}

/* CARTE ENTIEREMENT CLIQUABLE, AVEC UN SEUL VRAI LIEN DANS LE BALISAGE.
   La carte se souleve au survol depuis le premier jour : elle a l'air
   cliquable, elle ne l'etait que sur son titre. Le `::after` du lien de titre
   couvre la carte entiere.
   NE PAS remplacer par une balise `<a>` enveloppant toute la carte : un lecteur
   d'ecran lirait alors le type, le prix, la ville et les caracteristiques comme
   un seul libelle de lien, illisible d'un bout a l'autre. Ici le lien reste le
   titre, et rien ne change ni pour l'assistance technique ni pour les moteurs.
   Le lien « Voir le bien » et l'image mènent au meme endroit : passer par-dessus
   eux est sans consequence. */
.dum-section .dum-bien h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.dum-section .dum-bien:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(31, 37, 51, 0.1);
}

.dum-section .dum-bien > * {
  padding-inline: 20px;
}

.dum-section .dum-bien__photo {
  margin-block: 0;
  padding-inline: 0;
}

.dum-section .dum-bien__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--prim);
}

/* L'etiquette chevauche le bas de la photo : remontee par marge negative
   plutot que par un positionnement absolu, qui casserait des que la hauteur
   de la photo change (les visuels du flux ne sont pas calibres). */
.dum-section .dum-bien__type {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin-block: -42px 14px;
  margin-inline: 20px 0;
  padding: 5px 11px;
  background: var(--gold);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
}

.dum-section .dum-bien__prix {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--prim);
  margin-block: 0;
}

.dum-section .dum-bien h3 {
  font-family: var(--font-ui);
  font-size: 15.5px;
  letter-spacing: 0;
  margin-block: 5px 14px;
}

.dum-section .dum-bien__specs {
  border-top: 1px solid var(--line2);
  padding-top: 13px;
  font-size: 13px;
  color: var(--ink2);
  margin: auto 0 0;
}

.dum-section .dum-bien__specs strong {
  color: var(--ink);
}

.dum-section .dum-annonces__note {
  text-align: center;
  font-size: 13px;
  color: var(--ink2);
  margin-top: 28px;
}

.dum-section .dum-annonces__note strong {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   5.10 Guides pratiques
   -------------------------------------------------------------------------- */

.dum-section.dum-guides {
  background: var(--paper);
}

.dum-section.dum-guides .dum-section__tete {
  margin-bottom: 42px;
}

.dum-section .dum-guide {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  /* Ancre de la zone cliquable ci-dessous. */
  position: relative;
}

/* ESPACE ENTRE DEUX RANGEES DE CARTES - correctif du 07/08/2026.
   --------------------------------------------------------------------------
   Rodolphe : « elles sont collees ». Mesure : **26px a l'horizontale, 0 a la
   verticale.**
   CAUSE, ET C'EST CE QUI TROMPE : les quatre guides ne forment PAS une seule
   grille de deux rangees, mais DEUX blocs `.dum-cartes` empiles (deux blocs
   « Colonnes » distincts dans la composition). Le `gap: 26px` ne joue donc
   qu'A L'INTERIEUR de chaque bloc, jamais entre eux - et le reset du theme
   met les marges des `div` de section a zero, d'ou deux rangees qui se
   touchent.
   La valeur reprend exactement le `gap` horizontal : l'ensemble se lit alors
   comme une seule grille reguliere, ce qu'il n'est pas.
   PREMIERE TENTATIVE ECARTEE : j'avais d'abord aere l'INTERIEUR des cartes
   (padding et rythme), ce qui ne repondait pas a la demande - annule. */
.dum-section .dum-cartes + .dum-cartes {
  margin-block-start: 26px;
}

/* DEUXIEME TETE DE SECTION APRES UNE GRILLE (pose le 18/08/2026 pour les
   notaires salaries de `/equipe/`). `.dum-section__tete--centre` ne porte
   qu'un `margin-bottom` : une seconde tete placee sous une grille se collait
   a elle. La marge HAUTE doit rester plus grande que la basse (44px), sinon
   le titre se rattache visuellement a la grille du DESSUS au lieu de celle
   qu'il annonce. */
.dum-section .dum-cartes + .dum-section__tete--centre {
  margin-block-start: 62px;
}

/* CARTE ENTIEREMENT CLIQUABLE, MEME METHODE QUE `.dum-bien` ET `.dum-lien`.
   Dernier des trois composants a la recevoir (07/08/2026) : la carte se
   souleve au survol depuis le premier jour, elle avait donc l'air cliquable
   sans l'etre ailleurs que sur son lien de bas de carte.
   `::before` ET NON `::after` : l'`::after` du lien porte deja la fleche
   (encadre 5.2 de ce fichier). Meme contrainte que sur `.dum-lien`, dont
   l'`::after` portait la fleche de lien sortant.
   UN SEUL VRAI LIEN DANS LE BALISAGE : ne pas envelopper la carte dans un
   `<a>`, un lecteur d'ecran lirait la categorie, le titre, le resume et le
   libelle comme un seul libelle de lien. */
.dum-section .dum-guide .dum-guide__lien a::before {
  content: "";
  position: absolute;
  inset: 0;
}

.dum-section .dum-guide:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.dum-section .dum-guide__categorie {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-block: 0;
}

.dum-section .dum-guide h3 {
  font-size: 20px;
  line-height: 1.3;
  margin-block: 12px 10px;
}

.dum-section .dum-guide p:not(.dum-guide__categorie):not(.dum-guide__lien) {
  font-size: 14.5px;
  color: var(--ink2);
  margin-block: 0 16px;
}

/* Aligne les liens de lecture sur une meme ligne quelle que soit la longueur
   du resume. */
.dum-section .dum-guide__lien {
  margin: auto 0 0;
}

.dum-section .dum-guide__lien a {
  font-size: 14px;
  font-weight: 700;
  color: var(--prim);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   5.11 Bandeau de prise de rendez-vous
   -------------------------------------------------------------------------- */

.dum-section.dum-bandeau-rdv {
  /* 74px, valeur propre de la maquette (.band .wrap) - ce bandeau respire plus
     que les autres sections, c est voulu : c est le point d appel de la page. */
  padding-block: 74px;
  background: var(--prim);
  color: var(--paper);
  text-align: center;
}

.dum-section.dum-bandeau-rdv .dum-surtitre {
  color: var(--gold2);
}

.dum-section.dum-bandeau-rdv h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  /* Rythme du bandeau repris a la hausse : la maquette comptait sans le
     savoir sur les 32px que Kadence ajoutait sous chaque bloc. Ces marges
     supprimees, il fallait reposer explicitement l air entre le surtitre,
     le titre, la phrase, le telephone et le bouton. */
  margin-block: 14px 10px;
}

.dum-section.dum-bandeau-rdv p:not(.dum-surtitre):not(.dum-bandeau-rdv__tel) {
  color: #eccdb6;
  /* 46ch bridait la phrase a 412px sur 985 disponibles et la cassait apres
     « en », en laissant un mot vide en fin de ligne. Assez large pour tenir
     sur une ligne aux tailles courantes, avec balance en repli. */
  max-width: 46ch;
  margin: 0 auto 8px;
}

/* FICHE DU NEGOCIATEUR sur une page de bien (« Organisons la visite »).
   Le balisage vient du plugin, le style reste ici : c'est la charte.
   Encadre discret sur le bandeau marine - il doit se lire comme une carte de
   visite posee dans le bandeau, pas comme un deuxieme appel a l'action qui
   entrerait en concurrence avec le bouton or. */
.dum-section .dum-nego {
  max-width: 420px;
  margin: 22px auto 4px;
  padding: 16px 20px;
  border: 1px solid rgba(198, 162, 99, 0.45);
  border-radius: var(--radius-btn, 10px);
  background: rgba(255, 255, 255, 0.05);
}

.dum-section .dum-nego__role {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold2);
  font-weight: 700;
}

.dum-section .dum-nego__nom {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--paper);
}

/* TEXTE RESERVE AUX LECTEURS D'ECRAN.
   --------------------------------------------------------------------------
   Pose le 07/08/2026 avec l'ouverture des PDF en nouvel onglet (demande de
   Rodolphe). Une bonne pratique constante : un lien qui change de fenetre
   doit le DIRE, sinon la personne qui ne voit pas l'ecran perd le fil - le
   bouton Retour ne ramene plus en arriere et rien ne l'explique.
   `clip-path` plutot que `display: none` ou `visibility: hidden` : ces deux
   dernieres retirent le texte de l'arbre d'accessibilite, donc il ne serait
   pas lu du tout, ce qui est exactement l'inverse du but. La technique
   ci-dessous le garde annonce tout en le sortant de l'ecran. */
.dum-hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le bouton du bandeau de page interieure : sur marine, la variante or de la
   charte reste lisible sans retouche. Marge du haut seulement, le bandeau
   porte deja son propre rythme vertical. */
.dum-section .dum-page-hero__actions {
  margin-block-start: 26px;
}

/* TABLEAUX DE TARIFS de `/honoraires/` (section `dum-tarifs`).
   --------------------------------------------------------------------------
   FOND `--card` ET NON `--paper` : cette section s'intercale entre
   `dum-prose--alt` (`--paper2`) et `dum-guides` (`--paper`). Il fallait donc
   une TROISIEME valeur pour ne pas enfreindre la regle « deux sections
   voisines ne portent jamais le meme fond » (section 6.1 bis).
   UN VRAI `<table>`, PAS UNE LISTE : ce sont des donnees a deux entrees, un
   tableau les rend lisibles au lecteur d'ecran (l'en-tete de colonne est
   annonce avec chaque cellule) et citables par les moteurs. Il defile
   horizontalement dans son propre conteneur plutot que de faire deborder la
   page. */
.dum-section.dum-tarifs {
  background: var(--card);
}

.dum-section .dum-tarifs__corps {
  max-width: var(--wrap-contenu);
  margin-inline: auto;
}

.dum-section .dum-tarifs__table {
  margin-block: 18px 34px;
  overflow-x: auto;
}

.dum-section .dum-tarifs__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.dum-section .dum-tarifs__table th,
.dum-section .dum-tarifs__table td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.dum-section .dum-tarifs__table thead th {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  border-bottom-width: 2px;
}

/* Le montant est ce qu'on vient chercher : il ne doit pas se confondre avec
   le libelle de la prestation. */
.dum-section .dum-tarifs__table td:last-child {
  font-weight: 700;
  color: var(--prim);
  white-space: nowrap;
}

.dum-section .dum-tarifs__table tbody tr:last-child td {
  border-bottom: 0;
}

.dum-section .dum-tarifs__table figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink2);
  font-style: italic;
}

.dum-section .dum-tarifs__note {
  margin-block-start: 26px;
  font-size: 14.5px;
  color: var(--ink2);
}

/* Sur telephone, un montant comme « 160 € l'unite, 200 € les deux » ne tient
   pas sur une ligne : on lui rend le droit de se couper, sinon il pousse le
   tableau en defilement horizontal pour une seule cellule. */
@media (max-width: 600px) {
  .dum-section .dum-tarifs__table td:last-child {
    white-space: normal;
  }

  .dum-section .dum-tarifs__table th,
  .dum-section .dum-tarifs__table td {
    padding: 11px 10px;
  }
}

/* ENCART IMMOBILIER de `/contact/` - le service negociation et son
   interlocuteur nomme (Aston). Demande de Rodolphe du 07/08/2026.
   MARINE, ET LE CHOIX EST CONTRAINT : cette section s'intercale entre
   `dum-infos` (fond `--paper`) et `dum-prose--alt` (fond `--paper2`). La
   regle de la charte veut que deux sections voisines ne partagent jamais le
   meme fond (section 6.1 bis), il fallait donc une TROISIEME valeur. Le
   marine s'imposait : il fait echo au bandeau « Organisons la visite » des
   pages de bien, d'ou vient le visiteur qui clique « Demander une visite »,
   et il permet de reutiliser tels quels les styles de `.dum-nego`, dessines
   pour ce fond. Ne pas le repasser en creme sans revoir les deux voisines. */
.dum-section.dum-immo-contact {
  background: var(--prim);
  color: var(--paper);
  text-align: center;
}

.dum-section.dum-immo-contact .dum-surtitre {
  color: var(--gold2);
}

.dum-section.dum-immo-contact h2 {
  color: var(--paper);
}

/* NOTE SECONDAIRE d'un bandeau marine : une sortie de secours, pas une
   action. Elle vient APRES le contact principal et se lit en gris clair,
   pour que la hierarchie reste evidente a l'oeil.
   Sur `/annonces/`, elle repond au besoin exprime par Rodolphe le
   07/08/2026 : garder Aston en avant, mais offrir aussi un chemin vers un
   contact general. **Formulee « votre demande ne concerne pas l'immobilier »
   et NON « demander une estimation » : cette derniere formule existe deja
   plus bas sur la meme page** (section « Vendre son bien »), les deux se
   seraient fait concurrence. Chacun son role : Aston pour un bien, le lien
   d'estimation pour vendre, celui-ci pour tout le reste. */
.dum-section .dum-immo-contact__note,
.dum-section .dum-bandeau-rdv__note {
  margin-block-start: 22px;
  font-size: 14px;
  color: #c3cbdb;
}

.dum-section .dum-immo-contact__note a,
.dum-section .dum-bandeau-rdv__note a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--gold2);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Le portable prend la place que tenait le standard : sur une page de bien,
   c'est LUI le numero a appeler (decision Rodolphe du 07/08/2026). Assez
   grand pour se lire et se recopier, sans egaler le bouton or qui reste
   l'action principale. */
.dum-section .dum-nego__tel {
  margin: 10px 0 0;
  font-family: var(--font-serif);
  font-size: 24px;
  letter-spacing: 0.01em;
}

.dum-section .dum-nego__tel a {
  color: var(--paper);
  text-decoration: none;
}

.dum-section .dum-nego__tel a:hover {
  color: var(--gold2);
}

.dum-section .dum-nego__lien {
  margin: 8px 0 0;
  font-size: 14px;
  /* L'adresse de l'office est longue (`aston.dumareau@33013.notaires.fr`) :
     sans coupure autorisee, elle deborde la carte sur un telephone. */
  word-break: break-word;
}

.dum-section .dum-nego__lien a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--gold2);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.dum-section .dum-nego__lien a:hover {
  color: var(--gold2);
}

/* L'adresse ferme la fiche : information de reperage, pas d'action. Elle est
   donc plus discrete que le telephone et le courriel, qui se cliquent. */
.dum-section .dum-nego__adresse {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(198, 162, 99, 0.3);
  font-size: 14px;
  color: #c3cbdb;
}

.dum-section .dum-bandeau-rdv__tel {
  font-family: var(--font-serif);
  font-size: 30px;
  letter-spacing: 0.01em;
  margin-block: 14px 26px;
}

.dum-section .dum-bandeau-rdv__tel a {
  color: inherit;
  text-decoration: none;
}

.dum-section.dum-bandeau-rdv .dum-actions.wp-block-buttons {
  justify-content: center;
}

/* LE BOUTON OR SUR FOND MARINE - LISTE A TENIR A JOUR.
   --------------------------------------------------------------------------
   `.dum-btn--or` est dessine pour les sections CREME : son texte est en
   `--ink`, presque noir. Pose sur une section marine, il tombe a **1,2 pour 1
   de contraste** - illisible, et c'est exactement ce qui est arrive au bouton
   « Voir la grille tarifaire » du bandeau de `/honoraires/` le 07/08/2026
   (signale par Rodolphe, capture a l'appui).
   La regle existait deja pour `dum-bandeau-rdv` mais lui etait NOMMEMENT
   reservee : toute nouvelle section marine repartait donc avec le defaut.
   Elle est desormais mutualisee. **REGLE : toute section a fond marine doit
   etre ajoutee a ce selecteur, sinon son bouton or sera illisible.**
   Sections marine a ce jour : `dum-bandeau-rdv`, `dum-page-hero`,
   `dum-immo-contact`. Contraste apres correctif : 10,9 pour 1. */
.dum-section.dum-bandeau-rdv .dum-btn--or .wp-block-button__link,
.dum-section.dum-page-hero .dum-btn--or .wp-block-button__link,
.dum-section.dum-immo-contact .dum-btn--or .wp-block-button__link {
  border-color: var(--gold2);
  color: var(--paper);
}

.dum-section.dum-bandeau-rdv .dum-btn--or .wp-block-button__link:hover,
.dum-section.dum-page-hero .dum-btn--or .wp-block-button__link:hover,
.dum-section.dum-immo-contact .dum-btn--or .wp-block-button__link:hover {
  background: var(--gold2);
  color: var(--prim);
}

/* --------------------------------------------------------------------------
   5.12 Adaptation mobile
   Une seule rupture a 900 px : la charte est simple, elle n'a pas besoin de
   trois paliers a maintenir.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* LE RYTHME MOBILE SE REGLE ICI, ET NULLE PART AILLEURS.
     On redefinit les jetons plutot que de reecrire chaque section : toutes
     en derivent, y compris la banniere et le mot de l etude qui ont leurs
     valeurs propres. Un seul endroit a toucher pour toute la page.
     40 contre 60 en bureau : sur un ecran etroit la page defile deja
     beaucoup, un espace vertical genereux y coute bien plus cher qu en
     grande largeur - il eloigne les sections sans rien apporter. */
  :root {
    --pad-section:    33px;
    --pad-section-sm: 24px;
  }

  /* Le bandeau de rendez-vous porte 74px en bureau (valeur propre de la
     maquette) : il faut le ramener au jeton, sinon il reste le bloc le plus
     haut de la page en mobile. */
.dum-section.dum-bandeau-rdv {
    padding-block: var(--pad-section);
  }

.dum-section > * {
    padding-inline: 22px;
  }

  .dum-section .dum-hero__grille,
  .dum-section .dum-edito__grille,
.dum-section .dum-cartes {
    grid-template-columns: 1fr;
  }

.dum-section.dum-hero .dum-hero__titre {
    /* Doit egaler la specificite de la regle de base (.dum-section.dum-hero
       .dum-hero__titre), sinon le bridage a 16ch survit en mobile. */
    max-width: none;
  }

.dum-section .dum-figure__sceau {
    width: 88px;
    top: -18px;
    right: -8px;
  }

.dum-section .dum-reperes__grille {
    grid-template-columns: repeat(2, 1fr);
  }

  /* « Bordeaux » se coupait en « Bordeau / x » : 36px dans une colonne de
     187px, c est le mot le plus long des quatre reperes qui fixe la limite.
     30px le fait tenir avec de la marge, sans casser la hierarchie visuelle
     (le chiffre reste nettement plus fort que son libelle a 12,5px). */
  .dum-section .dum-repere__chiffre {
    font-size: 30px;
  }

  /* Les cellules de reperes sont deja en deux colonnes de 188px : garder
     38px de haut et 26px de cote y coute proportionnellement bien plus qu en
     bureau, ou la bande fait quatre colonnes larges. */
  .dum-section .dum-repere {
    padding: 24px 14px;
  }

.dum-section .dum-repere:nth-child(3) {
    border-left: none;
  }

.dum-section .dum-expertise {
    grid-template-columns: auto 1fr;
    gap: 16px;
  }

  /* Toute la ligne est deja cliquable via le titre : le lien de fin de ligne
     ne ferait qu'encombrer sur petit ecran. */
.dum-section .dum-expertise__lien {
    display: none;
  }

  /* ------------------------------------------------------------------------
     LISIBILITE SUR PETIT ECRAN
     La maquette est une demo de bureau : ses 11,5 px de surtitre et ses
     labels a 12,5 px passent sur un 27 pouces, pas dans la main. La clientele
     d'une etude notariale est en outre largement senior - succession,
     transmission, viager. On remonte les plus petits corps, sans toucher a
     l'echelle de bureau qui, elle, est validee.
     ------------------------------------------------------------------------ */

.dum-section .dum-surtitre {
    font-size: 12.5px;
    letter-spacing: 0.22em;
  }

  .dum-section .dum-repere__libelle,
  .dum-section .dum-carte--notaire .dum-carte__role,
.dum-section .dum-guide__categorie {
    font-size: 12.5px;
  }

.dum-section .dum-lede {
    font-size: 17px;
  }

  /* ------------------------------------------------------------------------
     BOUTONS EMPILES
     A 375px, « Prendre rendez-vous » et « Decouvrir l'etude » reclament ~380px
     cote a cote pour 331 disponibles : le retour a la ligne est inevitable.
     Mais avec leur largeur naturelle, ils s'empilent en deux blocs de tailles
     differentes, ce qui se lit comme un defaut d'alignement plutot que comme
     un choix. Pleine largeur : la pile devient franche, et les deux cibles
     tactiles s'agrandissent au passage.

     `:not(:only-child)` restreint la regle aux groupes de PLUSIEURS boutons.
     Celui du bandeau de rendez-vous est seul et centre : etale sur toute la
     largeur, il ferait un pave marine sur fond marine.
     ------------------------------------------------------------------------ */

  .dum-section .dum-actions .wp-block-button:not(:only-child) {
    flex: 1 1 100%;
  }

  .dum-section .dum-actions .wp-block-button:not(:only-child) .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }

  /* ------------------------------------------------------------------------
     ZONES TACTILES
     Les liens de fin de carte ne faisaient que 18 px de haut : sous le
     minimum WCAG 2.5.8 (24 px) et loin des 44 px confortables au pouce. On
     paie la hauteur en marge negative pour ne pas decaler la mise en page.
     ------------------------------------------------------------------------ */

  .dum-section .dum-guide__lien a,
.dum-section .dum-carte a:not(.wp-block-button__link) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -11px;
  }

  /* Le numero de telephone est le premier geste attendu depuis un mobile :
     il doit etre une cible franche, pas une ligne de texte. */
.dum-section .dum-bandeau-rdv__tel a {
    display: inline-block;
    min-height: 44px;
    padding: 4px 10px;
  }

}
/* ==========================================================================
   6. PAGES INTERIEURES (l'office, equipe, honoraires, contact, liens utiles)
   --------------------------------------------------------------------------
   Ajoutee le 06/08/2026, apres la home. Memes regles que la section 5, sans
   exception - elles ont toutes ete payees une fois :
   - toute regle nait en 0,2,x (`.dum-section .dum-x`), sinon la neutralisation
     de la section 3.1 la mange ;
   - les classes de SECTION se collent a `.dum-section` (`.dum-section.dum-faq`),
     elles sont portees par le meme element ;
   - jamais `margin` en raccourci, il remet les marges laterales a zero et
     detruit le centrage - `margin-block` / `margin-inline` uniquement ;
   - un titre se style avec une classe ET un element, jamais une classe seule.
   Cf .claude/memory/integration-kadence.md.

   ALTERNANCE DES FONDS : les pages interieures reprennent le rythme par
   coupures de la home. `--paper` par defaut, `--paper2` pour les variantes
   `--alt`, `--card` pour les cartes. Deux sections voisines ne doivent jamais
   porter le meme fond, sinon la coupure disparait et la page s'aplatit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.0 POURQUOI CHAQUE SECTION A UN GROUPE INTERNE (`__corps`, `__liste`)
   --------------------------------------------------------------------------
   Regle du theme : `.dum-section > *` pose `max-width: 1140px` +
   `margin-inline: auto` + `padding-inline: 40px` sur chaque enfant DIRECT de
   section. Consequence contre-intuitive : donner a un enfant direct un
   `max-width` plus petit ne le limite pas, il le RECENTRE - et chaque valeur
   produit alors un bord gauche different.

   Mesure faite le 06/08/2026 sur la premiere version de ces pages, a 1265px de
   large : le fil d'Ariane commencait a 103px, le H1 a 40px, le chapo a 360px.
   Trois bords gauches sur la meme banniere. **Rien ne se voyait en dessous de
   1140px** : sous cette largeur les marges automatiques valent 0 et tout parait
   aligne. C'est exactement le piege deja documente pour le bandeau de
   rendez-vous de la home.

   Correctif structurel, et non cosmetique : le contenu passe dans un GROUPE
   interne. C'est lui, enfant direct, qui porte les 1140px centres ; ses enfants
   sont imbriques, donc libres de porter la largeur de lecture qu'on veut sans
   jamais bouger du bord gauche commun. Meme mecanisme que `.dum-hero__texte` et
   `.dum-section__tete` sur la home.

   NE PAS RETIRER CES GROUPES pour « simplifier le balisage » : le defaut
   reviendrait, et il ne se verrait qu'au-dela de 1140px.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6.1 Banniere de titre de page
   Version courte de la banniere d'accueil : pas de visuel, pas de boutons.
   Le H1 y est seul de son niveau sur toute la page - c'est la regle, et c'est
   aussi pour ca que le titre de page de Kadence est masque (meta
   `_kad_post_title` = hide, pose par push-meta.ps1).
   -------------------------------------------------------------------------- */

/* BANDEAU MARINE - proposition A, arbitree le 06/08/2026 sur planche
   `design/hero-pages.html`.
   -------------------------------------------------------------------------
   La premiere version etait en creme, comme la section qui la suit : deux
   aplats identiques cote a cote, donc aucune coupure, et une moitie droite
   vide. Le marine regle les deux d'un coup, sans une ligne de contenu a
   ecrire ni un composant a maintenir - ce qui est la contrainte n°1 du projet.
   La page ouvre maintenant comme le pied de page ferme.

   52px de retrait haut et non les 60 du jeton : un aplat sombre pese plus
   lourd qu'un aplat clair a hauteur egale, et il est ici sur TOUTES les pages
   interieures. */
.dum-section.dum-page-hero {
  padding-block: 52px 56px;
  background: var(--prim);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

/* Sceau en filigrane, dessine en CSS et non pose en image.
   Deux raisons : le sceau du theme est marine, donc invisible sur marine (il
   aurait fallu produire et deployer une declinaison claire) ; et un decor sans
   fichier ne peut pas manquer sur le serveur. `aria-hidden` implicite : un
   pseudo-element n'est pas lu par les lecteurs d'ecran. */
.dum-section.dum-page-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: 50%;
  width: 340px;
  height: 340px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(198, 162, 99, 0.22);
  box-shadow: inset 0 0 0 45px transparent, inset 0 0 0 46px rgba(198, 162, 99, 0.16);
  pointer-events: none;
}

/* Le contenu passe devant le filigrane. */
.dum-section.dum-page-hero .dum-page-hero__corps {
  position: relative;
  z-index: 1;
}

.dum-section.dum-page-hero .dum-surtitre {
  color: var(--gold2);
}

/* Sur fond marine, l'or fonce du filet perd tout contraste. */
.dum-section.dum-page-hero .dum-filet {
  background: var(--gold2);
}

.dum-section.dum-page-hero .dum-filet::after {
  background: var(--gold2);
}

/* Fil d'Ariane. Visible ET repris en JSON-LD BreadcrumbList (inc/seo.php) :
   les deux doivent dire la meme chose, Google compare. */
.dum-section .dum-fil {
  font-size: 12.5px;
  color: var(--ink2);
  margin-block: 0 22px;
}

/* Souligne par `text-decoration`, cf `.dum-bien__lien a` : regle tactile des
   44px sur mobile (mesure : 1px d'ecart en bureau contre 15px en mobile). */
.dum-section .dum-fil a {
  color: var(--ink2);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.dum-section .dum-fil a:hover {
  color: var(--prim);
  text-decoration-color: var(--gold);
}

/* Contraste mesure sur #20324f : 6,4 pour le fil (minimum AA 4,5), 8,9 pour le
   chapo. Ne pas assombrir ces deux gris, la clientele de l'etude est largement
   senior et lit sur des ecrans mal calibres. */
.dum-section.dum-page-hero .dum-fil,
.dum-section.dum-page-hero .dum-fil a {
  color: #a9b6cc;
}

/* Variante sur bandeau marine : seule la couleur du soulignement change, la
   mecanique reste celle de `.dum-section .dum-fil a`. A GARDER ALIGNE - si
   l'une repasse a `border-bottom`, l'autre doit suivre, sinon le fil se
   souligne de deux facons selon la page. */
.dum-section.dum-page-hero .dum-fil a {
  text-decoration-color: #3d4f6b;
}

.dum-section.dum-page-hero .dum-fil a:hover {
  color: var(--paper);
  text-decoration-color: var(--gold2);
}

/* Meme traitement que le titre de la banniere d'accueil, une taille en dessous :
   ces pages ont un titre descriptif, souvent plus long que l'accroche. */
.dum-section.dum-page-hero .dum-page-hero__titre {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  color: var(--paper);
  max-width: 20ch;
  margin-block: 20px 18px;
  /* Aligne a gauche : la neutralisation de la section 3.1 pose
     `margin-inline: auto` sur les titres enfants directs de section, ce qui
     recentrerait ce titre dans sa largeur maximale au-dela de 1140px. */
  margin-inline: 0;
  text-wrap: balance;
}

/* 72ch et non 62 : le chapo est en 17,5px, plus petit que le texte courant,
   donc 72 signes y tiennent la meme longueur physique que 75 a 16,5px. A 62ch
   il cassait en trois lignes courtes sous un titre large, ce qui se lisait
   comme un texte tronque. */
.dum-section.dum-page-hero .dum-lede {
  max-width: 72ch;
  color: #c9d3e4;
}

/* --------------------------------------------------------------------------
   6.1 bis LA REGLE DES COUPURES
   --------------------------------------------------------------------------
   Le rythme de la charte repose sur des coupures de couleur, a plat, sans
   ombre ni bordure : c'est la seule chose qui separe deux sections. **Deux
   sections voisines qui portent le meme fond n'en font donc plus qu'une**, la
   page s'aplatit, et le defaut se lit comme un manque de soin sans qu'on
   sache dire pourquoi. C'est ce qui s'est produit le 06/08/2026 : la banniere
   et le bloc de texte suivant etaient tous deux en `--paper`.

   REGLE : en ajoutant une section a une page, verifier son fond ET celui de sa
   voisine. Un coup d'oeil suffit :
   `[...document.querySelectorAll('.dum-section')].map(s => getComputedStyle(s).backgroundColor)`
   Deux valeurs identiques qui se suivent = defaut, quelle que soit l'impression
   visuelle.

   Les deux filets ci-dessous ne remplacent pas cette vigilance, ils rattrapent
   le cas le plus probable : deux blocs de texte courant a la suite.

   LE `:not()` N'EST PAS UNE PRECAUTION, IL CORRIGE UN BUG QUI A FRAPPE.
   -------------------------------------------------------------------------
   Sans lui, `.dum-prose + .dum-prose` (0,4,0) bat la regle de base
   `.dum-prose--alt` (0,3,0) : le filet repeignait en `--paper2` TOUTE section
   de prose suivant une autre prose, y compris celles ou l'alternance etait
   declaree a la main par `--alt`. Sur `/expertises/` le 07/08, les quatre
   expertises ET la FAQ sortaient toutes sur le meme fond - cinq sections
   d'affilee. Le filet ecrit pour empecher le piege n°10 le PROVOQUAIT.

   Le filet ne doit se declencher que sur le cas ACCIDENTEL : deux blocs qui
   n'ont declare aucune alternance. Des qu'un `--alt` est present, l'auteur a
   pris la main et le filet se tait. Regle generale a retenir : **un selecteur
   de rattrapage doit toujours etre plus etroit que la declaration explicite
   qu'il est cense secourir**, sinon il l'ecrase.
   -------------------------------------------------------------------------- */

.dum-section.dum-prose:not(.dum-prose--alt) + .dum-section.dum-prose:not(.dum-prose--alt),
.dum-section.dum-liens:not(.dum-liens--alt) + .dum-section.dum-liens:not(.dum-liens--alt) {
  background: var(--paper2);
}

.dum-section.dum-prose--alt + .dum-section.dum-prose--alt,
.dum-section.dum-liens--alt + .dum-section.dum-liens--alt {
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   6.2 Texte courant
   Une colonne de lecture, pas la pleine largeur : au-dela de ~70 caracteres
   par ligne, l'oeil perd le debut de la ligne suivante.
   -------------------------------------------------------------------------- */

.dum-section.dum-prose {
  background: var(--paper);
}

.dum-section.dum-prose--alt {
  background: var(--paper2);
}

/* UNE SECTION DE PLUS SUR UNE PAGE ALTERNEE SE PAIE EN PARITE, PAS EN COULEUR.
   -------------------------------------------------------------------------
   Le 01/09/2026, la cinquieme expertise ajoutee a `/expertises/` a casse
   l'alternance : la page comptait quatre sections entre une intro creme et une
   FAQ en `--paper2`, une cinquieme inversait la parite et faisait tomber la
   derniere sur le meme fond que la FAQ.

   PREMIERE REPONSE, MAUVAISE : une classe `.dum-prose--pro` en marine, comme
   `dum-immo-contact`. Elle reglait la parite mais **le texte etait illisible**,
   parce que `.dum-section.dum-prose p` fixe `color: var(--ink2)` en dur (0,2,1)
   et bat un `color` pose sur la section (0,2,0) : seuls les titres et les listes,
   repeints un a un, changeaient de couleur. Corrigee le jour meme.

   BONNE REPONSE : **inverser l'alternance de toute la page** - l'intro prend
   `--alt`, et chaque section suivante bascule. Zero couleur nouvelle, zero regle
   nouvelle, et les deux bornes (hero marine avant, FAQ `--paper2` apres)
   retombent juste.

   REGLE A RETENIR : **quand une section de plus casse une alternance, on decale
   la sequence, on n'invente pas une troisieme valeur.** Une troisieme valeur ne
   se justifie que si les deux voisines sont FIGEES et differentes - c'est le cas
   de `dum-immo-contact`, encadre par `dum-infos` et `dum-prose--alt`, pas celui
   d'une page dont on peut retourner toute la sequence.
   -------------------------------------------------------------------------- */

/* MESURE DU TEXTE COURANT.
   -------------------------------------------------------------------------
   Une seule colonne, titre au-dessus de son texte : la disposition en deux
   colonnes essayee le 06/08 (titre a gauche, texte a droite) a ete ecartee par
   Rodolphe, elle chargeait trop la page.

   1000px et non les 780px d'origine. 780 donnait ~75 signes par ligne, soit le
   manuel typographique - mais dans une colonne de 1060px utiles, le texte
   cassait visiblement avant le bord et se lisait comme tronque. 1000px font
   ~95 signes : au-dessus de l'ideal theorique, en dessous du seuil ou l'oeil
   perd le debut de la ligne suivante. L'interlignage est monte a 1,78 pour
   compenser, c'est ce qui rend une ligne longue confortable, pas sa longueur.

   Ne pas retirer ce plafond : sans lui la ligne monterait a ~100 signes ET
   perdrait tout appui a droite. */
.dum-section .dum-prose__corps > * {
  max-width: 1000px;
  margin-inline: 0;
}

.dum-section.dum-prose h2 {
  font-family: var(--font-serif);
  font-size: 27px;
  line-height: 1.2;
  color: var(--prim);
  margin-block: 0 20px;
  text-wrap: balance;
}

.dum-section.dum-prose h2 ~ h2 {
  margin-block-start: 40px;
}

/* 1,78 et non 1,72 : l'interlignage se regle avec la longueur de ligne. Sur
   ~95 signes, c'est lui qui permet a l'oeil de retrouver le debut de la ligne
   suivante. Les deux valeurs vont ensemble, ne pas toucher a l'une seule. */
.dum-section.dum-prose p {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ink2);
  margin-block: 0 16px;
}

.dum-section.dum-prose p strong {
  color: var(--ink);
}

.dum-section .dum-liste {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ink2);
  margin-block: 0 16px;
  padding-inline-start: 20px;
}

.dum-section .dum-liste li {
  margin-block: 0 10px;
}

.dum-section .dum-liste li::marker {
  color: var(--gold);
}

/* Lien de rebond en fin de bloc : c'est lui qui fait le maillage interne. */
.dum-section .dum-prose__suite {
  margin-block: 26px 0;
}

/* Souligne par `text-decoration`, cf l'explication complete sur
   `.dum-bien__lien a` : ce lien recoit la regle tactile des 44px sur mobile,
   ou un `border-bottom` se serait dessine au bas de la boite et non sous le
   texte (mesure : 3px en bureau contre 14px en mobile). */
.dum-section .dum-prose__suite a {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--prim);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.dum-section .dum-prose__suite a:hover {
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   6.3 Encarts (deux colonnes de mise en avant)
   -------------------------------------------------------------------------- */

.dum-section.dum-encarts {
  background: var(--paper);
}

.dum-section .dum-encarts__grille {
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.dum-section .dum-encart {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px 30px;
}

.dum-section .dum-encart--secondaire {
  background: transparent;
  border-style: dashed;
}

.dum-section .dum-encart__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-block: 0;
}

.dum-section .dum-encart h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--prim);
  margin-block: 12px 14px;
  /* Dans une colonne de grille, `margin-inline: auto` reduirait le titre a la
     largeur de son texte et le desaxerait du label. Piege deja paye sur les
     cartes de la home. */
  margin-inline: 0;
}

.dum-section .dum-encart p:not(.dum-encart__label) {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink2);
  margin-block: 0 12px;
}

.dum-section .dum-encart a {
  color: var(--prim);
  text-decoration-color: var(--gold);
}

/* --------------------------------------------------------------------------
   6.4 Questions frequentes
   Pas d'accordeon : le contenu replie est plus long a lire pour un visiteur
   age, et un accordeon maison serait un composant de plus a maintenir sur un
   site que personne ne maintiendra. Les questions sont des H3 - c'est ce qui
   les rend citables telles quelles par les moteurs et les assistants.
   -------------------------------------------------------------------------- */

.dum-section.dum-faq {
  background: var(--paper2);
}

/* Une seule colonne, comme le texte courant : la version a deux colonnes
   essayee le 06/08 a ete ecartee avec elle, pour la meme raison.

   L'INDENTATION DE 30PX EST CELLE DU MARQUEUR (ci-dessous). Question ET
   reponse sont decalees ensemble, sinon la reponse reviendrait sous le losange
   et l'oeil perdrait la colonne. Le filet de separation, lui, reste sur toute
   la largeur : c'est lui qui tient l'alignement avec le reste de la page. */
.dum-section .dum-faq__item {
  max-width: 1000px;
  margin-inline: 0;
  padding-block: 22px;
  padding-inline: 30px 0;
  border-top: 1px solid var(--line);
  position: relative;
}

/* CLASSES COLLEES, ET C'EST INDISPENSABLE : `dum-faq` est portee par le MEME
   element que `dum-section`, donc `.dum-section .dum-faq h3` ne matche jamais.
   Le piege est decrit dans la fiche `integration-kadence` ; il etait ici depuis
   le 06/08 et personne ne l'avait vu, les questions sortant en 24px encre au
   lieu de 19px marine (releve au navigateur le 07/08). Un espace de trop, et la
   regle ne s'applique a rien - sans erreur, sans avertissement. */
.dum-section.dum-faq h3 {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--prim);
  margin-block: 0 10px;
  margin-inline: 0;
}

/* MARQUEUR OR DEVANT CHAQUE QUESTION : c'est ce qui rend la liste balayable
   sans la replier. Le repli a ete ecarte le 06/08 (clientele senior, et un
   texte visible est mieux repris par les moteurs conversationnels), mais une
   suite de questions sans reperes se lit alors comme un mur.
   Losange en CSS, pas un caractere : il n'est donc pas lu par les lecteurs
   d'ecran - ce n'est pas du contenu - et il ne depend d'aucune fonte. */
.dum-section.dum-faq h3::before {
  content: "";
  position: absolute;
  left: 0;
  /* Cale sur la premiere ligne de la question, pas sur le haut du bloc. */
  top: 30px;
  width: 9px;
  height: 9px;
  background: var(--gold);
  rotate: 45deg;
}

.dum-section .dum-faq__item p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink2);
  margin-block: 0;
}

.dum-section .dum-faq__item a {
  color: var(--prim);
  text-decoration-color: var(--gold);
}

/* --------------------------------------------------------------------------
   6.5 Coordonnees (page contact)
   Le NAP - nom, adresse, telephone - vit ici sous sa forme lisible. Il doit
   etre formate EXACTEMENT comme dans le pied de page, le schema LocalBusiness
   et la fiche Google Business Profile : une divergence de format abime le
   signal local.
   -------------------------------------------------------------------------- */

.dum-section.dum-infos {
  background: var(--paper);
}

.dum-section .dum-infos__grille {
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.dum-section .dum-info {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px 28px;
}

.dum-section .dum-info__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-block: 0;
}

.dum-section .dum-info h2 {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.25;
  color: var(--prim);
  margin-block: 12px 14px;
  margin-inline: 0;
}

.dum-section .dum-info p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink2);
  margin-block: 0 10px;
}

.dum-section .dum-info__nap {
  color: var(--ink);
  font-weight: 500;
}

.dum-section .dum-info__tel a {
  font-family: var(--font-serif);
  font-size: 25px;
  color: var(--prim);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.dum-section .dum-info__tel a:hover {
  color: var(--gold);
}

/* Souligne par `text-decoration` et non par une bordure, MEME RAISON que
   `.dum-bien__lien a` (correctif du 07/08/2026, explication complete la-bas) :
   ce lien recoit lui aussi la regle tactile des 44px sur mobile, qui aurait
   fait descendre un `border-bottom` loin sous le texte. Gain supplementaire
   ici : sur une adresse electronique qui se coupe en deux lignes, la
   decoration souligne CHAQUE ligne, la ou une bordure n'en soulignait que le
   bas du bloc. */
.dum-section .dum-info__lien a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--prim);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  /* Les adresses electroniques longues debordent la carte si on ne les autorise
     pas a se couper : `etude.dumareauetassocies@notaires.fr` fait 38 caracteres
     pour une colonne de 300px. */
  word-break: break-word;
}

.dum-section .dum-info__lien a:hover {
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   6.6 Bloc « nous ecrire » (page contact)
   La colonne de droite accueille le bloc Formulaire de Kadence Blocks, pose
   dans l'editeur. On ne style pas ses champs ici : le pont de variables de la
   section 2 bis leur donne deja la charte.
   -------------------------------------------------------------------------- */

/* `--paper` et non `--paper2` : sur la page contact, cette section suit
   « Acces et stationnement » qui est deja en `--paper2`. Deux `--paper2` a la
   suite, c'est la coupure qui disparait (cf regle 6.1 bis). */
/* FOND `--paper2` ET NON `--paper` : depuis le 24/08/2026 la section suit
   immediatement `dum-infos`, qui est en `--paper`. Deux sections voisines ne
   portent jamais le meme fond (piege n 10 de MEMORY.md) - la charte n'a ni
   ombre ni bordure entre sections, la couleur est la seule separation. La
   carte du formulaire reste en `--card`, plus claire, elle se detache donc
   davantage sur ce fond que sur le precedent. */
.dum-section.dum-ecrire {
  background: var(--paper2);
}

.dum-section .dum-ecrire__grille {
  grid-template-columns: 0.44fr 0.56fr;
  gap: 44px;
  align-items: start;
}

.dum-section .dum-ecrire__texte p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink2);
  margin-block: 0 14px;
}

/* Mention RGPD sous le formulaire. Obligation d'information AU MOMENT de la
   collecte (art. 13 du RGPD) : un lien en pied de page ne suffit pas. Ce n'est
   volontairement PAS une case a cocher - la base legale d'un formulaire de
   contact est l'interet legitime et la demarche precontractuelle, pas le
   consentement ; une case laisserait croire a un consentement retirable qui n'a
   jamais fonde le traitement. */
.dum-section .dum-ecrire__rgpd {
  margin-block: 18px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink2);
}

.dum-section .dum-ecrire__formulaire {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px 28px;
}

/* --------------------------------------------------------------------------
   6.7 Cartes de liens (page liens utiles)
   -------------------------------------------------------------------------- */

.dum-section.dum-liens {
  background: var(--paper);
}

.dum-section.dum-liens--alt {
  background: var(--paper2);
}

.dum-section .dum-liens__grille {
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-block: 0 22px;
}

.dum-section .dum-lien {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
  /* Ancre de la zone cliquable ci-dessous. */
  position: relative;
}

/* CARTE ENTIEREMENT CLIQUABLE, comme les cartes de biens : elle se souleve au
   survol depuis le premier jour, donc elle a l'air cliquable, alors que seul
   son titre l'etait.
   `::before` et non `::after` : l'`::after` de ce meme lien porte deja la
   fleche de lien sortant, quelques lignes plus bas. Un seul vrai lien dans le
   balisage - envelopper la carte dans un `<a>` ferait lire le titre et le
   resume comme un seul libelle.
   `:is(h2, h3)` ET NON `h3` SEUL - corrige le 18/08/2026. La regle etait ecrite
   pour `/liens-utiles/`, dont les cartes sont en `h3` ; celles de
   `/informations/` sont en `h2` et n'ont donc JAMAIS ete cliquables, ni meme
   stylees (les quatre regles de titre ci-dessous rataient pareil). Le niveau de
   titre depend du plan du document, pas du composant : une carte doit se styler
   quel que soit son niveau. `:is()` ne change pas la specificite (0,0,1, comme
   un selecteur d'element), les poids restent ceux d'origine. */
.dum-section .dum-lien :is(h2, h3) a::before {
  content: "";
  position: absolute;
  inset: 0;
}

.dum-section .dum-lien:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.dum-section .dum-lien :is(h2, h3) {
  font-family: var(--font-serif);
  font-size: 18.5px;
  line-height: 1.3;
  margin-block: 0 10px;
  margin-inline: 0;
}

.dum-section .dum-lien :is(h2, h3) a {
  color: var(--prim);
  text-decoration: none;
}

.dum-section .dum-lien :is(h2, h3) a:hover {
  color: var(--gold);
}

/* Marqueur de lien sortant. Pose en CSS et non dans le texte : ajouter ou
   retirer un lien ne demande alors aucune retouche de balisage, et le signe
   n'est pas lu par les lecteurs d'ecran (il n'est pas du contenu). */
.dum-section .dum-lien :is(h2, h3) a[target="_blank"]::after {
  content: " \2197";
  color: var(--gold);
  font-size: 0.8em;
}

.dum-section .dum-lien p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink2);
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   6.8 Grille de cartes a deux colonnes
   `.dum-cartes` vaut trois colonnes : deux cartes y laissent un trou.
   -------------------------------------------------------------------------- */

.dum-section .dum-cartes--duo {
  grid-template-columns: repeat(2, 1fr);
}

/* Adresse electronique sur la carte d'un notaire (page equipe). */
.dum-section .dum-carte__contact {
  margin-block: 14px 0;
}

/* Souligne par `text-decoration`, cf `.dum-bien__lien a` : regle tactile des
   44px sur mobile (mesure : 1px d'ecart en bureau contre 14px en mobile).
   Gain supplementaire sur une adresse electronique qui se coupe en deux
   lignes : la decoration souligne CHAQUE ligne, la bordure ne soulignait que
   le bas du bloc. */
.dum-section .dum-carte__contact a {
  font-size: 13.5px;
  color: var(--prim);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  word-break: break-word;
}

.dum-section .dum-carte__contact a:hover {
  text-decoration-color: var(--gold);
}

/* --------------------------------------------------------------------------
   6.9 Adaptation mobile
   Media query separee de la 5.12, et placee APRES elle : plusieurs regles ici
   doivent battre les siennes a specificite egale (`.dum-cartes--duo` contre
   `.dum-cartes`, qui passe en une colonne). Les fusionner obligerait a
   reordonner un bloc deja regle au pixel.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .dum-section.dum-page-hero {
    padding-block: 30px var(--pad-section-sm);
  }

  .dum-section.dum-page-hero .dum-page-hero__titre {
    /* 20ch bride le titre a la moitie de la largeur disponible sur un ecran
       etroit : le bridage n'a de sens qu'en grande largeur. */
    max-width: none;
    font-size: clamp(26px, 7.6vw, 34px);
  }

  .dum-section .dum-encarts__grille,
  .dum-section .dum-infos__grille,
  .dum-section .dum-liens__grille,
  .dum-section .dum-ecrire__grille,
  .dum-section .dum-cartes--duo {
    grid-template-columns: 1fr;
  }

  .dum-section .dum-encart,
  .dum-section .dum-info,
  .dum-section .dum-lien,
  .dum-section .dum-ecrire__formulaire {
    padding: 24px 20px;
  }

  .dum-section.dum-prose h2 {
    font-size: 24px;
  }

  /* Cibles tactiles : memes 44px que sur la home (WCAG 2.5.8), pour une
     clientele largement senior.
     Les notes secondaires des bandeaux marine y ont ete ajoutees le
     07/08/2026 : leur lien ne mesurait que 18px de haut. Un lien discret
     reste un lien qu'on doit pouvoir viser au doigt - la discretion se joue
     sur la couleur et la taille du TEXTE, pas sur celle de la cible.
     Le soulignement suit le texte et non la boite (`text-decoration`), il
     ne descend donc pas au bas des 44px - cf le correctif du meme jour sur
     `.dum-bien__lien a`. */
  .dum-section .dum-info__lien a,
  .dum-section .dum-prose__suite a,
  .dum-section .dum-fil a,
  .dum-section .dum-bandeau-rdv__note a,
  .dum-section .dum-immo-contact__note a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .dum-section .dum-info__tel a {
    display: inline-block;
    min-height: 44px;
    padding-block: 4px;
  }
}

/* ==========================================================================
   7. PAGES ALIMENTEES PAR UN FLUX (annonces, actualites)
   --------------------------------------------------------------------------
   Le balisage vient du plugin `dumareau-flux`, pas d'une composition. Il
   reutilise EXACTEMENT les classes `.dum-bien*` et `.dum-actus*` deja ecrites
   pour la maquette : il n'y a pas deux jeux de styles a tenir a jour, et la
   CSS de la home n'etait donc pas du jetable.
   Les regles ci-dessous ne font qu'ajouter ce que le rendu dynamique apporte
   en plus des cartes statiques.
   ========================================================================== */

.dum-section.dum-annonces .dum-cartes--annonces {
  /* Les cartes viennent du flux : leur nombre varie (11 le 06/08/2026). Un
     `repeat(3, 1fr)` fige laisserait des trous en fin de derniere ligne des
     que le total n'est pas un multiple de trois. `auto-fill` avec une largeur
     minimale s'adapte sans qu'on ait a s'en occuper - et le jour ou l'etude
     n'a plus qu'un seul mandat, la carte ne s'etale pas sur toute la page. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  row-gap: 26px;
}

/* Etiquette « Prix en baisse ». L'information vient du flux (`variation`),
   elle n'est donc jamais perimee - contrairement a une mention posee a la main
   qu'on oublierait de retirer apres la vente. */
.dum-section .dum-bien__baisse {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--card);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  vertical-align: 1px;
}

.dum-section .dum-bien__quartier {
  color: var(--ink2);
  font-weight: 400;
}

/* Aligne les liens en bas de carte quelle que soit la longueur du titre, comme
   sur les guides. */
.dum-section .dum-bien__lien {
  margin: auto 0 0;
  padding-top: 14px;
}

/* SOULIGNEMENT PAR `text-decoration`, PAS PAR `border-bottom` - CORRECTIF DU
   07/08/2026, signale par Rodolphe (« sur mobile le trait est tres bas en
   dessous du texte comparé a la version desktop »), captures a l'appui.
   MECANIQUE : un `border-bottom` se dessine au bas de la BOITE, pas sous le
   texte. Tant que le lien reste `inline`, les deux coincident. Mais la regle
   tactile mobile (`display: inline-flex; align-items: center; min-height:
   44px`, section 7 de ce fichier) porte la boite a 44px avec le texte centre
   dedans : le trait descendait donc a 13px sous le texte au lieu de 3.
   **Mesure avant correctif : 3px en bureau, 15px en mobile - cinq fois plus
   bas.** `text-decoration` suit le texte lui-meme, quelle que soit la
   hauteur de la boite : les deux affichages redeviennent identiques sans
   renoncer a la cible tactile de 44px.
   REGLE : dans ce theme, tout lien susceptible de recevoir la regle tactile
   des 44px doit etre souligne par `text-decoration`, jamais par une bordure.
   Cf le meme correctif sur `.dum-info__lien a`. */
.dum-section .dum-bien__lien a {
  font-size: 14px;
  font-weight: 700;
  color: var(--prim);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.dum-section .dum-bien__lien a:hover {
  color: var(--gold);
}

/* Le repli du plugin (portail indisponible) sort une simple note : elle doit
   rester lisible et centree, pas ressembler a un bout de page casse. */
.dum-section.dum-annonces .dum-annonces__note {
  margin-block-start: 28px;
}

/* --------------------------------------------------------------------------
   7.1 Actualites
   Les styles `.dum-actus*` existent depuis la section 4, mais ils ont ete
   ecrits pour un usage hors `.dum-section`. Places dans une section, ils se
   font manger leurs marges par la neutralisation de la section 3.1, qui vaut
   0,1,1. On les remonte en 0,2,x, comme toute regle de section.
   -------------------------------------------------------------------------- */

.dum-section.dum-actualites {
  background: var(--paper);
}

.dum-section.dum-actualites .dum-actus__grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.dum-section.dum-actualites .dum-actus__card {
  margin-block: 0;
}

.dum-section.dum-actualites .dum-actus__date,
.dum-section.dum-actualites .dum-actus__meta {
  margin-block: 0 8px;
}

.dum-section.dum-actualites .dum-actus__titre {
  margin-block: 0 10px;
}

.dum-section.dum-actualites .dum-actus__resume {
  margin-block: 0 14px;
}

/* --------------------------------------------------------------------------
   7.2 Adaptation mobile
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .dum-section.dum-annonces .dum-cartes--annonces,
  .dum-section.dum-actualites .dum-actus__grid {
    grid-template-columns: 1fr;
  }

  /* Meme minimum tactile que partout ailleurs (WCAG 2.5.8), pour la meme
     raison : la clientele de l'etude est largement senior. */
  .dum-section .dum-bien__lien a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   8. ANNONCES : FILTRES ET PAGE DE BIEN
   --------------------------------------------------------------------------
   Le balisage vient du plugin `dumareau-flux` (liste filtrable) et de son
   gabarit `templates/annonce.php` (page de bien). Les styles restent ici,
   dans le theme, parce qu'ils relevent de la CHARTE : un changement de
   couleur ou d'espacement ne doit pas obliger a rouvrir un plugin.
   Le comportement, lui, est dans le plugin - il pilote son propre balisage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 Barre de filtres
   -------------------------------------------------------------------------- */

.dum-section .dum-filtres {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px 24px 18px;
  margin-block: 0 30px;
}

.dum-section .dum-filtres__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 20px;
}

.dum-section .dum-filtre {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block: 0;
}

/* Budget et Pieces retires du mobile - demande de Rodolphe du 07/08/2026.
   Ce sont les deux seuls filtres a SAISIE LIBRE : ouvrir un clavier
   numerique et taper un montant coute plus cher, au doigt, que de faire
   defiler onze biens. Les listes deroulantes (type, commune, tri) restent,
   un choix dans une liste se fait d'un geste.
   Le filtrage lui-meme n'est pas touche : le script ignore simplement deux
   champs vides. A REVOIR si le nombre de biens grimpe - au-dela d'une
   trentaine, filtrer par budget redevient plus rapide que defiler. */
@media (max-width: 900px) {
  .dum-section .dum-filtre--bureau {
    display: none;
  }
}

.dum-section .dum-filtre label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

/* `appearance: none` puis chevron dessine en fond : les listes deroulantes
   natives sont dessinees par le systeme, et une liste grise fluo de Windows
   au milieu de la charte se voit immediatement. */
.dum-section .dum-filtre select,
.dum-section .dum-filtre input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  /* 44px de haut au total : meme minimum tactile que partout ailleurs. */
  min-height: 44px;
}

.dum-section .dum-filtre select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.dum-section .dum-filtre input {
  padding-inline-end: 12px;
}

.dum-section .dum-filtre select:focus-visible,
.dum-section .dum-filtre input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.dum-section .dum-filtres__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-block: 16px 0;
  padding-top: 14px;
  border-top: 1px solid var(--line2);
}

.dum-section .dum-filtres__compte {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--prim);
}

.dum-section .dum-filtres__reset {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold);
  padding: 0 0 2px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--prim);
  cursor: pointer;
}

.dum-section .dum-filtres__reset:hover {
  color: var(--gold);
}

/* LE PIEGE DE CE THEME : `hidden` NE SUFFIT PAS A CACHER QUOI QUE CE SOIT.
   ---------------------------------------------------------------------------
   Le script des filtres pose `carte.hidden = true`, ce qui est la bonne facon
   de faire. Mais la regle native du navigateur est `[hidden] { display: none }`
   en 0,1,0, et **toutes nos regles de section sont montees en 0,2,x** (doctrine
   de specificite, cf `integration-kadence`) : `.dum-section .dum-bien` pose
   `display: flex` et gagne. Resultat mesure le 07/08/2026 : le compteur
   annoncait bien « 5 biens », et les onze restaient affiches.

   REGLE A RETENIR : dans ce theme, tout element qu'un script masque par
   `hidden` a besoin de sa propre regle en 0,2,1. Le defaut est invisible a la
   lecture du JavaScript, qui est correct. */
.dum-section .dum-bien[hidden] {
  display: none;
}

.dum-section .dum-annonces__vide {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink2);
  font-size: 16px;
}

.dum-section .dum-annonces__vide .dum-filtres__reset {
  margin-inline-start: 8px;
}

/* Le titre de carte est devenu un lien vers la page du bien. */
.dum-section .dum-bien h3 a {
  color: inherit;
  text-decoration: none;
}

.dum-section .dum-bien h3 a:hover {
  color: var(--gold);
}

.dum-section .dum-bien__photo a {
  display: block;
}

/* --------------------------------------------------------------------------
   8.2 Page d'un bien - la banniere compacte
   --------------------------------------------------------------------------
   ARBITRAGE RODOLPHE DU 07/08/2026, proposition C de
   `design/annonce-liseuse.html`. La page de bien GARDE le bandeau marine des
   pages interieures - on ne lui donne pas l'entree d'un portail immobilier,
   avec la photo pleine largeur d'abord - mais il est compacte.

   Ce qui change : le prix passe A DROITE du titre au lieu de s'empiler
   dessous. Empiles, surtitre, titre, quartier et prix faisaient une banniere
   de ~300px, et sur un portable les photos du bien n'entraient plus dans le
   premier ecran. Les deux informations qu'on vient chercher sur une annonce -
   ce que c'est, et combien - tiennent maintenant sur la meme ligne.
   -------------------------------------------------------------------------- */

.dum-section.dum-page-hero--bien {
  padding-block: 34px 36px;
}

/* Le filigrane du sceau est cale sur une banniere haute : sur une banniere
   compacte, ses 340px debordent des deux cotes et forment une bande claire au
   lieu d'un cercle. */
.dum-section.dum-page-hero--bien::after {
  width: 230px;
  height: 230px;
  right: -50px;
}

.dum-section .dum-annonce__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
}

/* 420px : en dessous, le titre du bien tombe en trois lignes tres courtes et
   la ligne se casse d'elle-meme, ce qui est le comportement voulu. */
.dum-section .dum-annonce__identite {
  flex: 1 1 420px;
}

.dum-section .dum-annonce__chiffre {
  flex: 0 1 auto;
  text-align: right;
}

/* Titre imbrique, donc `margin-inline: 0` : il n'a rien a centrer, c'est son
   conteneur qui porte la largeur (encadre 6.0). Marge haute reduite, la
   banniere n'a plus de filet a compenser.

   UNE TAILLE EN DESSOUS DES AUTRES PAGES (36px au lieu de 44), et c'est ce qui
   a ete valide sur la planche : mesure en ligne, 44px faisait tomber « Maison
   a vendre a Bordeaux (33000) » sur deux lignes et la banniere reprenait les
   60px qu'on venait de lui retirer. Un titre d'annonce est descriptif, pas une
   accroche : il n'a pas besoin de la meme presence qu'un titre de page. */
.dum-section.dum-page-hero--bien .dum-page-hero__titre {
  font-size: clamp(27px, 3.4vw, 36px);
  margin-block: 10px 0;
  margin-inline: 0;
  /* 34ch et non 20 comme les autres pages : « Maison a vendre a Bordeaux
     (33000) » en fait 34, et la mesure en ligne montre que c'est la LARGEUR
     MAXIMALE, pas la colonne, qui le cassait en deux lignes. Un titre de bien
     est une phrase type, sa longueur est connue d'avance. */
  max-width: 34ch;
}

.dum-section .dum-annonce__reperes {
  font-size: 15.5px;
  color: #c9d3e4;
  margin-block: 12px 0;
  margin-inline: 0;
}

.dum-section.dum-page-hero .dum-annonce__prix {
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1.1;
  color: var(--gold2);
  margin-block: 0 4px;
  margin-inline: 0;
}

.dum-section.dum-page-hero .dum-annonce__prix-detail {
  font-size: 14px;
  color: #a9b6cc;
  margin-block: 0;
  margin-inline: 0;
  max-width: 38ch;
}

/* --------------------------------------------------------------------------
   8.3 LA LISEUSE DE PHOTOS
   --------------------------------------------------------------------------
   Remplace la grille de vignettes du 06/08, qui ouvrait chaque cliche dans un
   NOUVEL ONGLET - le visiteur sortait de l'annonce pour voir une photo - et
   qui s'effondrait sur les biens a deux ou trois photos, alors que le flux en
   compte de quatre a dix-huit. Demande de Rodolphe du 07/08/2026.

   LE DEFILEMENT EST ECRIT ICI, PAS EN JAVASCRIPT. `overflow-x` + `scroll-snap`
   suffisent : le navigateur fournit le glissement au doigt, l'inertie, la
   molette et le trackpad, et il le fait mieux qu'une librairie. Le script du
   plugin (`assets/liseuse.js`) n'ajoute que les commandes et le plein ecran.
   Consequence a garder en tete : **sans JavaScript, la piste defile encore**.
   -------------------------------------------------------------------------- */

.dum-section.dum-annonce-photos {
  background: var(--paper);
  padding-block: var(--pad-section-sm);
}

.dum-section .dum-liseuse__cadre {
  position: relative;
  border-radius: var(--radius-img);
  overflow: hidden;
  /* Fond sombre et non creme : c'est le passe-partout qui fait tenir ensemble
     des cliches de qualites et de cadrages inegaux, ce qui est la regle sur un
     flux de mandats. Il ne se voit que le temps du chargement et sur les bords
     d'une photo plus etroite que le cadre. */
  background: #0d1626;
}

.dum-section .dum-liseuse__piste {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barre de defilement est masquee : elle ferait doublon avec les fleches
     et la bande de vignettes, et elle mangerait 15px de photo. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dum-section .dum-liseuse__piste::-webkit-scrollbar {
  display: none;
}

.dum-section .dum-liseuse__piste:focus-visible {
  outline: 3px solid var(--gold2);
  outline-offset: -3px;
}

.dum-section .dum-liseuse__vue {
  flex: 0 0 100%;
  margin-block: 0;
  margin-inline: 0;
  scroll-snap-align: center;
}

/* 16/10 et non 4/3 : les photos du portail arrivent en 4/3, mais 4/3 sur 1060px
   de large donnerait 795px de haut, soit une photo qui ne tient dans aucun
   ecran de portable en hauteur. `cover` recadre donc de ~17% en haut et en bas,
   et le plein ecran rend la photo entiere. */
.dum-section .dum-liseuse__vue img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 62vh;
  object-fit: cover;
  background: #0d1626;
}

.dum-section .dum-liseuse__cadre--zoom .dum-liseuse__vue img {
  cursor: zoom-in;
}

/* -------- commandes (creees par le script, jamais dans le balisage) -------- */

.dum-liseuse__cadre .dum-liseuse__fleche,
.dum-liseuse__plein .dum-liseuse__fleche {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(19, 29, 48, 0.62);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-block: 0;
  backdrop-filter: blur(3px);
  transition: background 0.2s ease, opacity 0.2s ease;
}

.dum-liseuse__cadre .dum-liseuse__fleche:hover,
.dum-liseuse__plein .dum-liseuse__fleche:hover {
  background: rgba(19, 29, 48, 0.88);
}

.dum-liseuse__cadre .dum-liseuse__fleche:focus-visible,
.dum-liseuse__plein .dum-liseuse__fleche:focus-visible {
  outline: 3px solid var(--gold2);
  outline-offset: 2px;
}

.dum-liseuse__cadre .dum-liseuse__fleche--prec,
.dum-liseuse__plein .dum-liseuse__fleche--prec {
  left: 14px;
}

.dum-liseuse__cadre .dum-liseuse__fleche--suiv,
.dum-liseuse__plein .dum-liseuse__fleche--suiv {
  right: 14px;
}

/* Eteinte plutot que retiree : une commande qui disparait deplace les autres,
   et on perd la cible sous le doigt entre deux photos. */
.dum-liseuse__cadre .dum-liseuse__fleche[disabled],
.dum-liseuse__plein .dum-liseuse__fleche[disabled] {
  opacity: 0.28;
  cursor: default;
}

/* Meme piege que pour les cartes de la liste : `display: grid` en 0,2,0 bat la
   regle native `[hidden]` en 0,1,0. Sans cette ligne, un bien a photo unique
   afficherait deux fleches inutiles en plein ecran. */
.dum-liseuse__plein .dum-liseuse__fleche[hidden] {
  display: none;
}

.dum-section .dum-liseuse__compteur {
  position: absolute;
  right: 14px;
  bottom: 14px;
  margin-block: 0;
  margin-inline: 0;
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(19, 29, 48, 0.68);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.dum-section .dum-liseuse__agrandir {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(19, 29, 48, 0.68);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
  margin-block: 0;
  transition: background 0.2s ease;
}

.dum-section .dum-liseuse__agrandir:hover {
  background: rgba(19, 29, 48, 0.88);
}

.dum-section .dum-liseuse__agrandir:focus-visible {
  outline: 3px solid var(--gold2);
  outline-offset: 2px;
}

/* -------------------------------- vignettes ------------------------------- */

/* Masquees tant que le script n'a pas pose `--actif` : sans lui, un clic sur
   une vignette ne ferait rien. Mieux vaut ne pas les montrer que montrer des
   commandes mortes. */
.dum-section .dum-liseuse__vignettes {
  display: none;
}

.dum-section .dum-liseuse--actif .dum-liseuse__vignettes {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-block: 10px 2px;
  scrollbar-width: thin;
}

.dum-section .dum-liseuse__vignette {
  flex: 0 0 96px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  opacity: 0.5;
  margin-block: 0;
  transition: opacity 0.2s ease;
}

.dum-section .dum-liseuse__vignette img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.dum-section .dum-liseuse__vignette:hover {
  opacity: 0.85;
}

.dum-section .dum-liseuse__vignette[aria-current="true"] {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--gold2);
}

.dum-section .dum-liseuse__vignette:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 2px;
}

/* ------------------------------ plein ecran -------------------------------
   `<dialog>` natif : le navigateur fournit la fenetre modale, le fond
   assombri, la fermeture par Echap et le retour du focus. Cette fenetre est
   posee sur le `body`, DONC HORS de toute `.dum-section` : ses regles ne
   peuvent pas etre prefixees comme les autres, elles sont ecrites en 0,2,0
   par la double classe. */

.dum-liseuse__plein[open] {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: rgba(10, 16, 28, 0.94);
}

.dum-liseuse__plein::backdrop {
  background: rgba(10, 16, 28, 0.94);
}

.dum-liseuse__plein .dum-liseuse__plein-img {
  display: block;
  max-width: 94vw;
  /* 88dvh et non 100 : la croix et le compteur ont besoin de leur place, et
     une photo qui touche les bords de l'ecran donne l'impression d'etre
     coupee. */
  max-height: 88dvh;
  object-fit: contain;
}

.dum-liseuse__plein .dum-liseuse__fermer {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.dum-liseuse__plein .dum-liseuse__fermer:hover {
  background: rgba(255, 255, 255, 0.24);
}

.dum-liseuse__plein .dum-liseuse__fermer:focus-visible {
  outline: 3px solid var(--gold2);
  outline-offset: 2px;
}

.dum-liseuse__plein .dum-liseuse__plein-compteur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  margin-block: 0;
  text-align: center;
  color: #cdd8e9;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .dum-section .dum-liseuse__piste {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   8.4 Description et caracteristiques
   -------------------------------------------------------------------------- */

.dum-section.dum-annonce-corps {
  background: var(--paper2);
}

.dum-section .dum-annonce__grille {
  display: grid;
  grid-template-columns: 0.62fr 0.38fr;
  gap: 48px;
  align-items: start;
}

.dum-section .dum-annonce__texte h2,
.dum-section .dum-annonce__cote h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--prim);
  margin-block: 0 16px;
  margin-inline: 0;
}

.dum-section .dum-annonce__cote h2 ~ h2 {
  margin-block-start: 30px;
}

.dum-section .dum-annonce__texte p {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ink2);
  margin-block: 0 14px;
}

.dum-section .dum-annonce__ref {
  font-size: 13.5px;
  color: var(--ink2);
  margin-block: 22px 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Liste de definitions en deux colonnes : le libelle a gauche, la valeur a
   droite, avec un filet entre chaque ligne. Plus lisible qu'un tableau, et
   c'est le balisage juste pour des paires libelle/valeur. */
.dum-section .dum-annonce__specs {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin-block: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 6px 20px;
}

.dum-section .dum-annonce__specs dt,
.dum-section .dum-annonce__specs dd {
  padding-block: 11px;
  border-top: 1px solid var(--line2);
  font-size: 14.5px;
  margin: 0;
}

.dum-section .dum-annonce__specs dt:first-of-type,
.dum-section .dum-annonce__specs dt:first-of-type + dd {
  border-top: 0;
}

.dum-section .dum-annonce__specs dt {
  color: var(--ink2);
}

.dum-section .dum-annonce__specs dd {
  text-align: right;
  color: var(--ink);
  font-weight: 600;
}

.dum-section .dum-annonce__copro {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink2);
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   8.4 bis Barre de retour, en pied d'annonce
   --------------------------------------------------------------------------
   Une bande fine, pas une section de texte : le lien de retour vivait dans une
   `dum-prose` reglee pour du texte courant (60px de creme au-dessus, 60 en
   dessous), et se retrouvait seul au milieu d'un aplat de 165px de haut.
   -------------------------------------------------------------------------- */

.dum-section.dum-annonce-retour {
  background: var(--paper);
  padding-block: 22px;
}

.dum-section .dum-annonce__retour {
  margin-block: 0;
  font-size: 15px;
}

.dum-section .dum-annonce__retour a {
  color: var(--prim);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.dum-section .dum-annonce__retour a:hover {
  border-bottom-color: var(--gold);
}

/* --------------------------------------------------------------------------
   8.5 Diagnostic de performance energetique
   MENTION OBLIGATOIRE d'une annonce immobiliere, avec les depenses annuelles
   estimees et leur annee de reference. Ne pas retirer ce bloc pour alleger la
   page : son absence est une infraction, pas un choix de mise en page.
   -------------------------------------------------------------------------- */

.dum-section.dum-annonce-dpe {
  background: var(--paper);
}

.dum-section .dum-dpe__cartouches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-block: 0 20px;
}

.dum-section .dum-dpe__bloc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 22px;
}

.dum-section .dum-dpe__titre {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-block: 0 12px;
}

/* LES DEUX PALETTES REGLEMENTAIRES, DECLAREES UNE FOIS PAR BLOC.
   ---------------------------------------------------------------------------
   Ces couleurs ne sont pas decoratives : elles font partie de l'etiquette, et
   **ne doivent jamais etre remplacees par celles de la charte**. Il y en a
   DEUX, ce qui manquait jusqu'au 07/08/2026 : le vert-rouge pour la
   consommation d'energie, un degrade VIOLET pour les gaz a effet de serre. Les
   deux blocs partageaient la premiere, et un « D » jaune-vert se lisait comme
   une classe energie alors qu'il parlait de CO2.

   Passer par des variables plutot que par quatorze selecteurs : la lettre et
   les sept crans de l'echelle piochent dans la meme palette, celle que le bloc
   pere a declaree. Ajouter une troisieme echelle un jour = un seul bloc de
   sept lignes. */
.dum-section .dum-dpe__bloc--energie {
  --dpe-a: #008940; --dpe-b: #59b336; --dpe-c: #a5d15c; --dpe-d: #fdda2b;
  --dpe-e: #f5a623; --dpe-f: #ee7529; --dpe-g: #d3221f;
  /* Le texte reste encre sur les trois teintes claires, ou le blanc tombe
     sous le seuil de contraste. */
  --dpe-ta: #fff; --dpe-tb: #fff; --dpe-tc: var(--ink); --dpe-td: var(--ink);
  --dpe-te: var(--ink); --dpe-tf: #fff; --dpe-tg: #fff;
}

.dum-section .dum-dpe__bloc--ges {
  --dpe-a: #efeaf6; --dpe-b: #ded4ee; --dpe-c: #c9b9e2; --dpe-d: #b49dd6;
  --dpe-e: #9d80c9; --dpe-f: #8464bb; --dpe-g: #6a49ad;
  --dpe-ta: var(--ink); --dpe-tb: var(--ink); --dpe-tc: var(--ink);
  --dpe-td: var(--ink); --dpe-te: #fff; --dpe-tf: #fff; --dpe-tg: #fff;
}

.dum-section .dum-dpe__lettre {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 600;
  margin-block: 0 12px;
  margin-inline: 0;
}

/* DPE VIERGE : mention en toutes lettres, VOLONTAIREMENT NEUTRE.
   Ni pastille, ni couleur de l'echelle reglementaire - « vierge » n'est pas
   une classe, et lui donner l'apparence d'un A ou d'un G laisserait croire a
   une performance mesuree. Gris de texte courant, cadre discret : on lit une
   INFORMATION, pas une note. Corrige le 07/08/2026, la page sortait un grand
   « Y » a la place (code du portail pour « non exigible »). */
.dum-section .dum-dpe__vierge {
  display: inline-block;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--paper2);
  color: var(--ink2);
  font-size: 14px;
  font-weight: 700;
  margin-block: 0 12px;
  margin-inline: 0;
}

.dum-section .dum-dpe__lettre--a { background: var(--dpe-a); color: var(--dpe-ta); }
.dum-section .dum-dpe__lettre--b { background: var(--dpe-b); color: var(--dpe-tb); }
.dum-section .dum-dpe__lettre--c { background: var(--dpe-c); color: var(--dpe-tc); }
.dum-section .dum-dpe__lettre--d { background: var(--dpe-d); color: var(--dpe-td); }
.dum-section .dum-dpe__lettre--e { background: var(--dpe-e); color: var(--dpe-te); }
.dum-section .dum-dpe__lettre--f { background: var(--dpe-f); color: var(--dpe-tf); }
.dum-section .dum-dpe__lettre--g { background: var(--dpe-g); color: var(--dpe-tg); }

/* L'ECHELLE A -> G. Une lettre seule ne dit pas ou elle se situe : c'est la
   position sur les sept crans qu'un acquereur lit, et c'est la forme sous
   laquelle il a vu le DPE partout ailleurs. */
.dum-section .dum-dpe__echelle {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  list-style: none;
  margin-block: 0 12px;
  margin-inline: 0;
  padding: 0;
}

.dum-section .dum-dpe__cran {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  height: 22px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  /* Les crans inactifs sont en retrait : l'oeil doit tomber sur la classe du
     bien, pas sur l'echelle. */
  opacity: 0.42;
  transition: none;
}

.dum-section .dum-dpe__cran--actif {
  height: 34px;
  opacity: 1;
  font-size: 14px;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--ink);
}

.dum-section .dum-dpe__cran--a { background: var(--dpe-a); color: var(--dpe-ta); }
.dum-section .dum-dpe__cran--b { background: var(--dpe-b); color: var(--dpe-tb); }
.dum-section .dum-dpe__cran--c { background: var(--dpe-c); color: var(--dpe-tc); }
.dum-section .dum-dpe__cran--d { background: var(--dpe-d); color: var(--dpe-td); }
.dum-section .dum-dpe__cran--e { background: var(--dpe-e); color: var(--dpe-te); }
.dum-section .dum-dpe__cran--f { background: var(--dpe-f); color: var(--dpe-tf); }
.dum-section .dum-dpe__cran--g { background: var(--dpe-g); color: var(--dpe-tg); }

.dum-section .dum-dpe__valeur {
  font-size: 14px;
  color: var(--ink2);
  margin-block: 0;
}

.dum-section .dum-annonce__depenses {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink2);
  max-width: 78ch;
  margin-block: 0 8px;
}

.dum-section .dum-annonce__dpe-date {
  font-size: 13.5px;
  color: var(--ink2);
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   8.6 Adaptation mobile
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .dum-section .dum-annonce__grille {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .dum-section.dum-page-hero .dum-annonce__prix {
    font-size: 28px;
  }

  .dum-section .dum-filtres {
    padding: 18px 18px 14px;
  }
}

@media (max-width: 700px) {
  /* Le prix est passe sous le titre par le retour a la ligne du conteneur :
     aligne a droite, il flotterait tout seul au milieu de nulle part. */
  .dum-section .dum-annonce__chiffre {
    text-align: left;
  }

  /* SUR TELEPHONE, LA BANNIERE SE REMPILE - fil sur deux lignes, titre sur
     trois, reperes sur deux - et reprend la hauteur qu'on lui a retiree. Ces
     quatre reglages lui rendent une quarantaine de pixels, ce qui suffit a
     faire tenir la PHOTO ENTIERE dans le premier ecran d'un 375x812. Mesure en
     ligne : sans eux, la photo commence a 569px et se coupe au bas de l'ecran. */
  .dum-section.dum-page-hero--bien {
    padding-block: 26px 28px;
  }

  .dum-section.dum-page-hero--bien .dum-fil {
    margin-block: 0 14px;
  }

  .dum-section .dum-annonce__tete {
    gap: 14px 40px;
  }

  .dum-section .dum-annonce__reperes {
    margin-block: 8px 0;
  }

  .dum-section.dum-page-hero--bien .dum-page-hero__titre {
    max-width: none;
  }

  /* 4/3 en portrait : c'est le format natif des photos du portail, et sur une
     largeur d'ecran de telephone la hauteur reste raisonnable. */
  .dum-section .dum-liseuse__vue img {
    aspect-ratio: 4 / 3;
  }

  /* 44px et non 40 : minimum de cible tactile retenu sur ce site (WCAG 2.5.8
     en demande 24, la clientele de l'etude est largement senior). */
  .dum-liseuse__cadre .dum-liseuse__fleche,
  .dum-liseuse__plein .dum-liseuse__fleche {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .dum-section .dum-liseuse__vignette {
    flex: 0 0 72px;
  }
}

/* --------------------------------------------------------------------------
   5.13 Formulaire de contact (bloc kadence/form)
   --------------------------------------------------------------------------
   Le bloc est pose dans /contact/ et SAUVEGARDE SON HTML dans le contenu de la
   page : ses classes viennent de Kadence, on ne les renomme pas, on les habille.
   Les largeurs de champ sont ecrites en dur par Kadence (kb-field-desk-width-50)
   et ne connaissent PAS de variante mobile : sans la media query ci-dessous, le
   50% du bureau est herite sur telephone et les libelles se cassent en deux
   colonnes illisibles. Constate sur capture a 375px.

   PIEGE PAYE LE 24/08/2026 - TOUTE CETTE SECTION ETAIT DU CODE MORT.
   Elle etait ecrite en `.kadence-form`, une classe QUI N'EXISTE PAS dans le
   rendu : Kadence emet `kadence-form-<uniqueID>` (ici `kadence-form-dumcontact1`),
   jamais `kadence-form` seul. Mesure a la console : `.kadence-form` matchait
   ZERO element, donc ni la typo, ni les couleurs, ni le focus or, ni les 48px
   du bouton, ni la media query mobile ne s'appliquaient - le formulaire etait
   servi avec l'habillage PAR DEFAUT de Kadence (rayon 3px, bouton sans hauteur
   minimale, 50% herite sur telephone jusqu'a 768px). C'est la cause de la
   reserve « le rendu ne convainc pas » du 14/08.
   La classe stable a viser est **`.kb-form-wrap`**, posee par Kadence sur le
   conteneur quel que soit l'identifiant du formulaire.
   LECON : verifier qu'un selecteur MATCHE avant de conclure qu'un correctif est
   pose. « Le HTML est correct en ligne » ne prouve pas que le CSS s'applique.
   -------------------------------------------------------------------------- */

/* SPECIFICITE : Kadence habille ses champs en `.kb-form .kadence-blocks-form-field
   .kb-text-style-field`, soit 0,3,0. Une regle a 0,2,1 comme
   `.kb-form-wrap input[type="text"]` PERD - constate le 24/08 : rayon, bordure,
   fond et espacement restaient ceux du plugin alors que la police et le libelle,
   eux, passaient. D'ou 4 classes ici, 0,4,0, qui gagnent sans !important.
   Cf piege n 1 de MEMORY.md : dans ce theme, tout ce qui touche a Kadence se
   monte en specificite, jamais en force. */

.kb-form-wrap .kadence-blocks-form-field {
  /* Sans ca, un champ dont le voisin porte un texte d'aide s'aligne sur le BAS
     de la ligne : le libelle « Motif » descendait sous celui de « Telephone ». */
  align-self: flex-start;
}

.kb-form-wrap label {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
}

.kb-form-wrap .kb-form .kadence-blocks-form-field .kb-text-style-field,
.kb-form-wrap .kb-form .kadence-blocks-form-field .kb-select-style-field {
  font-family: var(--font-ui);
  font-size: 16px; /* 16px minimum : en dessous, iOS zoome au focus. */
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 11px 13px;
  /* 44px : la cible tactile minimale posee partout dans le theme pour une
     clientele largement senior. Kadence s'arrete a 40. */
  min-height: 44px;
}

.kb-form-wrap .kb-form .kadence-blocks-form-field .kb-textarea-field {
  min-height: 150px;
}

.kb-form-wrap .kb-form .kadence-blocks-form-field .kb-text-style-field:focus,
.kb-form-wrap .kb-form .kadence-blocks-form-field .kb-select-style-field:focus {
  border-color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.kb-form-wrap .kb-form .kadence-blocks-form-field .kb-field-help {
  font-size: 13.5px;
  color: var(--ink2);
  font-style: normal; /* Kadence l'italise : illisible en petit corps. */
}

.kb-form-wrap .kb-form .kadence-blocks-form-field .kb-forms-submit {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--paper);
  background: var(--prim);
  border: 1px solid var(--prim);
  border-radius: var(--radius-btn);
  min-height: 48px;
  padding: 12px 26px;
}

.kb-form-wrap .kb-form .kadence-blocks-form-field .kb-forms-submit:hover,
.kb-form-wrap .kb-form .kadence-blocks-form-field .kb-forms-submit:focus {
  background: var(--prim2);
  border-color: var(--prim2);
}

@media (max-width: 768px) {
  /* Un seul champ par ligne. Le selecteur monte a 0,3,0 pour battre la regle
     de largeur ecrite par Kadence (cf piege n 1 : sa specificite est agressive). */
  .kb-form-wrap .kadence-blocks-form-field[class*="kb-field-desk-width-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
}