/* ==========================================================================
   MAAC — variante « apaisée », version 2.

   Chargée après maac.css, uniquement sur ?teinte=apaise. Elle ne redéfinit que
   des jetons : aucune règle de mise en page n'est touchée, et supprimer ce
   fichier rend la charte d'origine à l'identique.

   -- Pourquoi une version 2 --------------------------------------------------

   La première tentative respectait le raisonnement — « le problème n'est pas la
   palette, c'est la quantité » — mais elle était trop timide pour se voir : les
   fonds ne bougeaient que de deux points de luminance, et la seule différence
   franche (le chiffre-clé) se trouvait à trois écrans du haut de page. Mis
   côte à côte, les deux versions paraissaient identiques.

   Un comparateur où l'on ne distingue rien ne sert à rien. Les écarts sont donc
   assumés ici, sans changer une seule teinte de la charte :

     1. le beige lin devient VRAIMENT le fond de la page — dix points de
        luminance sous l'ivoire d'origine, et non deux ;
     2. le chiffre-clé cesse d'être une bande pleine largeur : il devient un
        panneau posé sur le lin. Même bleu, moitié moins de surface ;
     3. le terracotta quitte tout ce qui n'est pas un bouton ou un surtitre —
        et le bouton lui-même est désaturé d'un cran ;
     4. le réseau de fascias est divisé par deux et ses nœuds passent du
        terracotta au sauge : c'est lui qui donnait à la page son grain rouge.

   Tous les contrastes sont recalculés sur les nouveaux fonds, pas repris.
   ========================================================================== */

:root {
  /* 1 — les fonds ------------------------------------------------------
     Trois valeurs proches, franchement beiges. L'alternance
     ivoire / lin / sauge disparaît, et avec elle l'effet de bandes.       */
  --c-lin:           #EAE3D5;
  --fond:            #F1ECE2;   /* fond général — l'ivoire #FBFAF8 disparaît */
  --fond-doux:       #EAE3D5;   /* section calme                              */
  --fond-voile:      #E3DECF;   /* panneau, sauge très dilué                  */

  /* 2 — le texte -------------------------------------------------------
     Sur un fond plus chaud et plus soutenu, les gris froids d'origine
     perdent du contraste : ils sont redescendus d'un cran.                */
  --texte:           #444F5A;   /* 7,10:1 sur --fond · 6,55:1 sur --fond-doux */
  --texte-discret:   #55616C;   /* 5,38:1 sur --fond · 4,96:1 sur --fond-doux */

  /* 3 — le terracotta, reculé ------------------------------------------
     Il ne reste qu'aux boutons et aux surtitres. Le ton des surtitres est
     assombri pour tenir sur le plus foncé des trois fonds (5,02:1), et le
     fond de bouton est désaturé d'un cran — c'est lui que l'on voit le
     plus souvent, donc lui qui « criait » le plus.                        */
  --c-terracotta-texte:   #94472F;   /* 5,57:1 sur --fond, 4,88:1 sur --fond-voile */
  --c-terracotta-action:  #9E5B45;   /* fond de bouton, texte blanc : 5,20:1 */
  --c-terracotta-survol:  #874A37;   /* survol : 6,85:1                      */

  /* 4 — le trait -------------------------------------------------------- */
  --trait:           #DBD2C1;
  --trait-fort:      #6E7B84;   /* bordure de champ : 3,69:1 sur --fond */
}

/* ------------------------------------------------------------ le réseau --
   Mêmes tracés, moitié moins présents. Les nœuds quittent le terracotta :
   c'est le seul endroit où il couvrait de grandes surfaces.               */

.reseau--clair {
  --reseau-trait: rgb(105 128 100 / .17);
  --reseau-fil:   rgb(105 128 100 / .12);
  --reseau-noeud: rgb(105 128 100 / .24);
  --reseau-chaud: rgb(105 128 100 / .30);
}
.reseau--accent {
  --reseau-trait: rgb(105 128 100 / .18);
  --reseau-fil:   rgb(105 128 100 / .12);
  --reseau-noeud: rgb(47 93 80 / .26);
  --reseau-chaud: rgb(47 93 80 / .32);
}
.reseau--fonce {
  --reseau-trait: rgb(169 185 165 / .22);
  --reseau-fil:   rgb(169 185 165 / .15);
  --reseau-noeud: rgb(169 185 165 / .38);
  --reseau-chaud: rgb(169 185 165 / .42);
}
.reseau-fond { opacity: .44; }

