/* « Les petites décos » — 07/10/2026, Axel : « rajoute plein de petites déco sur le site, sans trop encombrer, en suivant
   le thème ». Le vocabulaire du plan d'architecte, au trait fin : un axe cerclé par section (A à E), des repères de coupe
   aux angles du contenu, et au bureau un tracé au compas, une équerre, une cote, une note à la plume, un cartouche, une
   échelle et le nord. Rien ne se lit au lecteur d'écran (aria-hidden), rien ne se touche, rien n'ajoute de hauteur
   (positions absolues, sauf la marge des étapes), rien ne déborde (le .bloc coupe). Les textes dessinés sont en SVG :
   ce sont des traits, pas du contenu. Pour tout retirer : enlever la ligne <link> de cette feuille. */

:root{--deco-trait:rgba(14,41,71,.32);--deco-texte:rgba(14,41,71,.55)}

/* le contenu passe devant les décos (elles vivent sous lui, au-dessus du papier) */
.bloc__dedans{z-index:0}
.deco{position:absolute;z-index:-1;pointer-events:none;overflow:visible}
.deco .l{fill:none;stroke:var(--deco-trait);stroke-width:1;vector-effect:non-scaling-stroke}
.deco .lf{stroke-dasharray:12 3 2 3}
.deco .ld{stroke-dasharray:3 4}
.deco .o{fill:none;stroke:var(--ocre);stroke-width:1.3;stroke-linecap:round;opacity:.85}
.deco .t{font:600 9px var(--titre);letter-spacing:.14em;text-transform:uppercase;fill:var(--deco-texte)}
.deco .t-axe{font:700 11px var(--titre);fill:var(--deco-texte)}
.deco .v{font:italic 400 14px var(--texte);fill:rgba(14,41,71,.72)}
.deco .p{font:italic 400 15px var(--texte);fill:var(--ocre)}

/* l'axe du plan : une ligne d'axe (trait mixte) et sa lettre cerclée, en haut à droite de chaque section */
.deco--axe{top:-6px;right:0;width:72px;height:26px}

/* les repères de coupe : quatre angles fins autour du contenu, comme aux bords d'une planche */
.bloc__dedans::before{content:"";position:absolute;inset:-14px -10px;z-index:-1;pointer-events:none;
  background:
    linear-gradient(var(--deco-trait),var(--deco-trait)) left top/12px 1px no-repeat,
    linear-gradient(var(--deco-trait),var(--deco-trait)) left top/1px 12px no-repeat,
    linear-gradient(var(--deco-trait),var(--deco-trait)) right top/12px 1px no-repeat,
    linear-gradient(var(--deco-trait),var(--deco-trait)) right top/1px 12px no-repeat,
    linear-gradient(var(--deco-trait),var(--deco-trait)) left bottom/12px 1px no-repeat,
    linear-gradient(var(--deco-trait),var(--deco-trait)) left bottom/1px 12px no-repeat,
    linear-gradient(var(--deco-trait),var(--deco-trait)) right bottom/12px 1px no-repeat,
    linear-gradient(var(--deco-trait),var(--deco-trait)) right bottom/1px 12px no-repeat}

/* au bureau seulement, là où la place est libre */
.deco--arc,.deco--equerre,.deco--cartouche,.deco--essayer,.deco--echelle{display:none}
@media (min-width:900px){
  .deco--axe{width:132px}
  .bloc__dedans::before{inset:-22px -18px}
  /* la cote des étapes : de la première pastille à la troisième, « sous une semaine » (la grille : 4 colonnes, 28 px) */
  .etapes{margin-top:4.4rem}
  .etapes::before{content:"";position:absolute;left:6px;top:-30px;height:20px;width:calc((100% - 84px) / 2 + 56px);pointer-events:none;
    border:solid var(--deco-trait);border-width:0 1px;
    background:linear-gradient(var(--deco-trait),var(--deco-trait)) 0 50%/100% 1px no-repeat}
  .etapes::after{content:"sous une semaine" / "";position:absolute;top:-50px;left:calc(6px + ((100% - 84px) / 2 + 56px) / 2);transform:translateX(-50%);
    font:italic 400 1rem/1 var(--texte);color:var(--ocre);white-space:nowrap;pointer-events:none;
  }
}
@media (min-width:1100px){
  .deco--arc{display:block;top:34px;right:0;width:240px;height:160px}
  .deco--equerre{display:block;top:30px;right:16px;width:117px;height:100px}
  /* le cartouche résume les réponses (07/10, Axel : « si ça veut rien dire, faudra changer ») */
  .deco--cartouche{display:block;bottom:0;right:0;width:300px;height:112px}
  .realisation__texte{position:relative}
  .deco--essayer{display:block;left:156px;bottom:-6px;width:230px;height:64px}
  .pied__dedans{position:relative;z-index:0}
  .deco--echelle{display:block;right:0;bottom:-30px;width:190px;height:24px}
  .deco--echelle .b{fill:rgba(255,255,255,.55);stroke:rgba(255,255,255,.55);stroke-width:1}
  .deco--echelle .b0{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1}
  .deco--echelle .lb{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1}
  .deco--echelle .fb{fill:rgba(255,255,255,.65)}
  .deco--echelle .tb{font:600 9px var(--titre);letter-spacing:.08em;fill:rgba(255,255,255,.6)}
}