/* ------------------------------------------------- le terracotta reculé --
   Partout ailleurs que sur un bouton ou un surtitre : vert forêt. Même
   valeur, aucune chaleur.                                                 */

.heros h1 .heros-appui { color: var(--c-foret); }   /* la plus grande surface colorée */
a:hover                { color: var(--c-foret-survol); }
.carte--accent         { border-left-color: var(--c-sauge-fonce); }
.badge--terracotta     { background: #E4E8E1; color: #33604F; }  /* 5,64:1 */
.entete-tel:hover      { color: var(--c-foret-survol); }
.cas-corps h4          { color: var(--c-foret); }
.pack-salarie          { color: var(--c-foret); }

/* -------------------------------------------------- le blanc disparaît --
   Les cartes étaient en ivoire sur ivoire : sur un fond beige, elles
   ressortiraient comme des rectangles blancs collés. Elles suivent.       */

.carte, .liens-voisins a, .jetons li, .devis-etape { background: #FAF7F1; }
.entete { background: rgb(250 247 241 / .92); }
/* Le bandeau de logos était en ivoire, entre deux sections beiges : il
   ressortait comme une bande blanche en travers de la page, exactement
   l'effet qu'on cherche à supprimer. */
.preuve { background: #FAF7F1; }

/* ------------------------------------------ le chiffre n'occupe plus tout --
   C'était la seule vraie plage de bleu de la page : pleine largeur, six
   cents pixels de haut. Elle ne disparaît pas — c'est l'argument le plus
   fort du site — elle devient un panneau posé sur le lin.                 */

.section-chiffre {
  /* La marge intérieure du panneau est nommée pour être RETIRÉE de celle de la
     section juste en dessous. Sans ça, le bloc gagnait exactement la hauteur
     de ce rembourrage — 112 px mesurés — et tout ce qui suit se retrouvait
     décalé d'autant par rapport à la version d'origine. Sur la page, personne
     ne l'aurait vu ; dans le comparateur, où les deux versions se superposent,
     la moitié basse cessait de s'aligner. */
  --panneau-y: clamp(2rem, 1rem + 4vw, 3.5rem);
  background: var(--fond-doux);
  overflow: visible;
  padding-block: max(0rem, calc(var(--e-section) - var(--panneau-y)));
}
.section-chiffre > .conteneur {
  position: relative;
  background: var(--c-bleu);
  border-radius: var(--r-4);
  padding: var(--panneau-y) clamp(1.5rem, 0.8rem + 3vw, 3rem);
  box-shadow: var(--ombre-2);
  overflow: hidden;
}
/* Le réseau de cette section est calé sur la pleine largeur : hors du
   panneau il retomberait sur le lin avec des couleurs faites pour le bleu. */
.section-chiffre .reseau { display: none; }

/* Le pied de page reste bleu plein, et ce n'est pas une exception oubliée :
   un pied sombre ferme la page, personne ne le lit comme une couleur « forte »,
   et l'éclaircir ferait flotter la fin du document. */

/* --------------------------------------------------- le héros à plat -----
   Le dégradé ivoire → lin fabriquait une quatrième valeur de fond. Un aplat
   suffit : la photo et le réseau donnent déjà la profondeur.               */

.heros { background: var(--fond-doux); }

/* --------------------------------------------- ce qui n'est pas adouci --
   Le bleu du chiffre-clé et du panneau d'estimation reste #214B63. Essayé à
   #23506A, il fait tomber le surtitre terracotta clair de 4,60 à 4,27:1 et
   le texte sauge de 4,52 à 4,19:1 — sous le seuil AA, pour un écart que
   l'œil ne voit pas. La respiration vient de ce qu'il n'y a plus que deux
   blocs bleus, pas de ce qu'ils sont plus pâles.                          */